update 优化整体页面样式 更圆滑

src/views/login.vue

@@ -240,29 +240,38 @@ onMounted(() => {
   height: 100%;
   background-image: url('../assets/images/login-background.jpg');
   background-size: cover;
+  background-position: center;
 }
 
 .title-box {
   display: flex;
+  align-items: center;
+  gap: 8px;
 
   .title {
-    margin: 0px auto 30px auto;
+    margin: 0px auto 26px auto;
     text-align: center;
-    color: #707070;
+    color: var(--el-text-color-primary);
+    font-weight: 600;
+    letter-spacing: 0.5px;
   }
 
   :deep(.lang-select--style) {
     line-height: 0;
-    color: #7483a3;
+    color: var(--el-text-color-secondary);
   }
 }
 
 .login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+  border-radius: var(--app-radius-lg);
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  width: min(420px, 90vw);
+  padding: 32px 30px 12px 30px;
   z-index: 1;
+  box-shadow: var(--app-shadow-lg);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   .el-input {
     height: 40px;
     input {
@@ -283,14 +292,48 @@ onMounted(() => {
   color: #bfbfbf;
 }
 
+.login-form :deep(.el-input__wrapper) {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.login-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.login-form :deep(.el-button--primary) {
+  border-radius: var(--app-radius-md);
+  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
+}
+
+.login-form :deep(.el-button.is-circle) {
+  background: rgba(15, 23, 42, 0.04);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  color: var(--el-text-color-regular);
+}
+
+.login-form :deep(.el-button.is-circle:hover) {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
 .login-code {
-  width: 33%;
+  width: calc(37% - 10px);
   height: 40px;
   float: right;
+  margin-left: 10px;
+  box-sizing: border-box;
+  border-radius: var(--app-radius-sm);
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--el-border-color-light);
 
   img {
     cursor: pointer;
     vertical-align: middle;
+    display: block;
+    width: 100%;
+    height: 40px;
+    object-fit: cover;
   }
 }
 
@@ -301,7 +344,7 @@ onMounted(() => {
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.75);
   font-family: Arial, serif;
   font-size: 12px;
   letter-spacing: 1px;
@@ -309,6 +352,27 @@ onMounted(() => {
 
 .login-code-img {
   height: 40px;
-  padding-left: 12px;
+  padding-left: 0;
+}
+
+:global(html.dark) {
+  .login-form {
+    background: rgba(17, 24, 39, 0.9);
+    border-color: rgba(148, 163, 184, 0.2);
+  }
+
+  .login-form :deep(.el-input__wrapper) {
+    background-color: rgba(17, 24, 39, 0.7);
+  }
+
+  .login-form :deep(.el-button.is-circle) {
+    background: rgba(148, 163, 184, 0.12);
+    border-color: rgba(148, 163, 184, 0.25);
+    color: #e5e7eb;
+  }
+
+  .el-login-footer {
+    color: rgba(226, 232, 240, 0.65);
+  }
 }
 </style>