fzu102201435
/
front
1
0
Fork 4
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

完成了boy身高体重选择，weight->height->next page

Browse Source
master
zhanxin 3 months ago
parent 7671e04efc
commit 1576af575c
20 changed files with 758 additions and 104 deletions
Show Stats Download Patch File Download Diff File

193
pages.json
Unescape View File

@ -1,101 +1,122 @@
{ {
"pages": [ "pages": [
{ // {
"path": "pages/transition/page1/page1", // "path": "pages/transition/page1/page1",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page2/page2", // "path": "pages/transition/page2/page2",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page3/page3", // "path": "pages/transition/page3/page3",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page4/page4", // "path": "pages/transition/page4/page4",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page5/page5", // "path": "pages/transition/page5/page5",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page6/page6", // "path": "pages/transition/page6/page6",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/transition/page7/page7", // "path": "pages/transition/page7/page7",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/login/account_login/account_login", // "path": "pages/login/account_login/account_login",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/login/register/register", // "path": "pages/login/register/register",
"style": { // "style": {
"navigationStyle": "custom" // "navigationStyle": "custom"
} // }
}, // },
{ // {
"path": "pages/information/sex/sex", // "path": "pages/information/sex/sex",
"style": { // "style": {
"navigationBarTitleText": "", // "navigationBarTitleText": "",
"enablePullDownRefresh": false // "enablePullDownRefresh": false
} // }
}, // },
{ {
"path": "pages/information/boy_height/boy_height", "path": "pages/information/boy_height/boy_height",
"style": { "style": {
"navigationBarTitleText": "", "navigationStyle": "custom"
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/girl_height/girl_height",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
} }
}, },
{
"path": "pages/information/boy_height2/boy_height2",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_roll/boy_roll",
"style": {
"navigationStyle": "custom"
}
},
// {
// "path": "pages/information/girl_height/girl_height",
// "style": {
// "navigationStyle": "custom"
// }
// },
{ {
"path": "pages/information/boy_weight/boy_weight", "path": "pages/information/boy_weight/boy_weight",
"style": { "style": {
"navigationBarTitleText": "", "navigationStyle": "custom"
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/gril_weight/gril_weight",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
} }
}, },
{ {
"path": "pages/login/forget_password/forget_password", "path": "pages/information/boy_weight2/boy_weight2",
"style": { "style": {
"navigationBarTitleText": "", "navigationStyle": "custom"
"enablePullDownRefresh": false }
} },
} {
"path": "pages/information/boy_roll_w/boy_roll_w",
"style": {
"navigationStyle": "custom"
}
}
// {
// "path": "pages/information/gril_weight/gril_weight",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/login/forget_password/forget_password",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// }
], ],
"uniIdRouter": {}, "uniIdRouter": {},
"tabBar": null "tabBar": null

131
pages/information/boy_height/boy_height.vue
Unescape View File

@ -1,17 +1,140 @@
<template> <template>
<view> <!-- 背景 -->
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/boy_height/pictures/human.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="goTob_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="goTob_weight" src="/static/information/boy_height/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="goTob_roll()">175 cm</text>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { methods: {
return {}; navigateTo(page) {
} uni.navigateTo({
url: page
});
},
goTob_weight() {
this.navigateTo('/pages/information/boy_weight/boy_weight');
},
goTob_roll() {
this.navigateTo('/pages/information/boy_roll/boy_roll');
height:''
},
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.background {
background-image: url("/static/information/boy_height/pictures/img.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Human 动画，从页面中部向上移动 */
.human {
position: absolute;
width: 100%;
height: 90%;
top:10%;
object-fit: contain; /* 保持图片比例 */
animation: moveUp 2s ease forwards;
top: 30%; /* 起始位置 */
transform: translateY(-50%); /* 垂直居中 */
}
.progress{
position: absolute;
width: 77%;
height: 7%;
object-fit: contain; /* 保持图片比例 */
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
top: 2%; /* 根据需要调整位置 */
}
/* Text 延迟显示 */
.roll {
position: absolute;
width: 77%;
height: 20%;
object-fit: contain; /* 保持图片比例 */
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
top: 55%; /* 根据需要调整位置 */
}
/* Button 延迟显示并加缩放特效，放在下方 */
.button {
position: absolute;
height: 13vh;
width: 45vh;
animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
opacity: 0;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
.text{
position: absolute;
font-size: 1.5em;
text-align: center;
width: 100%;
height: 20%;
top: 68%;
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
color:#ffffff;
}
/* 定义 human 上移动画 */
@keyframes moveUp {
from {
top: 70%;
}
to {
top: 35%; /* 移动到页面顶部 10% */
}
}
/* Text 和 Button 的渐入动画 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Button 的缩放渐入动画 */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style> </style>

107
pages/information/boy_height2/boy_height2.vue
Unescape View File

@ -0,0 +1,107 @@
<template>
<!-- 背景 -->
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/boy_height/pictures/human.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="goTob_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="goTob_weight" src="/static/information/boy_height/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="goTob_roll">{{height}}</text>
</view>
</template>
<script>
export default {
data(){
return{
height:''
};
},
onLoad(options){
this.height=options.height;
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
goTob_weight() {
this.navigateTo('/pages/information/boy_weight/boy_weight');
},
goTob_roll() {
this.navigateTo('/pages/information/boy_roll/boy_roll');
},
}
}
</script>
<style lang="scss">
.background {
background-image: url("/static/information/boy_height/pictures/img.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Human 动画，从页面中部向上移动 */
.human {
position: absolute;
width: 100%;
height: 90%;
top:-10%;
object-fit: contain; /* 保持图片比例 */
}
.progress{
position: absolute;
width: 77%;
height: 7%;
object-fit: contain; /* 保持图片比例 */
opacity: 1;
top: 2%; /* 根据需要调整位置 */
}
/* Text 延迟显示 */
.roll {
position: absolute;
width: 77%;
height: 20%;
object-fit: contain; /* 保持图片比例 */
opacity: 1;
top: 55%; /* 根据需要调整位置 */
}
/* Button 延迟显示并加缩放特效，放在下方 */
.button {
position: absolute;
height: 13vh;
width: 45vh;
opacity: 1;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
.text{
position: absolute;
text-align: center;
font-size: 1.5em;
width: 100%;
height: 20%;
top: 68%;
color:#ffffff;
}
</style>

92
pages/information/boy_roll/boy_roll.vue
Unescape View File

@ -0,0 +1,92 @@
<template>
<view class="container">
<picker-view @change="onPickerChange" class="picker-view">
<picker-view-column>
<view v-for="(item, index) in options" :key="index" class="item">
{{ item }}
</view>
</picker-view-column>
</picker-view>
<image class="button" @click="goTob_height" src="/static/information/boy_height/pictures/button.png"></image>
</view>
</template>
<script>
export default {
data() {
return {
options: this.generateHeightOptions(150, 200),
pickerValue: [15], // 默认选中项的索引
};
},
methods: {
generateHeightOptions(start, end) {
const options = [];
for (let i = start; i <= end; i++) {
options.push(`${i} cm`);
}
return options;
},
onPickerChange(event) {
this.pickerValue = event.detail.value; // 更新选中的索引
},
navigateTo(page) {
uni.navigateTo({
url: page
});
},
goTob_height() {
const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
this.navigateTo(`/pages/information/boy_height2/boy_height2?height=${selectedValue}`); // 跳转到 boy_height2，并传递选中值
},
},
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
padding: 20px;
background-image: url("/static/information/boy_height/pictures/bkg_roll.png");
background-size: cover;
}
.picker-view {
height: 200px; /* 设置 picker-view 的高度 */
width: 100%; /* 宽度自适应 */
}
.item {
display: flex;
align-items: center; /* 垂直居中每个选项 */
justify-content: center; /* 水平居中每个选项 */
height: 40px; /* 每个选项的高度 */
color: #ffffff;
}
.button {
margin-top: 10px; /* 按钮与选择器之间的间距 */
position: absolute;
height: 13vh;
width: 45vh;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
</style>

81
pages/information/boy_roll_w/boy_roll_w.vue
Unescape View File

@ -0,0 +1,81 @@
<template>
<view class="container">
<picker-view @change="onPickerChange" class="picker-view">
<picker-view-column>
<view v-for="(item, index) in options" :key="index" class="item">
{{ item }}
</view>
</picker-view-column>
</picker-view>
<image class="button" @click="goTob_height" src="/static/information/boy_weight/pictures/button.png"></image>
</view>
</template>
<script>
export default {
data() {
return {
options: this.generateHeightOptions(40, 150),
pickerValue: [15], // 默认选中项的索引
};
},
methods: {
generateHeightOptions(start, end) {
const options = [];
for (let i = start; i <= end; i++) {
options.push(`${i} kg`);
}
return options;
},
onPickerChange(event) {
this.pickerValue = event.detail.value; // 更新选中的索引
},
navigateTo(page) {
uni.navigateTo({
url: page
});
},
goTob_height() {
const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
this.navigateTo(`/pages/information/boy_weight2/boy_weight2?weight=${selectedValue}`); // 跳转到 boy_height2，并传递选中值
},
},
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
padding: 20px;
background-image: url("/static/information/boy_weight/pictures/bkg_roll.png");
background-size: cover;
}
.picker-view {
height: 200px; /* 设置 picker-view 的高度 */
width: 100%; /* 宽度自适应 */
}
.item {
display: flex;
align-items: center; /* 垂直居中每个选项 */
justify-content: center; /* 水平居中每个选项 */
height: 40px; /* 每个选项的高度 */
color: #ffffff;
}
.button {
margin-top: 10px; /* 按钮与选择器之间的间距 */
position: absolute;
height: 13vh;
width: 45vh;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
</style>

137
pages/information/boy_weight/boy_weight.vue
Unescape View File

@ -1,17 +1,140 @@
<template> <template>
<view> <!-- 背景 -->
<view class="background">
</view> <!-- 人物 -->
<image class="human" src="/static/information/boy_weight/pictures/human.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="goTob_roll()" src="/static/information/boy_weight/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="goTob_height()" src="/static/information/boy_weight/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_weight/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="goTob_roll()">65 kg</text>
</view>
</template> </template>
<script> <script>
export default { export default {
data() { methods: {
return {}; navigateTo(page) {
} uni.navigateTo({
url: page
});
},
goTob_height() {
this.navigateTo('/pages/information/boy_weight/boy_weight');
},
goTob_roll() {
this.navigateTo('/pages/information/boy_roll_w/boy_roll_w');
height:''
},
} }
}
</script> </script>
<style lang="scss"> <style lang="scss">
.background {
background-image: url("/static/information/boy_weight/pictures/img.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Human 动画，从页面中部向上移动 */
.human {
position: absolute;
width: 100%;
height: 90%;
top:10%;
object-fit: contain; /* 保持图片比例 */
animation: moveUp 2s ease forwards;
top: 30%; /* 起始位置 */
transform: translateY(-50%); /* 垂直居中 */
}
.progress{
position: absolute;
width: 77%;
height: 7%;
object-fit: contain; /* 保持图片比例 */
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
top: 2%; /* 根据需要调整位置 */
}
/* Text 延迟显示 */
.roll {
position: absolute;
width: 77%;
height: 20%;
object-fit: contain; /* 保持图片比例 */
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
top: 55%; /* 根据需要调整位置 */
}
/* Button 延迟显示并加缩放特效，放在下方 */
.button {
position: absolute;
height: 13vh;
width: 45vh;
animation: fadeInScale 1s ease 2.5s forwards; /* 2.5秒后显示并缩放 */
opacity: 0;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
.text{
position: absolute;
font-size: 1.5em;
text-align: center;
width: 100%;
height: 20%;
top: 68%;
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
color:#ffffff;
}
/* 定义 human 上移动画 */
@keyframes moveUp {
from {
top: 70%;
}
to {
top: 35%; /* 移动到页面顶部 10% */
}
}
/* Text 和 Button 的渐入动画 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style> /* Button 的缩放渐入动画 */
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>

107
pages/information/boy_weight2/boy_weight2.vue
Unescape View File

@ -0,0 +1,107 @@
<template>
<!-- 背景 -->
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/boy_weight/pictures/human.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="goTob_roll()" src="/static/information/boy_weight/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="goTob_height()" src="/static/information/boy_weight/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_weight/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="goTob_roll()">{{weight}}</text>
</view>
</template>
<script>
export default {
data(){
return{
weight:''
};
},
onLoad(options){
this.weight=options.weight;
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
goTob_height() {
this.navigateTo('/pages/information/boy_height/boy_height');
},
goTob_roll() {
this.navigateTo('/pages/information/boy_roll_w/boy_roll_w');
},
}
}
</script>
<style lang="scss">
.background {
background-image: url("/static/information/boy_weight/pictures/img.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Human 动画，从页面中部向上移动 */
.human {
position: absolute;
width: 100%;
height: 90%;
top:-10%;
object-fit: contain; /* 保持图片比例 */
}
.progress{
position: absolute;
width: 77%;
height: 7%;
object-fit: contain; /* 保持图片比例 */
opacity: 1;
top: 2%; /* 根据需要调整位置 */
}
/* Text 延迟显示 */
.roll {
position: absolute;
width: 77%;
height: 20%;
object-fit: contain; /* 保持图片比例 */
opacity: 1;
top: 55%; /* 根据需要调整位置 */
}
/* Button 延迟显示并加缩放特效，放在下方 */
.button {
position: absolute;
height: 13vh;
width: 45vh;
opacity: 1;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
.text{
position: absolute;
text-align: center;
font-size: 1.5em;
width: 100%;
height: 20%;
top: 68%;
color:#ffffff;
}
</style>

4
pages/transition/page3/page3.vue
Unescape View File

@ -8,14 +8,14 @@
<!-- 文字 --> <!-- 文字 -->
<image class="text" src="/static/transition/page3/pictures/text.png"></image> <image class="text" src="/static/transition/page3/pictures/text.png"></image>
<!-- 按钮 --> <!-- 按钮 -->
<image class="button" @click="goToPage3" src="/static/transition/page3/pictures/button.png"></image> <image class="button" @click="goToPage4" src="/static/transition/page3/pictures/button.png"></image>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
goToPage3() { goToPage4() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/transition/page4/page4' // 跳转到 page4 url: '/pages/transition/page4/page4' // 跳转到 page4
}); });

4
pages/transition/page4/page4.vue
Unescape View File

@ -8,14 +8,14 @@
<!-- 文字 --> <!-- 文字 -->
<image class="text" src="/static/transition/page4/pictures/text.png"></image> <image class="text" src="/static/transition/page4/pictures/text.png"></image>
<!-- 按钮 --> <!-- 按钮 -->
<image class="button" @click="goToPage3" src="/static/transition/page4/pictures/button.png"></image> <image class="button" @click="goToPage5" src="/static/transition/page4/pictures/button.png"></image>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
methods: { methods: {
goToPage3() { goToPage5() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/transition/page5/page5' // 跳转到 page5 url: '/pages/transition/page5/page5' // 跳转到 page5
}); });

BIN
static/information/boy_height/pictures/bkg_roll.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
static/information/boy_height/pictures/button.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 KiB

BIN
static/information/boy_height/pictures/human.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
static/information/boy_height/pictures/progress.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/information/boy_height/pictures/roll.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/information/boy_weight/pictures/bkg_roll.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
static/information/boy_weight/pictures/button.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 KiB

BIN
static/information/boy_weight/pictures/human.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
static/information/boy_weight/pictures/progress.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/information/boy_weight/pictures/roll.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

6
unpackage/dist/cache/.vite/deps/_metadata.json vendored
Unescape View File

@ -1,8 +1,8 @@
{ {
"hash": "239ea83a", "hash": "48f6c93b",
"configHash": "3f4641d2", "configHash": "badd50c8",
"lockfileHash": "e3b0c442", "lockfileHash": "e3b0c442",
"browserHash": "619b4131", "browserHash": "debd2ea0",
"optimized": {}, "optimized": {},
"chunks": {} "chunks": {}
} }
Write Preview
Loading…
Cancel
Save