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

add:upadae account_login

Browse Source
master
xhhing 1 year ago
parent 4e05459fe3
commit 548a09ade4
2 changed files with 60 additions and 85 deletions
Show Stats Download Patch File Download Diff File

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

@ -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);
}
}
}

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

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