From 548a09ade4585cfdae8a4a4dfb18a66f9fdd31c6 Mon Sep 17 00:00:00 2001
From: xhhing <1370112271@qq.com>
Date: Mon, 28 Oct 2024 12:47:12 +0800
Subject: [PATCH] add:upadae account_login
---
pages/login/account_login/account_login.vue | 139 +++++++-----------
.../dist/cache/.vite/deps/_metadata.json | 6 +-
2 files changed, 60 insertions(+), 85 deletions(-)
diff --git a/pages/login/account_login/account_login.vue b/pages/login/account_login/account_login.vue
index 54f9143..c3d4330 100644
--- a/pages/login/account_login/account_login.vue
+++ b/pages/login/account_login/account_login.vue
@@ -7,11 +7,11 @@
<!-- 导航栏 -->
<view class="login_ways">
<view class="account_words" @click="toPassageEvent"
- :style="{borderBottomColor:passageWordsBottomColor, borderBottom:passageWordsBottomBorder}">
+ :style="{borderBottom:passageWordsBottomBorder}">
密码登录
</view>
<view class="captcha_words" @click="toCaptchaEvent"
- :style="{borderBottomColor:captchaWordsBottomColor, borderBottom:captchaWordsBottomBorder}">
+ :style="{borderBottom:captchaWordsBottomBorder}">
验证码登录
</view>
</view>
@@ -65,10 +65,8 @@ const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#00
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")
const isPassagePage = ref(true); //是否是密码登录页的标志；
-const passageWordsBottomBorder = computed(() => isPassagePage.value? "solid":"none"); //密码登录导航的下边框
-const passageWordsBottomColor = computed(() => isPassagePage.value? "#094ABC":"#ffffff");//密码登录导航的下边框颜色
-const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"solid"); //验证码登录导航的下边框
-const captchaWordsBottomColor = computed(() => isPassagePage.value? "#ffffff":"#094ABC");//验证码登录导航的下边框颜色
+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"); //是否明文显示的图标
@@ -126,6 +124,7 @@ function openEyesEvent()
background-size: cover;
background-position: center;
height: 100vh;
+ width: auto;
display: flex;
flex-direction: column;
justify-content: center;
@@ -148,53 +147,31 @@ function openEyesEvent()
// left: calc(50% - 314px/2 + 3px);
.login_ways{
position: absolute;
- width: 49%;
+ width: 58%;
height: 8.1%;
display: flex;
.account_words{
- // width:36.1%;
- // height: 90%;
- margin-right: 10%;
- border-bottom: solid medium #094ABC;
- /* 密码登录 */
- width: 56px;
- height: 24px;
- /* Body */
+ 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: 14px;
- line-height: 24px;
- /* identical to box height, or 171% */
- display: flex;
- align-items: center;
+ font-size: 0.9rem;
+ text-align: center;
color: #000364;
- /* Inside auto layout */
- flex: none;
- order: 0;
- flex-grow: 0;
}
.captcha_words{
- // width:45.2%;
- // height: 90%;
- margin-left: 5%;
- /* 验证码登录 */
- width: 70px;
- height: 24px;
- /* Body */
+ height: 90%;
+ padding-bottom: 0.5rem;
+ margin-left: 3%;
font-family: 'PingFang SC';
font-style: normal;
font-weight: 400;
- font-size: 14px;
- line-height: 24px;
- /* identical to box height, or 171% */
- display: flex;
- align-items: center;
+ font-size: 0.9rem;
+ text-align: center;
color: #000364;
- /* Inside auto layout */
- flex: none;
- order: 1;
- flex-grow: 0;
}
}
.login_form{
@@ -208,90 +185,93 @@ function openEyesEvent()
height: 100%;
.login_form_item{
height: 25%;
- margin-bottom: 10px;
+ margin-bottom: 5%;
}
.account_box{
- padding-left: 10px;
+ padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
.account{
height: 100%;
- padding-left: 30px;
+ padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/phone_icon.png");
background-repeat: no-repeat;
- background-size: 4%;
- background-position: 8px 50%;
+ background-size: 0.8rem;
+ background-position: 3% 50%;
+ font-size: 0.8rem;
}
}
.passage_box{
display: flex;
- justify-content: space-around;
align-items: center;
+ padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
+ position: relative;
.passage{
height: 100%;
- padding-left: 22px;
+ padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/lock_icon.png");
background-repeat: no-repeat;
- background-size: 6%;
- background-position: 0px 50%;
+ background-size: 0.8rem;
+ background-position: 4.7% 50%;
+ font-size: 0.8rem;
}
.eyes{
- /* User Interface / No Preview */
- width: 20px;
- height: 20px;
- /* Inside auto layout */
- flex: none;
- order: 3;
- flex-grow: 0;
+ width: 1rem;
+ height: 1rem;
+ position: absolute;
+ right: 13%;
}
}
.captcha_box{
display: flex;
- justify-content: space-around;
align-items: center;
+ padding-left: 3%;
background-color: #D5E9FF;
border-radius: 12px;
+ position: relative;
.captcha{
height: 100%;
- padding-left: 40px;
+ padding-left: 11%;
background-image: url("../../../static/login/account_login/login_part/captcha_icon.png");
background-repeat: no-repeat;
- background-size: 7%;
- background-position: 16px 50%;
+ background-size: 0.8rem;
+ background-position: 4.5% 50%;
+ font-size: 0.8rem;
}
.captcha_button{
/* 发送验证码 */
- width: 108px;
- height: 34px;
- /* Inside auto layout */
- flex: none;
- order: 3;
- flex-grow: 0;
-
+ width: 5.5rem;
+ height: 1.9rem;
border-radius: 15px;
- font-size: 14px;
+ font-size: 0.8rem;
color: #000364;
+ position: absolute;
+ right: 5%;
}
}
.forget_passage{
- margin-bottom: 5px;
- margin-top: 10px;
+ margin-bottom: 0.4rem;
+ margin-top: 1.2rem;
text-align: right;
color: #000364;
font-family: 'PingFang SC';
font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 24px;
+ font-weight: 24rem;
+ font-size: 0.8rem;
+ // line-height: 24px;
}
.login_button{
+ display: flex;
+ align-items: center;
+ justify-content: center;
height: 100%;
border-radius: 12px;
background-color: #4A69F7;
color: #FFFCFC;
text-align: center;
+ font-size: 1.2rem;
}
}
}
@@ -303,19 +283,16 @@ function openEyesEvent()
top: 78%;
left: 43%;
object-fit: contain;
- // left: calc(50% - 56.5px/2 + 0.25px);
}
.otherways_part{
position: absolute;
width: 59%;
height: 10.9%;
- // left: calc(50% - 243.25px/2 - 0.38px);
top: 82%;
.otherways_tips{
position: absolute;
width: 98.6%;
height: 24%;
- // left: calc(50% - 243.25px/2 - 0.38px);
top: 0%;
}
.two_ways{
@@ -331,18 +308,16 @@ function openEyesEvent()
.qq_icon{
/* qq图标 */
position: absolute;
- width: 43.9%;
- height: 88%;
+ width: 2.6rem;
+ height: 2.6rem;
left: 0%;
- // background: url(image.png);
}
.weixin_icon{
/* 微信图标 */
position: absolute;
- width: 40%;
- height: 89%;
+ width: 2.2rem;
+ height: 2.2rem;
left: 50%;
- // background: url(image.png);
}
}
}
diff --git a/unpackage/dist/cache/.vite/deps/_metadata.json b/unpackage/dist/cache/.vite/deps/_metadata.json
index ed3c019..ff6b6ca 100644
--- a/unpackage/dist/cache/.vite/deps/_metadata.json
+++ b/unpackage/dist/cache/.vite/deps/_metadata.json
@@ -1,8 +1,8 @@
{
- "hash": "48f6c93b",
- "configHash": "badd50c8",
+ "hash": "239ea83a",
+ "configHash": "3f4641d2",
"lockfileHash": "e3b0c442",
- "browserHash": "debd2ea0",
+ "browserHash": "619b4131",
"optimized": {},
"chunks": {}
}
\ No newline at end of file