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 @@ + :style="{borderBottom:passageWordsBottomBorder}"> 密码登录 + :style="{borderBottom:captchaWordsBottomBorder}"> 验证码登录 @@ -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