From 3744e85eb2b67653c69db9748bf64aab0b6cbdc0 Mon Sep 17 00:00:00 2001
From: “wangming” <“wangming@antissoft.com”>
Date: Fri, 19 Sep 2025 10:38:45 +0800
Subject: [PATCH] Revamp login page layout and design; enhance user experience with animated background, improved form structure, and responsive design adjustments.

---
 antis-ncc-admin/src/views/login/index.vue | 758 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 620 insertions(+), 138 deletions(-)

diff --git a/antis-ncc-admin/src/views/login/index.vue b/antis-ncc-admin/src/views/login/index.vue
index d3bf215..b91b1fb 100644
--- a/antis-ncc-admin/src/views/login/index.vue
+++ b/antis-ncc-admin/src/views/login/index.vue
@@ -1,57 +1,122 @@
 <template>
-  <div class="container">
-    <el-container>
-      <el-aside style="width: 50%; background-color: #fff">
-        <img src="../../assets/images/3.png" alt="" />
-      </el-aside>
-      <el-main>
-        <p>绿纤ERP</p>
-        <!-- <span>一体化协同服务</span> -->
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
-          <ul>
-            <li>
-              <el-form-item prop="account">
-                <img src="../../assets/images/1.png" alt="" />
-                <input
-                  type="text"
-                  name="account"
-                  v-model="loginForm.account"
-                  ref="account"
-                  tabindex="1"
-                  :placeholder="$t('login.username')"
-                />
-              </el-form-item>
-            </li>
-            <li>
-              <el-form-item prop="password">
-                <img src="../../assets/images/2.png" alt="" />
-                <input
-                  type="password"
-                  name="password"
-                  v-model="loginForm.password"
-                  ref="password"
-                  tabindex="2"
-                  :placeholder="$t('login.password')"
-                />
-              </el-form-item>
-            </li>
-            <li class="bottom">
-              <el-button
-                :loading="loading"
-                type="primary"
-                round
-                @click.native.prevent="handleLogin"
-                >{{ $t("login.logIn") }}</el-button
+  <div class="login-container">
+    <!-- 动画背景层 -->
+    <div class="animated-bg">
+      <!-- 浮动粒子 -->
+      <div class="particles">
+        <div class="particle" v-for="n in 15" :key="n" :style="getParticleStyle(n)"></div>
+      </div>
+      
+      <!-- 渐变波浪 -->
+      <div class="gradient-waves">
+        <div class="wave wave-1"></div>
+        <div class="wave wave-2"></div>
+        <div class="wave wave-3"></div>
+      </div>
+    </div>
+    
+    <div class="login-wrapper">
+      <!-- 左侧品牌区域 -->
+      <div class="brand-section">
+        <div class="brand-content">
+          <div class="system-section">
+            <h1 class="system-title">绿纤ERP</h1>
+            <p class="system-desc">智能化企业资源管理平台</p>
+          </div>
+          
+          <div class="data-visualization">
+            <div class="chart-container">
+              <div class="chart-item">
+                <div class="chart-bar" style="height: 60%"></div>
+                <div class="chart-bar" style="height: 80%"></div>
+                <div class="chart-bar" style="height: 45%"></div>
+                <div class="chart-bar" style="height: 90%"></div>
+                <div class="chart-bar" style="height: 70%"></div>
+              </div>
+              <p class="chart-label">实时数据分析</p>
+            </div>
+          </div>
+          
+          <div class="core-feature">
+            <div class="feature-highlight">
+              <i class="el-icon-s-data"></i>
+              <span>数据驱动决策</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 右侧登录表单 -->
+      <div class="form-section">
+        <div class="login-form-wrapper">
+          <div class="form-header">
+            <h2>欢迎登录</h2>
+            <p>请输入您的账号信息</p>
+          </div>
+          
+          <el-form 
+            ref="loginForm" 
+            :model="loginForm" 
+            :rules="loginRules"
+            class="login-form"
+            @keyup.enter.native="handleLogin"
+          >
+            <el-form-item prop="account">
+              <el-input
+                ref="account"
+                v-model="loginForm.account"
+                :placeholder="$t('login.username')"
+                name="account"
+                type="text"
+                tabindex="1"
+                autocomplete="on"
+                size="large"
+                prefix-icon="el-icon-user"
+              />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <el-input
+                ref="password"
+                v-model="loginForm.password"
+                :type="passwordType"
+                :placeholder="$t('login.password')"
+                name="password"
+                tabindex="2"
+                autocomplete="on"
+                size="large"
+                prefix-icon="el-icon-lock"
               >
-            </li>
-          </ul>
-        </el-form>
-      </el-main>
-    </el-container>
+                <i 
+                  slot="suffix"
+                  :class="passwordType === 'password' ? 'el-icon-view' : 'el-icon-hide'" 
+                  class="show-pwd"
+                  @click="showPwd"
+                ></i>
+              </el-input>
+            </el-form-item>
+
+            <el-button
+              :loading="loading"
+              type="primary"
+              size="large"
+              class="login-btn"
+              @click.native.prevent="handleLogin"
+            >
+              {{ loading ? '登录中...' : $t("login.logIn") }}
+            </el-button>
+          </el-form>
+          
+          <div class="footer">
+            <p>© 2024 绿纤ERP. All rights reserved.</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-<script>
 
+<script>
 export default {
   name: "Login",
   data: function () {
@@ -77,6 +142,7 @@ export default {
           },
         ],
       },
+      passwordType: 'password',
       capsTooltip: false,
       loading: false,
       showDialog: false,
@@ -132,6 +198,30 @@ export default {
     };
   },
   methods: {
+    getParticleStyle(index) {
+      const size = Math.random() * 4 + 2; // 2-6px
+      const left = Math.random() * 100; // 0-100%
+      const animationDelay = Math.random() * 20; // 0-20s
+      const animationDuration = Math.random() * 10 + 15; // 15-25s
+      
+      return {
+        width: `${size}px`,
+        height: `${size}px`,
+        left: `${left}%`,
+        animationDelay: `${animationDelay}s`,
+        animationDuration: `${animationDuration}s`
+      };
+    },
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
     checkCapslock(e) {
       const { key } = e;
       this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
@@ -159,119 +249,511 @@ export default {
       });
     },
     handlemyLogin() {
-    //this.$store.dispatch('user/logout')
-    console.log("开始执行单点登录!");
-    if (this.loading) return;
-    let username = this.$route.query.username;
-    let hospitalname=this.$route.query.hospitalname;
-    console.log("username:"+username);
-    if (username != null && username != "") {
-      this.loginForm.account = username;
-      this.loginForm.hospitalname =hospitalname;
-      this.loading = true;
-      this.$store.commit("user/SET_LOGIN_LOADING", true);
-      this.$store
-        .dispatch("user/pislogin", this.loginForm)
-        .then(() => {
-          this.$router.push({
-            path: this.redirect || "/home",
-            query: this.otherQuery,
+      //this.$store.dispatch('user/logout')
+      console.log("开始执行单点登录!");
+      if (this.loading) return;
+      let username = this.$route.query.username;
+      let hospitalname=this.$route.query.hospitalname;
+      console.log("username:"+username);
+      if (username != null && username != "") {
+        this.loginForm.account = username;
+        this.loginForm.hospitalname =hospitalname;
+        this.loading = true;
+        this.$store.commit("user/SET_LOGIN_LOADING", true);
+        this.$store
+          .dispatch("user/pislogin", this.loginForm)
+          .then(() => {
+            this.$router.push({
+              path: this.redirect || "/home",
+              query: this.otherQuery,
+            });
+          })
+          .catch(() => {
+            this.$store.commit("user/SET_LOGIN_LOADING", false);
           });
-        })
-        .catch(() => {
-          this.$store.commit("user/SET_LOGIN_LOADING", false);
-        });
-    }
-  },
-  },
-  
-  getOtherQuery(query) {
-    return Object.keys(query).reduce((acc, cur) => {
-      if (cur !== "redirect") {
-        acc[cur] = query[cur];
       }
-      return acc;
-    }, {});
+    },
+    getOtherQuery(query) {
+      return Object.keys(query).reduce((acc, cur) => {
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
+        }
+        return acc;
+      }, {});
+    },
   },
 };
 </script>
+
 <style lang="scss" scoped>
-* {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  box-sizing: border-box;
+.login-container {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+  position: relative;
+  overflow: hidden;
 }
-html,
-body {
+
+// 动画背景层
+.animated-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
+  pointer-events: none;
+  z-index: 1;
 }
-.container {
+
+// 浮动粒子效果
+.particles {
+  position: absolute;
   width: 100%;
   height: 100%;
-  background-image: url(../../assets/images/4.jpg);
-  background-size: 100% 100%;
-  padding-top: 10%;
-  box-sizing: border-box;
+  
+  .particle {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    animation: floatUp linear infinite;
+    will-change: transform, opacity;
+    
+    &:nth-child(odd) {
+      background: rgba(52, 152, 219, 0.4);
+    }
+    
+    &:nth-child(3n) {
+      background: rgba(155, 89, 182, 0.3);
+    }
+  }
 }
 
-.container > .el-container {
-  width: 50%;
-  max-width: 900px;
-  min-width: 600px;
-  margin: 0 auto;
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 50px 0;
+@keyframes floatUp {
+  0% {
+    transform: translateY(100vh) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100px) rotate(360deg);
+    opacity: 0;
+  }
 }
-.el-aside {
-  text-align: center;
-  padding: 40px;
+
+// 渐变波浪效果
+.gradient-waves {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  
+  .wave {
+    position: absolute;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+    animation: waveFloat ease-in-out infinite;
+    will-change: transform;
+  }
+  
+  .wave-1 {
+    top: -50%;
+    left: -50%;
+    animation-duration: 20s;
+    animation-delay: 0s;
+  }
+  
+  .wave-2 {
+    top: -30%;
+    right: -50%;
+    animation-duration: 25s;
+    animation-delay: -5s;
+    background: radial-gradient(ellipse at center, rgba(52, 152, 219, 0.08) 0%, transparent 70%);
+  }
+  
+  .wave-3 {
+    bottom: -50%;
+    left: -30%;
+    animation-duration: 30s;
+    animation-delay: -10s;
+    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.06) 0%, transparent 70%);
+  }
 }
-.el-main {
-  padding-right: 80px;
+
+@keyframes waveFloat {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  25% {
+    transform: translate(20px, -20px) rotate(90deg) scale(1.1);
+  }
+  50% {
+    transform: translate(-10px, 10px) rotate(180deg) scale(0.9);
+  }
+  75% {
+    transform: translate(-20px, -10px) rotate(270deg) scale(1.05);
+  }
 }
-.el-aside img {
+
+.login-wrapper {
   width: 100%;
+  max-width: 1000px;
+  height: 600px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
-.el-main p {
-  font-size: 25px;
-  margin-bottom: 10px;
-  margin-top: 40px;
-}
-.el-main > span {
-  color: #bfbfbf;
-  font-size: 20px;
+
+// 左侧品牌区域
+.brand-section {
+  flex: 1;
+  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  
+  .brand-content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    padding: 40px;
+    width: 100%;
+  }
+  
+  .system-section {
+    margin-bottom: 50px;
+    
+    .system-title {
+      font-size: 42px;
+      font-weight: 700;
+      margin-bottom: 12px;
+      color: #fff;
+      letter-spacing: 2px;
+    }
+    
+    .system-desc {
+      font-size: 16px;
+      opacity: 0.85;
+      font-weight: 300;
+      color: #ecf0f1;
+    }
+  }
+  
+  .data-visualization {
+    margin-bottom: 40px;
+    
+    .chart-container {
+      .chart-item {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+        gap: 8px;
+        height: 80px;
+        margin-bottom: 16px;
+        
+        .chart-bar {
+          width: 12px;
+          background: linear-gradient(to top, #3498db, #5dade2);
+          border-radius: 6px 6px 0 0;
+          animation: chartGrow 2s ease-out;
+          box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
+        }
+      }
+      
+      .chart-label {
+        font-size: 14px;
+        color: #bdc3c7;
+        margin: 0;
+        font-weight: 400;
+      }
+    }
+  }
+  
+  .core-feature {
+    .feature-highlight {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      padding: 16px 24px;
+      background: rgba(52, 152, 219, 0.2);
+      border: 1px solid rgba(52, 152, 219, 0.3);
+      border-radius: 12px;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        background: rgba(52, 152, 219, 0.3);
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
+      }
+      
+      i {
+        font-size: 24px;
+        color: #3498db;
+      }
+      
+      span {
+        font-size: 16px;
+        font-weight: 500;
+        color: #ecf0f1;
+      }
+    }
+  }
 }
-.el-main ul {
-  margin-top: 70px; 
+
+@keyframes chartGrow {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-.el-main ul li {
-  border-bottom: 1px solid #eeeeee;
-  padding-bottom: 10px;
-  margin: 20px 0;
+
+// 右侧表单区域
+.form-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
 }
-.el-main ul .bottom {
-  border-bottom: none;
-  margin-top: 60px;
+
+.login-form-wrapper {
+  width: 100%;
+  max-width: 360px;
+  
+  .form-header {
+    text-align: center;
+    margin-bottom: 40px;
+    
+    h2 {
+      font-size: 28px;
+      font-weight: 600;
+      color: #262626;
+      margin-bottom: 8px;
+    }
+    
+    p {
+      font-size: 14px;
+      color: #8c8c8c;
+    }
+  }
 }
-.el-main ul li img {
-  width: 25px;
-  vertical-align: middle;
+
+.login-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  
+  .el-input {
+    ::v-deep .el-input__inner {
+      height: 48px;
+      padding-left: 44px;
+      padding-right: 44px;
+      border: 1px solid #d9d9d9;
+      border-radius: 8px;
+      font-size: 14px;
+      transition: all 0.3s ease;
+      
+      &:focus {
+        border-color: #1890ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+      }
+      
+      &:hover {
+        border-color: #40a9ff;
+      }
+    }
+    
+    ::v-deep .el-input__prefix {
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      
+      .el-input__icon {
+        color: #bfbfbf;
+        font-size: 16px;
+        line-height: 1;
+      }
+    }
+    
+    ::v-deep .el-input__suffix {
+      right: 12px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    ::v-deep .el-input__suffix-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+  
+  .show-pwd {
+    color: #bfbfbf;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    
+    &:hover {
+      color: #1890ff;
+    }
+  }
 }
-.el-main ul li input {
-  width: 80%;
-  border: none;
-  outline: none;
-  padding-left: 10px;
+
+.login-btn {
+  width: 100%;
+  height: 48px;
   font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  border: none;
+  margin-top: 8px;
+  
+  &:hover {
+    background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+  }
 }
-.el-main ul li button {
-  width: 90%;
-  color: #fff;
-  display: block;
-  margin: 20px auto;
-  font-size: 20px;
+
+.footer {
+  margin-top: 32px;
+  text-align: center;
+  
+  p {
+    font-size: 12px;
+    color: #bfbfbf;
+  }
+}
+
+// 响应式设计和性能优化
+@media (max-width: 768px) {
+  .login-wrapper {
+    flex-direction: column;
+    height: auto;
+    min-height: 100vh;
+    border-radius: 0;
+    max-width: none;
+  }
+  
+  .brand-section {
+    flex: none;
+    height: 200px;
+    
+    .brand-content {
+      padding: 20px;
+    }
+    
+    .system-section {
+      margin-bottom: 20px;
+      
+      .system-title {
+        font-size: 32px;
+      }
+      
+      .system-desc {
+        font-size: 14px;
+      }
+    }
+    
+    .data-visualization {
+      margin-bottom: 20px;
+      
+      .chart-container .chart-item {
+        height: 60px;
+        
+        .chart-bar {
+          width: 8px;
+        }
+      }
+    }
+  }
+  
+  .form-section {
+    padding: 30px 20px;
+  }
+  
+  // 移动端动画优化
+  .particles .particle {
+    display: none; // 移动端隐藏粒子以提升性能
+  }
+  
+  .gradient-waves .wave {
+    animation-duration: 40s; // 减慢动画速度
+  }
+}
+
+@media (max-width: 480px) {
+  .login-container {
+    padding: 0;
+  }
+  
+  .form-section {
+    padding: 20px 16px;
+  }
+  
+  .login-form-wrapper {
+    max-width: none;
+  }
+  
+  // 小屏幕进一步优化
+  .gradient-waves {
+    display: none; // 小屏幕完全隐藏波浪动画
+  }
+}
+
+// 减少动画的媒体查询 - 尊重用户偏好
+@media (prefers-reduced-motion: reduce) {
+  .particles .particle,
+  .gradient-waves .wave,
+  .chart-bar {
+    animation: none;
+  }
+  
+  .brand-section .core-feature .feature-highlight {
+    transition: none;
+  }
+}
+
+// 高性能设备增强动画
+@media (min-width: 1200px) and (min-height: 800px) {
+  .particles {
+    .particle {
+      &:nth-child(5n) {
+        background: rgba(46, 204, 113, 0.3);
+      }
+      
+      &:nth-child(7n) {
+        background: rgba(241, 196, 15, 0.3);
+      }
+    }
+  }
 }
-</style>
+</style>
\ No newline at end of file
--
libgit2 0.21.4