wap订座-登录

htmldev/dashboard/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="af-dashboard-entry">
     <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
@@ -15,4 +15,12 @@ export default {
 
 <style lang="scss">
 @import "./assets/styles/reset";
+
+.af-dashboard-entry {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
 </style>

htmldev/dashboard/src/login/index.vue

@@ -4,43 +4,43 @@
     <ul class="form-wrap">
       <li>
         <label>
-          <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
+          <span v-for="(str, index) in '+86'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
           <input type="tel" placeholder="请输入手机号码" v-myBlur v-model.trim="postData.partnerPhone" @input="funLimitLength">
         </div>
       </li>
-      <li v-if="false">
-        <label>
-          <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
-        </label>
-        <div class="value-wrap">
-          <input type="text" placeholder="图片验证码" v-myBlur v-model.trim="postData.capture">
-        </div>
-        <img class="capture-img" :src="strCapture" alt="" @click="funUpdateCapture">
-      </li>
       <li>
-        <label class="label-code">
-          <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
-        </label>
         <div class="value-wrap">
-          <input type="tel" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
+          <input type="tel" placeholder="请输入短信验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
         </div>
-        <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取' : numCount + '秒'}}</button>
+        <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取验证码' : numCount + '秒'}}</button>
       </li>
     </ul>
     <button class="submit" @click="funSubmit">登 录</button>
+    <div class="footer">
+      <van-checkbox v-model="checked"></van-checkbox>
+      <p class="tip-text">
+        <span class="label" v-for="(str, index) in '登录听邦即代表您已同意'" :key="'a' + index">{{ str }}</span>
+        <span class="value" v-for="(str, index) in '《用户协议》'" :key="'b' + index">{{ str }}</span>
+        <span class="label">与</span>
+        <span class="value" v-for="(str, index) in '《隐私协议》'" :key="'c' + index">{{ str }}</span>
+      </p>
+    </div>
   </div>
 </template>
 
 <script>
-import { Toast } from 'vant'
+import { Toast, Checkbox } from 'vant'
 import { sendSMS } from '../api/common'
 import { partnerLogin } from './api'
 
 const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
 export default {
   name: 'login',
+  components: {
+    'van-checkbox': Checkbox
+  },
   data () {
     return {
       postData: {
@@ -51,7 +51,8 @@ export default {
       strCapture: STRCAPTURE,
       numCount: 60,
       timer: null,
-      arrErrorList: []
+      arrErrorList: [],
+      checked: false
     }
   },
   async mounted () {
@@ -161,14 +162,16 @@ export default {
 
 <style lang="scss" scoped>
 .wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
-  min-height: 100vh;
-  width: 375px;
-  height: 667px;
+  height: 100%;
+  padding-bottom: 50px;
   background: linear-gradient(180deg, #000000 0%, #272727 100%);
 }
 
@@ -177,14 +180,6 @@ export default {
   height: 138px;
 }
 
-.welcome {
-  margin-top: 12px;
-  line-height: 25px;
-  font-size: 18px;
-  font-weight: bold;
-  color: #666;
-}
-
 .form-wrap {
   li {
     position: relative;
@@ -193,24 +188,25 @@ export default {
     display: flex;
     align-items: flex-start;
     width: 327px;
-    padding: 13px 12px;
+    padding: 13px 0;
     margin-top: 12px;
-    border: 1px solid #E8E8E8;
+    border-bottom: 1px solid #2A2929;
     border-radius: 4px;
 
     &:nth-of-type(1) {
-      margin-top: 79px;
+      margin-top: 53px;
     }
   }
 
   label {
     display: flex;
+    margin-right: 9px;
 
     span {
       line-height: 22px;
       font-size: 16px;
       font-weight: 500;
-      color: #333;
+      color: #A6A2A2;
 
       &.label-code:nth-of-type(5), {
         visibility: hidden;
@@ -221,7 +217,6 @@ export default {
   .value-wrap {
     flex: 1;
     display: flex;
-    margin-left: 9px;
   }
 
   input,
@@ -231,18 +226,18 @@ export default {
     padding-top: 2px;
     line-height: 20px;
     font-size: 15px;
-    color: #333;
+    color: #fff;
     word-break: break-all;
     resize: none;
     outline: 0 none;
     overflow: hidden;
     background: transparent;
-    -webkit-text-fill-color: #333;
+    -webkit-text-fill-color: #fff;
     opacity: 1;
 
     &::-webkit-input-placeholder {
-      color: #999;
-      -webkit-text-fill-color: #999;
+      color: #A6A2A2;
+      -webkit-text-fill-color: #A6A2A2;
       opacity: 1;
     }
   }
@@ -265,17 +260,53 @@ export default {
     display: block;
     min-width: 87px;
     padding: 6px;
-    line-height: 22px;
-    font-size: 16px;
+    line-height: 14px;
+    font-size: 12px;
     font-weight: 500;
     color: #C9A585;
+    background: #D32323;
+    border-radius: 14px;
   }
 }
 
 .submit {
+  width: 343px;
+  height: 50px;
+  margin-top: 39px;
+  background: #D32323;
+  border-radius: 25px;
   font-size: 18px;
   color: #FFFFFF;
-  line-height: 25px;
+  line-height: 50px;
   letter-spacing: 1px;
 }
+
+.footer {
+  position: absolute;
+  left: 0;
+  bottom: 24px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+
+  .tip-text {
+    display: flex;
+    align-items: center;
+    margin-left: 6px;
+
+    span {
+      font-size: 12px;
+      font-family: STSongti-SC-Bold, STSongti-SC;
+      font-weight: bold;
+      color: #848484;
+      line-height: 17px;
+
+      &.value {
+        color: #D32323;
+      }
+    }
+  }
+}
 </style>