forked from fzu102201435/front
parent
7671e04efc
commit
1576af575c
@ -1,17 +1,140 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
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');
|
||||
height:''
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</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; /* 保持图片比例 */
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
@ -1,17 +1,140 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
export default {
|
||||
methods: {
|
||||
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>
|
||||
|
||||
<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>
|
||||
@ -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>
|
||||
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 395 KiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 395 KiB |
|
After Width: | Height: | Size: 3.7 MiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "239ea83a",
|
||||
"configHash": "3f4641d2",
|
||||
"hash": "48f6c93b",
|
||||
"configHash": "badd50c8",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "619b4131",
|
||||
"browserHash": "debd2ea0",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue