登录页面 优化

src/views/myLogin.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="login-container">
-    <div>
+    <div class="textTitle">
       <h3 class="toptitle">平潭协和医院</h3>
+      <h3 class="topSubtitle">医院UDI管理系统</h3>
     </div>
     <el-form
       class="card-box login-form"
@@ -13,7 +14,7 @@
     >
       <el-card class="box-card">
         <div style="text-align: center; margin-top: 10px">
-          <img alt="element-logo" src="@/assets/logo/logo.png"/>
+          <img alt="element-logo" src="@/assets/logo/logo.png" />
         </div>
         <h3 class="title">用户登录</h3>
         <el-form-item prop="username" class="item" style="margin-top: -20px">
@@ -24,7 +25,7 @@
             v-model="loginForm.username"
           >
             <i slot="prefix" class="el-input__icon">
-              <icon-svg icon-class="user"/>
+              <icon-svg icon-class="user" />
             </i>
           </el-input>
         </el-form-item>
@@ -38,20 +39,31 @@
             autocomplete="on"
           >
             <i slot="prefix" class="el-input__icon">
-              <icon-svg icon-class="pwd"/>
+              <icon-svg icon-class="pwd" />
             </i>
             <i
               slot="suffix"
               class="el-input__icon"
               @click="isShowPwd = !isShowPwd"
             >
-              <icon-svg icon-class="eye"/>
+              <icon-svg icon-class="eye" />
             </i>
           </el-input>
         </el-form-item>
-        <el-form-item prop="verificationCode" class="item" style="background-color: white">
+        <el-form-item
-          <Verify ref="checkV" :showButton="false" :barSize="{width:'305px',height:'37px'}" :vOffset="5"
+          prop="verificationCode"
-                  @success="verifyAlert('success')" @error="verifyAlert('error')" :type="3"></Verify>
+          class="item"
+          style="background-color: white"
+        >
+          <Verify
+            ref="checkV"
+            :showButton="false"
+            :barSize="{ width: '305px', height: '37px' }"
+            :vOffset="5"
+            @success="verifyAlert('success')"
+            @error="verifyAlert('error')"
+            :type="3"
+          ></Verify>
         </el-form-item>
         <div style="text-align: center; margin-top: 15px">
           <el-button
@@ -59,32 +71,32 @@
             style="width: 60%; margin-bottom: 30px"
             :loading="loading"
             @click.native="handleLogin()"
-          >登录
+            >登录
           </el-button>
         </div>
-
       </el-card>
     </el-form>
 
-    <div style="
+    <div
-          position: absolute;
+      style="
-          bottom: 0;
+        position: absolute;
-          left: 50%;
+        bottom: 0;
-          transform: translate(-50%, -50%);
+        left: 50%;
-          font-size: 12px;
+        transform: translate(-50%, -50%);
-          color: white;
+        font-size: 12px;
-        ">
+        color: white;
+      "
+    >
       开发单位：厦门高立新鹏软件科技有限公司 技术支持：13459286066
     </div>
-
   </div>
 </template>
 
 <script>
-import Verify from 'vue2-verify'
+import Verify from "vue2-verify";
 import axios from "axios";
 import Cookies from "js-cookie";
-import {decrypt, encrypt} from "@/utils/jsencrypt";
+import { decrypt, encrypt } from "@/utils/jsencrypt";
 
 export default {
   data() {
@@ -100,21 +112,21 @@ export default {
         userName: "",
         pwd: "",
         checked: true,
-        verificationCode: false
+        verificationCode: false,
       },
       loginForm: {
         username: "",
         password: "",
         rememberMe: false,
-        verificationCode:false,
+        verificationCode: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       rules: {
         userName: [
-          {required: true, message: "请输入登录名", trigger: "blur"},
+          { required: true, message: "请输入登录名", trigger: "blur" },
         ],
-        pwd: [{validator: validatePwd, trigger: "blur"}],
+        pwd: [{ validator: validatePwd, trigger: "blur" }],
       },
       isShowPwd: false, // 是否显示密码
       loading: false, // 登录loading
@@ -125,7 +137,7 @@ export default {
   },
   methods: {
     verifyAlert(text) {
-      if (text === 'success') {
+      if (text === "success") {
         this.loginForm.verificationCode = true;
       }
     },
@@ -174,46 +186,52 @@ export default {
     //   });
     // },
 
-
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
       // const rememberMe = Cookies.get('rememberMe')
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
         // rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
     handleLogin() {
-      this.$refs.ruleForm.validate(valid => {
+      this.$refs.ruleForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, {expires: 30});
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
             // Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
             // Cookies.remove('rememberMe');
           }
-          this.$store.dispatch("Login", this.loginForm).then((res) => {
+          this.$store
-            this.$router.push({path: this.redirect || "/"}).catch((res) => {
+            .dispatch("Login", this.loginForm)
+            .then((res) => {
+              this.$router
+                .push({ path: this.redirect || "/" })
+                .catch((res) => {});
+            })
+            .catch((res) => {
+              this.loading = false;
+              this.$message.error(res);
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
             });
-          }).catch((res) => {
-            this.loading = false;
-            this.$message.error(res);
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
         }
       });
-    }
+    },
   },
   components: {
-    Verify
+    Verify,
   },
   created() {
     // 将参数拷贝进查询对象
@@ -223,14 +241,12 @@ export default {
       this.redirect = decodeURIComponent(query.redirect);
     }
 
-    axios.get("./config.json").then(res => {
+    axios.get("./config.json").then((res) => {
       this.hospName = res.data.hosp_name;
     });
 
     this.getCookie();
-
+  },
-
-  }
 };
 </script>
 
@@ -241,12 +257,13 @@ $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
 .login-container {
-
   @include relative;
   background-color: white;
   background-image: url("../assets/login.jpg");
   background-size: 100vw 100vh;
   height: 100%;
+  overflow: hidden;
+  display: flex;
 
   input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
@@ -302,15 +319,20 @@ $light_gray: #eee;
     font-weight: bold;
     margin-bottom: 50px;
   }
-
+  .textTitle {
+    width: 50%;
+    font-size: 45px;
+  }
 
   .toptitle {
-    position: absolute;
+    color: #ffffff;
-    font-size: 55px;
+    text-align: center;
-    color: #FFFFFF;
+    margin-top: 132px;
-    margin: 50px auto 0.5333rem 50px;
+    margin-bottom: -10px;
+  }
+  .topSubtitle {
+    color: #fcd38b;
     text-align: center;
-    font-weight: bold;
   }
 
   .login-form {