|
|
@@ -10,87 +10,86 @@
|
|
|
</div>
|
|
|
<p class="logo-header-title">Hello</p>
|
|
|
<p class="logo-header-tips">欢迎登录藏金·1745平台</p>
|
|
|
- </div>
|
|
|
- <van-form validate-first class="login-form">
|
|
|
- <div class="loginBox">
|
|
|
- <img src="@/assets/img/loginBox.png" alt="" />
|
|
|
- </div>
|
|
|
- <ul class="clear oUl" style="width: 83vw">
|
|
|
- <!-- <li class="label">
|
|
|
+ <van-form validate-first class="login-form">
|
|
|
+ <div class="loginBox">
|
|
|
+ <img src="@/assets/img/loginBox.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <ul class="clear oUl" style="width: 83vw">
|
|
|
+ <!-- <li class="label">
|
|
|
卡号:
|
|
|
|
|
|
</li> -->
|
|
|
- <li class="van-field-input">
|
|
|
- <van-row style="width: 83vw">
|
|
|
- <van-col span="3" style="width: 14px">
|
|
|
- <div class="cardNo">
|
|
|
- <img src="@/assets/img/cardNo.png" alt="" />
|
|
|
- </div>
|
|
|
- </van-col>
|
|
|
- <van-col span="5" style="width: 42px">
|
|
|
- <div class="myCard">CJ1745</div>
|
|
|
- </van-col>
|
|
|
- <van-col span="16" style="width: calc(100% - 86px)">
|
|
|
- <van-field
|
|
|
- style="margin: 0 0 0 30px; background: transParent"
|
|
|
- size="large"
|
|
|
- v-model="form.mobile"
|
|
|
- name="mobile"
|
|
|
- placeholder="XXXXXX"
|
|
|
- type="text"
|
|
|
- maxlength="6"
|
|
|
- :rules="[{ validator: asyncmobileValidator }]"
|
|
|
- >
|
|
|
- </van-field>
|
|
|
- </van-col>
|
|
|
- </van-row>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <ul class="clear" style="width: 83vw; border-radius: 10px">
|
|
|
- <!-- <li class="label">
|
|
|
+ <li class="van-field-input">
|
|
|
+ <van-row style="width: 83vw">
|
|
|
+ <van-col span="3" style="width: 14px">
|
|
|
+ <div class="cardNo">
|
|
|
+ <img src="@/assets/img/cardNo.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" style="width: 42px">
|
|
|
+ <div class="myCard">CJ1745</div>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="16" style="width: calc(100% - 86px)">
|
|
|
+ <van-field
|
|
|
+ style="margin: 0 0 0 30px; background: transParent"
|
|
|
+ size="large"
|
|
|
+ v-model="form.mobile"
|
|
|
+ name="mobile"
|
|
|
+ placeholder="XXXXXX"
|
|
|
+ type="text"
|
|
|
+ maxlength="6"
|
|
|
+ :rules="[{ validator: asyncmobileValidator }]"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="clear" style="width: 83vw; border-radius: 10px">
|
|
|
+ <!-- <li class="label">
|
|
|
密码:
|
|
|
<img src="@/assets/img/password.png" alt="" />
|
|
|
</li> -->
|
|
|
- <van-row style="width: 84vw">
|
|
|
- <van-col span="3" style="width: 14px">
|
|
|
- <div class="cardPwd">
|
|
|
- <img src="@/assets/img/password.png" alt="" />
|
|
|
- </div>
|
|
|
- </van-col>
|
|
|
- <van-col :span="21" style="width: calc(100% - 50px)">
|
|
|
- <li class="van-field-input">
|
|
|
- <van-field
|
|
|
- style="background: transparent; margin: 0 0 0 28px"
|
|
|
- size="large"
|
|
|
- v-model="form.code"
|
|
|
- name="code"
|
|
|
- maxlength="6"
|
|
|
- placeholder="请输入密码"
|
|
|
- :rules="[{ validator: asyncpwodValidator }]"
|
|
|
- :type="!passwordStatus ? 'password' : 'text'"
|
|
|
- @click-right-icon="showPassword"
|
|
|
- >
|
|
|
- <!-- :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
|
|
|
- </van-field>
|
|
|
- </li>
|
|
|
- </van-col></van-row
|
|
|
- >
|
|
|
- </ul>
|
|
|
-
|
|
|
- <van-button
|
|
|
- style="font-size: 16px; font-weight: 400"
|
|
|
- class="login-form-button"
|
|
|
- block
|
|
|
- type="info"
|
|
|
- :disabled="loadding"
|
|
|
- :loadding="loadding"
|
|
|
- loadding-text="加载中..."
|
|
|
- native-type="submit"
|
|
|
- @click="onSubmit()"
|
|
|
- >
|
|
|
- 登 录
|
|
|
- </van-button>
|
|
|
- </van-form>
|
|
|
+ <van-row style="width: 84vw">
|
|
|
+ <van-col span="3" style="width: 14px">
|
|
|
+ <div class="cardPwd">
|
|
|
+ <img src="@/assets/img/password.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ <van-col :span="21" style="width: calc(100% - 50px)">
|
|
|
+ <li class="van-field-input">
|
|
|
+ <van-field
|
|
|
+ style="background: transparent; margin: 0 0 0 28px"
|
|
|
+ size="large"
|
|
|
+ v-model="form.code"
|
|
|
+ name="code"
|
|
|
+ maxlength="6"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ :rules="[{ validator: asyncpwodValidator }]"
|
|
|
+ :type="!passwordStatus ? 'password' : 'text'"
|
|
|
+ @click-right-icon="showPassword"
|
|
|
+ >
|
|
|
+ <!-- :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
|
|
|
+ </van-field>
|
|
|
+ </li>
|
|
|
+ </van-col></van-row
|
|
|
+ >
|
|
|
+ </ul>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <van-button
|
|
|
+ style="font-size: 16px; font-weight: 400"
|
|
|
+ class="login-form-button"
|
|
|
+ block
|
|
|
+ type="info"
|
|
|
+ :disabled="loadding"
|
|
|
+ :loadding="loadding"
|
|
|
+ loadding-text="加载中..."
|
|
|
+ native-type="submit"
|
|
|
+ @click="onSubmit()"
|
|
|
+ >
|
|
|
+ 登 录
|
|
|
+ </van-button>
|
|
|
<div class="footerP">
|
|
|
<div class="footer">
|
|
|
<img src="@/assets/img/footer.png" alt="" />
|
|
|
@@ -262,6 +261,7 @@ export default {
|
|
|
.login-img {
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
+
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
img {
|
|
|
@@ -318,11 +318,14 @@ export default {
|
|
|
}
|
|
|
.loginBox {
|
|
|
width: 84vw;
|
|
|
+ margin: 0 auto 0;
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
// border: 1px solid red;
|
|
|
border-radius: 10px;
|
|
|
position: absolute;
|
|
|
- margin: 0 30.5px 0 28.5px;
|
|
|
+ left: 8vw;
|
|
|
+ top: 8vw;
|
|
|
+ // margin: 0 30.5px 0 28.5px;
|
|
|
|
|
|
top: -59px;
|
|
|
// z-index: 99999;
|
|
|
@@ -341,16 +344,16 @@ export default {
|
|
|
// border-top-right-radius: 20px;
|
|
|
position: relative;
|
|
|
// top: -145px;
|
|
|
- top: -135.5px; //新版
|
|
|
+ top: 232.5px; //新版
|
|
|
left: 0;
|
|
|
// border: 1px solid green;
|
|
|
ul {
|
|
|
position: relative;
|
|
|
- left: 0;
|
|
|
+ left: 9vw;
|
|
|
top: 0;
|
|
|
// border-radius: 20px;
|
|
|
overflow: hidden;
|
|
|
- margin: 0 0 11.5px 30px;
|
|
|
+ // margin: 0 0 11.5px 30px;
|
|
|
// border-bottom: 1px solid #f0f0f0;
|
|
|
z-index: 9999;
|
|
|
li {
|
|
|
@@ -393,7 +396,10 @@ export default {
|
|
|
.login-form-button.van-button,
|
|
|
.login-form-button.van-button--disabled {
|
|
|
border: 0;
|
|
|
- margin: 98px auto 10px auto;
|
|
|
+ // margin: 98px auto 10px auto;
|
|
|
+ position: absolute;
|
|
|
+ left: 5vw;
|
|
|
+ bottom: 30vh;
|
|
|
color: #333;
|
|
|
// background: #f4d022;
|
|
|
background: linear-gradient(0deg, #f2c482, #a07947);
|
|
|
@@ -481,12 +487,28 @@ export default {
|
|
|
top: -10px;
|
|
|
}
|
|
|
.footer {
|
|
|
- transform: scale(1.3);
|
|
|
+ transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
@media screen and (min-height: 812px) {
|
|
|
.login-main .login-form.van-form ul {
|
|
|
- top: -18px;
|
|
|
+ top: -1vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 375px) {
|
|
|
+ .login-main .login-form.van-form ul {
|
|
|
+ top: -3vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 360px) {
|
|
|
+ .login-main .login-form.van-form ul {
|
|
|
+ top: -3vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 320px) {
|
|
|
+ .login-main .login-form.van-form ul {
|
|
|
+ top: -4vh;
|
|
|
}
|
|
|
}
|
|
|
}
|
zhangjinxing