完成了girl身高选择

master
zhanxin 3 months ago
parent 845249338b
commit f46f07769d

@ -1,210 +1,222 @@
{
"pages": [
{
"path": "pages/transition/page1/page1",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page2/page2",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page3/page3",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page4/page4",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page5/page5",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page6/page6",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/transition/page7/page7",
"style": {
"navigationStyle": "custom"
}
},
/*------------------------------------------------------------------------------------------------------------------*/
"pages": [
// {
// "path": "pages/transition/page1/page1",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page2/page2",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page3/page3",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page4/page4",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page5/page5",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page6/page6",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/transition/page7/page7",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/login/account_login/account_login",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/register/register",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/forget_password/forget_password",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/login/change_password/change_password",
"style": {
"navigationStyle": "custom"
}
},
/*------------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/login/account_login/account_login",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/login/register/register",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/login/forget_password/forget_password",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/login/change_password/change_password",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/information/sex/sex",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_height_start/boy_height_start",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_height_roll/boy_height_roll",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_height_end/boy_height_end",
"style": {
"navigationStyle": "custom"
}
},
/*------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/information/boy_weight_start/boy_weight_start",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_weight_roll/boy_weight_roll",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/boy_weight_end/boy_weight_end",
"style": {
"navigationStyle": "custom"
}
},
// {
// "path": "pages/information/sex/sex",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/boy_height_start/boy_height_start",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/boy_height_roll/boy_height_roll",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/boy_height_end/boy_height_end",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/information/boy_weight_start/boy_weight_start",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/boy_weight_roll/boy_weight_roll",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/boy_weight_end/boy_weight_end",
// "style": {
// "navigationStyle": "custom"
// }
// },
/*-----------------------------------------------------------------------------------------------------*/
{
"path": "pages/information/girl_height/girl_height",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/girl_weight/girl_weight",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/purpose/purpose",
"style": {
"navigationStyle": "custom"
}
},
/*-------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/homepages/home/home",
"style": {
"navigationStyle": "custom"
}
},
/*------------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/homepages/puppy_chat/puppy_chat",
"style": {
"navigationStyle": "custom"
}
},
/*---------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/homepages/community/community",
"style": {
"navigationStyle": "custom"
}
},
/*-------------------------------------------------------------------------------------------------------------------*/
{
"path": "pages/homepages/user/user",
"style": {
"navigationStyle": "custom"
}
}
/*-------------------------------------------------------------------------------------------------------------------*/,
{
"path": "pages/girl_height_start/girl_height_start",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/girl_height_roll/girl_height_roll",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/girl_height_end/girl_height_end",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/girl_weight_start/girl_weight_start",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/girl_weight_roll/girl_weight_roll",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/information/girl_wieght_end/girl_wieght_end",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
"path": "pages/information/girl_height_start/girl_height_start",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/girl_height_end/girl_height_end",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/information/girl_height_roll/girl_height_roll",
"style": {
"navigationStyle": "custom"
}
}
// {
// "path": "pages/information/girl_weight/girl_weight",
// "style": {
// "navigationStyle": "custom"
// }
// },
// {
// "path": "pages/information/purpose/purpose",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*-------------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/homepages/home/home",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*------------------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/homepages/puppy_chat/puppy_chat",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*---------------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/homepages/community/community",
// "style": {
// "navigationStyle": "custom"
// }
// },
// /*-------------------------------------------------------------------------------------------------------------------*/
// {
// "path": "pages/homepages/user/user",
// "style": {
// "navigationStyle": "custom"
// }
// }
// /*-------------------------------------------------------------------------------------------------------------------*/,
// {
// "path": "pages/girl_height_start/girl_height_start",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/girl_height_roll/girl_height_roll",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/information/girl_height_end/girl_height_end",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/information/girl_weight_start/girl_weight_start",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/information/girl_weight_roll/girl_weight_roll",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// },
// {
// "path": "pages/information/girl_wieght_end/girl_wieght_end",
// "style": {
// "navigationBarTitleText": "",
// "enablePullDownRefresh": false
// }
// }
],
"uniIdRouter": {},
"tabBar": null

@ -14,7 +14,7 @@
</picker-view-column>
</picker-view>
<image class="button" @click="go_to_height" src="/static/information/boy_height/pictures/button.png"></image>
<image class="button" @click="go_to_height" src="/static/information/boy_height/pictures/button2.png"></image>
</view>
<!-- TODO:修改 -->
</template>

@ -13,7 +13,7 @@
</view>
</picker-view-column>
</picker-view>
<image class="button" @click="go_to_weight_end" src="/static/information/boy_weight/pictures/button.png"></image>
<image class="button" @click="go_to_weight_end" src="/static/information/boy_weight/pictures/button2.png"></image>
</view>
</template>

@ -1,146 +0,0 @@
<template>
<view class="background">
<!-- 人物图片 -->
<image class="human slide-in" src="/static/information/girl_height/pictures/human.png"></image>
<!-- 字体你的身高是 -->
<image class="height_text" src="/static/information/girl_height/pictures/height_text.png"></image>
<!-- 身高选择窗口 -->
<view class="weight_choice_window" @click="toggleHeightPicker">
{{ height_number }} cm
</view>
<!-- 按钮图片 -->
<image class="button" src="/static/information/girl_height/pictures/button.png" @click="goToWeightPage"></image>
<!-- 身高选择轮播 -->
<view class="height_picker" v-if="is_height_picker_visible">
<view class="ruler" :style="{ transform: `translateY(-${currentHeightIndex * 100}px)` }"></view>
<swiper :current="currentHeightIndex" @change="onHeightChange">
<swiper-item v-for="(height, index) in heightOptions" :key="index">
<view class="height_option">{{ height }} cm</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
is_height_picker_visible: false, //
height_number: 160, // 160cm
heightOptions: Array.from({ length: 81 }, (_, i) => i + 150), // 150cm 230cm
currentHeightIndex: 10 //
};
},
methods: {
toggleHeightPicker() {
this.is_height_picker_visible = !this.is_height_picker_visible; //
},
onHeightChange(event) {
this.currentHeightIndex = event.detail.current; //
this.height_number = this.heightOptions[this.currentHeightIndex]; //
},
goToWeightPage() {
uni.navigateTo({
url: '/pages/information/girl_weight', // girl_weight
});
},
},
};
</script>
<style lang="scss">
.background {
background-image: url("@/static/information/girl_height/pictures/background.png");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column; /* 纵向排列 */
align-items: center; /* 水平居中 */
justify-content: flex-end; /* 使内容向底部对齐 */
position: relative; /* 为绝对定位子元素提供相对定位的上下文 */
}
.human {
position: absolute; /* 绝对定位 */
top: 12%;
left: 50%;
width: 65%;
height: 40%;
transform: translateX(100%); /* 初始位置在右侧 */
animation: slide-in 1s forwards; /* 添加动画 */
}
.height_text {
position: absolute; /* 绝对定位 */
transform: translateX(-50%); /* 通过 translateX 使其居中 */
top: 60%;
left: 50%;
width: 40%;
height: 3%;
}
.weight_choice_window {
position: absolute; /* 绝对定位 */
transform: translateX(-50%); /* 通过 translateX 使其居中 */
top: 60%;
left: 50%;
width: 80%;
height: 50px;
line-height: 50px;
text-align: center;
margin: 50px auto;
font-size: 20px;
background-color: #86A2EF;
border-top: 2px solid #4F7CEC;
border-bottom: 2px solid #4F7CEC;
}
.button {
position: absolute; /* 绝对定位 */
width: 90%;
height: 13%;
bottom: 1%; /* 距离底部 20% 的位置 */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 通过 translateX 使其居中 */
}
.height_picker {
position: absolute; /* 绝对定位 */
top: 70%; /* 根据需要调整位置 */
left: 50%;
transform: translateX(-50%);
width: 80%;
}
.height_option {
font-size: 24px;
text-align: center;
line-height: 100px; /* 根据需要调整高度 */
}
/* 动画定义 */
@keyframes slide-in {
0% {
transform: translateX(100%); /* 从右侧开始 */
}
100% {
transform: translateX(-50%); /* 移动到屏幕中心 */
}
}
</style>

@ -1,17 +1,107 @@
<template>
<view>
<!-- 背景 -->
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/girl_height/pictures/huamn.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="go_to_roll()" src="/static/information/girl_height/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="go_to_purpose()" src="/static/information/girl_height/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/girl_height/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="go_to_roll()">{{height}}</text>
</view>
</template>
<script>
export default {
data() {
return {};
}
data(){
return{
height:''
};
},
onLoad(options){
this.height=options.height;
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
go_to_purpose() {
this.navigateTo('/pages/information/purpose/purpose');
},
go_to_roll() {
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
},
}
}
</script>
<style lang="scss">
.background {
background-image: url("/static/information/girl_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 {
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: 13%;
width: 80%;
opacity: 1;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
.text{
position: absolute;
text-align: center;
font-size: 1.5em;
width: 100%;
height: 20%;
top: 69%;
color:#ffffff;
}
</style>

@ -1,17 +1,91 @@
<template>
<view>
<view class="container">
<picker-view
@change="onPickerChange"
class="picker_view_box"
:value="pickerValue"
mask-style="opacity:0%"
indicator-style="height:3rem"
>
<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="go_to_height" src="/static/information/girl_height/pictures/button2.png"></image>
</view>
<!-- TODO:修改 -->
</template>
<script>
// TODO:
export default {
data() {
return {};
}
}
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
});
},
go_to_height() {
const selectedValue = this.options[this.pickerValue[0]]; //
this.navigateTo(`/pages/information/girl_height_end/girl_height_end?height=${selectedValue}`); // girl_height_end
},
},
};
</script>
<style lang="scss">
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中 */
justify-content: center; /* 垂直居中 */
height: 100vh; /* 使容器充满整个视口 */
padding: 20px;
background-image: url("/static/information/girl_height/pictures/bkg_roll.png");
background-size: cover;
}
.picker_view_box {
height: 42.8vh; /* 设置 picker-view 的高度 */
width: 80%; /* 宽度自适应 */
}
.item {
line-height: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
height: 3rem;
color: #ffffff;
}
.button {
margin-top: 10px; /* 按钮与选择器之间的间距 */
position: absolute;
height: 13%;
width: 80%;
right: 10%; /* 距右边 10% */
bottom: 2%; /* 距底部 3.5% */
}
</style>

@ -3,36 +3,36 @@
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/girl_height/pictures/human.png"></image>
<image class="human" src="/static/information/girl_height/pictures/huamn.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="go_to_roll" src="/static/information/girl_height/pictures/roll.png"></image>
<!-- 按钮 -->
<image class="button" @click="go_to_purpose" src="/static/information/girl_height/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="go_to_roll()">175 cm</text>
<!-- 进度条 -->
<image class="progress" src="/static/information/girl_height/pictures/progress.png"></image>
<!-- 文本-->
<text class="text" @click="go_to_roll()">175 cm</text>
</view>
</template>
<script>
export default {
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
go_to_purpose() {
this.navigateTo('/pages/information/purpose/purpose');
},
go_to_purpose() {
this.navigateTo('/pages/information/purpose/purpose');
},
go_to_roll() {
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
height:''
},
}
go_to_roll() {
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
height:''
},
}
}
</script>
@ -95,15 +95,15 @@ export default {
}
.text{
position: absolute;
font-size: 1.5em;
text-align: center;
width: 100%;
height: 20%;
top: 69%;
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
color:#ffffff;
position: absolute;
font-size: 1.5em;
text-align: center;
width: 100%;
height: 20%;
top: 69%;
animation: fadeIn 1s ease 2s forwards; /* 2秒后显示 */
opacity: 0;
color:#ffffff;
}
/* 定义 human 上移动画 */

@ -1,179 +0,0 @@
<template>
<view class="main">
<view class="header">
<image class="imgage" src="../../../static/pro.png"></image>
</view>
<view class="img">
<image class="imgs" src="../../../static/Group.png"></image>
</view>
<view class="bottom">
你当前的体重是
</view>
<view class="kg">
{{modelChange}}kg
</view>
</view>
<view class="buttons">
<button @click="show"></button>
</view>
<view class="mask" v-if="isShow">
<view class="tz">
你当前的体重是{{modelChange}}kg
</view>
<view class="picker" >
<picker-view @change="getChange" class="picker-view" mask-top-style="background-image: linear-gradient(to bottom,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))"
mask-bottom-style="background-image: linear-gradient(to top,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))">
<picker-view-column >
<view class="pickers" v-for="item in weightRange" :key="item">
{{item}}
</view>
</picker-view-column>
</picker-view>
</view>
<view class="button">
<button @click="change"></button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
weightRange:[50,51,52,53,54,55,56,57,58,59,60,70],
modelChange:55,
count:'',
isShow:false,
style:' #94A9FE '
};
},
methods:{
show(){
this.isShow =true
},
getChange(e){
this.count = e.detail.value;
},
change(){
this.modelChange = this.weightRange[this.count]
this.isShow = false
uni.navigateTo({
url:'/pages/information/girl_height/girl_height'
})
}
}
}
</script>
<style >
.main{
width: 100%;
height: 700px;
border: 1px solid;
background-color: #94A9FE;
}
.header{
width: 80%;
height: 60px;
margin: 20px auto;
}
.img{
width: 80%;
height: 300px;
margin: auto;
}
.imgs{
width: 30%;
height: 90%;
margin-left: 33%;
margin-top: 5%;
animation: move 1s ease-in-out;
}
@keyframes move{
0%{
transform: translateX(300px);
}
100%{
transform: translateX(0);
}
}
.imgage{
width: 100%;
height: 100%;
}
.bottom{
width: 80%;
height: 30px;
font-size: 35px;
margin:30px auto;
text-align: center;
}
.kg{
width: 80%;
height: 50px;
line-height: 50px;
text-align: center;
margin:50px auto;
font-size: 20px;
background-color: #86A2EF;
border-top:2px solid #4F7CEC;
border-bottom: 2px solid #4F7CEC;
}
.buttons{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 1;
}
button{
border-radius: 20px;
color:white;
background-color: #94ABFD;
}
.mask{
width: 100%;
height: 1000px;
position: absolute;
left: 0;
top: 0;
background-color: #96A7E6;
}
.tz{
width: 80%;
height: 30px;
line-height: 30px;
margin:20px auto;
text-align: center;
font-size: 30px;
}
.button{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 2;
}
.picker{
width: 80%;
height: 300px;
margin: auto;
text-align: center;
z-index: 2;
}
.picker-view{
width: 100%;
height: 300px;
}
.pickers{
text-align: center;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 230 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -1,8 +1,8 @@
{
"hash": "3dcffc29",
"configHash": "cc60d382",
"hash": "48f6c93b",
"configHash": "badd50c8",
"lockfileHash": "e3b0c442",
"browserHash": "e601f541",
"browserHash": "debd2ea0",
"optimized": {},
"chunks": {}
}
Loading…
Cancel
Save