fzu102201206
/
front
forked from fzu102201435/front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source 
# Conflicts:
#	pages.json
#	pages/information/boy_weight/boy_weight.vue
master
zhanxin 4 weeks ago
parent 1576af575c 73360fd629
commit f2d55881c5
24 changed files with 705 additions and 27 deletions
Show Stats Download Patch File Download Diff File

2
pages/homepages/main/main.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<view>
这是主页面
</view>
</template>

167
pages/information/girl_height/girl_height.vue
Unescape View File

@ -1,17 +1,178 @@
<template>
<view>
<view class="main">
<view class="header">
<image class="imgage" src="../../../static/pros.png"></image>
</view>
<view class="img">
<image class="imgs" src="../../../static/Group1.png"></image>
</view>
<view class="bottom">
你当前的身高是？
</view>
<view class="kg">
{{modelChange}}cm
</view>
</view>
<view class="buttons">
<button @click="show">下一步</button>
</view>
<view class="mask" v-if="isShow">
<view class="tz">
你当前的身高是{{modelChange}}cm
</view>
<view class="picker" >
<picker-view @change="getChange" class="picker-view"
:mask-bottom-style="bottomStyle"
:mask-top-style="topStyle"
>
<picker-view-column style="background-color: transparent;">
<view class="pickers" v-for="item in weightRange" :key="item">
{{item}}
</view>
</picker-view-column>
</picker-view>
</view>
<view class="button">
<button @click="change">选择身高</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
return {
weightRange:[160,165,170,175,178,180,183,185,188,190,195,199],
modelChange:180,
count:'',
isShow:false,
bottomStyle:`background:transparent`,
topStyle:'background:transparent'
};
},
methods:{
show(){
this.isShow =true
},
getChange(e){
this.count = e.detail.value;
},
change(){
this.modelChange = this.weightRange[this.count]
this.isShow = false
}
}
}
</script>
<style lang="scss">
<style >
.main{
width: 100%;
height: 700px;
border: 1px solid;
background-color: #94A9FE;
}
.header{
width: 80%;
height: 60px;
margin: 20px auto;
}
.img{
width: 80%;
height: 300px;
margin: auto;
}
.imgs{
width: 50%;
height: 90%;
margin-left: 25%;
margin-top: 5%;
animation: move 1s ease-in-out;
}
@keyframes move{
0%{
transform: translateX(300px);
}
100%{
transform: translateX(0);
}
}
.imgage{
width: 100%;
height: 100%;
}
.bottom{
width: 80%;
height: 30px;
font-size: 35px;
margin:30px auto;
text-align: center;
}
.kg{
width: 80%;
height: 50px;
line-height: 50px;
text-align: center;
margin:50px auto;
font-size: 20px;
background-color: #86A2EF;
border-top:2px solid #4F7CEC;
border-bottom: 2px solid #4F7CEC;
}
.buttons{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 1;
}
button{
border-radius: 20px;
color:white;
background-color: #94ABFD;
}
.mask{
width: 100%;
height: 1000px;
position: absolute;
left: 0;
top: 0;
background-color: #96A7E6;
}
.tz{
width: 80%;
height: 30px;
line-height: 30px;
margin:20px auto;
text-align: center;
font-size: 30px;
}
.button{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 2;
}
.picker{
width: 80%;
height: 300px;
margin: auto;
text-align: center;
z-index: 2;
}
.picker-view{
width: 100%;
height: 300px;
}
.pickers{
text-align: center;
}
</style>

168
pages/information/gril_weight/gril_weight.vue
Unescape View File

@ -1,17 +1,179 @@
<template>
<view>
<view class="main">
<view class="header">
<image class="imgage" src="../../../static/pro.png"></image>
</view>
<view class="img">
<image class="imgs" src="../../../static/Group.png"></image>
</view>
<view class="bottom">
你当前的体重是？
</view>
<view class="kg">
{{modelChange}}kg
</view>
</view>
<view class="buttons">
<button @click="show">下一步</button>
</view>
<view class="mask" v-if="isShow">
<view class="tz">
你当前的体重是{{modelChange}}kg
</view>
<view class="picker" >
<picker-view @change="getChange" class="picker-view" mask-top-style="background-image: linear-gradient(to bottom,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))"
mask-bottom-style="background-image: linear-gradient(to top,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))">
<picker-view-column >
<view class="pickers" v-for="item in weightRange" :key="item">
{{item}}
</view>
</picker-view-column>
</picker-view>
</view>
<view class="button">
<button @click="change">选择体重</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
return {
weightRange:[50,51,52,53,54,55,56,57,58,59,60,70],
modelChange:55,
count:'',
isShow:false,
style:' #94A9FE '
};
},
methods:{
show(){
this.isShow =true
},
getChange(e){
this.count = e.detail.value;
},
change(){
this.modelChange = this.weightRange[this.count]
this.isShow = false
uni.navigateTo({
url:'/pages/information/girl_height/girl_height'
})
}
}
}
</script>
<style lang="scss">
<style >
.main{
width: 100%;
height: 700px;
border: 1px solid;
background-color: #94A9FE;
}
.header{
width: 80%;
height: 60px;
margin: 20px auto;
}
.img{
width: 80%;
height: 300px;
margin: auto;
}
.imgs{
width: 30%;
height: 90%;
margin-left: 33%;
margin-top: 5%;
animation: move 1s ease-in-out;
}
@keyframes move{
0%{
transform: translateX(300px);
}
100%{
transform: translateX(0);
}
}
.imgage{
width: 100%;
height: 100%;
}
.bottom{
width: 80%;
height: 30px;
font-size: 35px;
margin:30px auto;
text-align: center;
}
.kg{
width: 80%;
height: 50px;
line-height: 50px;
text-align: center;
margin:50px auto;
font-size: 20px;
background-color: #86A2EF;
border-top:2px solid #4F7CEC;
border-bottom: 2px solid #4F7CEC;
}
.buttons{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 1;
}
button{
border-radius: 20px;
color:white;
background-color: #94ABFD;
}
.mask{
width: 100%;
height: 1000px;
position: absolute;
left: 0;
top: 0;
background-color: #96A7E6;
}
.tz{
width: 80%;
height: 30px;
line-height: 30px;
margin:20px auto;
text-align: center;
font-size: 30px;
}
.button{
width: 80%;
height: 30px;
line-height: 30px;
margin:70px auto;
z-index: 2;
}
.picker{
width: 80%;
height: 300px;
margin: auto;
text-align: center;
z-index: 2;
}
.picker-view{
width: 100%;
height: 300px;
}
.pickers{
text-align: center;
}
</style>

69
pages/information/sex/sex.vue
Unescape View File

@ -1,17 +1,76 @@
<template>
<view>
<view class="background">
<!-- 男生按钮 -->
<image
class="boy_image"
@click="clickBoyImage"
v-if="!isBoySelected"
:class="{'slide-in-left': !isBoySelected}"
src="/static/information/sex/pictures/boy.png"
></image>
<image
class="boy_image"
@click="clickBoyImage"
v-else
:class="{'slide-in-left': !isBoySelected}"
src="/static/information/sex/pictures/shift_boy.png"
></image>
<!-- 女生按钮 -->
<image
class="girl_image"
@click="clickGirlImage"
v-if="!isGirlSelected"
:class="{'slide-in-right': !isGirlSelected}"
src="/static/information/sex/pictures/girl.png"
></image>
<image
class="girl_image"
@click="clickGirlImage"
v-else
:class="{'slide-in-right': !isGirlSelected}"
src="/static/information/sex/pictures/shift_girl.png"
></image>
<!-- 底部下一步按钮 -->
<image
class="button"
@click="goToNextPage"
src="/static/information/sex/pictures/button.png"
></image>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
return {
isBoySelected: false,
isGirlSelected: false,
};
},
methods: {
// 跳转到下一页
goToNextPage() {
const targetPage = this.isBoySelected
? "/pages/information/boy_height/boy_height"
: "/pages/information/girl_height/girl_height";
uni.navigateTo({
url: targetPage, // 根据选择跳转到对应页面
});
},
clickBoyImage() {
this.isBoySelected = true;
this.isGirlSelected = false; // 取消女生选中状态
},
clickGirlImage() {
this.isGirlSelected = true;
this.isBoySelected = false; // 取消男生选中状态
},
},
};
</script>
<style lang="scss">
@import "@/static/information/sex/css/sex.css";
</style>

11
pages/login/account_login/account_login.vue
Unescape View File

@ -36,7 +36,7 @@
</view>
<view class="forget_passage">忘了密码？</view>
<view class="button_box login_form_item">
<button name="submit_button" class="login_button">登录</button>
<button name="submit_button" class="login_button" @click="login">登录</button>
</view>
</view>
</form>
@ -68,10 +68,10 @@ const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"
const isPassagePage = ref(true); //是否是密码登录页的标志；
const passageWordsBottomBorder = computed(() => isPassagePage.value? "0.1rem solid #094ABC":"none"); //密码登录导航的下边框
const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1rem solid #094ABC"); //验证码登录导航的下边框
const isOpened = ref(true); //密码是否明文显示的标志
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");
//进入验证码登录页面
function toCaptchaEvent(){
isPassagePage.value = false;
@ -97,7 +97,12 @@ function sendCaptchaEvent(){
},1000)
};
}
function login(){
//TODO:登录操作向后端发送验证码的逻辑
uni.navigateTo({
url: '/pages/homepages/main/main'//登录成功后跳转的页面
})
}
//进入密码登录页面
function toPassageEvent(){
isPassagePage.value = true;

255
pages/login/register/register.vue
Unescape View File

@ -1,17 +1,260 @@
<template>
<view>
这是注册页面
<view class="register_box">
<!-- 返回图标 -->
<navigator url="/pages/login/account_login/account_login">
<image class="return_image" src="../../../static/login/register/pictures/return_icon.png"></image>
</navigator>
<!-- 欢迎文字 -->
<view class="welcom_words">Hi,欢迎加入</view>
<!-- 软件名称 -->
<view class="soft_name">Fit Journey</view>
<!-- 注册表单 -->
<form class="register_form">
<!-- 手机号输入 -->
<view class="phone_number_box register_form_item">
<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
</view>
<!-- 验证码输入 -->
<view class="captcha_box register_form_item">
<input type="text" class="captcha" placeholder="请输入你的验证码"/>
<button class="captcha_button" @click="sendCaptchaEvent"
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
{{captchaButtonText}}
</button>
</view>
<!-- 密码输入 -->
<view class="passage_box register_form_item">
<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
</view>
<!-- 确认密码输入 -->
<view class="passage_box register_form_item">
<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
</view>
<!-- 注册按钮 -->
<view class="register_button_box register_form_item">
<button class="register_button" @click="registerEvent">注册</button>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {};
<script setup>
import { ref, computed } from 'vue';
const isSendCaptcha = ref(false); //是否发送了验证码的标志
var codeTime = ref(0); //验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")
const isOpened_1 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png");
const isOpened_2 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png");
//进入验证码登录页面
function toCaptchaEvent(){
isPassagePage.value = false;
}
//发送验证码事件
function sendCaptchaEvent(){
console.log("send captcha");
if (codeTime.value>0){ //说明在倒计时
uni.showToast({ //弹出提示框
title: '不能重复获取',
icon:"none"
});
} else{ //说明没有发送，也没倒计时
codeTime.value = 60;
isSendCaptcha.value = true;
var timer = setInterval(()=>{
codeTime.value--;
if(codeTime.value<1){
clearInterval(timer);
isSendCaptcha.value = false;
codeTime.value = 0;
}
},1000)
};
}
// 判断密码是否要明文显示
function openEyesEvent_1(){
if (isOpened_1.value)
{
isOpened_1.value = false;
eyesStateIcon_1.value = "../../../static/login/register/pictures/openedeyes.png";
}
else
{
isOpened_1.value =true;
eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png";
}
}
// 判断确认的密码是否要明文显示
function openEyesEvent_2(){
if (isOpened_2.value)
{
isOpened_2.value = false;
eyesStateIcon_2.value = "../../../static/login/register/pictures/openedeyes.png";
}
else
{
isOpened_2.value =true;
eyesStateIcon_2.value = "../../../static/login/register/pictures/closedeyes.png";
}
}
//注册按钮点击事件
function registerEvent(){
//注册成功后跳转到选择性别页面
uni.navigateTo({
url: '/pages/information/sex/sex',
animationType: 'pop-in', //动画，但好像没作用
animationDuration: 200
});
}
</script>
<style lang="scss">
.register_box{
background-image: url("../../../static/login/register/pictures/background.png");
background-size: cover;
background-position: center;
height: 100vh;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
object-fit: contain;
// 返回图标
.return_image{
position: absolute;
left: 16.5%;
right: 80.1%;
top: 8.62%;
bottom: 89.09%;
width: 0.8rem;
height: auto;
object-fit: contain;
}
//欢迎文字
.welcom_words{
position: absolute;
left: 12.4%;
top: 30.8%;
font-family: 'PingFang SC';
font-size: 1.4rem;
color: #000364;
}
//软件名称
.soft_name{
position: absolute;
left: 12.4%;
top: 34.5%;
font-family: 'PingFang SC';
font-size: 1rem;
color: #000364;
}
//注册表单
.register_form{
position: absolute;
width: 74.5%;
height: 33.6%;
top: 40%;
//每个表单项
.register_form_item{
height: 15.6%;
margin-bottom: 5%;
}
//手机号盒子
.phone_number_box{
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
.phone_number{
height: 100%;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/phone_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 3% 50%;
font-size: 0.8rem;
}
}
// 验证码盒子
.captcha_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
// 输入框
.captcha{
height: 100%;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/captcha_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 4.5% 50%;
font-size: 0.8rem;
}
// 按钮
.captcha_button{
width: 5.5rem;
height: 1.9rem;
border-radius: 15px;
font-size: 0.8rem;
color: #000364;
position: absolute;
right: 5%;
}
}
//密码输入盒子；确认密码盒子
.passage_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 100%;
padding-left: 11%;
background-image: url("../../../static/login/register/pictures/lock_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 4.7% 50%;
font-size: 0.8rem;
}
.eyes{
width: 1rem;
height: 1rem;
position: absolute;
right: 9%;
}
}
//注册按钮
.register_button{
display: flex;
align-items: center;
justify-content: center;
margin-top: 8%;
height: 100%;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
// }
}
}
</style>

BIN
static/Group.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
static/Group1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

48
static/information/sex/css/sex.css
Unescape View File

@ -0,0 +1,48 @@
.background {
background-image: url("/static/information/sex/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; /* 为绝对定位子元素提供相对定位的上下文 */
}
.boy_image {
position: absolute; /* 绝对定位 */
width: 30%;
height: 16%;
bottom: 33%; /* 距离底部 20% 的位置 */
left: 10%; /* 水平居中 */
}
.girl_image {
position: absolute; /* 绝对定位 */
width: 30%;
height: 16%;
bottom: 33%; /* 距离底部 20% 的位置 */
right: 10%; /* 水平居中 */
}
.button {
position: absolute; /* 绝对定位 */
width: 90%;
height: 12%;
bottom: 2%; /* 距离底部 20% 的位置 */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 通过 translateX 使其居中 */
}
.boy_image,
.girl_image {
transition: transform 0.3s ease; /* 设置过渡效果 */
}
.boy_image:hover,
.girl_image:hover {
transform: scale(1.1); /* 鼠标悬浮时放大 */
}

BIN
static/information/sex/pictures/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
static/information/sex/pictures/boy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
static/information/sex/pictures/button.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
static/information/sex/pictures/girl.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
static/information/sex/pictures/shift_boy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
static/information/sex/pictures/shift_girl.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/login/register/pictures/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
static/login/register/pictures/captcha_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/login/register/pictures/closedeyes.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/login/register/pictures/lock_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/login/register/pictures/openedeyes.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/login/register/pictures/phone_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 725 B

BIN
static/login/register/pictures/return_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/pro.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/pros.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

Write Preview
Loading…
Cancel
Save