首页样式优化

谭毅彬
1 parent f3022266
Showing 1 changed file with 343 additions and 336 deletions
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
@@ -5,57 +5,44 @@
         <div id="logoImg">
           <img src="~@/assets/logo.png" alt="" srcset="" class="imge">
         </div>
-        <div id="text">
-          华恒WMS仓储管理系统
-        </div>
+        <div id="text">华恒WMS仓储管理系统</div>
       </div>
       <div id="backgroundImg">
-
+        <img src="~@/assets/beijingtu.jpg" alt="" srcset="" class="imge"/>
       </div>
       <div id="copyright">
-        <div id="company">
-          Copyright &copy; 2024 华恒焊接股份有限公司
-        </div>
+        <div id="company">Copyright &copy; 2024 华恒焊接股份有限公司</div>
       </div>
     </div>
-
     <div class="right-div">
-      <div id="welcome">
-        欢迎来到华恒仓储管理系统 ！
-      </div>
-        <a-form-model ref="form" :model="model" :rules="validatorRules">
-          <a-form-model-item required prop="username">
-            <a-input id="name" v-model="model.username" size="default"  autocomplete="off" placeholder="请输入帐户名  / admin"
-                     @blur="getWarehouse">
-            </a-input>
-          </a-form-model-item>
-          <a-form-model-item required prop="password">
-            <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword"
-                     placeholder="请输入密码">
-
-            </a-input>
-          </a-form-model-item>
-          <a-form-model-item prop="warehouseCode">
-            <a-select
-              show-search
-              placeholder="请选择仓库"
-              option-filter-prop="label"
-              v-model="model.warehouseCode" id="warehouseCode">
-              <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
-                  item.name
-                }}
-              </a-select-option>
-            </a-select>
-          </a-form-model-item>
-          <a-form-item>
-            <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">
-              登&nbsp;录
-            </a-button>
-          </a-form-item>
-        </a-form-model>
-      </div>
-
-
+      <div id="welcome">欢迎来到华恒仓储管理系统 ！</div>
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
+        <a-form-model-item required prop="username">
+          <a-input id="name" v-model="model.username" size="default"  autocomplete="off" placeholder="请输入帐户名  / admin" @blur="getWarehouse">
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item required prop="password">
+          <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="warehouseCode">
+          <a-select
+            show-search
+            placeholder="请选择仓库"
+            option-filter-prop="label"
+            v-model="model.warehouseCode" id="warehouseCode">
+            <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
+                item.name
+              }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-item>
+          <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
+            :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
+        </a-form-item>
+      </a-form-model>
+    </div>
     <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
     <login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant>
@@ -63,19 +50,19 @@
 </template>
 <script>
-import RouteView from "@/components/layouts/RouteView"
-import {mixinDevice} from '@/utils/mixin.js'
-import LoginAccount from "@views/user/LoginAccount.vue";
-import {mapActions} from "vuex";
-import {getAction} from "@api/manage";
-import {getWarehouseByUserCode} from "@api/api";
-import TwoStepCaptcha from "@comp/tools/TwoStepCaptcha.vue";
-import LoginSelectTenant from "@views/user/LoginSelectTenant.vue";
-import {timeFix} from "@/utils/util";
+import RouteView from '@/components/layouts/RouteView'
+import { mixinDevice } from '@/utils/mixin.js'
+import LoginAccount from '@views/user/LoginAccount.vue'
+import { mapActions } from 'vuex'
+import { getAction } from '@api/manage'
+import { getWarehouseByUserCode } from '@api/api'
+import TwoStepCaptcha from '@comp/tools/TwoStepCaptcha.vue'
+import LoginSelectTenant from '@views/user/LoginSelectTenant.vue'
+import { timeFix } from '@/utils/util'
 export default {
-  name: "UserLayout",
-  components: {LoginSelectTenant, TwoStepCaptcha},
+  name: 'UserLayout',
+  components: { LoginSelectTenant, TwoStepCaptcha },
   data() {
     return {
       requestCodeSuccess: false,
@@ -91,29 +78,40 @@ export default {
       model: {
         username: '',
         password: '',
-        warehouseCode: '',
+        warehouseCode: ''
         // inputCode: ''
       },
       validatorRules: {
         username: [
-          {required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入用户名!</span>},
-          {validator: this.handleUsernameOrEmail}
+          {
+            required: true,
+            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入用户名!</span>
+          },
+          { validator: this.handleUsernameOrEmail }
         ],
-        password: [{
-          required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入密码!</span>, validator: 'click'
-        }],
-        warehouseCode: [{
-          required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请选择仓库!</span>, trigger: "change" , validator: 'click'
-        }],
+        password: [
+          {
+            required: true,
+            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入密码!</span>,
+            validator: 'click'
+          }
+        ],
+        warehouseCode: [
+          {
+            required: true,
+            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请选择仓库!</span>,
+            trigger: 'change',
+            validator: 'click'
+          }
+        ]
       }
     }
   },
   created() {
-    this.handleChangeCheckCode();
-    this.getWarehouse();
+    this.handleChangeCheckCode()
+    this.getWarehouse()
   },
-
   methods: {
     stepCaptchaCancel() {
       this.Logout().then(() => {
@@ -126,10 +124,10 @@ export default {
       this.loginSuccess()
     },
     handleSubmit() {
-      this.loginBtn = true;
+      this.loginBtn = true
       // if (this.customActiveKey === 'tab1') {
-        // 使用账户密码登录
-        this.handleLogin(this.rememberMe)
+      // 使用账户密码登录
+      this.handleLogin(this.rememberMe)
       // } else {
       //   //手机号码登录
       //   this.$refs.plogin.handleLogin(this.rememberMe)
@@ -137,7 +135,7 @@ export default {
     },
     // 校验失败
     validateFail() {
-      this.loginBtn = false;
+      this.loginBtn = false
     },
     requestSuccess(loginResult) {
       this.$refs.loginSelect.show(loginResult)
@@ -146,52 +144,54 @@ export default {
       this.loginSuccess()
     },
     loginSuccess() {
-      this.$router.push({path: "/dashboard/analysis"});
+      this.$router.push({ path: '/dashboard/analysis' })
       this.$notification.success({
         message: '欢迎',
-        description: `${timeFix()}，欢迎回来`,
-      });
+        description: `${timeFix()}，欢迎回来`
+      })
     },
     //登录后台失败
     requestFailed(err) {
-      let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
+      let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
       this.$notification['error']({
         message: '登录失败',
         description: description,
-        duration: 4,
-      });
+        duration: 4
+      })
       //账户密码登录错误后更新验证码
       if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
         this.$refs.alogin.handleChangeCheckCode()
       }
-      this.loginBtn = false;
+      this.loginBtn = false
     },
     ...mapActions(['Login']),
     /**刷新验证码*/
     handleChangeCheckCode() {
-      this.currdatetime = new Date().getTime();
+      this.currdatetime = new Date().getTime()
       // this.model.inputCode = ''
-      getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
-        if (res.success) {
-          this.randCodeImage = res.result
-          this.requestCodeSuccess = true
-        } else {
-          this.$message.error(res.message)
+      getAction(`/sys/randomImage/${this.currdatetime}`)
+        .then(res => {
+          if (res.success) {
+            this.randCodeImage = res.result
+            this.requestCodeSuccess = true
+          } else {
+            this.$message.error(res.message)
+            this.requestCodeSuccess = false
+          }
+        })
+        .catch(() => {
           this.requestCodeSuccess = false
-        }
-      }).catch(() => {
-        this.requestCodeSuccess = false
-      })
+        })
     },
     getWarehouse() {
-      const that = this;
-      this.querySource.username = that.model.username;
-      let obj = getWarehouseByUserCode(that.querySource);
-      obj.then((res) => {
-        that.warehouseList = res.result;
+      const that = this
+      this.querySource.username = that.model.username
+      let obj = getWarehouseByUserCode(that.querySource)
+      obj.then(res => {
+        that.warehouseList = res.result
         if (this.warehouseList != null) {
-          this.model.warehouseCode = this.warehouseList[0].code;
+          this.model.warehouseCode = this.warehouseList[0].code
         }
       })
     },
@@ -222,7 +222,7 @@ export default {
     // 判断登录类型
     handleUsernameOrEmail(rule, value, callback) {
-      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
+      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
       if (regex.test(value)) {
         this.loginType = 0
       } else {
@@ -239,47 +239,51 @@ export default {
       let promiseArray = []
       for (let item of arr) {
         let p = new Promise((resolve, reject) => {
-          this.$refs['form'].validateField(item, (err) => {
+          this.$refs['form'].validateField(item, err => {
             if (!err) {
-              resolve();
+              resolve()
             } else {
-              reject(err);
+              reject(err)
             }
           })
-        });
+        })
         promiseArray.push(p)
       }
-      Promise.all(promiseArray).then(() => {
-        callback()
-      }).catch(err => {
-        callback(err)
-      })
+      Promise.all(promiseArray)
+        .then(() => {
+          callback()
+        })
+        .catch(err => {
+          callback(err)
+        })
     },
     acceptUsername(username) {
       this.model['username'] = username
     },
     // 账号密码登录
     handleLogin(rememberMe) {
-      this.validateFields(['username', 'password'], (err) => {
+      this.validateFields(['username', 'password'], err => {
         if (!err) {
           let loginParams = {
             username: this.model.username,
             password: this.maskedPassword,
             warehouseCode: this.model.warehouseCode,
             checkKey: this.currdatetime,
-            remember_me: rememberMe,
+            remember_me: rememberMe
           }
-          this.Login(loginParams).then((res) => {
-            this.$emit('success', res.result)
-            this.loginSuccess()
-          }).catch((err) => {
-            this.validateFail()
-            this.requestFailed(err)
-            this.$emit('fail', err)
-            if (err.code == 499) {
-              this.$router.push({path: "/user/systemTokenModal"})
-            }
-          });
+          this.Login(loginParams)
+            .then(res => {
+              this.$emit('success', res.result)
+              this.loginSuccess()
+            })
+            .catch(err => {
+              this.validateFail()
+              this.requestFailed(err)
+              this.$emit('fail', err)
+              if (err.code == 499) {
+                this.$router.push({ path: '/user/systemTokenModal' })
+              }
+            })
         } else {
           this.validateFail()
           this.$emit('validateFail')
@@ -291,231 +295,234 @@ export default {
 </script>
 <style lang="less" scoped>
-  #userLayout {
-    height: 100%;
-    display: flex; /* 设置flex布局 */
-    width: 100%; /* 容器宽度设置为100% */
-  }
-  ::v-deep .ant-select-selection{
-    border-width: 1px;
-    border-radius: 12px;
-    width: 100% !important;
-    height: 100% !important;
-    background-color: #fff;
-    background-image: url(../../assets/cangku.png);
-    padding-left: 50px; /* 留出图片的空间 */
-    background-repeat: no-repeat;
-    background-position: 20px center;
-    background-size: 28px 28px;
-    box-shadow: 2px 5px 5px #c3c3c3;
-    font-size: 18px;
-  }
+#userLayout {
+  height: 100%;
+  display: flex; /* 设置flex布局 */
+  width: 100%; /* 容器宽度设置为100% */
+}
+::v-deep .ant-select-selection {
+  border-width: 1px;
+  border-radius: 12px;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: #fff;
+  background-image: url(../../assets/cangku.png);
+  padding-left: 50px; /* 留出图片的空间 */
+  background-repeat: no-repeat;
+  background-position: 20px center;
+  background-size: 28px 28px;
+  box-shadow: 2px 5px 5px #c3c3c3;
+  font-size: 18px;
+}
-  /deep/ .ant-select-selection__rendered{
-    margin-top: 8px;
-  }
+/deep/ .ant-select-selection__rendered {
+  margin-top: 8px;
+}
-  ///deep/ .ant-select-dropdown-menu-item-selected{
-  //  font-size: 18px;
-  //  height: 30px;
-  //}
+///deep/ .ant-select-dropdown-menu-item-selected{
+//  font-size: 18px;
+//  height: 30px;
+//}
-  .left-div {
-    flex: 0 0 65%; /* 左侧div宽度为容器的70% */
-  }
+.left-div {
+  flex: 0 0 65%; /* 左侧div宽度为容器的70% */
+}
-  .right-div {
-    flex: 0 0 35%;
-    background-color: #FAFAFA;
-    button.login-button {
-      padding: 0 15px;
-      font-size: 16px;
-      height: 20px;
-      width: 60%;
-    }
-  }
-  #backgroundImg {
-    //margin-top: 80px;
-    height: 60%;
-    //margin-left: 130px;
-    background-image: url(../../assets/beijingtu.jpg);
+.right-div {
+  flex: 0 0 35%;
+  background-color: #fafafa;
+}
+#backgroundImg {
+  height: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  .imge {
+    height: 75%;
     background-size: contain;
     background-repeat: no-repeat;
     position: relative;
-    left: 9%;
-  }
-  #logo {
-    height: 15%;
-    width: 100%;
-    //background-color: red;
-    //margin-left: 150px;
-    //margin-left: 11%;
-    //margin-top: 30px;
-    display: flex;
+    background-position: top center;
   }
-  #logoImg {
-    width: 35%;
-    height: 100%;
-    float: right;
-    position: relative;
-    //background-color: yellow;
-    .imge{
-      width: 50%;
-      height: 20%;
-      position: absolute;
-      right: 3%; /* 水平居右 */
-      top: 50%; /* 从顶部偏移50% */
-      transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
-      //object-fit: contain;
-      //top: 39%;
-      //left: 45%;
-      //object-fit: cover; /* 或 contain、fill、none、scale-down */
-      //object-position: center;
-    }
-  }
-  #text{
-    height: 100%;
-    width: 100%;
-    font-size: 1vw;
-    align-content: center;
-    color: #333333;
-    //margin-left: 5px;
-    font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
-    font-weight: bold;
-    //background-color: blue;
-  }
-  #copyright{
-    height: 40%;
-    width: 100%;
-    //margin-left: 820px;
-    //margin-top: 100px;
-  }
-  #form-container{
-    width: 200px; /* 设置宽度 */
-    height: 50px; /* 设置高度 */
-    //margin-left: 820px;
-    //margin-top: 100px;
-  }
-  #company{
-    //background-color: #0c8fcf;
-    align-content: center;
-    text-align: right;
-    color: #AC1E2B;
-    font-size: 14px;
-    width: 90%;
-    height: 95%;
-  }
-  #suggest{
-    //background-color: yellow;
-    //width: 350px;
-    width: 100%;
-    height: 25%;
-    color: #666666;
-    font-size: 14px;
-    //text-align: center;
-  }
-  #welcome{
-    font-size: 20px;
-    margin-top: 150px;
-    margin-left: 45px;
-    color: #333333;
-  }
-  #name{
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 12px;
-    width: 450px;
-    height: 50px;
-    margin-top: 30px;
-    margin-left: 45px;
-    background-image: url(../../assets/huiyuan.png);
-    padding-left: 60px; /* 留出图片的空间 */
-    background-repeat: no-repeat;
-    background-position: 20px center;
-    background-size: 26px 26px;
-    font-size: 18px;
-    color: #333333;
-    box-shadow: 2px 5px 5px #c3c3c3;
-  }
-  #name::after {
-    content: "";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-  #name::placeholder{
-    font-size: 18px;
-    color: #999999;
-    padding-left: 0px
-  }
-  #password{
-    //border-color: #AC1E2B;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 12px;
-    width: 450px;
-    height: 50px;
-    margin-top: 10px;
-    margin-left: 45px;
-    background-image: url(../../assets/mima.png);
-    padding-left: 60px; /* 留出图片的空间 */
-    background-repeat: no-repeat;
-    background-position: 20px center;
-    background-size: 26px 26px;
-    font-size: 18px;
-    color: #333333;
-    box-shadow: 2px 5px 5px #c3c3c3;
-  }
-  #password::after {
-    content: "";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  }
-  #password::placeholder{
-    font-size: 18px;
-    color: #999999;
-    padding-left: 0px
-  }
-  #warehouseCode{
-    border-color: #ebf3fd;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 12px;
-    width: 450px;
-    height: 50px;
-    margin-top: 10px;
-    margin-left: 45px;
-    font-size: 16px;
-    text-align: center;
-    //color: #333333;
-  }
-  a-select {
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
-    color: #333;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  #logIn{
-    border-color: #AC1E2B;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 12px;
-    width: 450px;
-    height: 50px;
-    margin-top: 10px;
-    margin-left: 45px;
-    font-size: 26px;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    color: #ebf3fd;
-    background-color: red;
+}
+#logo {
+  height: 15%;
+  width: 100%;
+  //background-color: red;
+  //margin-left: 150px;
+  //margin-left: 11%;
+  //margin-top: 30px;
+  display: flex;
+}
+#logoImg {
+  width: 35%;
+  height: 100%;
+  float: right;
+  position: relative;
+  //background-color: yellow;
+  .imge {
+    width: 60%;
+    height: 20%;
+    position: absolute;
+    right: 3%; /* 水平居右 */
+    top: 50%; /* 从顶部偏移50% */
+    transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
+    //object-fit: contain;
+    //top: 39%;
+    //left: 45%;
+    //object-fit: cover; /* 或 contain、fill、none、scale-down */
+    //object-position: center;
   }
-
+}
+#text {
+  height: 100%;
+  width: 100%;
+  font-size: 1vw;
+  align-content: center;
+  color: #333333;
+  //margin-left: 5px;
+  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+  font-weight: bold;
+  //background-color: blue;
+}
+#copyright {
+  height: 5%;
+  width: stretch;
+  position: fixed;
+  // transform: translateX(-50%);
+  //margin-left: 820px;
+  //margin-top: 100px;
+}
+#form-container {
+  width: 200px; /* 设置宽度 */
+  height: 50px; /* 设置高度 */
+  //margin-left: 820px;
+  //margin-top: 100px;
+}
+#company {
+  align-content: center;
+  text-align: center;
+  color: #ac1e2b;
+  height: 100%;
+  width: 100%;
+  font-size: 0.9vw;
+  align-content: baseline;
+  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+}
+#welcome {
+  width: 85%;
+  height: 3vw;
+  margin-top: 25%;
+  margin-left: 50%;
+  transform: translateX(-48%);
+  color: #333333;
+  font-size: 1.5vw;
+  align-content: center;
+  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+}
+#name {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.6vw;
+  width: 85%;
+  height: 3vw;
+  line-height: 3vw;
+  margin-top: 2.5vw;
+  margin-left: 8%;
+  background-image: url(../../assets/huiyuan.png);
+  padding-left: 12%; /* 留出图片的空间 */
+  background-repeat: no-repeat;
+  background-position: 20px center;
+  background-size: 26px 26px;
+  font-size: 1vw;
+  color: #333333;
+  box-shadow: 2px 5px 5px #c3c3c3;
+}
+#name::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+#name::placeholder {
+  font-size: 18px;
+  color: #999999;
+  padding-left: 0px;
+}
+#password {
+  //border-color: #AC1E2B;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.6vw;
+  width: 85%;
+  height: 3vw;
+  line-height: 3vw;
+  margin-top: 0.5vw;
+  margin-left: 8%;
+  background-image: url(../../assets/mima.png);
+  padding-left: 12%; /* 留出图片的空间 */
+  background-repeat: no-repeat;
+  background-position: 20px center;
+  background-size: 26px 26px;
+  font-size: 1vw;
+  color: #333333;
+  box-shadow: 2px 5px 5px #c3c3c3;
+}
+#password::after {
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+#password::placeholder {
+  font-size: 18px;
+  color: #999999;
+  padding-left: 0px;
+}
+/deep/ .ant-form-item-control{
+  line-height: 65px;
+}
+#warehouseCode {
+  border-color: #ebf3fd;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.6vw;
+  width: 85%;
+  height: 3vw;
+  line-height: 3vw;
+  margin-top: 0.5vw;
+  margin-left: 8%;
+  font-size: 1vw;
+  text-align: center;
+  //color: #333333;
+}
+a-select {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  color: #333;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+#logIn {
+  border-color: #ac1e2b;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.6vw;
+  width: 85%;
+  height: 3vw;
+  line-height: 3vw;
+  margin-top: 0.5vw;
+  margin-left: 8%;
+  font-size: 1.8vw;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  color: #ebf3fd;
+  background-color: red;
+  box-shadow: 2px 5px 5px #c3c3c3;
+}
 </style>
 \ No newline at end of file