登录页样式

htmldev/loan/src/views/partner/login/index.vue

@@ -1,13 +1,212 @@
 <template>
-  <div>login</div>
+  <div class="wrapper">
+    <img class="logo" src="./image/logo@2x.png" alt="">
+    <p class="welcome">您好，驼驼银服合伙人</p>
+    <ul class="form-wrap">
+      <li>
+        <label>
+          <span v-for="(str, index) in '手机号：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <input type="number" placeholder="请输入手机号码" v-model.trim="postData.phone" @input="funLimitLength">
+        </div>
+      </li>
+      <li>
+        <label>
+          <span class="label-code" v-for="(str, index) in '验证码：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <input type="number" placeholder="请输入验证码" v-model.trim="postData.code" @input="funLimitLength">
+        </div>
+        <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
+      </li>
+    </ul>
+    <button class="submit" @click="funSubmit">提交</button>
+  </div>
 </template>
 
 <script>
+  import { Toast } from 'vant'
+
   export default {
-    name: 'login'
+    name: 'login',
+    data () {
+      return {
+        postData: {
+          phone: '',
+          code: ''
+        },
+        numCount: 60,
+        arrErrorList: []
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('登录')
+    },
+    methods: {
+      funLimitLength () {
+        const { phone, code } = this.postData
+        this.postData.phone = phone.length > 11 ? phone.slice(0, 11) : phone
+        this.postData.code = code.length > 4 ? code.slice(0, 4) : code
+      },
+      funCutDown () {
+        let numCount = this.numCount
+        const timer = setInterval(() => {
+          if (numCount === 0) {
+            clearInterval(timer)
+            this.numCount = 0
+            return
+          }
+          numCount--
+          this.numCount = numCount
+        }, 1000)
+      },
+      // 获取验证码
+      funGetCode () {
+        const numCount = this.numCount
+        const { phone } = this.postData
+        if (numCount < 60 && numCount > 0) {
+          return
+        }
+        this.numCount = 60
+        if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(phone))) {
+          Toast('请输入手机号码')
+          return
+        }
+        this.funCutDown()
+        // todo ajax
+      },
+      verifyData () {
+        const { phone, code } = this.postData
+        this.arrErrorList = []
+        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
+          this.arrErrorList.push('请输入手机号码')
+        }
+        if (!(/^\d{4}$/.test(code))) {
+          this.arrErrorList.push('请输入验证码')
+        }
+        return this.arrErrorList.length <= 0
+      },
+      funSubmit () {
+        if (!this.verifyData()) {
+          Toast({
+            message: this.arrErrorList[0],
+            forbidClick: true
+          })
+        }
+        this.$router.replace({ path: '/partner' })
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    background: #fff;
+  }
+
+  .logo {
+    width: 134px;
+    height: 84px;
+  }
+
+  .welcome {
+    margin-top: 12px;
+    line-height: 25px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #666;
+  }
+
+  .form-wrap {
+    li {
+      position: relative;
+      left: 0;
+      top: 0;
+      display: flex;
+      align-items: flex-start;
+      width: 327px;
+      padding: 13px 12px;
+      margin-top: 12px;
+      border: 1px solid #E8E8E8;
+      border-radius: 4px;
+
+      &:nth-of-type(1) {
+        margin-top: 79px;
+      }
+    }
 
+    label {
+      display: flex;
+
+      span {
+        line-height: 22px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+      }
+    }
+
+    .value-wrap {
+      flex: 1;
+      display: flex;
+      margin-left: 25px;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      min-height: 20px;
+      padding-top: 2px;
+      line-height: 20px;
+      font-size: 15px;
+      color: #333;
+      word-break: break-all;
+      resize: none;
+      outline: 0 none;
+      overflow: hidden;
+      background: transparent;
+      -webkit-text-fill-color: #333;
+      opacity: 1;
+
+      &::-webkit-input-placeholder {
+        color: #999;
+        -webkit-text-fill-color: #999;
+        opacity: 1;
+      }
+    }
+
+    .get-code {
+      @include vertical-center;
+      right: 0;
+      z-index: 1;
+      display: block;
+      min-width: 87px;
+      padding: 6px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #C9A585;
+    }
+  }
+
+  .submit {
+    width: 327px;
+    height: 45px;
+    margin-top: 41px;
+    border-radius: 4px;
+    line-height: 45px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #fff;
+    background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
 </style>