🎈 perf: 优化部分样式的展示

klp-ui/src/views/login.vue

@@ -153,10 +153,18 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+// 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
+$--color-background: #2b2f36; 
+$--color-text-primary: #ffffff;
+$--color-text-secondary: #b6bdc5;
+$--border-color-light: #4c5057;
+$--color-primary: #5F7BA0;
+$--metal-gradient-light: linear-gradient(145deg, #3e434a, #363b41);
+
 .login-page {
   display: flex;
   height: 100vh;
-  background: #f7f8fa;
+  background: $--color-background; // 改用全局深色背景变量
 }
 
 .login-logo {
@@ -175,6 +183,7 @@ export default {
 
   .login-title {
     font-size: 22px;
+    color: $--color-text-primary; // 白色文字
   }
 }
 
@@ -183,32 +192,38 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #fff;
+  background: $--metal-gradient-light; // 金属渐变背景
   position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
 }
 
 .login-box {
   width: 500px;
   padding: 40px 32px 32px 32px;
   border-radius: 12px;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
-  background: #fff;
+  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
+  background: $--color-background; // 深色背景
+  border: 1px solid $--border-color-light; // 浅色边框
 }
 
 .login-title-welcome {
   font-size: 22px;
   font-weight: 600;
-  color: #222;
+  color: $--color-text-primary; // 白色文字
   text-align: left;
   margin-bottom: 24px;
 }
 
 .login-form {
   .el-input {
-    height: 40px;
-
     input {
       height: 40px;
+      color: $--color-text-primary; // 白色文字
+      background: transparent;
+    }
+
+    &:focus-within {
+      border-color: $--color-primary; // 聚焦时显示主题色边框
     }
   }
 
@@ -216,6 +231,7 @@ export default {
     height: 40px;
     width: 16px;
     margin-left: 2px;
+    color: $--color-text-secondary; // 浅灰色图标
   }
 }
 
@@ -232,6 +248,22 @@ export default {
 .login-code-img {
   width: 100%;
   height: 40px;
+  opacity: 0.8;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.el-checkbox {
+  color: $--color-text-primary; // 白色文字
+}
+
+.el-button--primary {
+  background: $--color-primary; // 主题色按钮
+  border: none;
+  &:hover {
+    opacity: 0.9;
+  }
 }
 
 .login-right {
@@ -239,7 +271,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(120deg, #e3eafc 0%, #f7f8fa 100%);
+  background: $--metal-gradient-light; // 金属渐变背景
 }
 
 .login-illustration {
@@ -249,19 +281,20 @@ export default {
 .illustration-img {
   width: 320px;
   margin-bottom: 32px;
+  opacity: 0.9;
 }
 
 .login-slogan {
   .slogan-title {
     font-size: 20px;
     font-weight: 600;
-    color: #222;
+    color: $--color-text-primary; // 白色文字
     margin-bottom: 12px;
   }
 
   .slogan-desc {
     font-size: 15px;
-    color: #888;
+    color: $--color-text-secondary; // 浅灰色文字
   }
 }
-</style>
+</style>