You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
3.9 KiB
172 lines
3.9 KiB
<template>
|
|
<!-- 背景 -->
|
|
<view class="background">
|
|
|
|
<!-- 人物 -->
|
|
<image class="human" src="/static/information/boy_weight/pictures/human.png"></image>
|
|
<!-- 滚动条 -->
|
|
<image class="roll" @click="go_to_roll()" src="/static/information/boy_weight/pictures/roll.png"></image>
|
|
<!-- 按钮 -->
|
|
<image class="button" @click="go_to_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="go_to_roll()">65 kg</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
token :uni.getStorageSync("access_token")
|
|
}
|
|
},
|
|
methods: {
|
|
go_to_height() {
|
|
// 获取全局变量
|
|
const app = getApp();
|
|
console.log(app.globalData.token);
|
|
console.log(app.globalData.fit_journey_basic_address);
|
|
|
|
// 向后端发送请求
|
|
uni.request({
|
|
url: app.globalData.fit_journey_basic_address + '/weight/write_user_weight',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
'Authorization': this.token
|
|
},
|
|
data: {
|
|
weight: 65, // 发送数字类型
|
|
},
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success'
|
|
})
|
|
console.log("请求成功！请求数据是", res);
|
|
// 如果成功则跳转到身高界面
|
|
uni.navigateTo({
|
|
url: '/pages/information/boy_height_start/boy_height_start',
|
|
})
|
|
},
|
|
error: (res) => {
|
|
console.log("请求失败！请求数据是", res);
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
go_to_roll() {
|
|
uni.navigateTo({
|
|
url:'/pages/information/boy_weight_roll/boy_weight_roll'
|
|
})
|
|
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: 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> |