style: 优化登录页面，升级为科技风现代界面

web/src/views/Login.vue

@@ -1,19 +1,60 @@
 <template>
   <div class="login-container">
-    <el-card class="login-card">
+    <div class="login-background">
-      <h2 class="login-title">配置中心</h2>
+      <div class="bg-circle circle-1"></div>
-      <el-form :model="form" :rules="rules" ref="form" label-width="0">
+      <div class="bg-circle circle-2"></div>
-        <el-form-item prop="userName">
+      <div class="bg-circle circle-3"></div>
-          <el-input v-model="form.userName" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
+    </div>
-        </el-form-item>
+    
-        <el-form-item prop="password">
+    <div class="login-wrapper">
-          <el-input v-model="form.password" type="password" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin"></el-input>
+      <div class="login-header">
-        </el-form-item>
+        <div class="logo-icon">
-        <el-form-item>
+          <i class="el-icon-setting"></i>
-          <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%">登录</el-button>
+        </div>
-        </el-form-item>
+        <h1 class="login-title">Kenaito配置中心</h1>
-      </el-form>
+        <p class="login-subtitle">Configuration Center</p>
-    </el-card>
+      </div>
+      
+      <div class="login-card">
+        <el-form :model="form" :rules="rules" ref="form" class="login-form">
+          <el-form-item prop="userName">
+            <el-input 
+              v-model="form.userName" 
+              placeholder="请输入用户名" 
+              prefix-icon="el-icon-user"
+              size="large"
+            ></el-input>
+          </el-form-item>
+          
+          <el-form-item prop="password">
+            <el-input 
+              v-model="form.password" 
+              type="password" 
+              placeholder="请输入密码" 
+              prefix-icon="el-icon-lock"
+              size="large"
+              @keyup.enter.native="handleLogin"
+            ></el-input>
+          </el-form-item>
+          
+          <el-form-item>
+            <el-button 
+              type="primary" 
+              @click="handleLogin" 
+              :loading="loading"
+              size="large"
+              class="login-button"
+            >
+              {{ loading ? '登录中...' : '登 录' }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      
+      <div class="login-footer">
+        <span>© 2026 Kenaito Configuration Center</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -59,19 +100,243 @@ export default {
 
 <style scoped>
 .login-container {
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  background: #1a237e;
-  background: #2d3a4b;
+  position: relative;
+  overflow: hidden;
 }
-.login-card {
+
+.login-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.bg-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  animation: float 20s infinite ease-in-out;
+}
+
+.circle-1 {
+  width: 300px;
+  height: 300px;
+  top: -100px;
+  left: -100px;
+  animation-delay: 0s;
+}
+
+.circle-2 {
   width: 400px;
+  height: 400px;
+  bottom: -150px;
+  right: -150px;
+  animation-delay: 5s;
+}
+
+.circle-3 {
+  width: 200px;
+  height: 200px;
+  top: 50%;
+  right: 10%;
+  animation-delay: 10s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  33% {
+    transform: translate(30px, -30px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+}
+
+.login-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
   padding: 20px;
 }
-.login-title {
+
+.login-header {
   text-align: center;
-  color: #303133;
+  margin-bottom: 40px;
-  margin-bottom: 30px;
+  animation: fadeInDown 0.6s ease-out;
+}
+
+.logo-icon {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  animation: pulse 2s infinite ease-in-out;
+}
+
+.logo-icon i {
+  font-size: 48px;
+  color: #fff;
+  line-height: 80px;
+}
+
+.login-title {
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 10px 0;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  letter-spacing: 2px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.login-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.login-form {
+  margin-top: 20px;
+}
+
+.login-form >>> .el-input__inner {
+  height: 50px;
+  line-height: 50px;
+  border-radius: 8px;
+  border: 2px solid #e4e7ed;
+  font-size: 15px;
+  transition: all 0.3s ease;
+}
+
+.login-form >>> .el-input__inner:focus {
+  border-color: #1a237e;
+  box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
+}
+
+.login-form >>> .el-input__prefix {
+  left: 10px;
+  font-size: 18px;
+  color: #909399;
+}
+
+.login-form >>> .el-input--prefix .el-input__inner {
+  padding-left: 40px;
+}
+
+.login-button {
+  width: 100%;
+  height: 50px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  background: #1a237e;
+  border: none;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.login-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(26, 35, 126, 0.4);
+}
+
+.login-button:active {
+  transform: translateY(0);
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 30px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 13px;
+  animation: fadeIn 0.8s ease-out;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@media (max-width: 480px) {
+  .login-wrapper {
+    padding: 15px;
+  }
+  
+  .login-card {
+    padding: 30px 20px;
+  }
+  
+  .login-title {
+    font-size: 28px;
+  }
+  
+  .logo-icon {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .logo-icon i {
+    font-size: 36px;
+    line-height: 60px;
+  }
 }
 </style>