和后端数据库对接成功,后期在app.vue加上服务器ip地址和端口号就好了,information界面完全完成

master
Gary 4 weeks ago
parent 562283d89e
commit bdb529d420

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions">
<TaskOptions isEnabled="true">
<TaskOptions isEnabled="false">
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
<option name="checkSyntaxErrors" value="true" />
<option name="description" />

@ -1,4 +1,4 @@
<!-- App.vue -->
// App.vue
<template>
<view class="app-container">
</view>
@ -10,13 +10,31 @@ import tarbar_home from "@/components/tarbar_home/tarbar_home.vue";
import tarbar_user from "@/components/tarbar_user/tarbar_user.vue";
import tarbar_community from "@/components/tarbar_community/tarbar_community.vue";
import tarbar_puppy_chat from "@/components/tarbar_puppy_chat/tarbar_puppy_chat.vue";
import myPopUp from './components/my-pop-up/my-pop-up.vue';
import my_pop_up from './components/my_pop_up/my_pop_up.vue';
export default {
globalData: {
//
fit_journey_basic_address: 'http://127.0.0.1:8081',
fit_journey_community_address: 'http://localhost:8082',
fit_journey_ai_address: 'http://localhost:8083',
fit_journey_login_address: 'http://localhost:8084',
fit_journey_recipe_address: 'http://localhost:8085',
fit_journey_exercise_address: 'http://localhost:8086',
// TODO: token localStorage
token: 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxODUxOTgwMTI1O' +
'TYxMjMyMzg1IiwiaXNzIjoiZml0am91cm5leSIsInVzZXJuY' +
'W1lOiI6InRlc3QiLCJyb2xlczoiOiJ1c2VyIiwiaWQ6IjoxODUxOTgwM' +
'TI1OTYxMjMyMzg1LCJpYXQiOjE3MzA1NDEzMTksImV4cCI6MzE3' +
'MDkwNTQxMzE5fQ.tdP-uBa-oKVJjGJlN70tzxXCa4usXOev6xf_fgZhWD4'
},
components: {
tarbar,
myPopUp, //js-
my_pop_up // JS -
},
onLaunch: function() {
console.log('App Launch');
//

@ -23,7 +23,7 @@
<script>
import { ref } from 'vue'
export default{
name:'my-pop-up',
name:'my_pop_up',
props:{
title:{
default:'提示',

@ -1,6 +1,6 @@
{
"pages": [
{
/* {
"path": "pages/transition/page1/page1",
"style": {
"navigationStyle": "custom"
@ -41,10 +41,10 @@
"style": {
"navigationStyle": "custom"
}
},
},*/
/*------------------------------------------------------------------------------------------------------------------*/
/*
{
"path": "pages/login/account_login/account_login",
@ -69,7 +69,7 @@
"style": {
"navigationStyle": "custom"
}
},
},*/
/*------------------------------------------------------------------------------------------------------------------*/
{
@ -78,44 +78,46 @@
"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/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/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/girl_height_start/girl_height_start",
"style": {
@ -159,42 +161,42 @@
"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/transition/page8/page8",
"style": {
"navigationStyle": "custom"
}
}
}*/
/*--------------------------------------------------------------------------------------------------------------*/
],
"uniIdRouter": {},

@ -6,7 +6,7 @@
<image class="human" src="/static/information/boy_height/pictures/human.png"></image>
<!-- 滚动条 -->
<image class="roll" @click="go_to_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
<!-- 按钮 -->
<!-- 按钮 跳转到目的的部分-->
<image class="button" @click="go_to_purpose()" src="/static/information/boy_height/pictures/button.png"></image>
<!-- 进度条 -->
<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
@ -26,18 +26,44 @@ export default {
this.height=options.height;
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
go_to_purpose() {
this.navigateTo('/pages/information/purpose/purpose');
},
go_to_purpose() {
const app = getApp();
console.log(app.globalData.token);
console.log(app.globalData.fit_journey_basic_address);
console.log("当前的身高是" + this.height);
// height "cm"
const numericHeight = parseFloat(this.height.replace('cm', '').trim());
//
uni.request({
url: app.globalData.fit_journey_basic_address + '/height/write_user_height',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
height: numericHeight, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
// 使
uni.navigateTo({
url: '/pages/information/purpose/purpose'
});
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_roll() {
this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
uni.navigateTo({
url: '/pages/information/boy_height_end/boy_height_roll/boy_height_roll?height='+this.height,
})
},
}
}

@ -23,11 +23,31 @@ export default {
url: page
});
},
go_to_purpose() {
go_to_purpose() {
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 + '/height/write_user_height',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
height: 175, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
// 使
this.navigateTo('/pages/information/purpose/purpose');
},
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_roll() {
this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
height:''

@ -7,101 +7,69 @@
<!-- 滚动条 -->
<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>
<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="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
});
},
data() {
return {
weight: ''
};
},
onLoad(options) {
this.weight = options.weight;
},
methods: {
navigateTo(page) {
uni.navigateTo({
url: page
});
},
goTob_height() {
this.navigateTo('/pages/information/boy_height_start/boy_height_start');
},
go_to_height() {
//
const app = getApp();
console.log(app.globalData.token);
console.log(app.globalData.fit_journey_basic_address);
// weight "kg"
const numericWeight = parseFloat(this.weight.replace('kg', '').trim());
goTob_roll() {
this.navigateTo('/pages/information/boy_height_roll/boy_height_roll');
//
uni.request({
url: app.globalData.fit_journey_basic_address + '/weight/write_user_weight',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
}
}
data: {
weight: numericWeight, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
//
this.navigateTo('/pages/information/boy_height_start/boy_height_start');
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
goTob_roll() {
this.navigateTo('/pages/information/boy_height_roll/boy_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;
}
@import "/static/information/boy_weight/css/boy_weight_end.scss";
</style>

@ -5,30 +5,51 @@
<!-- 人物 -->
<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="roll" @click="go_to_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="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="goTob_roll()">65 kg</text>
<text class="text" @click="go_to_roll()">65 kg</text>
</view>
</template>
<script>
export default {
methods: {
navigateTo(page) {
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': app.globalData.token // TODOtoken
},
data: {
weight: 65, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
//
uni.navigateTo({
url: page
});
},
url: '/pages/information/boy_height_start/boy_height_start',
})
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
goTob_height() {
this.navigateTo('/pages/information/boy_height_start/boy_height_start');
},
goTob_roll() {
go_to_roll() {
uni.navigateTo({
url:'/pages/information/boy_weight_roll/boy_weight_roll'
})

@ -31,13 +31,44 @@ export default {
url: page
});
},
go_to_purpose() {
const app = getApp();
console.log(app.globalData.token);
console.log(app.globalData.fit_journey_basic_address);
console.log("当前的身高是" + this.height);
// height "cm"
const numericHeight = parseFloat(this.height.replace('cm', '').trim());
//
uni.request({
url: app.globalData.fit_journey_basic_address + '/height/write_user_height',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
height: numericHeight, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
// 使
uni.navigateTo({
url: '/pages/information/purpose/purpose'
});
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_purpose() {
this.navigateTo('/pages/information/purpose/purpose');
},
go_to_roll() {
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
uni.navigateTo({
url: '/pages/information/girl_height_roll/girl_height_roll'
})
},
}
}
@ -45,63 +76,5 @@ export default {
</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;
}
@import "@/static/information/girl_height/css/girl_height_end.scss";
</style>

@ -24,9 +24,31 @@ export default {
});
},
go_to_purpose() {
go_to_purpose() {
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 + '/height/write_user_hight',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
weight: 175, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
// 使
this.navigateTo('/pages/information/purpose/purpose');
},
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_roll() {
this.navigateTo('/pages/information/girl_height_roll/girl_height_roll');
@ -38,103 +60,5 @@ export default {
</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: 55%;
}
to {
top: 35%;
}
}
/* 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);
}
}
@import "@/static/information/girl_height/css/girl_height_start.scss";
</style>

@ -32,8 +32,36 @@ export default {
});
},
go_to_height() {
this.navigateTo('/pages/information/girl_weight_start/girl_weight_start');
//
const app = getApp();
console.log(app.globalData.token);
console.log(app.globalData.fit_journey_basic_address);
// weight "kg"
const numericWeight = parseFloat(this.weight.replace('kg', '').trim());
//
uni.request({
url: app.globalData.fit_journey_basic_address + '/weight/write_user_weight',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
weight: numericWeight, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
//
this.navigateTo('/pages/information/girl_height_start/girl_height_start');
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_roll() {
@ -42,8 +70,10 @@ export default {
}
}
</script>
</script>
<style lang="scss">
.background {
background-image: url("/static/information/boy_weight/pictures/img.png");

@ -25,9 +25,34 @@ export default {
},
go_to_height() {
this.navigateTo('/pages/information/girl_height_start/girl_height_start');
//
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': app.globalData.token // TODOtoken
},
data: {
weight: 65, //
},
success: (res) => {
console.log("请求成功!请求数据是", res);
//
this.navigateTo('/pages/information/girl_height_start/girl_height_start');
},
error: (res) => {
console.log("请求失败!请求数据是", res);
}
});
},
go_to_roll() {
uni.navigateTo({
url:'/pages/information/girl_weight_roll/girl_weight_roll'

@ -55,28 +55,68 @@ export default {
isBoySelected: false,
isGirlSelected: false,
isHumanVisible: false, // human
sex:-1,// 1 0
};
},
mounted() {
const app = getApp();
console.log('Token:', app.globalData.token);
console.log('Address:', app.globalData.fit_journey_basic_address);
// human
setTimeout(() => {
this.isHumanVisible = true;
}, 100); // 100ms
},
methods: {
goToNextPage() {
const targetPage = this.isBoySelected
? "/pages/information/boy_weight_start/boy_weight_start"
: "/pages/information/girl_weight_start/girl_weight_start";
uni.navigateTo({
url: targetPage,
});
},
goToNextPage() {
console.log('调用函数成功!'); //
//
const app = getApp();
console.log('传递的token是:', app.globalData.token); // Token
console.log('后端的地址是', app.globalData.fit_journey_basic_address); //
uni.request({
url: app.globalData.fit_journey_basic_address + '/sex/write_user_sex',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Authorization': app.globalData.token // TODOtoken
},
data: {
sex: this.sex
},
success: (res) => {
console.log('Response:', res.data); //
console.log("开始跳转页面");
//
const targetPage = this.isBoySelected
? "/pages/information/boy_weight_start/boy_weight_start"
: "/pages/information/girl_weight_start/girl_weight_start";
uni.navigateTo({
url: targetPage,
});
},
fail: (err) => {
console.error('请求失败:', err); //
}
});
},
clickBoyImage() {
this.sex=1;//
this.isBoySelected = true;
this.isGirlSelected = false;
},
clickGirlImage() {
this.sex=0;//
this.isGirlSelected = true;
this.isBoySelected = false;
},

@ -8,14 +8,17 @@
<!-- 文字 -->
<image class="text" src="/static/transition/page3/pictures/text.png"></image>
<!-- 按钮 -->
<image class="button" @click="goToPage4" src="/static/transition/page3/pictures/button.png"></image>
<image class="button" @click="goToPage3" src="/static/transition/page3/pictures/button.png"></image>
</view>
</template>
<script>
export default {
methods: {
goToPage4() {
goToPage3() {
uni.navigateTo({
url: '/pages/transition/page4/page4' // page4
});

@ -0,0 +1,60 @@
.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;
}

@ -0,0 +1,59 @@
.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;
}

@ -0,0 +1,99 @@
.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: 55%;
}
to {
top: 35%;
}
}
/* 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);
}
}

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