登录页面优化

src/views/login.vue

@@ -4,24 +4,16 @@
     <div class="login_left">
       <div class="brand-box">
         <!-- 内嵌SVG 超声探头图标 -->
-        <div class="icon-placeholder">
-          <svg width="140" height="140" viewBox="0 0 1024 1024" fill="#ffffff">
-            <path
-              d="M725.3 298.7c-35.3-35.3-92.7-35.3-128 0L341.3 554.7c-35.3 35.3-35.3 92.7 0 128s92.7 35.3 128 0l256-256c35.3-35.3 35.3-92.7 0-128zM298.7 682.7c-58.9 58.9-58.9 154.4 0 213.3s154.4 58.9 213.3 0l256-256c58.9-58.9 58.9-154.4 0-213.3s-154.4-58.9-213.3 0l-256 256z"
-            ></path>
-            <path
-              d="M192 832a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM832 192a64 64 0 1 0 0 128 64 64 0 1 0 0-128z"
-            ></path>
-            <path
-              d="M640 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM320 640a64 64 0 1 0 0-128 64 64 0 1 0 0 128z"
-            ></path>
-          </svg>
-        </div>
-        <div class="brand-logo">Hisense</div>
-        <div class="brand-text">信联</div>
+        <img src="@/assets/images/login-background.jpg" alt="Hisense Icon" />
+        <div>信联</div>
       </div>
       <!-- 底部波浪装饰 -->
-      <div class="wave-bg"></div>
+      <div class="wave-wrapper">
+        <div class="wave wave-1"></div>
+        <div class="wave wave-2"></div>
+        <div class="wave wave-3"></div>
+        <div class="wave wave-4"></div>
+      </div>
     </div>
     <!-- 右侧登录表单区 -->
     <div class="login_right">
@@ -36,8 +28,10 @@
         class="login-form"
       >
         <div class="form-header">
-          <div class="role-icon">{{ roleIconText }}</div>
-          <h3 class="title">你好, {{ roleName }}</h3>
+          <div class="role-icon">
+            <img :src="$store.state.user.avatar" alt="" />
+          </div>
+          <h3 class="title">你好, {{ $store.state.user.userName }}</h3>
         </div>
         <el-form-item prop="username">
           <el-input
@@ -86,17 +80,13 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img" />
           </div>
         </el-form-item>
-        <el-checkbox
-          v-model="loginForm.rememberMe"
-          style="margin: 0px 0px 25px 0px"
-        >
-          自动登录
-        </el-checkbox>
+        <el-form-item>
+          <el-checkbox v-model="loginForm.rememberMe"> 自动登录 </el-checkbox>
+        </el-form-item>
         <el-form-item>
           <el-button
             :loading="loading"
-            size="medium"
-            type="success"
+            type="primary"
             style="width: 100%"
             @click.native.prevent="handleLogin"
           >
@@ -128,7 +118,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="success" @click="handleSettingsConfirm">
+        <el-button type="primary" @click="handleSettingsConfirm">
           确定
         </el-button>
         <el-button @click="showSettingsDialog = false">取消</el-button>
@@ -274,34 +264,69 @@ export default {
       text-align: center;
       color: #fff;
       z-index: 2;
-      .icon-placeholder {
-        width: 180px;
-        height: 180px;
-        // background: url("../assets/images/hisense-icon.png") no-repeat center / contain;
-        margin: 0 auto 16px;
-      }
-
       .brand-logo {
         font-size: 22px;
         font-weight: bold;
         margin-bottom: 8px;
       }
-
-      .brand-text {
-        font-size: 20px;
-        font-weight: 500;
-      }
     }
-    /* 底部波浪装饰 */
-    .wave-bg {
+    /* 优化后的水波纹容器 */
+    .wave-wrapper {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 160px;
-      background: linear-gradient(to top, rgba(0, 150, 150, 0.8), transparent);
+      height: 100%;
+      overflow: hidden;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    /* 三层波浪：速度、透明度、大小区分明显 */
+    .wave {
+      position: absolute;
+      left: 0;
+      width: 200%;
+      height: 100%;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      background-position: center bottom;
       opacity: 0.3;
-      border-radius: 100% 100% 0 0;
+      animation: waveUpDown 6s ease-in-out infinite alternate;
+    }
+
+    .wave-1 {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,160L48,181.3C96,203,192,245,288,245.3C384,245,480,203,576,181.3C672,160,768,160,864,176C960,192,1056,224,1152,218.7C1248,213,1344,171,1392,149.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+      bottom: -10%;
+      height: 40%;
+      animation-duration: 7s;
+      opacity: 0.25;
+    }
+
+    .wave-2 {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.15' d='M0,224L48,213.3C96,203,192,181,288,186.7C384,192,480,224,576,229.3C672,235,768,213,864,192C960,171,1056,149,1152,160C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+      bottom: -5%;
+      height: 35%;
+      animation-duration: 5s;
+      opacity: 0.2;
+    }
+
+    .wave-3 {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0,256L48,240C96,224,192,192,288,197.3C384,203,480,245,576,240C672,235,768,181,864,160C960,139,1056,149,1152,170.7C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
+      bottom: 0;
+      height: 30%;
+      animation-duration: 4s;
+      opacity: 0.15;
+    }
+
+    /* 波浪上下起伏动画，更柔和 */
+    @keyframes waveUpDown {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-15px);
+      }
     }
   }
 
@@ -338,27 +363,22 @@ export default {
       z-index: 1;
       .form-header {
         text-align: center;
-        margin-bottom: 30px;
         .role-icon {
-          width: 80px;
-          height: 80px;
-          line-height: 80px;
+          width: 60px;
+          height: 60px;
+          line-height: 60px;
           background-color: #ff9900; /* 橙色圆形图标 */
           border-radius: 50%;
           color: #fff;
-          font-size: 32px;
           margin: 0 auto 10px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
         .title {
           margin: 0;
           color: #333;
-          font-size: 24px;
-        }
-      }
-      .el-input {
-        height: 38px;
-        input {
-          height: 38px;
         }
       }
       .input-icon {
@@ -370,10 +390,10 @@ export default {
 
       .login-code {
         width: 33%;
-        height: 38px;
+        height: 36px;
         float: right;
         img {
-          height: 38px;
+          height: 36px;
           cursor: pointer;
           vertical-align: middle;
         }