二维码登录按钮不展示

src/views/login/components/phone.vue

@@ -6,12 +6,12 @@
           <span class="d-flex">
             <v-icon icon="mdi-cellphone" size="20"></v-icon>
             <span class="d-flex" id="menu-activator">
-              <span class="phone-number">{{ currentAear }}</span>
+              <span class="phone-number">{{ currentArea }}</span>
               <v-icon size="20">mdi-chevron-down</v-icon>
             </span>
             <v-menu activator="#menu-activator">
               <v-list>
-                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentAear(item)">
+                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentArea(item)">
                   <v-list-item-title>{{ item.label }}</v-list-item-title>
                 </v-list-item>
               </v-list>
@@ -44,12 +44,12 @@ const phoneRules = ref([
   }
 ])
 // 手机号区域
-const currentAear = ref('00086')
+const currentArea = ref('0086')
 const items = [
   { label: '中国大陆-0086', value: '0086' }
 ]
-const handleChangeCurrentAear = (e) => {
-  currentAear.value = e.value
+const handleChangeCurrentArea = (e) => {
+  currentArea.value = e.value
 }
 
 // 获取验证码

src/views/login/components/qrCode.vue

@@ -5,7 +5,7 @@
       cover
       aspect-ratio="16/9"
       src="https://minio.citupro.com/dev/static/csqrcode.jpg"
-      style="height: 200px;"
+      style="height: 300px;"
     ></v-img>
   </div>
 </template>

src/views/login/index.vue

@@ -34,9 +34,12 @@
           <!-- 微信扫码登录 -->
           <qr-code></qr-code>
         </div>
-        <v-btn color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">{{ tab === 1 ? '登录/注册' : '登录' }}</v-btn>
-        <div class="login-tips mt-3">
-          登录/注册即代表您同意 
+        <v-btn v-if="!isPhone" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">{{ tab === 1 ? '登录/注册' : '登录' }}</v-btn>
+        <div v-if="tab === 2 && !isPhone" @click="handleForgotPassword">
+          <span class="forgot-password">忘记密码？</span>
+        </div>
+        <div class="login-tips">
+          {{ tab === 1 ? '登录/注册': '登录' }}即代表您同意 
           <span class="color" style="cursor: pointer;" @click="handleToUserAgreement">[用户协议]</span>
           <span class="color" style="cursor: pointer;" @click="handlePrivacyPolicy">[隐私政策]</span>
         </div>
@@ -66,6 +69,7 @@ const passRef = ref()
 const handleLogin = () => {
 }
 
+// 用户、隐私协议
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const handleToUserAgreement = () => {
@@ -75,6 +79,9 @@ const handleToUserAgreement = () => {
 const handlePrivacyPolicy = () => {
   router.push({ path: '/privacyPolicy' })
 }
+
+// 忘记密码
+const handleForgotPassword = () => {}
 </script>
 
 <style lang="scss" scoped>
@@ -151,6 +158,10 @@ const handlePrivacyPolicy = () => {
   }
 }
 .login-tips {
+  position: absolute;
+  bottom: 17px;
+  left: 50%;
+  translate: -50%;
   width: 100%;
   font-size: 12px;
   text-align: center;
@@ -159,4 +170,9 @@ const handlePrivacyPolicy = () => {
 .color {
   color: var(--default-color); 
 }
+.forgot-password {
+  color: var(--default-color);
+  font-size: 14px;
+  cursor: pointer;
+}
 </style>