From 6b4f0d1e99ffd6f53201eea412b6cb42ab7d0b84 Mon Sep 17 00:00:00 2001
From: KAI <1373639299@qq.com>
Date: Sun, 8 Dec 2024 14:24:28 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20AccountLogin=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=9A=E6=AC=A1=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=88=E5=9B=BE=E5=BD=A2=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=E7=A0=81=E6=8E=A5=E5=8F=A3=E8=A2=AB=E8=B0=83=E7=94=A8?=
 =?UTF-8?q?=202=20=E6=AC=A1=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 498a4ec..ee4afa0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login pc">
+  <div v-if="isDesktop" class="login pc">
     <h3 class="login-logo">
       <img v-if="logo" :src="logo" alt="logo" />
       <img v-else src="/logo.svg" alt="logo" />
@@ -15,13 +15,13 @@
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
           <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
-          <EmailLogin v-show="isEmailLogin" />
-          <a-tabs v-show="!isEmailLogin" class="login-right__form">
+          <EmailLogin v-if="isEmailLogin" />
+          <a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
             <a-tab-pane key="1" title="账号登录">
-              <AccountLogin />
+              <component :is="AccountLogin" v-if="activeTab === '1'" />
             </a-tab-pane>
             <a-tab-pane key="2" title="手机号登录">
-              <PhoneLogin />
+              <component :is="PhoneLogin" v-if="activeTab === '2'" />
             </a-tab-pane>
           </a-tabs>
           <div class="login-right__oauth">
@@ -50,7 +50,8 @@
     <GiThemeBtn class="theme-btn" />
     <Background />
   </div>
-  <div class="login h5">
+
+  <div v-else class="login h5">
     <div class="login-logo">
       <img v-if="logo" :src="logo" alt="logo" />
       <img v-else src="/logo.svg" alt="logo" />
@@ -60,13 +61,13 @@
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
           <h3 v-if="isEmailLogin" class="login-right__title">邮箱登录</h3>
-          <EmailLogin v-show="isEmailLogin" />
-          <a-tabs v-show="!isEmailLogin" class="login-right__form">
+          <EmailLogin v-if="isEmailLogin" />
+          <a-tabs v-else v-model:activeKey="activeTab" class="login-right__form">
             <a-tab-pane key="1" title="账号登录">
-              <AccountLogin />
+              <component :is="AccountLogin" v-if="activeTab === '1'" />
             </a-tab-pane>
             <a-tab-pane key="2" title="手机号登录">
-              <PhoneLogin />
+              <component :is="PhoneLogin" v-if="activeTab === '2'" />
             </a-tab-pane>
           </a-tabs>
         </div>
@@ -89,6 +90,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import Background from './components/background/index.vue'
 import AccountLogin from './components/account/index.vue'
 import PhoneLogin from './components/phone/index.vue'
@@ -105,6 +107,8 @@ const title = computed(() => appStore.getTitle())
 const logo = computed(() => appStore.getLogo())
 
 const isEmailLogin = ref(false)
+const activeTab = ref('1')
+
 // 切换登录模式
 const toggleLoginMode = () => {
   isEmailLogin.value = !isEmailLogin.value