From c9c0c88b3e88b10c0811cf3ddf7838df59bf9df0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Mon, 18 Dec 2023 11:09:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=A1=86=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue | 72 ++++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 58a6b31..b8ac2d9 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,47 +1,47 @@
 <template>
   <div class="login-box" id="login-box">
     <el-form
-      :model="loginForm"
-      ref="formInstance"
-      :rules="rules"
-      label-width="65px"
+        :model="loginForm"
+        ref="formInstance"
+        :rules="rules"
+        label-width="65px"
     >
-      <h3>FateVerse</h3>
+      <h3>Tunnel Cloud</h3>
       <el-form-item prop="username" label="账号">
         <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
       </el-form-item>
       <el-form-item prop="password" label="密码">
         <el-input
-          v-model="loginForm.password"
-          type="password"
-          :prefix-icon="Lock"
+            v-model="loginForm.password"
+            type="password"
+            :prefix-icon="Lock"
         ></el-input>
       </el-form-item>
       <el-form-item prop="code" label="验证码">
         <div class="code">
           <el-input
-            v-model="loginForm.code"
-            :prefix-icon="key"
-            @keyup.enter.native="handleLogin(formInstance)"
+              v-model="loginForm.code"
+              :prefix-icon="key"
+              @keyup.enter.native="handleLogin(formInstance)"
           ></el-input>
-          <img :src="codeImg" alt="" @click="getCode" />
+          <img :src="codeImg" alt="" @click="getCode"/>
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleLogin(formInstance)" type="primary"
-          >登录</el-button
-        >
+        <el-button @click="handleLogin(formInstance)" type="primary">登录
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
-import { getCodeImg } from "../../api/login";
-import { useAuthStore } from "@/store/userstore";
-import { ElLoading } from "element-plus";
-import { User, Lock, Key } from "@element-plus/icons-vue";
+import {useRouter} from "vue-router";
+import {getCodeImg} from "../../api/login";
+import {useAuthStore} from "@/store/userstore";
+import {ElLoading} from "element-plus";
+import {User, Lock, Key} from "@element-plus/icons-vue";
+
 const router = useRouter();
 const authStore = useAuthStore();
 const loginForm = reactive({
@@ -53,9 +53,9 @@ const loginForm = reactive({
 const codeImg = ref("");
 const formInstance = ref();
 const rules = reactive({
-  username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
-  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+  username: [{required: true, message: "请输入账户名", trigger: "blur"}],
+  password: [{required: true, message: "请输入密码", trigger: "blur"}],
+  code: [{required: true, message: "请输入验证码", trigger: "blur"}],
 });
 
 //获取二维码
@@ -98,14 +98,27 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-button){
+  font-size:22px;
+  height: 40px;
+}
+:deep(.el-form-item__label) {
+  width: 80px!important;
+  font-size: 18px;
+}
+:deep(.el-input__wrapper ) {
+  padding: 5px 11px;
+  font-size: 22px;
+}
+
 .login-box {
   height: 100%;
   background-color: #4158d0;
   background-image: linear-gradient(
-    43deg,
-    #4158d0 0%,
-    #c850c0 46%,
-    #ffcc70 100%
+          43deg,
+          #4158d0 0%,
+          #c850c0 46%,
+          #ffcc70 100%
   );
   display: flex;
   justify-content: center;
@@ -128,17 +141,20 @@ onBeforeUnmount(() => {
     }
   }
 }
+
 .code {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
+
   .el-input {
     // width: ;
     flex: 2;
   }
+
   img {
-    height: 32px;
+    height: 45px;
     flex: 1;
   }
 }