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

add:popup component, update:register/forget/change pages

Browse Source
master
xhhing 4 weeks ago
parent 9d2b0e22e0
commit 562283d89e
11 changed files with 435 additions and 161 deletions
Show Stats Download Patch File Download Diff File

4
App.vue
Unescape View File

@ -10,10 +10,12 @@ import tarbar_home from "@/components/tarbar_home/tarbar_home.vue";
import tarbar_user from "@/components/tarbar_user/tarbar_user.vue"; import tarbar_user from "@/components/tarbar_user/tarbar_user.vue";
import tarbar_community from "@/components/tarbar_community/tarbar_community.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 tarbar_puppy_chat from "@/components/tarbar_puppy_chat/tarbar_puppy_chat.vue";
import myPopUp from './components/my-pop-up/my-pop-up.vue';
export default { export default {
components: { components: {
tarbar tarbar,
myPopUp, //js变量名中不能有‘-’
}, },
onLaunch: function() { onLaunch: function() {
console.log('App Launch'); console.log('App Launch');

147
components/my-pop-up/my-pop-up.vue
Unescape View File

@ -0,0 +1,147 @@
<template>
<view class="pop_up_componnet" v-if="isOpened">
<!-- 遮罩层 -->
<view class="background_blur"></view>
<!-- 弹窗 -->
<view class="pop_up_box" >
<!-- 背景飞机 -->
<image class="plane_image" src="../../static/components/my_pop_up/plane.png"></image>
<!-- 关闭图标 -->
<image class="close_image" @click="onClose" src="../../static/components/my_pop_up/close_icon.png"></image>
<!-- 标题 -->
<view class="title">{{title}}</view>
<!-- 内容 -->
<view class="content">{{content}}</view>
<!-- 横线 -->
<image class="line" src="../../static/components/my_pop_up/line.png"></image>
<!-- 按钮 -->
<button class="button" @click="onButtonClick">确认</button>
</view>
</view>
</template>
<script>
import { ref } from 'vue'
export default{
name:'my-pop-up',
props:{
title:{
default:'提示',
},
content:{
default:'',
},
isOpened:{
default:true,
}
},
data(){
return{
}
},
methods:{
onButtonClick(){
this.$emit('onClick','onButtonclick');
},
onClose(){
this.$emit('onClose');
}
}
}
</script>
<style lang="scss">
.pop_up_componnet{
height: 100vh;
width: 100vw;
position: relative;
.background_blur{
height: 100%;
width: 100%;
float: left;
background-repeat: no-repeat;
background: #ffffff;
background-position: center;
background-size: cover;
opacity: 70%;
}
.pop_up_box{
background-color: #EAF5FF;
height: 13vh;
width: 50vw;
border-radius: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
.plane_image{
position: absolute;
left: 0%;
top: 0%;
width: 15.3vw;
height: 5vh;
}
.close_image{
position: absolute;
right: 10%;
top: 10%;
width: 0.7rem;
height: 0.7rem;
}
.title{
/* 错误 */
position: absolute;
left: 50%;
top: 10.74%;
transform: translateX(-50%);
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 1rem;
display: flex;
align-items: center;
color: #000364;
}
.content{
position: absolute;
left: 50%;
top: 41.32%;
transform: translateX(-50%);
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
font-size: 0.8rem;
display: flex;
align-items: center;
color: #5FA0D1;
}
.line{
position: absolute;
left: 4.93%;
top: 63.64%;
height: 0.1rem;
width: 90.14%;
opacity: 0.35;
}
.button{
position: absolute;
left: 50%;
top: 71.07%;
transform: translateX(-50%);
background: #7BC0FE;
border-radius: 8px;
color: #ffffff;
height: 3vh;
width: 37vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.button:active{
color: #4A69F7;
}
}
}
</style>

5
pages/homepages/home/home.vue
Unescape View File

@ -8,7 +8,10 @@
<script> <script>
export default { export default {
data() { data() {
return {}; return {
};
},
methods:{
} }
} }
</script> </script>

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

@ -34,6 +34,7 @@
</view> </view>
<view class="error_tip" v-if="isPassageError">*密码错误</view> <view class="error_tip" v-if="isPassageError">*密码错误</view>
</view> </view>
<!-- 验证码输入框 -->
<view class="captcha_box login_form_item" v-else> <view class="captcha_box login_form_item" v-else>
<view class="form_input_box captcha_input_box"> <view class="form_input_box captcha_input_box">
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/> <input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
@ -82,9 +83,9 @@ const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1
const isOpened = ref(true); //密码是否明文显示的标志 const isOpened = ref(true); //密码是否明文显示的标志
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png"); const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");
const isPhoneError = ref(true); const isPhoneError = ref(false);
const isPassageError = ref(true); const isPassageError = ref(false);
const isCaptchaError = ref(true); const isCaptchaError = ref(false);
//进入验证码登录页面 //进入验证码登录页面
function toCaptchaEvent(){ function toCaptchaEvent(){
@ -230,11 +231,6 @@ function forgetPassageClick(){
.account_box{ .account_box{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// .account_input_box{
// padding-left: 3%;
// padding-right: 3%;
// background-color: #D5E9FF;
// border-radius: 12px;
.account{ .account{
height: 5.5vh; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
@ -245,7 +241,6 @@ function forgetPassageClick(){
background-color: #D5E9FF; background-color: #D5E9FF;
font-size: 0.8rem; font-size: 0.8rem;
} }
// }
} }
.passage_box{ .passage_box{
display: flex; display: flex;

76
pages/login/change_password/change_password.vue
Unescape View File

@ -10,41 +10,62 @@
<form class="change_password_form"> <form class="change_password_form">
<!-- 密码输入 --> <!-- 密码输入 -->
<view class="passage_box change_password_form_item"> <view class="passage_box change_password_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/> <input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image> <image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
</view> </view>
<!-- <view class="error_tip" v-if="isPassageError">*密码错误</view> -->
</view>
<!-- 确认密码输入 --> <!-- 确认密码输入 -->
<view class="passage_box change_password_form_item"> <view class="passage_box change_password_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/> <input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image> <image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
</view> </view>
<view class="error_tip" v-if="isPassageSameError">*两次密码不相同</view>
</view>
<!-- 注册按钮 --> <!-- 注册按钮 -->
<view class="ensure_button_box change_password_form_item"> <view class="ensure_button_box change_password_form_item">
<button class="ensure_button" @click="ensureClickEvent">确认修改</button> <button class="ensure_button" @click="ensureClickEvent">确认修改</button>
</view> </view>
</form> </form>
<!-- 修改成功弹窗 -->
<my-pop-up
class="change_tip"
@onClick="onOpenUpClick"
@onClose="onClosePopUPClick"
:is-opened="isOpenPopUp"
:title="title"
:content="content"
></my-pop-up>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
const isPassageSameError = ref(false);
const title = '成功'; //弹窗标题
const content = '密码修改成功'; //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗
const isOpened_1 = ref(true); //输入框是否密码显示的标志 const isOpened_1 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png"); const eyesStateIcon_1 = ref("../../../static/login/change_password/pictures/closedeyes.png");
const isOpened_2 = ref(true); //输入框是否密码显示的标志 const isOpened_2 = ref(true); //输入框是否密码显示的标志
const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png"); const eyesStateIcon_2 = ref("../../../static/login/change_password/pictures/closedeyes.png");
// 判断密码是否要明文显示 // 判断密码是否要明文显示
function openEyesEvent_1(){ function openEyesEvent_1(){
if (isOpened_1.value) if (isOpened_1.value)
{ {
isOpened_1.value = false; isOpened_1.value = false;
eyesStateIcon_1.value = "../../../static/login/register/pictures/openedeyes.png"; eyesStateIcon_1.value = "../../../static/login/change_password/pictures/openedeyes.png";
} }
else else
{ {
isOpened_1.value =true; isOpened_1.value =true;
eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png"; eyesStateIcon_1.value = "../../../static/login/change_password/pictures/closedeyes.png";
} }
} }
// 判断确认的密码是否要明文显示 // 判断确认的密码是否要明文显示
@ -52,28 +73,38 @@ function openEyesEvent_2(){
if (isOpened_2.value) if (isOpened_2.value)
{ {
isOpened_2.value = false; isOpened_2.value = false;
eyesStateIcon_2.value = "../../../static/login/register/pictures/openedeyes.png"; eyesStateIcon_2.value = "../../../static/login/change_password/pictures/openedeyes.png";
} }
else else
{ {
isOpened_2.value =true; isOpened_2.value =true;
eyesStateIcon_2.value = "../../../static/login/register/pictures/closedeyes.png"; eyesStateIcon_2.value = "../../../static/login/change_password/pictures/closedeyes.png";
} }
} }
//确认修改按钮点击事件 //确认修改按钮点击事件
function ensureClickEvent(){ function ensureClickEvent(){
console.log('密码确认修改'); console.log('密码确认修改');
isOpenPopUp.value = true; //显示弹窗
}
function onOpenUpClick(){
//TODO:跳转到登录界面
uni.navigateTo({ uni.navigateTo({
url:"/pages/login/account_login/account_login" url: '/pages/login/account_login/account_login',
}) animationType: 'pop-in', //动画，但好像没作用
animationDuration: 200
});
}
function onClosePopUPClick(){
//TODO:关闭弹窗
isOpenPopUp.value = false;
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.change_password_box{ .change_password_box{
background-image: url("../../../static/login/register/pictures/background.png"); background-image: url("../../../static/login/change_password/pictures/background.png");
background-size: cover; background-size: cover;
background-position: center; background-position: center;
height: 100vh; height: 100vh;
@ -112,21 +143,35 @@ function ensureClickEvent(){
top: 40%; top: 40%;
//每个表单项 //每个表单项
.change_password_form_item{ .change_password_form_item{
height: 15.6%; height: auto;
margin-bottom: 5%; 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;
}
} }
//密码输入盒子；确认密码盒子 //密码输入盒子；确认密码盒子
.passage_box{ .passage_box{
display: flex;
flex-direction: column;
.passage_input_box{
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
.passage{ .passage{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/lock_icon.png"); background-image: url("../../../static/login/change_password/pictures/lock_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.8rem; background-size: 0.8rem;
background-position: 4.7% 50%; background-position: 4.7% 50%;
@ -136,7 +181,8 @@ function ensureClickEvent(){
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
position: absolute; position: absolute;
right: 9%; right: 13%;
}
} }
} }
//确认修改按钮 //确认修改按钮
@ -145,7 +191,7 @@ function ensureClickEvent(){
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 8%; margin-top: 8%;
height: 100%; height: 5.5vh;
border-radius: 12px; border-radius: 12px;
background-color: #4A69F7; background-color: #4A69F7;
color: #FFFCFC; color: #FFFCFC;

49
pages/login/forget_password/forget_password.vue
Unescape View File

@ -10,16 +10,22 @@
<form class="forget_passage_form"> <form class="forget_passage_form">
<!-- 手机号输入 --> <!-- 手机号输入 -->
<view class="phone_number_box forget_passage_form_item"> <view class="phone_number_box forget_passage_form_item">
<view class="form_input_box">
<input type="text" class="phone_number" placeholder="请输入你的电话号码"/> <input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
</view> </view>
<view class="error_tip" v-if="isPhoneError">*该手机号未注册</view>
</view>
<!-- 验证码输入 --> <!-- 验证码输入 -->
<view class="captcha_box forget_passage_form_item"> <view class="captcha_box forget_passage_form_item">
<view class="form_input_box captcha_input_box">
<input type="text" class="captcha" placeholder="请输入你的验证码"/> <input type="text" class="captcha" placeholder="请输入你的验证码"/>
<button class="captcha_button" @click="sendCaptchaEvent" <button class="captcha_button" @click="sendCaptchaEvent"
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}"> :style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
{{captchaButtonText}} {{captchaButtonText}}
</button> </button>
</view> </view>
<view class="error_tip" v-if="isCaptchaError">*验证码错误</view>
</view>
<!-- 下一步按钮 --> <!-- 下一步按钮 -->
<view class="forget_passage_button_box forget_passage_form_item"> <view class="forget_passage_button_box forget_passage_form_item">
<button class="forget_passage_button" @click="nextClickEvent">下一步</button> <button class="forget_passage_button" @click="nextClickEvent">下一步</button>
@ -31,6 +37,9 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
const isPhoneError = ref(false);
const isCaptchaError = ref(false);
const isSendCaptcha = ref(false); //是否发送了验证码的标志 const isSendCaptcha = ref(false); //是否发送了验证码的标志
var codeTime = ref(0); //验证码的倒计时 var codeTime = ref(0); //验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色 const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
@ -111,44 +120,61 @@ function nextClickEvent(){
top: 40%; top: 40%;
//每个表单项 //每个表单项
.forget_passage_form_item{ .forget_passage_form_item{
height: 15.6%; // height: 15.6%;
// margin-bottom: 5%;
// }
height: auto;
margin-bottom: 5%; margin-bottom: 5%;
} .form_input_box{
//手机号盒子
.phone_number_box{
padding-left: 3%; padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; 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{ .phone_number{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/phone_icon.png"); background-image: url("../../../static/login/forget_password/pictures/phone_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.8rem; background-size: 0.8rem;
background-position: 3% 50%; background-position: 3% 50%;
background-color: #D5E9FF;
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
// 验证码盒子 // 验证码盒子
.captcha_box{ .captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 3%; padding-left: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
// 输入框
.captcha{ .captcha{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/captcha_icon.png"); background-image: url("../../../static/login/forget_password/pictures/captcha_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.8rem; background-size: 0.8rem;
background-position: 4.5% 50%; background-position: 4.5% 50%;
font-size: 0.8rem; font-size: 0.8rem;
} }
// 按钮
.captcha_button{ .captcha_button{
/* 发送验证码 */
width: 5.5rem; width: 5.5rem;
height: 1.9rem; height: 1.9rem;
border-radius: 15px; border-radius: 15px;
@ -158,13 +184,14 @@ function nextClickEvent(){
right: 5%; right: 5%;
} }
} }
}
//下一个按钮 //下一个按钮
.forget_passage_button{ .forget_passage_button{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 8%; margin-top: 8%;
height: 100%; height: 5.5vh;
border-radius: 12px; border-radius: 12px;
background-color: #4A69F7; background-color: #4A69F7;
color: #FFFCFC; color: #FFFCFC;

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

@ -12,37 +12,66 @@
<form class="register_form"> <form class="register_form">
<!-- 手机号输入 --> <!-- 手机号输入 -->
<view class="phone_number_box register_form_item"> <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" placeholder="请输入你的电话号码"/>
</view> </view>
<view class="error_tip" v-if="isPhoneError">*该手机号不存在</view>
</view>
<!-- 验证码输入 --> <!-- 验证码输入 -->
<view class="captcha_box register_form_item"> <view class="captcha_box register_form_item">
<input type="text" class="captcha" placeholder="请输入你的验证码"/> <view class="form_input_box captcha_input_box">
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
<button class="captcha_button" @click="sendCaptchaEvent" <button class="captcha_button" @click="sendCaptchaEvent"
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}"> :style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
{{captchaButtonText}} {{captchaButtonText}}
</button> </button>
</view> </view>
<view class="error_tip" v-if="isCaptchaError">*验证码错误</view>
</view>
<!-- 密码输入 --> <!-- 密码输入 -->
<view class="passage_box register_form_item"> <view class="passage_box register_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/> <input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image> <image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
</view> </view>
<!-- <view class="error_tip" v-if="isPassageError">*密码错误</view> -->
</view>
<!-- 确认密码输入 --> <!-- 确认密码输入 -->
<view class="passage_box register_form_item"> <view class="passage_box register_form_item">
<view class="form_input_box passage_input_box">
<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/> <input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image> <image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
</view> </view>
<view class="error_tip" v-if="isPassageSameError">*两次密码不相同</view>
</view>
<!-- 注册按钮 --> <!-- 注册按钮 -->
<view class="register_button_box register_form_item"> <view class="register_button_box register_form_item">
<button class="register_button" @click="registerEvent">注册</button> <button class="register_button" @click="registerEvent">注册</button>
</view> </view>
</form> </form>
<!-- 成功弹窗 -->
<my-pop-up
class="register_tip"
@onClick="onOpenUpClick"
@onClose="onClosePopUPClick"
:is-opened="isOpenPopUp"
:title="title"
:content="content"
></my-pop-up>
</view> </view>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
const isCaptchaError = ref(false);
const isPhoneError = ref(false);
const isPassageSameError = ref(false);
const title = '成功'; //弹窗标题
const content = '注册成功'; //弹窗内容
const isOpenPopUp = ref(false);//是否显示弹窗
const isSendCaptcha = ref(false); //是否发送了验证码的标志 const isSendCaptcha = ref(false); //是否发送了验证码的标志
var codeTime = ref(0); //验证码的倒计时 var codeTime = ref(0); //验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色 const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
@ -105,13 +134,21 @@ function openEyesEvent_2(){
//注册按钮点击事件 //注册按钮点击事件
function registerEvent(){ function registerEvent(){
//注册成功后跳转到选择性别页面 //
isOpenPopUp.value = true; //显示弹窗
}
function onOpenUpClick(){
//TODO:跳转到登录界面
uni.navigateTo({ uni.navigateTo({
url: '/pages/login/account_login/account_login', url: '/pages/login/account_login/account_login',
animationType: 'pop-in', //动画，但好像没作用 animationType: 'pop-in', //动画，但好像没作用
animationDuration: 200 animationDuration: 200
}); });
} }
function onClosePopUPClick(){
//TODO:关闭弹窗
isOpenPopUp.value = false;
}
</script> </script>
@ -165,35 +202,49 @@ function registerEvent(){
top: 40%; top: 40%;
//每个表单项 //每个表单项
.register_form_item{ .register_form_item{
height: 15.6%; height: auto;
margin-bottom: 5%; margin-bottom: 5%;
} .form_input_box{
//手机号盒子
.phone_number_box{
padding-left: 3%; padding-left: 3%;
padding-right: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; 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{ .phone_number{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/phone_icon.png"); background-image: url("../../../static/login/register/pictures/phone_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0.8rem; background-size: 0.8rem;
background-position: 3% 50%; background-position: 3% 50%;
background-color: #D5E9FF;
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
// 验证码盒子 // 验证码盒子
.captcha_box{ .captcha_box{
display: flex;
flex-direction: column;
.captcha_input_box{
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 3%; padding-left: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
// 输入框
.captcha{ .captcha{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/captcha_icon.png"); background-image: url("../../../static/login/register/pictures/captcha_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -201,8 +252,8 @@ function registerEvent(){
background-position: 4.5% 50%; background-position: 4.5% 50%;
font-size: 0.8rem; font-size: 0.8rem;
} }
// 按钮
.captcha_button{ .captcha_button{
/* 发送验证码 */
width: 5.5rem; width: 5.5rem;
height: 1.9rem; height: 1.9rem;
border-radius: 15px; border-radius: 15px;
@ -212,16 +263,19 @@ function registerEvent(){
right: 5%; right: 5%;
} }
} }
}
//密码输入盒子；确认密码盒子 //密码输入盒子；确认密码盒子
.passage_box{ .passage_box{
display: flex;
flex-direction: column;
.passage_input_box{
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 3%;
background-color: #D5E9FF; background-color: #D5E9FF;
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
.passage{ .passage{
height: 100%; height: 5.5vh;
padding-left: 11%; padding-left: 11%;
background-image: url("../../../static/login/register/pictures/lock_icon.png"); background-image: url("../../../static/login/register/pictures/lock_icon.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -233,7 +287,8 @@ function registerEvent(){
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
position: absolute; position: absolute;
right: 9%; right: 13%;
}
} }
} }
//注册按钮 //注册按钮
@ -242,14 +297,13 @@ function registerEvent(){
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 8%; margin-top: 8%;
height: 100%; height: 5.5vh;
border-radius: 12px; border-radius: 12px;
background-color: #4A69F7; background-color: #4A69F7;
color: #FFFCFC; color: #FFFCFC;
text-align: center; text-align: center;
font-size: 1.2rem; font-size: 1.2rem;
} }
// }
} }
} }

BIN
static/components/my_pop_up/close_icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 835 B

BIN
static/components/my_pop_up/line.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 B

BIN
static/components/my_pop_up/plane.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

6
unpackage/dist/cache/.vite/deps/_metadata.json vendored
Unescape View File

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