refactor: 登录页样式写法优化

src/views/login/index.vue

@@ -5,8 +5,8 @@
       <el-switch
         v-model="isDark"
         inline-prompt
-        :active-icon="IconEpMoon"
+        :active-icon="Moon"
-        :inactive-icon="IconEpSunny"
+        :inactive-icon="Sunny"
         active-color="var(--el-fill-color-dark)"
         inactive-color="var(--el-color-primary)"
         @change="handleThemeChange"
@@ -14,19 +14,19 @@
       <lang-select class="ml-2 cursor-pointer" />
     </div>
     <!-- 登录表单 -->
-    <el-card
+    <el-card class="!border-none w-100 !bg-transparent !rounded-4% <sm:w-83">
-      class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
-    >
       <div class="text-center relative">
         <h2>{{ title }}</h2>
         <el-tag class="ml-2 absolute top-0 right-0">{{ version }}</el-tag>
       </div>
+
       <el-form
         ref="loginFormRef"
         :model="loginData"
         :rules="loginRules"
         class="login-form"
       >
+        <!-- 用户名 -->
         <el-form-item prop="username">
           <div class="p-2">
             <svg-icon icon-class="user" />
@@ -41,6 +41,7 @@
           />
         </el-form-item>
 
+        <!-- 密码 -->
         <el-tooltip
           :disabled="isCapslock === false"
           content="Caps lock is On"
@@ -48,11 +49,12 @@
         >
           <el-form-item prop="password">
             <span class="p-2">
-              <svg-icon icon-class="password" />
+              <el-icon><Lock /></el-icon>
             </span>
             <el-input
               v-model="loginData.password"
               class="flex-1"
+              size="large"
               :placeholder="$t('login.password')"
               :type="passwordVisible === false ? 'password' : 'input'"
               name="password"
@@ -60,17 +62,15 @@
               @keyup.enter="handleLogin"
             />
             <span class="mr-2" @click="passwordVisible = !passwordVisible">
-              <svg-icon
+              <el-icon v-if="passwordVisible === false"><View /></el-icon>
-                :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+              <el-icon v-else><Hide /></el-icon>
-                class="cursor-pointer"
-              />
             </span>
           </el-form-item>
         </el-tooltip>
 
         <!-- 验证码 -->
-        <el-form-item prop="captchaCode" class="captcha-container">
+        <el-form-item prop="captchaCode" class="flex justify-between">
-          <div class="input-and-icon">
+          <div class="flex">
             <span class="p-2">
               <svg-icon icon-class="captcha" />
             </span>
@@ -78,23 +78,24 @@
             <el-input
               v-model="loginData.captchaCode"
               auto-complete="off"
+              size="large"
               :placeholder="$t('login.captchaCode')"
-              class="flex-1"
+              class="mr-[10px]"
               @keyup.enter="handleLogin"
             />
           </div>
 
-          <div class="captcha">
+          <div
+            class="flex justify-end h-full items-center !w-[128px] cursor-pointer"
+            @click="getCaptcha"
+          >
             <el-image
               :src="captchaBase64"
-              @click="getCaptcha"
+              height="48px"
-              :style="{ height: captchaHeight }"
+              class="rounded-tr-md rounded-br-md"
-              class="captcha-image"
             >
               <template #error>
-                <div class="image-slot">
+                <el-icon><Picture /></el-icon>
-                  <i-ep-picture />
-                </div>
               </template>
             </el-image>
           </div>
@@ -131,10 +132,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import router from "@/router";
-import IconEpSunny from "~icons/ep/sunny";
+
-import IconEpMoon from "~icons/ep/moon";
+import { Sunny, Moon } from "@element-plus/icons-vue";
 import { useSettingsStore, useUserStore, useAppStore } from "@/store";
 
 // API依赖
@@ -142,6 +142,8 @@ import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 import { getCaptchaApi } from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
 
+const route = useRoute();
+const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 
 const { title, version } = settingsStore;
@@ -234,23 +236,10 @@ function getCaptcha() {
     captchaBase64.value = data.captchaBase64;
   });
 }
-/**
- * 根据组件大小调整验证码图片高度
- */
-const captchaHeight = computed(() => {
-  if (appStore.size === "large") {
-    return "56px";
-  } else if (appStore.size === "small") {
-    return "40px";
-  }
-  return "48px";
-});
 
 /**
  * 登录
  */
-const route = useRoute();
-const userStore = useUserStore();
 function handleLogin() {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
@@ -305,52 +294,13 @@ onMounted(() => {
 }
 
 .login-container {
-  @apply w-full h-full flex-center;
-
   overflow-y: auto;
   background: url("@/assets/images/login-bg.jpg") no-repeat center right;
 
+  @apply wh-full flex-center;
+
   .login-form {
     padding: 30px 10px;
-
-    .captcha-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .input-and-icon {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        margin-right: 10px; /* 调整间距 */
-      }
-
-      .captcha {
-        /* 移除绝对定位 */
-        flex-shrink: 0; /* 防止图片压缩 */
-
-        .captcha-image {
-          width: 120px; /* 固定图片宽度 */
-          height: 30px; /* 固定图片高度 */
-          cursor: pointer;
-        }
-
-        .image-slot {
-          display: flex;
-          align-items: center;
-          justify-content: right;
-          width: 100%;
-          height: 100%;
-          font-size: 18px;
-          color: var(--el-text-color-secondary);
-          background: var(--el-fill-color-light);
-
-          svg {
-            margin-right: 10px;
-          }
-        }
-      }
-    }
   }
 }