修改男生身高体重填写部分,TODO:女生身高体重填写界面

master
Gary 4 weeks ago
parent 2240a96319
commit 845249338b

@ -162,7 +162,49 @@
"navigationStyle": "custom" "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": {}, "uniIdRouter": {},
"tabBar": null "tabBar": null

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -0,0 +1,140 @@
<template>
<!-- 背景 -->
<view class="background">
<!-- 人物 -->
<image class="human" src="/static/information/girl_height/pictures/human.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>
</view>
</template>
<script>
export default {
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');
height:''
},
}
}
</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 动画,从页面中部向上移动 */
.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: 13%;
width: 80%;
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: 69%;
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>

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -1,8 +1,8 @@
{ {
"hash": "239ea83a", "hash": "3dcffc29",
"configHash": "3f4641d2", "configHash": "cc60d382",
"lockfileHash": "e3b0c442", "lockfileHash": "e3b0c442",
"browserHash": "619b4131", "browserHash": "e601f541",
"optimized": {}, "optimized": {},
"chunks": {} "chunks": {}
} }
Loading…
Cancel
Save