Gary
3 months ago
parent
f46f07769d
commit
5e84d8b2fe
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 背景 -->
|
||||||
|
<view class="background">
|
||||||
|
|
||||||
|
<!-- 人物 -->
|
||||||
|
<image class="human" src="/static/information/girl_weight/pictures/human.png"></image>
|
||||||
|
<!-- 滚动条 -->
|
||||||
|
<image class="roll" @click="go_to_roll()" src="/static/information/girl_weight/pictures/roll.png"></image>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<image class="button" @click="go_to_height()" src="/static/information/girl_weight/pictures/button.png"></image>
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<image class="progress" src="/static/information/girl_weight/pictures/progress.png"></image>
|
||||||
|
<!-- 文本-->
|
||||||
|
<text class="text" @click="go_to_roll()">{{weight}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
weight: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.weight = options.weight;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
navigateTo(page) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: page
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
go_to_height() {
|
||||||
|
this.navigateTo('/pages/information/girl_height_start/girl_height_start');
|
||||||
|
},
|
||||||
|
|
||||||
|
go_to_roll() {
|
||||||
|
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</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: 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,142 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<!-- 背景 -->
|
||||||
|
<view class="background">
|
||||||
|
|
||||||
|
<!-- 人物 -->
|
||||||
|
<image class="human" src="/static/information/girl_weight/pictures/human.png"></image>
|
||||||
|
<!-- 滚动条 -->
|
||||||
|
<image class="roll" @click="go_to_roll()" src="/static/information/girl_weight/pictures/roll.png"></image>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<image class="button" @click="go_to_height()" src="/static/information/girl_weight/pictures/button.png"></image>
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<image class="progress" src="/static/information/girl_weight/pictures/progress.png"></image>
|
||||||
|
<!-- 文本-->
|
||||||
|
<text class="text" @click="go_to_roll()">65 kg</text>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
methods: {
|
||||||
return {};
|
navigateTo(page) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: page
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
go_to_height() {
|
||||||
|
this.navigateTo('/pages/information/girl_height_start/girl_height_start');
|
||||||
|
},
|
||||||
|
|
||||||
|
go_to_roll() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/information/girl_weight_roll/girl_weight_roll'
|
||||||
|
})
|
||||||
|
height:''
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.background {
|
||||||
|
background-image: url("/static/information/girl_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: 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>
|
</style>
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<view class="background">
|
||||||
|
<!--按钮-->
|
||||||
|
<image class="button" @click="click" src="@/static/transition/page8/pictures/button.png"></image>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
click() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/homepages/home/home' // 跳转到 主界面
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0; /* 起始透明度 */
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1; /* 结束透明度 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.background {
|
||||||
|
background-image: url("@/static/transition/page8/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; /* 为绝对定位子元素提供相对定位的上下文 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
position: absolute; /* 绝对定位 */
|
||||||
|
width: 36%;
|
||||||
|
height: 6%;
|
||||||
|
bottom: 5%; /* 距离底部 20% 的位置 */
|
||||||
|
left: 50%; /* 水平居中 */
|
||||||
|
transform: translateX(-50%); /* 通过 translateX 使其居中 */
|
||||||
|
animation: fadeIn 3s forwards; /* 添加渐变动画 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.7 MiB |
|
After Width: | Height: | Size: 285 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 889 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 62 KiB |
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"hash": "48f6c93b",
|
"hash": "3dcffc29",
|
||||||
"configHash": "badd50c8",
|
"configHash": "cc60d382",
|
||||||
"lockfileHash": "e3b0c442",
|
"lockfileHash": "e3b0c442",
|
||||||
"browserHash": "debd2ea0",
|
"browserHash": "e601f541",
|
||||||
"optimized": {},
|
"optimized": {},
|
||||||
"chunks": {}
|
"chunks": {}
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue