2026-03-06

用户登录样式优化

src/views/common/login-new.vue

@@ -0,0 +1,407 @@
+<template>
+  <div class="login-page">
+    <div class="login-container">
+      <!-- 左侧品牌区 -->
+      <div class="login-brand">
+        <div class="brand-inner">
+          <div class="brand-logo">
+            <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <!-- 仓库轮廓 -->
+              <rect x="6" y="24" width="52" height="32" rx="2" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.8)" stroke-width="1.5"/>
+              <!-- 屋顶 -->
+              <polygon points="2,26 32,8 62,26" fill="rgba(255,255,255,0.25)" stroke="rgba(255,255,255,0.9)" stroke-width="1.5" stroke-linejoin="round"/>
+              <!-- 门 -->
+              <rect x="24" y="38" width="16" height="18" rx="1" fill="rgba(255,255,255,0.3)" stroke="rgba(255,255,255,0.8)" stroke-width="1.2"/>
+              <!-- 货架线 -->
+              <line x1="10" y1="36" x2="20" y2="36" stroke="rgba(255,255,255,0.7)" stroke-width="1.2"/>
+              <line x1="10" y1="42" x2="20" y2="42" stroke="rgba(255,255,255,0.7)" stroke-width="1.2"/>
+              <line x1="44" y1="36" x2="54" y2="36" stroke="rgba(255,255,255,0.7)" stroke-width="1.2"/>
+              <line x1="44" y1="42" x2="54" y2="42" stroke="rgba(255,255,255,0.7)" stroke-width="1.2"/>
+            </svg>
+          </div>
+          <h1 class="brand-name">BOYING WMS</h1>
+          <p class="brand-desc">智能仓储管理系统</p>
+          <div class="brand-divider"></div>
+          <div class="brand-features">
+            <div class="feature-item">
+              <i class="el-icon-s-grid"></i>
+              <span>库存管理</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-truck"></i>
+              <span>出入库管理</span>
+            </div>
+            <div class="feature-item">
+              <i class="el-icon-data-analysis"></i>
+              <span>报表分析</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧登录表单 -->
+      <div class="login-form-wrap">
+        <div class="form-header">
+          <h2 class="form-title">用户登录</h2>
+          <p class="form-subtitle">欢迎使用，请输入账号密码</p>
+        </div>
+
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
+          <el-form-item prop="userName">
+            <div class="input-wrap">
+              <i class="input-icon el-icon-user"></i>
+              <el-input v-model="dataForm.userName" placeholder="请输入账号" class="login-input"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="password">
+            <div class="input-wrap">
+              <i class="input-icon el-icon-lock"></i>
+              <el-input v-model="dataForm.password" type="password" placeholder="请输入密码" class="login-input"></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-button class="login-btn" @click="dataFormSubmit()">登 录</el-button>
+          </el-form-item>
+        </el-form>
+
+        <p class="login-footer">Copyright &copy; {{ new Date().getFullYear() }} Boying. All rights reserved.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getUUID } from '@/utils'
+  import {getConfigParams} from '@/api/sysConfig.js'
+  export default {
+    data () {
+      return {
+        src: 'http://192.168.1.83/upload/ifs.png',
+        dataForm: {
+          userName: '',
+          password: '',
+          uuid: '',
+          captcha: ''
+        },
+        dataRule: {
+          userName: [
+            { required: true, message: '帐号不能为空', trigger: 'blur' }
+          ],
+          password: [
+            { required: true, message: '密码不能为空', trigger: 'blur' }
+          ]
+        },
+        captchaPath: ''
+      }
+    },
+    computed: {
+      multiLanguage: {
+        get() {
+          return this.$store.state.user.multiLanguage
+        },
+        set(val) {
+          this.$store.commit('user/updateMultiLanguage', val)
+        }
+      },
+      authControl: {
+        get() {
+          return this.$store.state.user.authControl
+        },
+        set(val) {
+          this.$store.commit('user/updateAuthControl', val)
+        }
+      }
+    },
+    created () {
+       this.userName();
+    },
+    methods: {
+      // 获取上次登陆的用户名
+      userName(){
+        this.dataForm.userName = localStorage.getItem('userName')
+      },
+      // 提交表单
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.$http({
+              url: this.$http.adornUrl('/sys/login'),
+              method: 'post',
+              data: this.$http.adornData({
+                'username': this.dataForm.userName,
+                'password': this.dataForm.password,
+                'uuid': this.dataForm.uuid
+              })
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.$cookie.set('token', data.token)
+                this.$router.replace({ name: 'home' })
+                this.$i18n.locale=data.language
+                localStorage.setItem('locale', data.language)
+                localStorage.setItem('refresh', "0")
+                localStorage.setItem('userName', this.dataForm.userName)
+                this.getConfigParams()
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+          }
+        })
+      },
+      // 获取全局参数变量
+      getConfigParams() {
+        getConfigParams().then(({data}) => {
+          if (data && data.code == 0) {
+            localStorage.setItem('configParams', JSON.stringify(data.data))
+            // this.multiLanguage = JSON.parse(localStorage.getItem('configParams')).multiLanguage
+            // this.authControl = JSON.parse(localStorage.getItem('configParams')).authControl
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+$primary: #17B3A3;
+$primary-dark: #13998b;
+$white: #ffffff;
+$text-primary: #303133;
+$text-secondary: #909399;
+$border: #dcdfe6;
+
+.login-page {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f4f5;
+  background-image:
+    radial-gradient(circle at 20% 50%, rgba(23, 179, 163, 0.06) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(23, 179, 163, 0.04) 0%, transparent 40%);
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+/* 主容器 */
+.login-container {
+  display: flex;
+  width: 840px;
+  height: 500px;
+  border-radius: 12px;
+  background: $white;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+/* 左侧品牌区 */
+.login-brand {
+  width: 360px;
+  flex-shrink: 0;
+  background: linear-gradient(150deg, $primary 0%, $primary-dark 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 40px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -60px;
+    right: -60px;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.06);
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -80px;
+    left: -40px;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.05);
+  }
+}
+
+.brand-inner {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  width: 100%;
+}
+
+.brand-logo svg {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+}
+
+.brand-name {
+  font-size: 26px;
+  font-weight: 700;
+  color: $white;
+  letter-spacing: 3px;
+  margin: 0 0 8px 0;
+}
+
+.brand-desc {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.75);
+  margin: 0;
+  letter-spacing: 1px;
+}
+
+.brand-divider {
+  width: 40px;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.4);
+  margin: 24px auto;
+  border-radius: 1px;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: left;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+
+  i {
+    font-size: 15px;
+    color: rgba(255, 255, 255, 0.9);
+    width: 18px;
+    text-align: center;
+  }
+}
+
+/* 右侧表单区 */
+.login-form-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 52px 52px 40px;
+}
+
+.form-header {
+  margin-bottom: 32px;
+}
+
+.form-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: $text-primary;
+  margin: 0 0 8px 0;
+}
+
+.form-subtitle {
+  font-size: 13px;
+  color: $text-secondary;
+  margin: 0;
+}
+
+/* 输入框 */
+.input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: 12px;
+  z-index: 2;
+  font-size: 15px;
+  color: #c0c4cc;
+  pointer-events: none;
+  transition: color 0.2s;
+}
+
+.login-input {
+  ::v-deep .el-input__inner {
+    height: 42px;
+    line-height: 42px;
+    border: 1px solid $border;
+    border-radius: 6px;
+    color: $text-primary;
+    font-size: 13px;
+    padding-left: 36px;
+    background: $white;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &::placeholder {
+      color: #c0c4cc;
+    }
+
+    &:hover {
+      border-color: #c0c4cc;
+    }
+
+    &:focus {
+      border-color: $primary;
+      box-shadow: 0 0 0 2px rgba(23, 179, 163, 0.12);
+    }
+  }
+}
+
+.input-wrap:focus-within .input-icon {
+  color: $primary;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+
+  ::v-deep .el-form-item__error {
+    font-size: 12px;
+  }
+}
+
+/* 登录按钮 */
+.login-btn {
+  width: 100%;
+  height: 42px;
+  margin-top: 4px;
+  background-color: $primary;
+  border: none;
+  border-radius: 6px;
+  color: $white;
+  font-size: 14px;
+  letter-spacing: 3px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
+  box-shadow: 0 4px 12px rgba(23, 179, 163, 0.3);
+
+  &:hover, &:focus {
+    background-color: $primary-dark;
+    box-shadow: 0 6px 16px rgba(23, 179, 163, 0.4);
+    color: $white;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(23, 179, 163, 0.25);
+  }
+}
+
+.login-footer {
+  margin-top: 28px;
+  font-size: 11px;
+  color: #c0c4cc;
+  text-align: center;
+}
+</style>