From 05ab89d03fe6401994698ad9ecdeb8540ec49553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=8B=E5=B8=86?= <201379873@qq.com>
Date: Thu, 2 May 2024 17:04:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8Ch5=E7=AB=AF=E6=8E=92=E7=89=88=E6=9B=B4?=
 =?UTF-8?q?=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/login_h5.jpg | Bin 0 -> 9119 bytes
 src/views/login/index.vue      | 523 +++++++++++++++++++++++----------
 2 files changed, 364 insertions(+), 159 deletions(-)
 create mode 100644 src/assets/images/login_h5.jpg

diff --git a/src/assets/images/login_h5.jpg b/src/assets/images/login_h5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17da8e7dedd1fdc6e5740e8369c49784de96b5f4
GIT binary patch
literal 9119
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

literal 0
HcmV?d00001

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ec33d06..ffc0fca 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login">
+  <div class="login pc">
     <h3 class="login-logo">
       <img v-if="logo" :src="logo" alt="logo" />
       <img v-else src="/logo.svg" alt="logo" />
@@ -15,8 +15,8 @@
       <a-col :xs="24" :sm="12" :md="11">
         <div class="login-right">
           <h3 class="login-right__title" v-if="isEmailLogin">邮箱登录</h3>
-          <EmailLogin v-if="isEmailLogin" />
-          <a-tabs v-else class="login-right__form" destroy-on-hide>
+          <EmailLogin v-show="isEmailLogin" />
+          <a-tabs v-show="!isEmailLogin" class="login-right__form">
             <a-tab-pane title="账号登录" key="1">
               <AccountLogin />
             </a-tab-pane>
@@ -50,6 +50,42 @@
     <GiThemeBtn class="theme-btn" />
     <Background />
   </div>
+  <div class="login h5">
+    <div class="login-logo">
+      <img v-if="logo" :src="logo" alt="logo" />
+      <img v-else src="/logo.svg" alt="logo" />
+      <span>{{ title }}</span>
+    </div>
+    <a-row align="stretch" class="login-box">
+      <a-col :xs="24" :sm="12" :md="11">
+        <div class="login-right">
+          <h3 class="login-right__title" v-if="isEmailLogin">邮箱登录</h3>
+          <EmailLogin v-show="isEmailLogin" />
+          <a-tabs v-show="!isEmailLogin" class="login-right__form">
+            <a-tab-pane title="账号登录" key="1">
+              <AccountLogin />
+            </a-tab-pane>
+            <a-tab-pane title="手机号登录" key="2">
+              <PhoneLogin />
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </a-col>
+    </a-row>
+    <div class="login-right__oauth">
+      <a-divider orientation="center">其他登录方式</a-divider>
+      <div class="list">
+        <div v-if="isEmailLogin" class="mode item" @click="toggleLoginMode"><icon-user /> 账号/手机号登录</div>
+        <div v-else class="mode item" @click="toggleLoginMode"><icon-email /> 邮箱登录</div>
+        <a class="item" title="使用 Gitee 账号登录" @click="onOauth('gitee')">
+          <GiSvgIcon name="gitee" :size="24" />
+        </a>
+        <a class="item" title="使用 GitHub 账号登录" @click="onOauth('github')">
+          <GiSvgIcon name="github" :size="24" />
+        </a>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -82,181 +118,350 @@ const onOauth = async (source: string) => {
 </script>
 
 <style lang="scss" scoped>
-.login {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color-bg-5);
-  &-logo {
-    position: fixed;
-    top: 20px;
-    left: 30px;
-    z-index: 9999;
-    color: var(--color-text-1);
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 32px;
-    margin-bottom: 20px;
+@media screen and (max-width: 570px) {
+  .pc {
+    display: none !important;
+    background-color: white !important;
+  }
+  .login {
+    height: 100%;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: start;
     align-items: center;
-    img {
-      width: 34px;
-      height: 34px;
-      margin-right: 8px;
-    }
-  }
-  &-box {
-    width: 86%;
-    max-width: 850px;
-    height: 490px;
-    display: flex;
-    z-index: 999;
-    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
-  }
-}
-
-.login-left {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
-  &__img {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    transition: all 0.3s;
-    object-fit: cover;
-  }
-}
-
-.login-right {
-  width: 100%;
-  height: 100%;
-  background: var(--color-bg-1);
-  display: flex;
-  flex-direction: column;
-  padding: 30px 30px 0;
-  box-sizing: border-box;
-  &__title {
-    color: var(--color-text-1);
-    font-weight: 500;
-    font-size: 20px;
-    line-height: 32px;
-    margin-bottom: 20px;
-  }
-  &__form {
-    :deep(.arco-tabs-nav-tab) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    :deep(.arco-tabs-tab) {
-      color: var(--color-text-2);
-    }
-    :deep(.arco-tabs-tab-title) {
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 22px;
-    }
-    :deep(.arco-tabs-content) {
-      margin-top: 10px;
-    }
-    :deep(.arco-tabs-tab-active),
-    :deep(.arco-tabs-tab-title:hover) {
-      color: rgb(var(--arcoblue-6));
-    }
-    :deep(.arco-tabs-nav::before) {
-      display: none;
-    }
-    :deep(.arco-tabs-tab-title:before) {
-      display: none;
-    }
-  }
-  &__oauth {
-    margin-top: auto;
-    margin-bottom: 20px;
-    :deep(.arco-divider-text) {
-      color: var(--color-text-4);
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 20px;
-    }
-    .list {
-      align-items: center;
-      display: flex;
-      justify-content: center;
+    background-color: var(--color-bg-5);
+    &-logo {
       width: 100%;
-      .item {
-        margin-right: 15px;
+      height: 104px;
+      display: flex;
+      padding: 0px 20px;
+      align-items: center;
+      justify-content: start;
+      background-image: url('/src/assets/images/login_h5.jpg');
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      img {
+        width: 34px;
+        height: 34px;
+        margin-right: 8px;
       }
-      .mode {
+    }
+    &-box {
+      width: 100%;
+      display: flex;
+      z-index: 999;
+    }
+  }
+  .login-right {
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg-1);
+    display: flex;
+    flex-direction: column;
+    padding: 30px 30px 0;
+    box-sizing: border-box;
+    &__title {
+      color: var(--color-text-1);
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 32px;
+      margin-bottom: 20px;
+    }
+    &__form {
+      :deep(.arco-tabs-nav-tab) {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+      }
+      :deep(.arco-tabs-tab) {
         color: var(--color-text-2);
+        margin-right: 20px;
+        margin-top: 0px;
+        margin-left: 0px;
+        margin-bottom: 0px;
+      }
+      :deep(.arco-tabs-tab-title) {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+      :deep(.arco-tabs-content) {
+        margin-top: 10px;
+      }
+      :deep(.arco-tabs-tab-active),
+      :deep(.arco-tabs-tab-title:hover) {
+        color: rgb(var(--arcoblue-6));
+      }
+      :deep(.arco-tabs-nav::before) {
+        display: none;
+      }
+      :deep(.arco-tabs-tab-title:before) {
+        display: none;
+      }
+    }
+    &__oauth {
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      padding-bottom: 20px;
+      // margin-top: auto;
+      // margin-bottom: 20px;
+      :deep(.arco-divider-text) {
+        color: var(--color-text-4);
         font-size: 12px;
         font-weight: 400;
         line-height: 20px;
-        padding: 6px 10px;
+      }
+      .list {
         align-items: center;
-        border: 1px solid var(--color-border-3);
-        border-radius: 32px;
-        box-sizing: border-box;
         display: flex;
-        height: 32px;
         justify-content: center;
-        cursor: pointer;
-        .icon {
-          width: 21px;
-          height: 20px;
+        width: 100%;
+        .item {
+          margin-right: 15px;
+        }
+        .mode {
+          color: var(--color-text-2);
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px;
+          padding: 6px 10px;
+          align-items: center;
+          border: 1px solid var(--color-border-3);
+          border-radius: 32px;
+          box-sizing: border-box;
+          display: flex;
+          height: 32px;
+          justify-content: center;
+          cursor: pointer;
+          .icon {
+            width: 21px;
+            height: 20px;
+          }
+        }
+        .mode svg {
+          font-size: 16px;
+          margin-right: 10px;
+        }
+        .mode:hover,
+        .mode svg:hover {
+          background: rgba(var(--primary-6), 0.05);
+          border: 1px solid rgb(var(--primary-3));
+          color: rgb(var(--arcoblue-6));
         }
       }
-      .mode svg {
-        font-size: 16px;
-        margin-right: 10px;
+    }
+  }
+
+  .theme-btn {
+    position: fixed;
+    top: 20px;
+    right: 30px;
+    z-index: 9999;
+  }
+
+  .footer {
+    align-items: center;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 10px;
+    z-index: 999;
+    .beian {
+      .text {
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 0.2px;
+        line-height: 20px;
+        text-align: center;
       }
-      .mode:hover,
-      .mode svg:hover {
-        background: rgba(var(--primary-6), 0.05);
-        border: 1px solid rgb(var(--primary-3));
-        color: rgb(var(--arcoblue-6));
+      .below {
+        align-items: center;
+        display: flex;
       }
     }
   }
 }
-
-.theme-btn {
-  position: fixed;
-  top: 20px;
-  right: 30px;
-  z-index: 9999;
-}
-
-.footer {
-  align-items: center;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 10px;
-  z-index: 999;
-  .beian {
-    .text {
-      font-size: 12px;
-      font-weight: 400;
-      letter-spacing: 0.2px;
-      line-height: 20px;
-      text-align: center;
-    }
-    .below {
-      align-items: center;
+@media screen and (min-width: 571px) {
+  .h5 {
+    display: none !important;
+  }
+  .login {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-bg-5);
+    &-logo {
+      position: fixed;
+      top: 20px;
+      left: 30px;
+      z-index: 9999;
+      color: var(--color-text-1);
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 32px;
+      margin-bottom: 20px;
       display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 34px;
+        height: 34px;
+        margin-right: 8px;
+      }
+    }
+    &-box {
+      width: 86%;
+      max-width: 850px;
+      height: 490px;
+      display: flex;
+      z-index: 999;
+      box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .login-left {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));
+    &__img {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      transition: all 0.3s;
+      object-fit: cover;
+    }
+  }
+
+  .login-right {
+    width: 100%;
+    height: 100%;
+    background: var(--color-bg-1);
+    display: flex;
+    flex-direction: column;
+    padding: 30px 30px 0;
+    box-sizing: border-box;
+    &__title {
+      color: var(--color-text-1);
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 32px;
+      margin-bottom: 20px;
+    }
+    &__form {
+      :deep(.arco-tabs-nav-tab) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      :deep(.arco-tabs-tab) {
+        color: var(--color-text-2);
+      }
+      :deep(.arco-tabs-tab-title) {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+      :deep(.arco-tabs-content) {
+        margin-top: 10px;
+      }
+      :deep(.arco-tabs-tab-active),
+      :deep(.arco-tabs-tab-title:hover) {
+        color: rgb(var(--arcoblue-6));
+      }
+      :deep(.arco-tabs-nav::before) {
+        display: none;
+      }
+      :deep(.arco-tabs-tab-title:before) {
+        display: none;
+      }
+    }
+    &__oauth {
+      margin-top: auto;
+      margin-bottom: 20px;
+      :deep(.arco-divider-text) {
+        color: var(--color-text-4);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+      }
+      .list {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        .item {
+          margin-right: 15px;
+        }
+        .mode {
+          color: var(--color-text-2);
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 20px;
+          padding: 6px 10px;
+          align-items: center;
+          border: 1px solid var(--color-border-3);
+          border-radius: 32px;
+          box-sizing: border-box;
+          display: flex;
+          height: 32px;
+          justify-content: center;
+          cursor: pointer;
+          .icon {
+            width: 21px;
+            height: 20px;
+          }
+        }
+        .mode svg {
+          font-size: 16px;
+          margin-right: 10px;
+        }
+        .mode:hover,
+        .mode svg:hover {
+          background: rgba(var(--primary-6), 0.05);
+          border: 1px solid rgb(var(--primary-3));
+          color: rgb(var(--arcoblue-6));
+        }
+      }
+    }
+  }
+
+  .theme-btn {
+    position: fixed;
+    top: 20px;
+    right: 30px;
+    z-index: 9999;
+  }
+
+  .footer {
+    align-items: center;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 10px;
+    z-index: 999;
+    .beian {
+      .text {
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 0.2px;
+        line-height: 20px;
+        text-align: center;
+      }
+      .below {
+        align-items: center;
+        display: flex;
+      }
     }
   }
 }