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

Former-commit-id: b0a95b8dc1

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,93 +1,107 @@
 <template>
   <div class="login-container">
-    <el-form
+    <!-- 顶部 -->
-      ref="loginFormRef"
+    <div class="absolute top-0 flex items-center justify-end px-25 h-20 w-full">
-      :model="loginData"
+      <el-switch
-      :rules="loginRules"
+        v-model="isDark"
-      class="login-form"
+        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"
     >
-      <div class="flex text-white items-center py-4 title-wrap">
+      <h2 class="text-center">
-        <span class="text-2xl flex-1 text-center title">
+        {{ $t("login.title") }}
-          {{ $t("login.title") }}
+      </h2>
-        </span>
+      <el-form
-        <lang-select class="text-white! cursor-pointer" />
+        ref="loginFormRef"
-      </div>
+        :model="loginData"
-
+        :rules="loginRules"
-      <el-form-item prop="username">
+        class="login-form"
-        <div class="p-2 text-white">
-          <svg-icon icon-class="user" />
-        </div>
-        <el-input
-          ref="username"
-          v-model="loginData.username"
-          class="flex-1"
-          size="large"
-          :placeholder="$t('login.username')"
-          name="username"
-        />
-      </el-form-item>
-
-      <el-tooltip
-        :disabled="isCapslock === false"
-        content="Caps lock is On"
-        placement="right"
       >
-        <el-form-item prop="password">
+        <el-form-item prop="username">
-          <span class="p-2 text-white">
+          <div class="p-2">
-            <svg-icon icon-class="password" />
+            <svg-icon icon-class="user" />
-          </span>
+          </div>
           <el-input
-            v-model="loginData.password"
+            ref="username"
+            v-model="loginData.username"
             class="flex-1"
-            :placeholder="$t('login.password')"
-            :type="passwordVisible === false ? 'password' : 'input'"
             size="large"
-            name="password"
+            :placeholder="$t('login.username')"
-            @keyup="checkCapslock"
+            name="username"
+          />
+        </el-form-item>
+
+        <el-tooltip
+          :disabled="isCapslock === false"
+          content="Caps lock is On"
+          placement="right"
+        >
+          <el-form-item prop="password">
+            <span class="p-2">
+              <svg-icon icon-class="password" />
+            </span>
+            <el-input
+              v-model="loginData.password"
+              class="flex-1"
+              :placeholder="$t('login.password')"
+              :type="passwordVisible === false ? 'password' : 'input'"
+              size="large"
+              name="password"
+              @keyup="checkCapslock"
+              @keyup.enter="handleLogin"
+            />
+            <span class="mr-2" @click="passwordVisible = !passwordVisible">
+              <svg-icon
+                :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+                class="cursor-pointer"
+              />
+            </span>
+          </el-form-item>
+        </el-tooltip>
+
+        <!-- 验证码 -->
+        <el-form-item prop="verifyCode">
+          <span class="p-2">
+            <svg-icon icon-class="verify-code" />
+          </span>
+
+          <el-input
+            v-model="loginData.verifyCode"
+            auto-complete="off"
+            :placeholder="$t('login.verifyCode')"
+            class="w-[60%]"
             @keyup.enter="handleLogin"
           />
-          <span class="mr-2" @click="passwordVisible = !passwordVisible">
+
-            <svg-icon
+          <div class="captcha">
-              :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+            <img :src="captchaBase64" @click="getCaptcha" />
-              class="text-white cursor-pointer"
+          </div>
-            />
-          </span>
         </el-form-item>
-      </el-tooltip>
 
-      <!-- 验证码 -->
+        <el-button
-      <el-form-item prop="verifyCode">
+          :loading="loading"
-        <span class="p-2 text-white">
+          type="primary"
-          <svg-icon icon-class="verify-code" />
+          class="w-full"
-        </span>
+          @click.prevent="handleLogin"
-        <el-input
+          >{{ $t("login.login") }}
-          v-model="loginData.verifyCode"
+        </el-button>
-          auto-complete="off"
-          :placeholder="$t('login.verifyCode')"
-          class="w-[60%]"
-          @keyup.enter="handleLogin"
-        />
 
-        <div class="captcha">
+        <!-- 账号密码提示 -->
-          <img :src="captchaBase64" @click="getCaptcha" />
+        <div class="mt-10 text-sm">
+          <span>{{ $t("login.username") }}: admin</span>
+          <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
         </div>
-      </el-form-item>
+      </el-form>
-
+    </el-card>
-      <el-button
-        size="default"
-        :loading="loading"
-        type="primary"
-        class="w-full"
-        @click.prevent="handleLogin"
-        >{{ $t("login.login") }}
-      </el-button>
-
-      <!-- 账号密码提示 -->
-      <div class="mt-4 text-white text-sm">
-        <span>{{ $t("login.username") }}: admin</span>
-        <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
-      </div>
-    </el-form>
   </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: [