refactor: ♻️ 登录页面样式优化

Former-commit-id: b0a95b8dc160984edbdb3189263f51104e8b3038

src/layout/components/Settings/index.vue

@@ -86,6 +86,7 @@ onMounted(() => {
     "--el-color-primary",
     settingsStore.themeColor
   );
+  document.documentElement.classList.add(theme);
 });
 </script>
 

src/views/login/index.vue

@@ -1,20 +1,33 @@
 <template>
   <div class="login-container">
+    <!-- 顶部 -->
+    <div class="absolute top-0 flex items-center justify-end px-25 h-20 w-full">
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
+        @change="toggleDark"
+      />
+      <lang-select class="ml-4" />
+    </div>
+    <!-- 登录表单 -->
+    <el-card
+      class="z-1 !border-none w-100 !bg-transparent !rounded-4% <sm:w-83"
+    >
+      <h2 class="text-center">
+        {{ $t("login.title") }}
+      </h2>
       <el-form
         ref="loginFormRef"
         :model="loginData"
         :rules="loginRules"
         class="login-form"
       >
-      <div class="flex text-white items-center py-4 title-wrap">
-        <span class="text-2xl flex-1 text-center title">
-          {{ $t("login.title") }}
-        </span>
-        <lang-select class="text-white! cursor-pointer" />
-      </div>
-
         <el-form-item prop="username">
-        <div class="p-2 text-white">
+          <div class="p-2">
             <svg-icon icon-class="user" />
           </div>
           <el-input
@@ -33,7 +46,7 @@
           placement="right"
         >
           <el-form-item prop="password">
-          <span class="p-2 text-white">
+            <span class="p-2">
               <svg-icon icon-class="password" />
             </span>
             <el-input
@@ -49,7 +62,7 @@
             <span class="mr-2" @click="passwordVisible = !passwordVisible">
               <svg-icon
                 :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
-              class="text-white cursor-pointer"
+                class="cursor-pointer"
               />
             </span>
           </el-form-item>
@@ -57,9 +70,10 @@
 
         <!-- 验证码 -->
         <el-form-item prop="verifyCode">
-        <span class="p-2 text-white">
+          <span class="p-2">
             <svg-icon icon-class="verify-code" />
           </span>
+
           <el-input
             v-model="loginData.verifyCode"
             auto-complete="off"
@@ -74,7 +88,6 @@
         </el-form-item>
 
         <el-button
-        size="default"
           :loading="loading"
           type="primary"
           class="w-full"
@@ -83,11 +96,12 @@
         </el-button>
 
         <!-- 账号密码提示 -->
-      <div class="mt-4 text-white text-sm">
+        <div class="mt-10 text-sm">
           <span>{{ $t("login.username") }}: admin</span>
           <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
         </div>
       </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -96,6 +110,8 @@ import { useI18n } from "vue-i18n";
 import router from "@/router";
 import LangSelect from "@/components/LangSelect/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
 
 // 状态管理依赖
 import { useUserStore } from "@/store/modules/user";
@@ -110,6 +126,9 @@ const appStore = useAppStore();
 const userStore = useUserStore();
 const route = useRoute();
 
+const isDark = useDark();
+const toggleDark = () => useToggle(isDark);
+
 /**
  * 按钮loading
  */
@@ -166,30 +185,6 @@ const loginRules = computed(() => {
     ],
   };
 });
-// const loginRules = reactive({
-//   username: [
-//     {
-//       required: true,
-//       trigger: "blur",
-//       message: `请输入${t("login.username")}`,
-//     },
-//   ],
-//   password: [
-//     {
-//       required: true,
-//       trigger: "blur",
-//       validator: passwordValidator,
-//       message: `请输入${t("login.password")}`,
-//     },
-//   ],
-//   verifyCode: [
-//     {
-//       required: true,
-//       trigger: "blur",
-//       message: `请输入${t("login.verifyCode")}`,
-//     },
-//   ],
-// });
 
 /**
  * 密码校验器
@@ -265,36 +260,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .login-container {
-  width: 100%;
+  @apply w-full h-full flex-center dark:bg-#101628 bg-no-repeat bg-center-top;
-  min-height: 100%;
-  overflow: hidden;
-  background-color: #2d3a4b;
-
-  .title-wrap {
-    filter: contrast(30);
-
-    .title {
-      letter-spacing: 4px;
-      animation: showup 3s forwards;
-    }
-
-    @keyframes showup {
-      0% {
-        letter-spacing: -20px;
-      }
-
-      100% {
-        letter-spacing: 4px;
-      }
-    }
-  }
 
   .login-form {
-    width: 520px;
+    padding: 30px 10px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
-    overflow: hidden;
 
     .captcha {
       position: absolute;
@@ -311,40 +280,18 @@ onMounted(() => {
 }
 
 .el-form-item {
-  background: rgb(0 0 0 / 10%);
+  background: var(--el-input-bg-color);
-  border: 1px solid rgb(255 255 255 / 10%);
+  border: 1px solid var(--el-border-color);
   border-radius: 5px;
 }
 
-.el-input {
+:deep(.el-input) {
-  background: transparent;
+  .el-input__wrapper {
-
-  // 子组件 scoped 无效，使用 :deep
-  :deep(.el-input__wrapper) {
     padding: 0;
-    background: transparent;
     box-shadow: none;
 
-    .el-input__inner {
+    input:-webkit-autofill {
-      color: #fff;
+      transition: background-color 5000s ease-in-out 0s; /* 通过延时渲染背景色变相去除背景颜色 */
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      caret-color: #fff;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0 1000px transparent inset !important;
-        -webkit-text-fill-color: #fff !important;
-      }
-
-      // 设置输入框自动填充的延迟属性
-      &:-webkit-autofill,
-      &:-webkit-autofill:hover,
-      &:-webkit-autofill:focus,
-      &:-webkit-autofill:active {
-        transition: color 99999s ease-out, background-color 99999s ease-out;
-        transition-delay: 99999s;
-      }
     }
   }
 }

uno.config.ts

@@ -11,12 +11,13 @@ import {
 } from "unocss";
 
 export default defineConfig({
-  shortcuts: [
+  shortcuts: {
-    // ...
+    "flex-center": "flex justify-center items-center",
-  ],
+  },
   theme: {
     colors: {
-      // ...
+      primary: "var(--el-color-primary)",
+      primary_dark: "var(--el-color-primary-light-5)",
     },
   },
   presets: [