perf：登录页面优化

src/assets/styles/login.scss

@@ -14,13 +14,13 @@
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #fff;
+  // color: #fff;
 }
 
 .login-form {
   border-radius: 6px;
-  // background: #ffffff;
+  background: #ffffff;
-  background-color: hsla(0, 0%, 100%, 0.3);
+  // background-color: hsla(0, 0%, 100%, 0.3);
   width: 310px;
   padding: 25px 15px 5px 15px;
   position: relative;

src/i18n/pages/login/en.json

@@ -8,6 +8,8 @@
     "loginSuccess": "login success",
     "loginTimeOut": "Login status has expired, please log in again",
     "reLogin": "re-register",
-    "invalidSession": "Invalid session, or session has expired, please log in again."
+    "invalidSession": "Invalid session, or session has expired, please log in again.",
+    "otherLoginWay": "Other",
+    "register": "Sign up now"
   }
-}
+}

src/i18n/pages/login/zh-cn.json

@@ -8,6 +8,8 @@
     "loginSuccess": "登录成功",
     "loginTimeOut": "登录状态已过期，请重新登录",
     "reLogin": "重新登录",
-    "invalidSession": "无效的会话，或者会话已过期，请重新登录。"
+    "invalidSession": "无效的会话，或者会话已过期，请重新登录。",
+    "otherLoginWay": "其他登录方式",
+    "register": "立即注册"
   }
-}
+}

src/i18n/pages/login/zh-tw.json

@@ -8,6 +8,8 @@
     "loginSuccess": "登錄成功",
     "loginTimeOut": "登錄狀態已過期，請重新登錄",
     "reLogin": "重新登錄",
-    "invalidSession": "無效的會話，或者會話已過期，請重新登錄。"
+    "invalidSession": "無效的會話，或者會話已過期，請重新登錄。",
+    "otherLoginWay": "其他登錄方式",
+    "register": "立即註冊"
   }
-}
+}

src/views/login.vue

@@ -44,7 +44,7 @@
 
       <div style="display: flex; justify-content: space-between">
         <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
-        <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
       </div>
 
       <el-form-item style="width: 100%">
@@ -53,12 +53,12 @@
           <span v-else>登 录 中...</span>
         </el-button>
       </el-form-item>
-      <el-form-item>
+      <div class="other-login">
-        <img src="../assets/icons/gitee.png" alt="" class="login-icon" @click="onAuth('GITEE')" />
+        <el-divider>{{ $t('login.otherLoginWay') }}</el-divider>
-        <img src="../assets/icons/github.png" alt="" class="login-icon" />
+        <img src="../assets/icons/gitee-fill-round.png" alt="" class="login-icon" @click="onAuth('GITEE')" />
-        <img src="../assets/icons/dingding.png" alt="" class="login-icon" />
+        <img src="../assets/icons/github-fill.png" alt="" class="login-icon" />
-        <img src="../assets/icons/wechat.png" alt="" class="login-icon" />
+        <img src="../assets/icons/wechat-fill.png" alt="" class="login-icon" />
-      </el-form-item>
+      </div>
     </el-form>
 
     <!--  底部  -->
@@ -177,5 +177,9 @@ getCookie()
 .login-icon {
   width: 30px;
   margin-right: 10px;
+  cursor: pointer;
+}
+.other-login {
+  padding: 0px 10px 5px;
 }
 </style>