feat(wms): 调整钢卷管理界面列顺序和标签

refactor(login): 重构登录页面布局和样式

klp-ui/src/views/login.vue

@@ -1,13 +1,25 @@
 <template>
   <div class="login-page">
-    <div class="login-left">
-      <div class="login-logo">
-        <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
-        <div class="login-title">科伦普综合办公系统</div>
+    <div class="login-box">
+      <div class="login-left">
+
+        <div class="login-title-welcome">
+          <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
+          <span class="login-title">欢迎使用科伦普综合办公系统</span>
+        </div>
+        <p>
+          嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点菜集成、国内技术总成、自主创新、单体设备引进等多种建设方
+          案，保证了技术先进和人才的培养，确保工程投产后达产达效。
+        </p>
+        <p>
+          科伦普冷轧重工有限公司是设计年产量150万 吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
+        </p>
       </div>
-      <div class="login-box">
-        <div class="login-title-welcome">欢迎使用科伦普综合办公系统</div>
+
+      <div class="login-right">
+        
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+          <h2>登录</h2>
           <el-form-item prop="username">
             <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
               <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -30,25 +42,25 @@
           </el-form-item>
           <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
           <el-form-item style="width:100%;">
-            <el-button :loading="loading" size="medium" type="primary" style="width:100%; height: 40px; font-size: 16px;"
-              @click.native.prevent="handleLogin">
+            <el-button :loading="loading" size="medium" type="primary"
+              style="width:100%; height: 40px; font-size: 16px;" @click.native.prevent="handleLogin">
               <span v-if="!loading">登 录</span>
               <span v-else>登 录 中...</span>
             </el-button>
           </el-form-item>
         </el-form>
-      </div>
-    </div>
-    <div class="login-right">
-      <div class="login-illustration">
+        <!-- <div class="login-illustration">
         <img src="https://sf3-scmcdn-cn.feishucdn.com/goofy/ee/suite/passport/static/login/img/light.ba71f7a1.png"
           alt="illustration" class="illustration-img" />
         <div class="login-slogan">
           <div class="slogan-title">先进团队，先用科伦普</div>
           <div class="slogan-desc">人、事、信息，一处搞定</div>
         </div>
+      </div> -->
       </div>
     </div>
+
+
   </div>
 </template>
 
@@ -154,27 +166,52 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 // 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
-$--color-background: #f5f5f5; 
+$--color-background: #f5f5f5;
 $--color-text-primary: #111;
 $--color-text-secondary: #b6bdc5;
 $--border-color-light: #4c5057;
 $--color-primary: #657b96;
-$--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
+$--metal-gradient-light: linear-gradient(145deg, #f5f5f550, #ffffff50);
 
 .login-page {
   display: flex;
   height: 100vh;
-  background: $--color-background; // 改用全局深色背景变量
+  justify-content: center;
+  align-items: center;
+  background: url('../assets/images/login.jpg'); // 金属渐变背景
 }
 
-.login-logo {
+.login-box {
+  width: 50%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-left,
+.login-right {
+  // flex: 1;
+  height: 100%;
+  padding: 20px;
+}
+
+.login-left {
+  flex: 4;
+  background-color: #637288;
+  display: flex;
+  flex-direction: column;
+  // box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
+  p {
+    text-indent: 2em;
+  }
+}
+
+.login-title-welcome {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  position: absolute;
-  top: 24px;
-  left: 24px;
 
   .logo-img {
     width: 64px;
@@ -182,40 +219,15 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   }
 
   .login-title {
-    font-size: 22px;
+    font-size: 20px ;
     color: $--color-text-primary; // 白色文字
   }
 }
 
-.login-left {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
-  position: relative;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
-}
-
-.login-box {
-  width: 400px;
-  padding: 40px 32px 32px 32px;
-  border-radius: 12px;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
-  background: $--color-background; // 深色背景
-}
-
-.login-title-welcome {
-  font-size: 22px;
-  font-weight: 600;
-  color: $--color-text-primary; // 白色文字
-  text-align: left;
-  margin-bottom: 24px;
-}
-
 .login-form {
   .el-input {
     margin-top: 20px;
+
     input {
       height: 40px !important;
       color: $--color-text-primary; // 白色文字
@@ -239,6 +251,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 33%;
   height: 40px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
@@ -249,6 +262,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 100%;
   height: 40px;
   opacity: 0.8;
+
   &:hover {
     opacity: 1;
   }
@@ -265,11 +279,11 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
 }
 
 .login-right {
-  flex: 1;
+  flex: 3;
+  background: #ffffff; // 金属渐变背景
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
 }
 
 .login-illustration {