feat:增加登录模块

src/views/login/index.vue

@@ -1,30 +1,156 @@
 <template>
-  <div>
-    <el-button type="primary" @click="loginClick">登录</el-button>
+  <div class="login-view">
+    <div class="login-container">
+      <div class="login-title">
+        <span class="title">
+          {{ appStore.appName }}
+        </span>
+      </div>
+
+      <common-login v-if="authStore.loginType === 'common'"
+                    class="animate__animated animate__bounceIn"/>
+      <phone-login v-if="authStore.loginType === 'phone'"
+                   class="animate__animated animate__bounceIn"/>
+      <email-login v-if="authStore.loginType === 'email'"
+                   class="animate__animated animate__bounceIn"/>
+      <register v-if="authStore.loginType === 'register'"
+                   class="animate__animated animate__bounceIn"/>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import CommonLogin from '@/components/Login/CommonLogin.vue'
+import PhoneLogin from '@/components/Login/PhoneLogin.vue'
+import EmailLogin from '@/components/Login/EmailLogin.vue'
+import Register from '@/components/Login/Register.vue'
 import { useAuthStore } from '@/store/auth'
-import { useRouter } from 'vue-router'
-import { useUserStore } from '@/store/user'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
-import { ElMessage } from 'element-plus'
+import { useAppStore } from '@/store/app.ts'
+import { onMounted, onUnmounted } from 'vue'
 
 const authStore = useAuthStore()
-const router = useRouter()
-const userStore = useUserStore()
+const appStore = useAppStore()
 
-const loginClick = async () => {
-  if (!isMobile()) {
-    ElMessage.error('暂不支持PC端')
-  }
-  await authStore.handleLogin('common')
-  userStore.handleSession(authStore.homeSession)
-  await router.push('/record')
-}
+onMounted(() => {
+  authStore.isVerified = false
+  // authStore.resetLoginForm()
+})
+
+onUnmounted(() => {
+  authStore.stopCountdown()
+})
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+$form-item-width: 300px;
+$login-height: 500px;
 
+.login-view {
+  height: 100%;
+  display: grid;
+  place-items: center;
+
+  .login-container {
+    // height: $login-height;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
+
+    display: flex;
+    flex-direction: column;
+    // justify-content: center;
+    align-items: center;
+    gap: 1vh;
+
+    .login-title {
+      margin-bottom: 20px;
+      .title {
+        font-size: 1.5rem;
+      }
+    }
+
+    .common-login {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1vh;
+
+      .login-form {
+        .el-form-item {
+          width: $form-item-width;
+        }
+
+        .login-option {
+          .el-form-item__content {
+            justify-content: space-between;
+          }
+        }
+      }
+
+      .login-type {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .login-others-type {
+        margin-top: 5vh;
+        width: 100%;
+
+        .el-divider {
+          .el-divider__text {
+            color: #A9A9A9;
+            font-size: 0.8rem;
+          }
+        }
+
+        .type-list {
+          display: flex;
+          justify-content: space-evenly;
+
+          i {
+            font-size: 1.2rem;
+          }
+
+          i:hover {
+            cursor: pointer;
+            filter: brightness(1.5);
+          }
+        }
+      }
+
+      .login-register {
+        margin-top: 10px;
+        display: flex;
+        justify-content: center;
+        span {
+          font-size: 0.9rem;
+        }
+      }
+    }
+
+    .phone-login, .email-login, .register {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 1vh;
+
+      .login-form {
+        .el-form-item {
+          width: $form-item-width;
+        }
+
+        .code-item {
+          .el-form-item__content {
+            flex-wrap: nowrap;
+            gap: 10px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>