完成首页界面

master
Gary 6 days ago
parent ec035860b7
commit c5230c08dc

@ -2,11 +2,13 @@
<template>
<view class="app-container">
</view>
</template>
<script>
import my_exercise_plan from "@/components/my_exercise_plan/my_exercise_plan.vue";
import my_recipe_plan from "@/components/my_recipe_plan/my_recipe_plan.vue";
import tarbar from './components/tarbar/tarbar.vue';
import tarbar_home from "@/components/tarbar_home/tarbar_home.vue";
import tarbar_user from "@/components/tarbar_user/tarbar_user.vue";
@ -23,11 +25,11 @@ export default {
globalData: {
//
fit_journey_basic_address: 'http://47.122.61.54:8086',//TODO:
fit_journey_community_address: 'http://localhost:8082',
fit_journey_ai_address: 'http://127.0.0.1:8081',
fit_journey_login_address: 'http://localhost:8084',
fit_journey_recipe_address: 'http://localhost:8083',
fit_journey_exercise_address: 'http://localhost:8086',
fit_journey_community_address: 'http://47.122.61.54:8082',//TODO:
fit_journey_ai_address: 'http://47.122.61.54:8080',//TODO
fit_journey_login_address: 'http://127.0.0.1:8084',//TODO:
fit_journey_recipe_address: 'http://47.122.61.54:8087',//TODO:
fit_journey_exercise_address: 'http://47.122.61.54:8088',//TODO:
fit_journey_admin_address: 'http://47.122.61.54:8085',//TODO:
// TODO: token localStorage

@ -0,0 +1,60 @@
<template>
<view :class="['container', extend_class]">
<!--背景图 -->
<image src="@/static/components/dictionary/pictures/background.png" class="background"></image>
<!--按钮和文字 -->
<image class="button" src="@/static/components/dictionary/pictures/button.png" @click="go_to_page"></image>
</view>
</template>
<script>
export default {
name: "dictionary",
data() {
return {};
},
props: {
extend_class: { // class
type: String,
default: ''
}
},
methods: {
go_to_page() {
uni.navigateTo({
url: '/pages/homepages/homes/ai_recongize_fruit/ai_recongize_fruit'
})
}
}
}
</script>
<style lang="scss">
.container {
position: absolute;
width: 50%;
height: 30%;
}
.background_image {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
width: 40%;
height: 18%;
left: 90%;
top: 80%;
}
</style>

@ -0,0 +1,60 @@
<template>
<view :class="['container', extend_class]">
<!--背景图 -->
<image src="@/static/components/my_exercise_plan/pictures/background.png" class="background_image"></image>
<!--按钮和文字 -->
<image class="button" src="@/static/components/my_exercise_plan/pictures/text_and_button.png" @click="go_to_page"></image>
</view>
</template>
<script>
export default {
name: "my_exercise_plan",
data() {
return {};
},
props: {
extend_class: { // class
type: String,
default: ''
}
},
methods: {
go_to_page() {
uni.navigateTo({
url: '/pages/homepages/homes/ai_recongize_fruit/ai_recongize_fruit'
})
}
}
}
</script>
<style lang="scss">
.container {
position: absolute;
width: 100%;
height: 28%;
}
.background_image {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
width: 40%;
height: 18%;
left: 50%;
top: 62%;
}
</style>

@ -0,0 +1,60 @@
<template>
<view :class="['container', extend_class]">
<!--背景图 -->
<image src="/static/components/my_recipe_plan/pictures/background.png" class="background_image"></image>
<!--按钮和文字 -->
<image class="button" src="/static/components/my_recipe_plan/pictures/text_and_button.png" @click="go_to_page"></image>
</view>
</template>
<script>
export default {
name: "my_recipe_plan",
data() {
return {};
},
props: {
extend_class: { // class
type: String,
default: ''
}
},
methods: {
go_to_page() {
uni.navigateTo({
url: '/pages/homepages/homes/ai_recongize_fruit/ai_recongize_fruit'
})
}
}
}
</script>
<style lang="scss">
.container {
position: absolute;
width: 100%;
height: 28%;
}
.background_image {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
width: 40%;
height: 18%;
left: 50%;
top: 62%;
}
</style>

@ -0,0 +1,60 @@
<template>
<view :class="['container', extend_class]">
<!--背景图 -->
<image src="@/static/components/read/pictures/background.png" class="background"></image>
<!--按钮和文字 -->
<image class="button" src="@/static/components/read/pictures/button.png" @click="go_to_page"></image>
</view>
</template>
<script>
export default {
name: "read",
data() {
return {};
},
props: {
extend_class: { // class
type: String,
default: ''
}
},
methods: {
go_to_page() {
uni.navigateTo({
url: '/pages/homepages/homes/ai_recongize_fruit/ai_recongize_fruit'
})
}
}
}
</script>
<style lang="scss">
.container {
position: absolute;
width: 100%;
height: 28%;
}
.background_image {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
width: 40%;
height: 18%;
left: 50%;
top: 62%;
}
</style>

@ -1,6 +1,6 @@
<!-- TabBar.vue -->
<template>
<view>
<view :class="['container', extend_class]">
<view class="bar_background"></view>
<!-- Home 图标 -->
@ -55,6 +55,12 @@ export default {
is_user_picked_up: false
};
},
props: {
extend_class: { // class
type: String,
default: ''
}
},
methods: {
pick_up_home() {

@ -1,5 +1,6 @@
{
"pages": [
/*-----------------------------------------------------------------------------------------*/
/* {
"path": "pages/transition/page1/page1",
"style": {
@ -43,10 +44,9 @@
}
},*/
/*------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*
{
/* {
"path": "pages/login/account_login/account_login",
"style": {
"navigationStyle": "custom"
@ -71,16 +71,16 @@
}
},*/
/*------------------------------------------------------------------------------------------------------------------*/
/*
{
/*--------------------------------------------------------------------------------------------------------------------*/
/* {
"path": "pages/information/sex/sex",
"style": {
"navigationStyle": "custom"
}
},*/
/*------------------------------------------------------------------------------------------------------------*/
/*
{
/*------------------------------------------------------------------------------------------------------*/
/* {
"path": "pages/information/boy_weight_start/boy_weight_start",
"style": {
"navigationStyle": "custom"
@ -99,6 +99,7 @@
}
},*/
/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/* {
"path": "pages/information/boy_height_start/boy_height_start",
"style": {
@ -118,6 +119,7 @@
}
},*/
/*-----------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/* {
"path": "pages/information/girl_height_start/girl_height_start",
"style": {
@ -136,7 +138,8 @@
"navigationStyle": "custom"
}
},*/
/*------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------*/
/* {
"path": "pages/information/girl_weight_start/girl_weight_start",
"style": {
@ -156,13 +159,15 @@
}
},*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------使--------------------------------------------------*/
/* {
"path": "pages/information/purpose/purpose",
"style": {
"navigationStyle": "custom"
}
},*/
/*-------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------使-----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------*/
/*{
"path": "pages/transition/page8/page8",
"style": {
@ -170,13 +175,26 @@
}
},*/
/*--------------------------------------------------------------------------------------------------------------*/
/* {
{
"path": "pages/homepages/homes/home/home",
"style": {
"navigationStyle": "custom"
}
},
*/
}
/* {
"path": "pages/homepages/homes/my_recipe_plan/my_recipe_plan",
"style": {
"navigationStyle": "custom"
}
},*/
/* {
"path": "pages/homepages/temp/temp",
"style": {
"navigationStyle": "custom"
}
}*/
/*{
"path": "pages/homepages/homes/ai_recognize_fruit/ai_recognize_fruit",
@ -212,7 +230,7 @@
"navigationStyle": "custom"
}
}*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/
/*
{
"path": "pages/homepages/user/user_information/user_information",
@ -253,7 +271,7 @@
}
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/
{
/* {
"path" : "pages/homepages/homes/dictionary/orange/orange",
"style" :
{
@ -435,10 +453,11 @@
{
"navigationStyle": "custom"
}
}
}*/
/*------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
],
"uniIdRouter": {},
"tabBar": null

@ -1,16 +1,47 @@
<template>
<view>
<text>这个是home界面</text>
<!-- <ai_recongize_fruit class="ai_recognize_fruit"></ai_recongize_fruit>-->
<!-- <ai_recongize_plan class="ai_recognize_fruit"></ai_recongize_plan>-->
<!-- <ai_recongize_hot class="ai_recognize_fruit"></ai_recongize_hot>-->
<!-- <ai_recongize_recipe class="ai_recognize_fruit"></ai_recongize_recipe>-->
<view class="background">
<image class="home_text" src="@/static/homepages/homes/home/pictures/home_text.png">首页</image>
<!--轮播图显示效果 -->
<image class="swiper" src="@/static/homepages/homes/home/pictures/puppy.png"></image>
<!--轮播点显示效果 -->
<image class="swipe_dot" src="@/static/homepages/homes/home/pictures/swipe_dot.png"></image>
<!--横线显示效果 -->
<image class="line" src="@/static/homepages/homes/home/pictures/line.png"></image>
<!--饮食专区文字 -->
<image class="recipe_area_word" src="@/static/homepages/homes/home/pictures/recipe_area.png"></image>
<!--饮食专区 -->
<view class="recipe_area">
<ai_recongize_recipe class="ai_recognize_recipe"></ai_recongize_recipe>
<ai_recongize_hot class="ai_recognize_hot"></ai_recongize_hot>
<ai_recongize_fruit class="ai_recognize_fruit"></ai_recongize_fruit>
<my_recipe_plan class="my_recipe_plan"></my_recipe_plan>
</view>
<!--运动专区文字 -->
<image class="sport_text" src="@/static/homepages/homes/home/pictures/sport_text.png"></image>
<view class="sport_area">
<ai_recongize_plan class="ai_recognize_plan"></ai_recongize_plan>
<my_exercise_plan class="my_exercise_plan"></my_exercise_plan>
</view>
<!--阅读专区文字 -->
<image class="read_text" src="@/static/homepages/homes/home/pictures/read_text.png"></image>
<view class="read_area">
<!-- 知识图谱-->
<image class="dictionary_background" src="@/static/components/dictionary/pictures/background.png"></image>
<image class="dictionary_button" src="@/static/components/dictionary/pictures/button.png"></image>
<!-- 书籍阅读-->
<image class="read_background" src="@/static/components/read/pictures/background.png"></image>
<image class="read_button" src="/static/components/read/pictures/button.png"></image>
</view>
<!--空白区域 -->
<view class="block_area"></view>
<!--底部导航栏 -->
<view class="bar_home">
<tarbar_home class="bar"></tarbar_home>
</view>
<tarbar_home ></tarbar_home>
</view>
</template>
<script>
export default {
data() {
@ -21,11 +52,6 @@ export default {
}
}
</script>
<style lang="scss">
.ai_recognize_fruit{
width: 90%;
height: 30%;
left: 5%;
}
@import "@/static/homepages/homes/home/css/home.scss";
</style>

@ -0,0 +1,17 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -0,0 +1,18 @@
<template>
<!--临时测试页面-->
<view>
<dictionary></dictionary>
</view>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
<style lang="scss">
</style>

@ -45,7 +45,7 @@
</view>
<view class="error_tip" v-if="isCaptchaError">*</view>
</view>
<view class="forget_passage" @click="forgetPassageClick"></view>
<view class="forget_passage" @click="forgetPassageClick"></view>
<view class="button_box login_form_item">
<button name="submit_button" class="login_button" @click="login"></button>
</view>
@ -69,6 +69,7 @@
<script setup>
import { ref, computed } from 'vue';
import app from "@/App.vue";
const isSendCaptcha = ref(false); //
var codeTime = ref(0); //
@ -113,7 +114,31 @@ function sendCaptchaEvent(){
};
}
function login(){
//TODO:
//
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode';
console.log(String(phoneNumber.value));
//
uni.request({
url: serverAddress,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
phone: phoneNumber.value
},
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.log("请求失败", err);
}
});
//TODO:
console.log("login");
uni.navigateTo({
url: '/pages/information/sex/sex'//
})
@ -149,225 +174,5 @@ function forgetPassageClick(){
</script>
<style lang="scss">
.background{
background-image: url("../../../static/login/account_login/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;
.welcome{
position: absolute;
width: 62%;
height: 19%;
top: 20%;
object-fit: contain;
}
.login_part{
/* 登录 */
position: absolute;
width: 76%;
height: 30%;
top: 41%;
.login_ways{
position: absolute;
width: 58%;
height: 8.1%;
display: flex;
.account_words{
height: 90%;
margin-right: 5%;
padding-bottom: 0.5rem;
border-bottom: 1rem solid #094ABC;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 1rem;
text-align: center;
color: #000364;
}
.captcha_words{
height: 90%;
padding-bottom: 0.5rem;
margin-left: 3%;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 1rem;
text-align: center;
color: #000364;
}
}
.login_form{
position: absolute;
width: 97.8%;
height: 73.1%;
top: 20%;
.form_input{
position: absolute;
width: 100%;
height: 100%;
.login_form_item{
height: auto;
margin-bottom: 5%;
.form_input_box{
padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF;
border-radius: 12px;
}
.error_tip{
margin-top: 0.6vh;
padding-left: 3%;
font-size: 0.8rem;
color: #FF1E1E;
}
}
.account_box{
display: flex;
flex-direction: column;
.account{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 3% 50%;
background-color: #D5E9FF;
font-size: 0.8rem;
}
}
.passage_box{
display: flex;
flex-direction: column;
.passage_input_box{
display: flex;
align-items: center;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/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: 13%;
}
}
}
.captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.captcha{
height: 5.5vh;
padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/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%;
}
}
}
.forget_passage{
margin-bottom: 0.4rem;
margin-top: 1.2rem;
text-align: right;
color: #000364;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 24rem;
font-size: 0.8rem;
// line-height: 24px;
}
.login_button{
display: flex;
align-items: center;
justify-content: center;
height: 5.5vh;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
}
}
}
.goto_register{
position: absolute;
width: 14%;
height: 2%;
top: 78%;
left: 43%;
object-fit: contain;
}
.otherways_part{
position: absolute;
width: 59%;
height: 10.9%;
top: 82%;
.otherways_tips{
position: absolute;
width: 98.6%;
height: 24%;
top: 0%;
}
.two_ways{
/* 图标 */
position: absolute;
width: 46.9%;
height: 50%;
left: 26.6%;
top: 35%;
display: flex;
justify-content: center;
align-items: center;
.qq_icon{
/* qq图标 */
position: absolute;
width: 2.6rem;
height: 2.6rem;
left: 0%;
}
.weixin_icon{
/* 微信图标 */
position: absolute;
width: 2.2rem;
height: 2.2rem;
left: 50%;
}
}
}
}
@import "@/static/login/account_login/css/acccount_login.scss";
</style>

@ -13,14 +13,14 @@
<!-- 手机号输入 -->
<view class="phone_number_box register_form_item">
<view class="form_input_box">
<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
<input type="text" class="phone_number" v-model="phoneNumber" placeholder="请输入你的电话号码"/>
</view>
<view class="error_tip" v-if="isPhoneError">*</view>
</view>
<!-- 验证码输入 -->
<view class="captcha_box register_form_item">
<view class="form_input_box captcha_input_box">
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
<input class="captcha" name="captcha" v-model="code" type="text" placeholder="请输入你的验证码"/>
<button class="captcha_button" @click="sendCaptchaEvent"
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
{{captchaButtonText}}
@ -63,10 +63,13 @@
<script setup>
import { ref, computed } from 'vue';
import app from "@/App.vue";
const phoneNumber = ref("");//
const code= ref("");//
const isCaptchaError = ref(false);
const isPhoneError = ref(false);
const isPassageSameError = ref(false);
const password = ref("13959885560");
const title = '成功'; //
const content = '注册成功'; //
@ -102,7 +105,34 @@ function sendCaptchaEvent(){
codeTime.value = 0;
}
},1000)
};
}
//
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode';
console.log(String(phoneNumber.value));
//
uni.request({
url: serverAddress,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
phone: phoneNumber.value
},
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.log("请求失败", err);
}
});
}
//
@ -134,11 +164,32 @@ function openEyesEvent_2(){
//
function registerEvent(){
//
//
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/registerByPhone';
//
uni.request({
url: serverAddress,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
phone: phoneNumber.value,
code: code.value,
password: "13959885560"
},
success: (res) => {
console.log(res.data);
//TODO:(code==200)
},
fail: (err) => {
console.log("请求失败", err);
}
});
isOpenPopUp.value = true; //
}
function onOpenUpClick(){
//TODO:
uni.navigateTo({
url: '/pages/login/account_login/account_login',
animationType: 'pop-in', //
@ -153,158 +204,5 @@ function onClosePopUPClick(){
</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: auto;
margin-bottom: 5%;
.form_input_box{
padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF;
border-radius: 12px;
}
.error_tip{
margin-top: 0.6vh;
padding-left: 3%;
font-size: 0.8rem;
color: #FF1E1E;
}
}
//
.phone_number_box{
display: flex;
flex-direction: column;
.phone_number{
height: 5.5vh;
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%;
background-color: #D5E9FF;
font-size: 0.8rem;
}
}
//
.captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.captcha{
height: 5.5vh;
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;
flex-direction: column;
.passage_input_box{
display: flex;
align-items: center;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 5.5vh;
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: 13%;
}
}
}
//
.register_button{
display: flex;
align-items: center;
justify-content: center;
margin-top: 8%;
height: 5.5vh;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
}
}
@import '@/static/login/register/css/register.scss';
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 458 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 542 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

@ -0,0 +1,179 @@
.background {
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.home_text{
position: absolute;
top: 5%;
height: 27%;
width: 100%;
left: -13%;
}
.swiper{
position: absolute;
top: 15%;
height: 28%;
width: 98%;
left: 1%;
}
.swipe_dot{
position: absolute;
top: 41%;
height: 5%;
width: 44%;
left: 28%;
}
.line{
position: absolute;
top: 48%;
height: 0.3%;
width: 70%;
left: 15%;
}
.recipe_area_word{
position: absolute;
top: 53%;
height: 3.7%;
width: 30%;
left: 6%;
}
.recipe_area {
background-color: #E0E0BA;
position: absolute;
top: 58%;
height: 85%;
width: 90%;
left: 5%;
border-radius: 30px;
.ai_recognize_recipe {
position: absolute;
top: -5%;
width: 105%;
height: 32%;
left: -2.5%;
}
.ai_recognize_hot {
position: absolute;
top: 24%;
width: 105%;
height: 28%;
left: -2.5%;
}
.ai_recognize_fruit {
position: absolute;
top: 46%;
width: 105%;
height: 30%;
left: -2.5%;
}
.my_recipe_plan {
position: absolute;
top: 71%;
width: 105%;
height: 30%;
left: -2.5%;
}
}
.sport_text{
position: absolute;
top: 146%;
height: 3.7%;
width: 30%;
left: 6%;
}
.sport_area{
background-color: #A9D0AE;
position: absolute;
top: 151%;
height: 50%;
width: 90%;
left: 5%;
border-radius: 30px;
.ai_recognize_plan{
position: absolute;
top: -1%;
width: 105%;
height: 50%;
left: -2.5%;
}
.my_exercise_plan{
position: absolute;
top: 45%;
width: 105%;
height: 50%;
left: -2.5%;
}
}
.read_text{
position: absolute;
top: 203%;
height: 3.7%;
width: 30%;
left: 6%;
}
.read_area{
background-color: #E7ABAB;
position: absolute;
top: 208%;
height: 40%;
width: 90%;
left: 5%;
border-radius: 30px;
.dictionary_background{
position: absolute;
top: 0;
width: 50%;
height: 90%;
left: -2.5%;
}
.dictionary_button{
position: absolute;
top: 65%;
width: 10%;
height: 10%;
left: 27%;
}
.read_background{
position: absolute;
top: 0;
width: 50%;
height: 90%;
left: 52.5%;
}
.read_button{
position: absolute;
top: 65%;
width: 10%;
height: 10%;
left: 83%;
}
}
.block_area{
position: absolute;
top: 258%;
height: 5%;
width: 100%;
}
.bar_home {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #7bc0fe; /* 这可以帮助你确认元素是否正确显示 */
height: 10vh;
.bar{
position: absolute;
width: 100%;
height: 100%;
z-index: 1001;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -0,0 +1,221 @@
.background{
background-image: url("@/static/login/account_login/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;
.welcome{
position: absolute;
width: 62%;
height: 19%;
top: 20%;
object-fit: contain;
}
.login_part{
/* 登录 */
position: absolute;
width: 76%;
height: 30%;
top: 41%;
.login_ways{
position: absolute;
width: 58%;
height: 8.1%;
display: flex;
.account_words{
height: 90%;
margin-right: 5%;
padding-bottom: 0.5rem;
border-bottom: 1rem solid #094ABC;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 1rem;
text-align: center;
color: #000364;
}
.captcha_words{
height: 90%;
padding-bottom: 0.5rem;
margin-left: 3%;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 1rem;
text-align: center;
color: #000364;
}
}
.login_form{
position: absolute;
width: 97.8%;
height: 73.1%;
top: 20%;
.form_input{
position: absolute;
width: 100%;
height: 100%;
.login_form_item{
height: auto;
margin-bottom: 5%;
.form_input_box{
padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF;
border-radius: 12px;
}
.error_tip{
margin-top: 0.6vh;
padding-left: 3%;
font-size: 0.8rem;
color: #FF1E1E;
}
}
.account_box{
display: flex;
flex-direction: column;
.account{
height: 5.5vh;
padding-left: 11%;
background-image: url("@/static/login/account_login/login_part/phone_icon.png");
background-repeat: no-repeat;
background-size: 0.8rem;
background-position: 3% 50%;
background-color: #D5E9FF;
font-size: 0.8rem;
}
}
.passage_box{
display: flex;
flex-direction: column;
.passage_input_box{
display: flex;
align-items: center;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 5.5vh;
padding-left: 11%;
background-image: url("@/static/login/account_login/login_part/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: 13%;
}
}
}
.captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.captcha{
height: 5.5vh;
padding-left: 11%;
background-image: url("@/static/login/account_login/login_part/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%;
}
}
}
.forget_passage{
margin-bottom: 0.4rem;
margin-top: 1.2rem;
text-align: right;
color: #000364;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 24rems;
font-size: 0.8rem;
// line-height: 24px;
}
.login_button{
display: flex;
align-items: center;
justify-content: center;
height: 5.5vh;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
}
}
}
.goto_register{
position: absolute;
width: 14%;
height: 2%;
top: 78%;
left: 43%;
object-fit: contain;
}
.otherways_part{
position: absolute;
width: 59%;
height: 10.9%;
top: 82%;
.otherways_tips{
position: absolute;
width: 98.6%;
height: 24%;
top: 0%;
}
.two_ways{
/* 图标 */
position: absolute;
width: 46.9%;
height: 50%;
left: 26.6%;
top: 35%;
display: flex;
justify-content: center;
align-items: center;
.qq_icon{
/* qq图标 */
position: absolute;
width: 2.6rem;
height: 2.6rem;
left: 0%;
}
.weixin_icon{
/* 微信图标 */
position: absolute;
width: 2.2rem;
height: 2.2rem;
left: 50%;
}
}
}
}

@ -0,0 +1,153 @@
.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: auto;
margin-bottom: 5%;
.form_input_box{
padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF;
border-radius: 12px;
}
.error_tip{
margin-top: 0.6vh;
padding-left: 3%;
font-size: 0.8rem;
color: #FF1E1E;
}
}
//
.phone_number_box{
display: flex;
flex-direction: column;
.phone_number{
height: 5.5vh;
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%;
background-color: #D5E9FF;
font-size: 0.8rem;
}
}
//
.captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex;
align-items: center;
padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.captcha{
height: 5.5vh;
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;
flex-direction: column;
.passage_input_box{
display: flex;
align-items: center;
background-color: #D5E9FF;
border-radius: 12px;
position: relative;
.passage{
height: 5.5vh;
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: 13%;
}
}
}
//
.register_button{
display: flex;
align-items: center;
justify-content: center;
margin-top: 8%;
height: 5.5vh;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
font-size: 1.2rem;
}
}
}

@ -1,8 +1,8 @@
{
"hash": "06ac3fce",
"configHash": "25b19c2c",
"lockfileHash": "e3b0c442",
"browserHash": "fd8ea9c9",
"hash": "0aaf698d",
"configHash": "cc60d382",
"lockfileHash": "22a0e42d",
"browserHash": "89d9bfb2",
"optimized": {},
"chunks": {}
}
Loading…
Cancel
Save