refactor: ♻️ 登录页面样式优化，根据页面高度控制ICP是否显示

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <!-- 顶部 -->
-    <div class="absolute top-0 flex items-center justify-end px-5 h-20 w-full">
+    <div class="absolute-tl flex-x-end px-5 h-20 w-full">
       <el-switch
         v-model="isDark"
         inline-prompt
@@ -14,10 +14,10 @@
       <lang-select class="ml-2 cursor-pointer" />
     </div>
     <!-- 登录表单 -->
-    <el-card class="!border-none w-100 !bg-transparent !rounded-4% <sm:w-83">
+    <el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-80">
       <div class="text-center relative">
         <h2>{{ title }}</h2>
-        <el-tag class="ml-2 absolute top-0 right-0">{{ version }}</el-tag>
+        <el-tag class="ml-2 absolute-tr">{{ version }}</el-tag>
       </div>
 
       <el-form
@@ -28,17 +28,17 @@
       >
         <!-- 用户名 -->
         <el-form-item prop="username">
-          <div class="p-2">
+          <div class="flex-y-center w-full">
-            <svg-icon icon-class="user" />
+            <svg-icon icon-class="user" class="mx-2" />
+            <el-input
+              ref="username"
+              v-model="loginData.username"
+              :placeholder="$t('login.username')"
+              name="username"
+              size="large"
+              class="h-[48px]"
+            />
           </div>
-          <el-input
-            ref="username"
-            v-model="loginData.username"
-            class="flex-1"
-            size="large"
-            :placeholder="$t('login.username')"
-            name="username"
-          />
         </el-form-item>
 
         <!-- 密码 -->
@@ -48,58 +48,55 @@
           placement="right"
         >
           <el-form-item prop="password">
-            <span class="p-2">
+            <div class="flex-y-center w-full">
-              <el-icon><Lock /></el-icon>
+              <el-icon class="mx-2"><Lock /></el-icon>
-            </span>
+              <el-input
-            <el-input
+                v-model="loginData.password"
-              v-model="loginData.password"
+                :placeholder="$t('login.password')"
-              class="flex-1"
+                :type="passwordVisible === false ? 'password' : 'input'"
-              size="large"
+                name="password"
-              :placeholder="$t('login.password')"
+                @keyup="checkCapslock"
-              :type="passwordVisible === false ? 'password' : 'input'"
+                @keyup.enter="handleLogin"
-              name="password"
+                size="large"
-              @keyup="checkCapslock"
+                class="flex-1 h-[48px]"
-              @keyup.enter="handleLogin"
+              />
-            />
+              <span
-            <span class="mr-2" @click="passwordVisible = !passwordVisible">
+                class="mr-2 cursor-pointer"
-              <el-icon v-if="passwordVisible === false"><View /></el-icon>
+                @click="passwordVisible = !passwordVisible"
-              <el-icon v-else><Hide /></el-icon>
+              >
-            </span>
+                <el-icon v-if="passwordVisible === false"><View /></el-icon>
+                <el-icon v-else><Hide /></el-icon>
+              </span>
+            </div>
           </el-form-item>
         </el-tooltip>
 
         <!-- 验证码 -->
-        <el-form-item prop="captchaCode" class="flex-x-between">
+        <el-form-item prop="captchaCode">
-          <div class="flex">
+          <div class="flex-y-center w-full">
-            <span class="p-2">
+            <svg-icon icon-class="captcha" class="mx-2" />
-              <svg-icon icon-class="captcha" />
-            </span>
-
             <el-input
               v-model="loginData.captchaCode"
               auto-complete="off"
               size="large"
+              class="flex-1"
               :placeholder="$t('login.captchaCode')"
-              class="mr-[10px]"
               @keyup.enter="handleLogin"
             />
-          </div>
 
-          <div class="flex-x-end w-[120px] cursor-pointer" @click="getCaptcha">
             <el-image
+              @click="getCaptcha"
               :src="captchaBase64"
-              class="rounded-tr-md rounded-br-md h-[48px]"
+              class="rounded-tr-md rounded-br-md cursor-pointer h-[48px]"
-            >
+            />
-              <template #error>
-                <el-icon><Picture /></el-icon>
-              </template>
-            </el-image>
           </div>
         </el-form-item>
 
+        <!-- 登录按钮 -->
         <el-button
           :loading="loading"
           type="primary"
+          size="large"
           class="w-full"
           @click.prevent="handleLogin"
           >{{ $t("login.login") }}
@@ -114,10 +111,7 @@
     </el-card>
 
     <!-- ICP备案 -->
-    <div
+    <div class="absolute bottom-1 text-[10px] text-center" v-show="icpVisible">
-      class="absolute bottom-1 text-[10px] text-center"
-      v-show="useAppStore().device == 'desktop'"
-    >
       <p>
         Copyright © 2021 - 2024 youlai.tech All Rights Reserved. 有来技术
         版权所有
@@ -128,12 +122,9 @@
 </template>
 
 <script setup lang="ts">
-import router from "@/router";
-
-import { Sunny, Moon } from "@element-plus/icons-vue";
 import { useSettingsStore, useUserStore, useAppStore } from "@/store";
-
+import { Sunny, Moon } from "@element-plus/icons-vue";
-// API依赖
+import router from "@/router";
 import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 import { getCaptchaApi } from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
@@ -159,14 +150,22 @@ const handleThemeChange = (isDark: any) => {
  * 根据屏幕宽度切换设备模式
  */
 const appStore = useAppStore();
-const WIDTH = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
+const { width, height } = useWindowSize();
-const { width } = useWindowSize();
+const icpVisible = ref(true);
+
 watchEffect(() => {
-  if (width.value < WIDTH) {
+  // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
+  if (width.value < 992) {
     appStore.toggleDevice("mobile");
   } else {
     appStore.toggleDevice("desktop");
   }
+
+  if (height.value < 600) {
+    icpVisible.value = false;
+  } else {
+    icpVisible.value = true;
+  }
 });
 
 const loading = ref(false); // 按钮loading
@@ -285,7 +284,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.dark .login-container {
+html.dark .login-container {
   background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
 }
 
@@ -318,7 +317,8 @@ onMounted(() => {
     }
 
     input:-webkit-autofill {
-      transition: background-color 1000s ease-in-out 0s; /* 通过延时渲染背景色变相去除背景颜色 */
+      /* 通过延时渲染背景色变相去除背景颜色 */
+      transition: background-color 1000s ease-in-out 0s;
     }
   }
 }

uno.config.ts

@@ -18,6 +18,8 @@ export default defineConfig({
     "wh-full": "w-full h-full",
     "flex-x-between": "flex items-center justify-between",
     "flex-x-end": "flex items-center justify-end",
+    "absolute-tl": "absolute top-0 left-0",
+    "absolute-tr": "absolute top-0 right-0",
   },
   theme: {
     colors: {