From 2bcd996d586ace41c2deff7d91583d347a7a0cc4 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 18 Aug 2021 01:25:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   1 +
 src/assets/img/icon/components/back-gray.png  | Bin 0 -> 10002 bytes
 src/assets/img/icon/components/back-white.png | Bin 0 -> 7809 bytes
 .../img/icon/components/close-black.png       | Bin 0 -> 3442 bytes
 src/assets/img/icon/loading-white.png         | Bin 0 -> 6910 bytes
 src/assets/img/icon/login/close-full-gray.png | Bin 0 -> 8531 bytes
 src/components/Back.vue                       |  17 +-
 src/components/BaseButton.vue                 | 138 ++++++++++++++
 src/components/BaseHeader.vue                 |  30 ++-
 src/components/dialog/SimpleConfirmDialog.vue |   6 +-
 src/pages/login/Login.vue                     |  37 ++--
 src/pages/login/OtherLogin.vue                |  98 ++++------
 src/pages/login/PasswordLogin.vue             | 104 +++++-----
 src/pages/login/VerificationCode.vue          | 130 +++++++++++++
 src/pages/login/components/LoginInput.vue     | 179 ++++++++++++++++++
 src/router/index.js                           |   2 +
 src/utils/mixin.js                            |   4 +-
 17 files changed, 596 insertions(+), 150 deletions(-)
 create mode 100644 src/assets/img/icon/components/back-gray.png
 create mode 100644 src/assets/img/icon/components/back-white.png
 create mode 100644 src/assets/img/icon/components/close-black.png
 create mode 100644 src/assets/img/icon/loading-white.png
 create mode 100644 src/assets/img/icon/login/close-full-gray.png
 create mode 100644 src/components/BaseButton.vue
 create mode 100644 src/pages/login/VerificationCode.vue
 create mode 100644 src/pages/login/components/LoginInput.vue

diff --git a/src/App.vue b/src/App.vue
index 8e9dea4..c1e6e40 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,6 +72,7 @@ export default {
         '/login',
         '/login/other',
         '/login/password',
+        '/login/verification-code',
 
 
         '/service-protocol',
diff --git a/src/assets/img/icon/components/back-gray.png b/src/assets/img/icon/components/back-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7b318c59aa7398599779cfba92e0a37ee21343b
GIT binary patch
literal 10002
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/components/back-white.png b/src/assets/img/icon/components/back-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..28e94eb218b77886fc31b77e782901ce0c93f0f7
GIT binary patch
literal 7809
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

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/components/close-black.png b/src/assets/img/icon/components/close-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..c04ef40f72e0453a74ad154453a983f84a208d59
GIT binary patch
literal 3442
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
E1{XySHvj+t

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/loading-white.png b/src/assets/img/icon/loading-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..defc42c2f78cbcda23a75e932bcb531f0e42fbb7
GIT binary patch
literal 6910
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
W7B04~@grYo0Z4r_y;>b7?Ee6GC&bJE

literal 0
HcmV?d00001

diff --git a/src/assets/img/icon/login/close-full-gray.png b/src/assets/img/icon/login/close-full-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d78b1263fcb83a986bcd59138ae56c25eb91237
GIT binary patch
literal 8531
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
AkpKVy

literal 0
HcmV?d00001

diff --git a/src/components/Back.vue b/src/components/Back.vue
index 2fd2de4..e6f4e9a 100644
--- a/src/components/Back.vue
+++ b/src/components/Back.vue
@@ -9,21 +9,32 @@ export default {
       type: String,
       default: 'gray',//white
     },
+    isClose: {
+      type: Boolean,
+      default: false
+    },
     direction: {
       type: String,
       default: 'left',
     },
     scale: {
-      type: [Number,String],
+      type: [Number, String],
       default: 1,
     },
   },
   data() {
     return {
-      src: require(`../assets/img/icon/back-${this.mode}.png`)
+      // src: require(`../assets/img/icon/components/back-${this.mode}.png`)
+    }
+  },
+  computed: {
+    src() {
+      if (this.isClose) {
+        return require(`../assets/img/icon/components/close-${this.mode}.png`)
+      }
+      return require(`../assets/img/icon/components/back-${this.mode}.png`)
     }
   },
-  computed: {},
   mounted() {
     this.$setCss(this.$refs.img, 'transform', `rotate(${this.direction === 'left' ? '0' : '180'}deg) scale(${this.scale})`)
   },
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
new file mode 100644
index 0000000..4dc0643
--- /dev/null
+++ b/src/components/BaseButton.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="button" :class="class1" @click.capture.stop="check">
+    <img v-if="loading" src="../assets/img/icon/loading-white.png" alt="">
+    <slot v-if="showText"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "BaseButton",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingWithText: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    active: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    class1() {
+      return [this.type, this.active ? '' : 'no-active', this.disabled && 'disabled']
+    },
+    showText() {
+      if (this.loading) {
+        return this.loadingWithText
+      }
+      return true
+    }
+  },
+  created() {
+  },
+  methods: {
+    check() {
+      if (this.disabled) return
+      if (this.loading) return
+      return this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/scss/index";
+
+.button {
+  color: white;
+  height: 4rem;
+  line-height: 4rem;
+  border-radius: .3rem;
+  //width: 100%;
+  font-size: 1.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    height: 1.6rem;
+    margin-right: .5rem;
+    animation: animal .8s infinite linear;
+
+    @keyframes animal {
+      0% {
+        transform: rotate(-360deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+  }
+
+  &.primary {
+    background: $primary-btn-color;
+
+    &:active {
+      background: $disable-primary-btn-color;
+    }
+  }
+
+  &.no-active {
+    &:active {
+      &.primary {
+        background: $primary-btn-color;
+      }
+
+      &.dark {
+        background: $second-btn-color;
+      }
+
+      &.white {
+        background: white;
+      }
+    }
+  }
+
+  &.disabled {
+    &.primary {
+      background: gainsboro;
+      color: white;
+    }
+
+    &:active {
+      &.primary {
+        background: gainsboro;
+      }
+    }
+  }
+
+  &.dark {
+    background: $second-btn-color;
+
+    &:active {
+      background: $second-btn-color-tran;
+    }
+  }
+
+  &.white {
+    background: white;
+    color: black;
+    border: 1px solid gainsboro;
+  }
+}
+</style>
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index 44eb375..1297cc0 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,7 +1,10 @@
 <template>
-  <div id='BaseHeader'>
+  <div id='BaseHeader' :class="mode">
     <div class="header">
-      <back @click="back()" mode="white" class="left" scale="1.8" direction="left"></back>
+      <back :isClose="isClose" :mode="isClose?'black':'gray'"
+            @click="back()"
+            class="left"
+            direction="left"/>
       <slot name="center"><span></span></slot>
       <slot name="right"><span></span></slot>
     </div>
@@ -12,7 +15,16 @@
 export default {
   name: "BaseHeader",
   components: {},
-  props: {},
+  props: {
+    mode: {
+      type: String,
+      default: 'dark',//light
+    },
+    isClose: {
+      type: Boolean,
+      default: false,
+    }
+  },
   data() {
     return {}
   },
@@ -37,9 +49,18 @@ export default {
 #BaseHeader {
   width: 100%;
   position: fixed;
-  background: $main-bg;
   z-index: 2;
 
+  &.light {
+    background: white;
+    color: black;
+  }
+
+  &.dark {
+    background: $main-bg;
+    color: white;
+  }
+
   .header {
     display: flex;
     justify-content: center;
@@ -47,7 +68,6 @@ export default {
     height: 6rem;
     border-bottom: 1px solid #cccccc11;
     position: relative;
-    color: white;
 
     .left {
       position: absolute;
diff --git a/src/components/dialog/SimpleConfirmDialog.vue b/src/components/dialog/SimpleConfirmDialog.vue
index 6173e1a..46ad4f5 100644
--- a/src/components/dialog/SimpleConfirmDialog.vue
+++ b/src/components/dialog/SimpleConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ConfirmDialog " @click="$emit('dismiss')">
+  <div class="SimpleConfirmDialog " @click="$emit('dismiss')">
     <div class="content" @click.stop="null">
       <div class="item">{{ title }}</div>
       <div class="footer">
@@ -11,7 +11,7 @@
 </template>
 <script>
 export default {
-  name: "ConfirmDialog",
+  name: "SimpleConfirmDialog",
   props: {
     visible: {
       type: Boolean,
@@ -32,7 +32,7 @@ export default {
 
 <style scoped lang="scss">
 
-.ConfirmDialog {
+.SimpleConfirmDialog {
   z-index: 10;
   position: absolute;
   top: 0;
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index 601f017..f35ffd5 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="login">
-    <BaseHeader>
+    <BaseHeader mode="light" :isClose="true">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="notice">
+      <div class="desc">
         <div class="title">登录看朋友内容</div>
         <div class="phone-number">138****8000</div>
         <div class="sub-title">认证服务由中国移动提供</div>
       </div>
 
-      <div class="button primary no-active" @click="login">一键登录</div>
-      <div class="button white" @click="$nav('/login/other')">其他手机号码登录</div>
+      <b-button :loading="loading" :active="false" :loadingWithText="true" @click="login">
+        {{ loading ? '登录中' : '一键登录' }}
+      </b-button>
+      <b-button :active="false" type="white" @click="$nav('/login/other')">其他手机号码登录</b-button>
 
       <div class="protocol" :class="showAnim?'anim-bounce':''">
         <Tooltip style="top: -100%;left: -1rem;" v-model="showTooltip"/>
@@ -65,6 +67,7 @@ export default {
       isOtherLogin: false,
       showAnim: false,
       showTooltip: false,
+      loading: false
     }
   },
   computed: {},
@@ -72,15 +75,19 @@ export default {
   },
   methods: {
     login() {
-      if (!this.isAgree && !this.showAnim && !this.showTooltip) {
-        this.showAnim = true
-        setTimeout(() => {
-          this.showAnim = false
-          this.showTooltip = true
-        }, 500)
-        setTimeout(() => {
-          this.showTooltip = false
-        }, 3000)
+      if (this.isAgree) {
+        this.loading = true
+      } else {
+        if (!this.showAnim && !this.showTooltip) {
+          this.showAnim = true
+          setTimeout(() => {
+            this.showAnim = false
+            this.showTooltip = true
+          }, 500)
+          setTimeout(() => {
+            this.showTooltip = false
+          }, 3000)
+        }
       }
     }
   }
@@ -104,8 +111,8 @@ export default {
   .content {
     padding: 6rem 3rem;
 
-    .notice {
-      margin-bottom: 8rem;
+    .desc {
+      margin-bottom: 6rem;
       margin-top: 12rem;
       display: flex;
       align-items: center;
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index 034a761..3ce6abf 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -1,22 +1,20 @@
 <template>
   <div class="other-login">
-    <BaseHeader>
+    <BaseHeader mode="light" :isClose="true">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>
     </BaseHeader>
     <div class="content">
-      <div class="notice">
+      <div class="desc">
         <div class="title">登录看朋友内容</div>
         <div class="sub-title">未注册的手机号验证通过后将自动注册</div>
       </div>
 
-      <div class="input-number">
-        <div class="left">
-          <span>+86</span>
-          <div class="arrow"></div>
-        </div>
-        <input v-model="phone" type="text" class="right" placeholder="请输入手机号">
+      <LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号"/>
+
+      <div class="notice">
+        {{ notice }}
       </div>
 
       <div class="protocol" :class="showAnim?'anim-bounce':''">
@@ -33,9 +31,9 @@
         </div>
       </div>
 
-      <div class="button primary no-active" :class="phone.length>10?'':'disabled'" @click="getCode">
+      <b-button :loading="loading" :active="false" :disabled="phone.length < 10" @click="getCode">
         获取短信验证码
-      </div>
+      </b-button>
 
       <div class="options">
         <span class="link" @click="$nav('/login/password')">密码登录</span>
@@ -48,12 +46,14 @@
 <script>
 import Check from "../../components/Check";
 import Tooltip from "./components/Tooltip";
+import LoginInput from "./components/LoginInput";
 
 export default {
   name: "OtherLogin",
   components: {
     Check,
-    Tooltip
+    Tooltip,
+    LoginInput
   },
   data() {
     return {
@@ -61,7 +61,9 @@ export default {
       phone: '',
       isOtherLogin: false,
       showAnim: false,
-      showTooltip: false  ,
+      showTooltip: false,
+      loading: false,
+      notice: ''
     }
   },
   computed: {},
@@ -69,15 +71,22 @@ export default {
   },
   methods: {
     getCode() {
-      if (!this.isAgree && !this.showAnim && !this.showTooltip && this.phone.length > 10) {
-        this.showAnim = true
-        setTimeout(() => {
-          this.showAnim = false
-          this.showTooltip = true
-        }, 500)
-        setTimeout(() => {
-          this.showTooltip = false
-        }, 3000)
+      if (this.isAgree) {
+        this.loading = true
+        setTimeout(()=>{
+          this.$nav('/login/verification-code')
+        },2000)
+      } else {
+        if (!this.showAnim && !this.showTooltip) {
+          this.showAnim = true
+          setTimeout(() => {
+            this.showAnim = false
+            this.showTooltip = true
+          }, 500)
+          setTimeout(() => {
+            this.showTooltip = false
+          }, 3000)
+        }
       }
     }
   }
@@ -102,7 +111,7 @@ export default {
     padding: 6rem 3rem;
     //padding-top: 6rem;
 
-    .notice {
+    .desc {
       margin-bottom: 2rem;
       margin-top: 4rem;
       display: flex;
@@ -120,47 +129,10 @@ export default {
       }
     }
 
-    .input-number {
-      display: flex;
-      background: whitesmoke;
-      padding: 1.5rem 1rem;
-
-      .left {
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        margin-right: 1rem;
-        padding-right: 1rem;
-        position: relative;
-
-        .arrow {
-          margin-top: .4rem;
-          margin-left: .5rem;
-          width: 0;
-          height: 0;
-          border: .3rem solid transparent;
-          border-top: .5rem solid black;
-        }
-
-        &::before {
-          content: ' ';
-          position: absolute;
-          width: 1px;
-          height: .8rem;
-          top: 4px;
-          right: 0;
-          background: gainsboro;
-        }
-      }
-
-      .right {
-        flex: 1;
-        outline: none;
-        border: none;
-        background: whitesmoke;
-        caret-color: red;
-        //background: red;
-      }
+    .notice {
+      margin-top: 1rem;
+      font-size: 1.3rem;
+      color: $primary-btn-color;
     }
 
     .button {
diff --git a/src/pages/login/PasswordLogin.vue b/src/pages/login/PasswordLogin.vue
index 8dc2b37..0ef3735 100644
--- a/src/pages/login/PasswordLogin.vue
+++ b/src/pages/login/PasswordLogin.vue
@@ -1,23 +1,17 @@
 <template>
   <div class="PasswordLogin">
-    <BaseHeader>
+    <BaseHeader mode="light" :isClose="true">
       <template v-slot:right>
         <span class="f16">帮助</span>
       </template>
     </BaseHeader>
     <div class="content">
       <div class="notice">
-        <div class="title">登录看朋友内容</div>
-        <div class="sub-title">未注册的手机号验证通过后将自动注册</div>
+        <div class="title">手机号密码登录</div>
       </div>
 
-      <div class="input-number">
-        <div class="left">
-          <span>+86</span>
-          <div class="arrow"></div>
-        </div>
-        <input type="text" class="right" placeholder="请输入手机号">
-      </div>
+      <LoginInput autofocus type="phone" v-model="phone" placeholder="请输入手机号"/>
+      <LoginInput autofocus class="mt1r" type="password" v-model="password" placeholder="请输入密码"/>
 
       <div class="protocol">
         <div class="left">
@@ -32,11 +26,14 @@
         </div>
       </div>
 
-      <div class="button primary no-active disabled">获取短信验证码</div>
+      <b-button :loading="loading" :active="false" :disabled="disabled" @click="login">
+        {{ loading ? '登录中' : '登录' }}
+      </b-button>
 
       <div class="options">
-        <span class="link">密码登录</span>
-        <span class="link">其他方式登录</span>
+        <span>
+          忘记了？<span class="link">找回密码</span>
+        </span>
       </div>
 
     </div>
@@ -44,21 +41,50 @@
 </template>
 <script>
 import Check from "../../components/Check";
+import LoginInput from "./components/LoginInput";
 
 export default {
   name: "PasswordLogin",
   components: {
-    Check
+    Check,
+    LoginInput
   },
   data() {
     return {
-      isAgree:false
+      isAgree: false,
+      showAnim: false,
+      showTooltip: false,
+      loading: false,
+      phone: '',
+      password: '',
+      code: '',
+    }
+  },
+  computed: {
+    disabled() {
+      return !(this.phone && this.password);
     }
   },
-  computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    login() {
+      if (this.isAgree) {
+        this.loading = true
+      } else {
+        if (!this.showAnim && !this.showTooltip) {
+          this.showAnim = true
+          setTimeout(() => {
+            this.showAnim = false
+            this.showTooltip = true
+          }, 500)
+          setTimeout(() => {
+            this.showTooltip = false
+          }, 3000)
+        }
+      }
+    }
+  }
 }
 </script>
 
@@ -98,48 +124,6 @@ export default {
       }
     }
 
-    .input-number {
-      display: flex;
-      background: whitesmoke;
-      padding: 1.5rem 1rem;
-
-      .left {
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        margin-right: 1rem;
-        padding-right: 1rem;
-        position: relative;
-        .arrow {
-          margin-top: .4rem;
-          margin-left: .5rem;
-          width: 0;
-          height: 0;
-          border: .3rem solid transparent;
-          border-top: .5rem solid black;
-        }
-
-        &::before{
-          content: ' ';
-          position: absolute;
-          width: 1px;
-          height: .8rem;
-          top: 4px;
-          right: 0;
-          background: gainsboro;
-        }
-      }
-
-      .right {
-        flex: 1;
-        outline: none;
-        border: none;
-        background: whitesmoke;
-        caret-color:red;
-        //background: red;
-      }
-    }
-
     .button {
       margin-bottom: .5rem;
     }
@@ -157,7 +141,7 @@ export default {
       }
     }
 
-    .options{
+    .options {
       font-size: 1.2rem;
       margin-top: 2rem;
       display: flex;
diff --git a/src/pages/login/VerificationCode.vue b/src/pages/login/VerificationCode.vue
new file mode 100644
index 0000000..55444e3
--- /dev/null
+++ b/src/pages/login/VerificationCode.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="VerificationCode">
+    <BaseHeader mode="light" :isClose="true">
+      <template v-slot:right>
+        <span class="f16">帮助</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="notice">
+        <div class="title">请输入验证码</div>
+        <div class="sub-title">验证码已通过短信发送到+86 13800138000</div>
+      </div>
+
+      <LoginInput autofocus type="code"
+                  v-model="code"
+                  placeholder="请输入验证码"
+                  v-model:isSendVerificationCode="isSendVerificationCode"
+                  @send="sendCode"
+      />
+      <div class="options">
+        <span>
+          收不到短信？<span class="link" @click="getVoiceCode">获取语音验证码</span>
+        </span>
+      </div>
+
+      <b-button :loading="loading" :active="false" :disabled="code.length < 4" @click="login">
+        {{ loading ? '登录中' : '登录' }}
+      </b-button>
+
+<!--      <ConfirmDialog></ConfirmDialog>-->
+    </div>
+  </div>
+</template>
+<script>
+import Check from "../../components/Check";
+import LoginInput from "./components/LoginInput";
+import ConfirmDialog from "../../components/dialog/ConfirmDialog";
+
+export default {
+  name: "VerificationCode",
+  components: {
+    Check,
+    LoginInput,
+    ConfirmDialog
+  },
+  data() {
+    return {
+      showAnim: false,
+      showTooltip: false,
+      loading: false,
+      phone: '',
+      password: '',
+      code: '',
+      isSendVerificationCode: true,
+    }
+  },
+  created() {
+  },
+  methods: {
+    getVoiceCode(){
+      this.$showConfirmDialog('','语音验证码')
+    },
+    //TODO loading样式不对
+    async sendCode() {
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.isSendVerificationCode = true
+    },
+    login() {
+      this.loading = true
+      setTimeout(() => {
+        this.isSendVerificationCode = true
+        this.loading = false
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.VerificationCode {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: black;
+  font-size: 1.4rem;
+  background: white;
+
+  .content {
+    padding: 6rem 3rem;
+    //padding-top: 6rem;
+
+    .notice {
+      margin-bottom: 2rem;
+      margin-top: 4rem;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+
+      .title {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      .sub-title {
+        font-size: 1.2rem;
+        color: $second-text-color;
+      }
+    }
+
+    .button {
+      margin-bottom: .5rem;
+    }
+
+    .options {
+      font-size: 1.2rem;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/src/pages/login/components/LoginInput.vue b/src/pages/login/components/LoginInput.vue
new file mode 100644
index 0000000..40453ae
--- /dev/null
+++ b/src/pages/login/components/LoginInput.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <div class="input-number" v-if="type === 'phone'">
+      <div class="left">
+        <span>+86</span>
+        <div class="arrow"></div>
+      </div>
+      <div class="right flex1">
+        <input :autofocus="autofocus" v-model="value" type="text" :placeholder="placeholder">
+        <img v-if="value" src="../../../assets/img/icon/login/close-full-gray.png" alt="" @click="value=''">
+      </div>
+    </div>
+    <div class="input-number" v-if="type === 'password'">
+      <div class="right flex1">
+        <input :autofocus="autofocus" v-model="value" type="password" :placeholder="placeholder">
+        <img v-if="value" src="../../../assets/img/icon/login/close-full-gray.png" alt="" @click="value=''">
+      </div>
+    </div>
+    <div class="input-number" v-if="type === 'code'">
+      <div class="left no-border flex1">
+        <input :autofocus="autofocus" v-model="value" type="text" :placeholder="placeholder">
+        <img v-if="value" src="../../../assets/img/icon/login/close-full-gray.png" alt="" @click="value=''">
+      </div>
+      <div class="right" @click="send">
+        <span :class="isSendVerificationCode && 'disabled'">{{ verificationCodeBtnText }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "LoginInput",
+  props: {
+    modelValue: '',
+    placeholder: '',
+    type: {
+      type: String,
+      default: 'phone'
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    isSendVerificationCode: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      verificationCodeBtnText: 60
+    }
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue
+      },
+      set(e) {
+        this.$emit('update:modelValue', e)
+      }
+    }
+  },
+  watch: {
+    isSendVerificationCode: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.verificationCodeBtnText = 60
+          let ticker = setInterval(() => {
+            if (this.verificationCodeBtnText > 0) {
+              this.verificationCodeBtnText--
+            } else {
+              this.verificationCodeBtnText = '重新发送'
+              this.$emit('update:isSendVerificationCode', false)
+              clearInterval(ticker)
+            }
+          }, 1000)
+        }
+      }
+    }
+  },
+  methods: {
+    send(){
+      if (!this.isSendVerificationCode){
+        this.$emit('send')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/scss/index";
+
+.input-number {
+  display: flex;
+  background: whitesmoke;
+  padding: 1.5rem 1rem;
+  font-size: 1.4rem;
+
+  .left {
+    display: flex;
+    align-items: center;
+    margin-right: 1rem;
+    padding-right: 1rem;
+    position: relative;
+
+    &.no-border {
+      &::before {
+        content: '';
+        display: none;
+      }
+    }
+
+    &.flex1 {
+      flex: 1;
+      margin-right: 0;
+      padding-right: 0;
+    }
+
+    img {
+      top: 50%;
+      transform: translateY(-50%);
+      right: 1rem;
+      position: absolute;
+      height: 1.5rem;
+    }
+
+    .arrow {
+      margin-top: .4rem;
+      margin-left: .5rem;
+      width: 0;
+      height: 0;
+      border: .3rem solid transparent;
+      border-top: .5rem solid black;
+    }
+
+    &::before {
+      content: ' ';
+      position: absolute;
+      width: 1px;
+      height: .8rem;
+      top: 4px;
+      right: 0;
+      background: gainsboro;
+    }
+  }
+
+  .right {
+    //background: red;
+    position: relative;
+
+    &.flex1 {
+      flex: 1;
+    }
+
+    img {
+      top: 50%;
+      transform: translateY(-50%);
+      right: 1rem;
+      position: absolute;
+      height: 1.5rem;
+    }
+
+    .disabled {
+      color: $second-text-color;
+    }
+  }
+
+  input {
+    width: 90%;
+    outline: none;
+    border: none;
+    background: whitesmoke;
+    caret-color: red;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 78d02bd..abb9530 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,6 +39,7 @@ import Me2 from "../pages/me/Me2";
 import Login from "../pages/login/Login";
 import OtherLogin from "../pages/login/OtherLogin";
 import PasswordLogin from "../pages/login/PasswordLogin";
+import VerificationCode from "../pages/login/VerificationCode";
 
 const routes = [
   // {path: '', component: Music},
@@ -82,6 +83,7 @@ const routes = [
   {path: '/login', component: Login},
   {path: '/login/other', component: OtherLogin},
   {path: '/login/password', component: PasswordLogin},
+  {path: '/login/verification-code', component: VerificationCode},
 ]
 
 export default VueRouter.createRouter({
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index cd3acc0..34cacff 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -11,6 +11,7 @@ import Mask from "../components/Mask";
 import NoMore from "../components/NoMore";
 import Back from "../components/Back";
 import Loading from "../components/Loading";
+import BaseButton from "../components/BaseButton";
 
 export default {
   components: {
@@ -25,7 +26,8 @@ export default {
     Mask,
     NoMore,
     Back,
-    Loading
+    Loading,
+    'b-button':BaseButton
   },
   data() {
     return {