|
|
|
@@ -1,64 +1,69 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="title"> |
|
|
|
<img style="display: block;width: 100%;margin: 0 auto;" src="../../static/images/onlineHome/yinnongLogo1.png" alt=""> |
|
|
|
<img style="display: block;width: 90%;margin: 0 auto;" src="../../static/images/yinnong/yinnongLogo1.png" alt=""> |
|
|
|
</div> |
|
|
|
<van-tabs v-model="active" color="#1D6FE9 " :swipeable="true" style="margin-top:0.5rem;padding:0 10px;"> |
|
|
|
<van-tabs v-model="active" title-active-color="#37d6b1" :swipeable="true" style="background: rgba(255, 255, 255, .2);margin:1.5rem auto 0;width: calc(100% - 40px);border-radius: 20px;overflow: hidden;border: 1px solid #fff;"> |
|
|
|
<van-tab title="密码登录" name="1"> |
|
|
|
<van-form style="margin:50px 0;" v-if="!showMessage"> |
|
|
|
<van-form style="padding:30px 0;height: 100vh;" v-if="!showMessage"> |
|
|
|
<van-field |
|
|
|
v-model="formData.username" |
|
|
|
placeholder="请输入手机号/账号" |
|
|
|
left-icon="contact-o" |
|
|
|
:rules="[{ required: true, message:'' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.password" |
|
|
|
type="password" |
|
|
|
left-icon="edit" |
|
|
|
style="margin-top: 20px" |
|
|
|
placeholder="请输入密码" |
|
|
|
:rules="[{ required: true, message:'' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img style="width: 100px" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<div style="display: flex;width: 90%;margin: 20px auto 0;"> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
left-icon="shield-o" |
|
|
|
center |
|
|
|
clearable |
|
|
|
placeholder="图形验证码" |
|
|
|
/> |
|
|
|
<div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;"> |
|
|
|
<img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox> |
|
|
|
<p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p> |
|
|
|
<div class="clear"></div> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit" @click="handleLogin">登录</van-button> |
|
|
|
<div style="margin: 50px 16px 16px;border-radius: 100vh;overflow: hidden;"> |
|
|
|
<van-button block type="info" color="linear-gradient(to right, #97eedc, #5166f5)" native-type="submit" @click="handleLogin">登录</van-button> |
|
|
|
<!-- <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">短信验证码登录</p>--> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
</van-tab> |
|
|
|
<van-tab title="短信登录" name="2"> |
|
|
|
<van-form style="margin:50px 0;"> |
|
|
|
<van-form style="padding:30px 0;height: 100vh;"> |
|
|
|
<van-field |
|
|
|
v-model="formData.mobile" |
|
|
|
left-icon="contact-o" |
|
|
|
name="请输入手机号" |
|
|
|
placeholder="请输入手机号" |
|
|
|
:rules="[{ required: true, message: '' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img style="width: 100px" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit" @click="getSmsCode">获取验证码</van-button> |
|
|
|
<div style="display: flex;width: 90%;margin: 20px auto 0;"> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
left-icon="shield-o" |
|
|
|
center |
|
|
|
clearable |
|
|
|
placeholder="图形验证码" |
|
|
|
/> |
|
|
|
<div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;"> |
|
|
|
<img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin: 50px 16px 16px;border-radius: 100vh;overflow: hidden;"> |
|
|
|
<van-button block type="info" color="linear-gradient(to right, #97eedc, #5166f5)" native-type="submit" @click="getSmsCode">获取验证码</van-button> |
|
|
|
<!-- <p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">密码登录</p>--> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
@@ -141,54 +146,90 @@ |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.app-container{ |
|
|
|
background: #fff; |
|
|
|
background: #fafafa url("../../static/images/yinnong/login_bg.png") no-repeat top; |
|
|
|
background-size: 100% auto; |
|
|
|
height: 100vh; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
/*padding-top: 20%;*/ |
|
|
|
width: 100%; |
|
|
|
margin: 0 auto; |
|
|
|
/deep/ .van-tabs__content{ |
|
|
|
background: #ffffff; |
|
|
|
margin-top: -1px; |
|
|
|
border-radius: 20PX; |
|
|
|
} |
|
|
|
.van-tab--active{ |
|
|
|
font-size: .6rem; |
|
|
|
font-weight: bold; |
|
|
|
/deep/ .van-tabs__nav{ |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
.van-tabs__line{ |
|
|
|
background:#1D6FE9; |
|
|
|
width: 0.15rem; |
|
|
|
height: 0.15rem; |
|
|
|
border-radius: 0.07rem; |
|
|
|
bottom: 0.3rem; |
|
|
|
/deep/ .van-tab--active{ |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
.van-tabs__nav{ |
|
|
|
padding:0 |
|
|
|
/deep/ .van-tab::after{ |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.van-tab{ |
|
|
|
display: inline-block; |
|
|
|
flex: inherit; |
|
|
|
margin-left: 30px; |
|
|
|
line-height: .8rem; |
|
|
|
/deep/ .van-tabs__wrap{ |
|
|
|
overflow: initial; |
|
|
|
} |
|
|
|
.van-tab__text--ellipsis { |
|
|
|
overflow: auto; |
|
|
|
/deep/ .van-tabs__line{ |
|
|
|
background: linear-gradient(to right, #5166f5, #97eedc); |
|
|
|
} |
|
|
|
.van-password-input{ |
|
|
|
width: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
/deep/ .van-tab:nth-child(1)::before{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: auto; |
|
|
|
top: 0; |
|
|
|
right: -19%; |
|
|
|
bottom: 0; |
|
|
|
background: url("../../static/images/yinnong/login_tab_icon.png") no-repeat center; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
/deep/ .van-tab.van-tab--active:nth-child(1)::after{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: auto; |
|
|
|
right: auto; |
|
|
|
bottom: -19PX; |
|
|
|
background: #ffffff; |
|
|
|
width: 20PX; |
|
|
|
height: 20PX; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
/deep/ .van-tab:nth-child(2)::before{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: -19%; |
|
|
|
top: 0; |
|
|
|
right: auto; |
|
|
|
bottom: 0; |
|
|
|
background: url("../../static/images/yinnong/login_tab_icon_right.png") no-repeat center; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
[class*=van-hairline]::after{ |
|
|
|
border:none; |
|
|
|
/deep/ .van-tab.van-tab--active:nth-child(2)::after{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: auto; |
|
|
|
top: auto; |
|
|
|
right: 0; |
|
|
|
bottom: -19PX; |
|
|
|
background: #ffffff; |
|
|
|
width: 20PX; |
|
|
|
height: 20PX; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.van-password-input__security li{ |
|
|
|
margin: 0 10px; |
|
|
|
border-bottom: 3px solid black; |
|
|
|
/deep/ .van-cell{ |
|
|
|
background: #eaeef6; |
|
|
|
border-radius: 100vh; |
|
|
|
width: 90%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.registerSmsBtn{ |
|
|
|
color: rgb(29, 111, 233); |
|
|
|
font-size: 0.34rem; |
|
|
|
|
|
|
|
.title{ |
|
|
|
padding-top: 15%; |
|
|
|
width: 100%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
|
