页面修改

src/components/Login.vue

 <style>
-* {
+  * {
     margin: 0;
     padding: 0;
-}
-.loginDiv {
+  }
+
+  .loginDiv {
     width: 100%;
     height: 100%;
     background-image: url("../assets/img/loginBack.jpg");
@@ -11,8 +12,9 @@
     background-size: cover;
     background-size: 100% 100%;
     background-position: center;
-}
-.loginOpacity {
+  }
+
+  .loginOpacity {
     background-color: rgba(0, 0, 0, 0.15);
     height: 100%;
     width: 100%;
@@ -20,8 +22,9 @@
     left: 0;
     top: 0;
     z-index: 1;
-}
-.loginDiv .box-card {
+  }
+
+  .loginDiv .box-card {
     position: relative;
     border-radius: 15px;
     z-index: 99;
@@ -35,38 +38,63 @@
     background-position: center;
     background-size: 100% 100%;
     background-image: url("../assets/img/loginBack.jpg");
-}
-[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
-[flex~="main:center"]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
-[flex~="cross:center"]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
-.loginDiv .logo {
+  }
+
+  [flex] {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex
+  }
+
+  [flex~="main:center"] {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center
+  }
+
+  [flex~="cross:center"] {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .loginDiv .logo {
     position: absolute;
     left: 40px;
     top: 40px;
     height: 50px;
-}
-.loginDiv .login-form {
+  }
+
+  .loginDiv .login-form {
     padding: 50px 45px 30px;
     height: 480px;
     width: 245px;
     float: right;
     background-color: #fff;
-}
-.loginDiv .form-title {
+  }
+
+  .loginDiv .form-title {
     font-size: 26px;
     color: #1F4881;
     margin-bottom: 40px;
-}
-.loginDiv .el-form-item--mini.el-form-item, .loginDiv .el-form-item--small.el-form-item {
+  }
+
+  .loginDiv .el-form-item--mini.el-form-item,
+  .loginDiv .el-form-item--small.el-form-item {
     margin-bottom: 18px;
-}
-.loginDiv .el-input .el-input__inner {
+  }
+
+  .loginDiv .el-input .el-input__inner {
     height: 36px;
     border-radius: 18px;
     background-color: #f7f5fb;
     border-color: #f7f5fb;
-}
-.loginDiv .el-input__inner {
+  }
+
+  .loginDiv .el-input__inner {
     -webkit-appearance: none;
     background-color: #FFF;
     background-image: none;
@@ -81,18 +109,20 @@
     line-height: 40px;
     outline: 0;
     padding: 0 15px;
-    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
     width: 100%;
-}
-.register_box {
+  }
+
+  .register_box {
     position: absolute;
     right: 15%;
     bottom: 35px;
     width: 150px;
-    font-size:14px;
-}
-.register {
+    font-size: 14px;
+  }
+
+  .register {
     display: inline-block;
     width: 48%;
     height: 15px;
@@ -100,62 +130,53 @@
     text-align: center;
     cursor: pointer;
     color: #4291ff;
-}
-.login-btn {
+  }
+
+  .login-btn {
     width: 100%;
     border-radius: 20px;
     height: 38px;
     font-size: 16px;
     background: linear-gradient(to right, #2E9FFF, #3E79FF);
     box-shadow: 0 4px 10px rgba(0, 123, 255, .5);
-}
-.loginDiv .el-card__body {
+  }
+
+  .loginDiv .el-card__body {
     padding: 0;
-}
+  }
+
 </style>
 <template>
   <div class="loginDiv">
     <div class="loginOpacity" flex="cross:center main:center">
       <div class="el-card box-card is-always-shadow">
         <div class="el-card__body">
-          <img alt class="logo" src="../assets/img/logo.png"/>
+          <img alt class="logo" src="../assets/img/logo.png" />
           <form class="el-form login-form">
             <div class="form-title">管理员登录</div>
             <div class="el-form-item is-required el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
                 <div class="el-input el-input--small">
-                  <input
-                    type="text"
-                    autocomplete="off"
-                    v-model="msg.UserName"
-                    placeholder="请输入用户名"
-                    class="el-input__inner"
-                  />
+                  <input type="text" autocomplete="off" v-model="msg.Account" placeholder="请输入用户名"
+                    class="el-input__inner" maxlength="25" />
                 </div>
               </div>
             </div>
             <div class="el-form-item is-required el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
                 <div class="el-input el-input--small">
-                  <input
-                    type="password"
-                    autocomplete="off"
-                    placeholder="请输入密码"
-                    v-model="msg.Password"
-                    class="el-input__inner"
-                  />
+                  <input type="password" autocomplete="off" placeholder="请输入密码" v-model="msg.Password"
+                    class="el-input__inner" maxlength="25" />
                 </div>
               </div>
             </div>
             <div class="el-form-item is-required el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
                 <div class="el-input el-input--small" style="width: 140px;">
-                  <input type="text" autocomplete="off" placeholder="验证码" v-model="msg.validataCode" class="el-input__inner" />
+                  <input type="text" autocomplete="off" placeholder="验证码" v-model="msg.ValidataCode"
+                    class="el-input__inner" maxlength="4" />
                 </div>
-                <img
-                  class="pic-captcha"
-                  src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545"
-                />
+                <img class="pic-captcha" src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545" />
               </div>
             </div>
             <div class="el-form-item el-form-item--small">
@@ -173,11 +194,8 @@
             </div>
             <div class="el-form-item el-form-item--small">
               <div class="el-form-item__content" style="margin-left: 0px;">
-                <button
-                  type="button"
-                  @click="login()"
-                  class="el-button login-btn el-button--primary el-button--small is-round"
-                >
+                <button type="button" @click="login()"
+                  class="el-button login-btn el-button--primary el-button--small is-round">
                   <span>登录</span>
                 </button>
               </div>
@@ -197,10 +215,10 @@
   export default {
     data() {
       return {
-         msg:{
-           UserName:'',
-           Password:'',
-           validataCode:''
+        msg: {
+          Account: '', //账号
+          Password: '', //密码
+          ValidataCode: '', //验证码
         }
       };
     },
@@ -209,12 +227,27 @@
     },
     methods: {
       //登录
-      login(){
-        
+      login() {
+        if (this.msg.Account == "") {
+          this.Info("请输入用户名!")
+        }
+        if (this.msg.Password == "") {
+          this.Info("请输入密码!")
+        }
+        if (this.msg.ValidataCode == "") {
+          this.Info("请输入验证码!")
+        }
+        this.apipost("api/user/login", this.msg, res => {
+          console.log("res", res);
+        })
       }
     },
     mounted() {
-
+      if (!this.isOnline()) {
+        this.msg.Account = "13551126755";
+        this.msg.Password = "123456";
+        this.msg.ValidataCode = "1234";
+      }
     }
   };
 </script>
\ No newline at end of file

src/main.js

@@ -3,12 +3,13 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import ajaxPlug from './plug/index'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
 
 Vue.config.productionTip = false
-
+Vue.use(ajaxPlug)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',