|
|
|
@ -8,11 +8,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>
|
|
|
|
@ -66,10 +66,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");
|
|
|
|
|
|
|
|
|
@ -127,6 +125,7 @@ function openEyesEvent()
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-position: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
@ -149,53 +148,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{
|
|
|
|
@ -209,90 +186,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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -304,19 +284,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{
|
|
|
|
@ -332,18 +309,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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|