修改登录布局

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <div class="login-form-main">
-      <img src="@/assets/sheji/loginlan.png" alt="">
+      <img src="@/assets/sheji/loginlan.png" alt="" />
       <div class="main-title">
         <h1>欢迎登录</h1>
         <h3>采销平台</h3>
@@ -68,34 +68,37 @@
         </el-tooltip>
 
         <el-form-item prop="code">
-          <div style="display:flex">
-
-            <span class="svg-container" style="margin-left:10px">
+          <div style="display: flex">
+            <span class="svg-container" style="margin-left: 10px">
               <i class="el-icon-key" />
             </span>
-            <el-input v-model="loginForm.code" placeholder="验证码" style="line-height:54px" />
+            <el-input
+              v-model="loginForm.code"
+              placeholder="验证码"
+              style="line-height: 54px"
+            />
 
             <div @click="refreshCode">
               <Identify
                 content-height="52"
                 :identify-code="identifyCode"
-                style="cursor:pointer"
+                style="cursor: pointer"
               />
             </div>
           </div>
         </el-form-item>
 
         <el-button
-          :loading="
-            loading"
+          :loading="loading"
           :disabled="loading"
           type="primary"
           style="width: 100%; margin-top: 5px"
           @click.native.prevent="handleLogin()"
-        >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
+          >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
+        >
 
-        <div style="position: relative; padding: 12px 0 0 0">
-          <div class="tips" style="float: left">
+        <!-- <div style="position: relative; padding: 12px 0 0 0"> -->
+        <!-- <div class="tips" style="float: left">
             <el-popover
               placement="top"
               title="初始密码："
@@ -105,14 +108,15 @@
             >
               <i slot="reference" class="el-icon-info" />
             </el-popover>
-          </div>
-          <!-- <router-link to="/forget-password">
+          </div> -->
+        <!-- <router-link to="/forget-password">
             <div class="tips" style="float: right">
               <span>忘记密码</span>
             </div>
           </router-link> -->
-        </div>
-      </el-form></div>
+        <!-- </div> -->
+      </el-form>
+    </div>
 
     <div v-if="loginBeian !== ''" class="beian">
       <span>{{ loginTitle }}</span>
@@ -123,212 +127,237 @@
 </template>
 
 <script>
-import { isnumber, isAlphanumeric, validAlphabets, isMobile } from '@/utils/validate'
-import asyncRequest from '@/apis/service/user'
-import Identify from '@/components/identify'
-import urlConfig from '@/apis/url-config'
-import resToken from '@/mixins/resToken'
+import { isnumber, isAlphanumeric, validAlphabets, isMobile } from "@/utils/validate";
+import asyncRequest from "@/apis/service/user";
+import Identify from "@/components/identify";
+import urlConfig from "@/apis/url-config";
+import resToken from "@/mixins/resToken";
 
 export default {
-  name: 'Login',
+  name: "Login",
   components: { Identify },
   mixins: [resToken],
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('手机号不能为空！'))
+      if (value === "") {
+        callback(new Error("手机号不能为空！"));
       } else {
         if (!isMobile(value)) {
-          callback(new Error('请输入正确的手机号'))
+          callback(new Error("请输入正确的手机号"));
         } else {
-          callback()
+          callback();
         }
       }
-    }
+    };
     const validatePassword = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('密码不能为空！'))
+      if (value === "") {
+        callback(new Error("密码不能为空！"));
       } else {
         if (!isAlphanumeric(value)) {
-          callback(new Error('密码为6-18位数字字母组合！'))
+          callback(new Error("密码为6-18位数字字母组合！"));
         } else if (value.length < 6 || value.length > 18) {
-          callback(new Error('密码为6-18位数字字母组合！'))
+          callback(new Error("密码为6-18位数字字母组合！"));
         } else if (isnumber(value)) {
-          callback(new Error('密码不能为纯数字！'))
+          callback(new Error("密码不能为纯数字！"));
         } else if (validAlphabets(value)) {
-          callback(new Error('密码不能为纯字母！'))
+          callback(new Error("密码不能为纯字母！"));
         } else {
-          callback()
+          callback();
         }
       }
-    }
+    };
 
     const validateCode = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('验证码不能为空!'))
+      if (value === "") {
+        callback(new Error("验证码不能为空!"));
       } else {
         if (value !== this.identifyCode) {
-          callback(new Error('请输入正确的验证码'))
+          callback(new Error("请输入正确的验证码"));
         } else {
-          callback()
+          callback();
         }
       }
-    }
+    };
 
     return {
-      ver: '',
+      ver: "",
       show: false,
       loginTitle: urlConfig.loginTitle,
       loginBeian: urlConfig.loginBeian,
       loginBeianUrl: urlConfig.loginBeianUrl,
       loginForm: {
-        username: '',
-        password: '',
-        code: ''
+        username: "",
+        password: "",
+        code: "",
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
-        code: [{ required: true, trigger: 'blur', validator: validateCode }]
+        username: [{ required: true, trigger: "blur", validator: validateUsername }],
+        password: [{ required: true, trigger: "blur", validator: validatePassword }],
+        code: [{ required: true, trigger: "blur", validator: validateCode }],
       },
-      identifyCode: '',
-      identifyCodes: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd'],
-      passwordType: 'password',
+      identifyCode: "",
+      identifyCodes: [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "a",
+        "b",
+        "c",
+        "d",
+      ],
+      passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
-      otherQuery: {}
-    }
+      otherQuery: {},
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
-        const query = route.query
+      handler: function (route) {
+        const query = route.query;
         if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+          this.redirect = query.redirect;
+          this.otherQuery = this.getOtherQuery(query);
         }
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   mounted() {
-    this.refreshCode()
-    this.bindEnterEvent()
+    this.refreshCode();
+    this.bindEnterEvent();
     // this.getversion();
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
+    if (this.loginForm.username === "") {
+      this.$refs.username.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
     }
   },
   beforeDestroy() {
-    this.removeEnterEvent()
+    this.removeEnterEvent();
   },
   methods: {
-    bindEnterEvent() { window.addEventListener('keydown', this.listener) },
-    removeEnterEvent() { window.removeEventListener('keydown', this.listener) },
-    listener(e) { e.keyCode === 13 && this.handleLogin() },
+    bindEnterEvent() {
+      window.addEventListener("keydown", this.listener);
+    },
+    removeEnterEvent() {
+      window.removeEventListener("keydown", this.listener);
+    },
+    listener(e) {
+      e.keyCode === 13 && this.handleLogin();
+    },
     async getversion() {
-      const { code, data } = await asyncRequest.version({})
+      const { code, data } = await asyncRequest.version({});
       if (code === 0) {
-        const { version } = data
-        this.ver = version
+        const { version } = data;
+        this.ver = version;
       } else {
-        this.ver = ''
+        this.ver = "";
       }
     },
     setVisible(val) {
-      this.show = val
+      this.show = val;
     },
     handleClick() {
-      this.show = true
+      this.show = true;
     },
     handleSuccess() {
-      this.show = false
-      this.handleLogin()
+      this.show = false;
+      this.handleLogin();
     },
     checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
     },
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
+      if (this.passwordType === "password") {
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     // 生成随机数
     randomNum(min, max) {
-      max = max + 1
-      return Math.floor(Math.random() * (max - min) + min)
+      max = max + 1;
+      return Math.floor(Math.random() * (max - min) + min);
     },
     // 更新验证码
     refreshCode() {
-      this.identifyCode = ''
-      this.makeCode(this.identifyCodes, 4)
+      this.identifyCode = "";
+      this.makeCode(this.identifyCodes, 4);
     },
     makeCode(data, len) {
       for (let i = 0; i < len; i++) {
-        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length - 1)]
+        this.identifyCode += this.identifyCodes[
+          this.randomNum(0, this.identifyCodes.length - 1)
+        ];
       }
     },
     handleLogin() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
           this.$store
-            .dispatch('user/login', this.loginForm)
+            .dispatch("user/login", this.loginForm)
             .then((res) => {
-              console.log(res)
+              console.log(res);
               if (res.code === 0) {
-                this.getMenu()
+                this.getMenu();
               } else {
-                this.$message.warning(res.message)
-                this.loading = false
+                this.$message.warning(res.message);
+                this.loading = false;
               }
             })
             .catch((err) => {
-              console.log(err)
-              this.loading = false
-            })
+              console.log(err);
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     getMenu() {
       this.$store
-        .dispatch('user/getMenuList', this)
+        .dispatch("user/getMenuList", this)
         .then((res) => {
           window.vm.$router.push({
             path: this.redirect
               ? this.redirect
-              : res === 'success-dataV'
-                ? '/bigScreen/datavScr'
-                : '/welcome/dashboard/',
-            query: this.otherQuery
-          })
-          this.loading = false
+              : res === "success-dataV"
+              ? "/bigScreen/datavScr"
+              : "/welcome/dashboard/",
+            query: this.otherQuery,
+          });
+          this.loading = false;
         })
-        .catch((err) => { this.loading = false })
+        .catch((err) => {
+          this.loading = false;
+        });
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
         }
-        return acc
-      }, {})
-    }
-  }
-}
+        return acc;
+      }, {});
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -427,11 +456,11 @@ $light_gray: #f2f2f2;
     .login-form {
       position: absolute;
       width: 320px;
-      top: -20px;
+      top: -40px;
       left: 380px;
       z-index: 3;
       max-width: 100%;
-      padding: 60px 28px 20px 28px;
+      padding: 50px 28px 35px 28px;
       margin: 0 auto;
       overflow: hidden;
       background: #fff;
@@ -504,7 +533,7 @@ $light_gray: #f2f2f2;
     .title {
       font-size: 26px;
       color: #04a2ce;
-      margin: 0px auto 40px auto;
+      margin: 0px auto 30px auto;
       text-align: center;
       font-weight: bold;
       span {
@@ -539,8 +568,8 @@ $light_gray: #f2f2f2;
   }
 }
 
-.s-canvas{
-  margin:0px;
+.s-canvas {
+  margin: 0px;
   height: 38px;
 }
 </style>