删除了验证码组件并且复写了一些UI

src/components/layouts/UserLayout.vue

@@ -4,7 +4,7 @@
       <div class="top">
         <div class="header">
           <a href="/">
-            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <img src="~@/assets/logo.svg" class="logo" alt="logo" />
             <span class="title">计科院ERP系统</span>
           </a>
         </div>
@@ -30,121 +30,123 @@
 </template>
 
 <script>
-  import RouteView from "@/components/layouts/RouteView"
-  import { mixinDevice } from '@/utils/mixin.js'
+import RouteView from '@/components/layouts/RouteView'
+import { mixinDevice } from '@/utils/mixin.js'
 
-  export default {
-    name: "UserLayout",
-    components: { RouteView },
-    mixins: [mixinDevice],
-    data () {
-      return {}
-    },
-    mounted () {
-      document.body.classList.add('userLayout')
-    },
-    beforeDestroy () {
-      document.body.classList.remove('userLayout')
-    },
+export default {
+  name: 'UserLayout',
+  components: { RouteView },
+  mixins: [mixinDevice],
+  data() {
+    return {}
+  },
+  mounted() {
+    document.body.classList.add('userLayout')
+  },
+  beforeDestroy() {
+    document.body.classList.remove('userLayout')
   }
+}
 </script>
 
 <style lang="less" scoped>
-  #userLayout.user-layout-wrapper {
-    height: 100%;
-
-    &.mobile {
-      .container {
-        .main {
-          max-width: 368px;
-          width: 98%;
-        }
-      }
-    }
-
+#userLayout.user-layout-wrapper {
+  height: 100%;
+  background: #f0f2f5 url(~@/assets/background.jpg) no-repeat 0%;
+  &.mobile {
     .container {
-      width: 100%;
-      min-height: 100%;
-      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
-      background-size: 100%;
-      padding: 110px 0 144px;
-      position: relative;
-
-      a {
-        text-decoration: none;
-      }
-
-      .top {
-        text-align: center;
-
-        .header {
-          height: 44px;
-          line-height: 44px;
-
-          .badge {
-            position: absolute;
-            display: inline-block;
-            line-height: 1;
-            vertical-align: middle;
-            margin-left: -12px;
-            margin-top: -10px;
-            opacity: 0.8;
-          }
-
-          .logo {
-            height: 44px;
-            vertical-align: top;
-            margin-right: 16px;
-            border-style: none;
-          }
-
-          .title {
-            font-size: 33px;
-            color: rgba(0, 0, 0, .85);
-            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-            font-weight: 600;
-            position: relative;
-            top: 2px;
-          }
-        }
-        .desc {
-          font-size: 14px;
-          color: rgba(0, 0, 0, 0.45);
-          margin-top: 12px;
-          margin-bottom: 40px;
-        }
-      }
-
       .main {
-        min-width: 260px;
-        width: 368px;
-        margin: 0 auto;
-      }
-
-      .footer {
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        padding: 0 16px;
-        margin: 48px 0 24px;
-        text-align: center;
-
-        .links {
-          margin-bottom: 8px;
-          font-size: 14px;
-          a {
-            color: rgba(0, 0, 0, 0.45);
-            transition: all 0.3s;
-            &:not(:last-child) {
-              margin-right: 40px;
-            }
-          }
-        }
-        .copyright {
-          color: rgba(0, 0, 0, 0.45);
-          font-size: 14px;
-        }
+        max-width: 368px;
+        width: 98%;
       }
     }
   }
-</style>
+
+  .container {
+    width: 900px;
+    background-size: cover;
+    min-height: 100%;
+    padding: 110px 0 144px;
+    position: absolute;
+    background-size: cover;
+    right: 0%;
+    a {
+      text-decoration: none;
+    }
+
+    .top {
+      text-align: center;
+
+      .header {
+        height: 44px;
+        line-height: 44px;
+
+        .badge {
+          position: absolute;
+          display: inline-block;
+          line-height: 1;
+          vertical-align: middle;
+          margin-left: -12px;
+          margin-top: -10px;
+          opacity: 0.8;
+        }
+
+        .logo {
+          height: 44px;
+          vertical-align: top;
+          margin-right: 16px;
+          border-style: none;
+        }
+
+        .title {
+          font-size: 33px;
+          color: rgba(0, 0, 0, 0.85);
+          font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+            'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol';
+          font-weight: 600;
+          position: relative;
+          top: 2px;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.45);
+        margin-top: 12px;
+        margin-bottom: 40px;
+      }
+    }
+
+    .main {
+      min-width: 260px;
+      width: 368px;
+      margin: 0 auto;
+    }
+
+    .footer {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      padding: 0 16px;
+      margin: 48px 0 24px;
+      text-align: center;
+
+      .links {
+        margin-bottom: 8px;
+        font-size: 14px;
+        a {
+          color: rgba(0, 0, 0, 0.45);
+          transition: all 0.3s;
+          &:not(:last-child) {
+            margin-right: 40px;
+          }
+        }
+      }
+      .copyright {
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/user/LoginAccount.vue

@@ -1,160 +1,147 @@
 <template>
-    <div>
-      <a-form-model ref="form" :model="model" :rules="validatorRules">
-        <a-form-model-item required prop="username">
-          <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin">
-            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-          </a-input>
-        </a-form-model-item>
-        <a-form-model-item required prop="password">
-          <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码 / 123456">
-            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-          </a-input>
-        </a-form-model-item>
-
-        <a-row :gutter="0">
-          <a-col :span="16">
-            <a-form-model-item required prop="inputCode">
-              <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
-                <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
-              </a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="8" style="text-align: right">
-            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
-            <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
-          </a-col>
-        </a-row>
-      </a-form-model>
-    </div>
+  <div>
+    <a-form-model ref="form" :model="model" :rules="validatorRules">
+      <a-form-model-item required prop="username">
+        <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin">
+          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item required prop="password">
+        <a-input
+          v-model="model.password"
+          size="large"
+          type="password"
+          autocomplete="false"
+          placeholder="请输入密码 / 123456"
+        >
+          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
+        </a-input>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
 </template>
 
 <script>
-  import { getAction } from '@/api/manage'
-  import Vue from 'vue'
-  import { mapActions } from 'vuex'
+import { getAction } from '@/api/manage'
+import Vue from 'vue'
+import { mapActions } from 'vuex'
 
-  export default {
-    name: 'LoginAccount',
-    data(){
-      return {
-        requestCodeSuccess: false,
-        randCodeImage: '',
-        currdatetime: '',
-        loginType: 0,
-        model:{
-          username: 'admin',
-          password: '123456',
-          inputCode: ''
-        },
-        validatorRules:{
-          username: [
-            { required: true, message: '请输入用户名!' },
-            { validator: this.handleUsernameOrEmail }
-          ],
-          password: [{
-            required: true, message: '请输入密码!', validator: 'click'
-          }],
-          inputCode: [{
-            required: true, message: '请输入验证码!'
-          }]
-        }
-
-      }
-    },
-    created() {
-      this.handleChangeCheckCode();
-    },
-    methods:{
-      ...mapActions(['Login']),
-      /**刷新验证码*/
-      handleChangeCheckCode(){
-        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)
-            this.requestCodeSuccess=false
+export default {
+  name: 'LoginAccount',
+  data() {
+    return {
+      requestCodeSuccess: false,
+      randCodeImage: '',
+      currdatetime: '',
+      loginType: 0,
+      model: {
+        username: 'admin',
+        password: '123456'
+      },
+      validatorRules: {
+        username: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }],
+        password: [
+          {
+            required: true,
+            message: '请输入密码!',
+            validator: 'click'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.handleChangeCheckCode()
+  },
+  methods: {
+    ...mapActions(['Login']),
+    /**刷新验证码*/
+    handleChangeCheckCode() {
+      this.currdatetime = new Date().getTime()
+      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
         })
-      },
-      // 判断登录类型
-      handleUsernameOrEmail (rule, value, callback) {
-        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 {
-          this.loginType = 1
-        }
-        callback()
-      },
-      /**
-       * 验证字段
-       * @param arr
-       * @param callback
-       */
-      validateFields(arr, callback){
-        let promiseArray = []
-        for(let item of arr){
-          let p = new Promise((resolve, reject) => {
-            this.$refs['form'].validateField(item, (err)=>{
-              if(!err){
-                resolve();
-              }else{
-                reject(err);
-              }
-            })
-          });
-          promiseArray.push(p)
-        }
-        Promise.all(promiseArray).then(()=>{
+        .catch(() => {
+          this.requestCodeSuccess = false
+        })
+    },
+    // 判断登录类型
+    handleUsernameOrEmail(rule, value, callback) {
+      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 {
+        this.loginType = 1
+      }
+      callback()
+    },
+    /**
+     * 验证字段
+     * @param arr
+     * @param callback
+     */
+    validateFields(arr, callback) {
+      let promiseArray = []
+      for (let item of arr) {
+        let p = new Promise((resolve, reject) => {
+          this.$refs['form'].validateField(item, err => {
+            if (!err) {
+              resolve()
+            } else {
+              reject(err)
+            }
+          })
+        })
+        promiseArray.push(p)
+      }
+      Promise.all(promiseArray)
+        .then(() => {
           callback()
-        }).catch(err=>{
+        })
+        .catch(err => {
           callback(err)
         })
-      },
-      acceptUsername(username){
-        this.model['username'] = username
-      },
-      //账号密码登录
-      handleLogin(rememberMe){
-        this.validateFields([ 'username', 'password', 'inputCode' ], (err)=>{
-          if(!err){
-            let loginParams = {
-              username: this.model.username,
-              password: this.model.password,
-              captcha: this.model.inputCode,
-              checkKey: this.currdatetime,
-              remember_me: rememberMe,
-            }
-            console.log("登录参数", loginParams)
-            this.Login(loginParams).then((res) => {
+    },
+    acceptUsername(username) {
+      this.model['username'] = username
+    },
+    //账号密码登录
+    handleLogin(rememberMe) {
+      this.validateFields(['username', 'password'], err => {
+        if (!err) {
+          let loginParams = {
+            username: this.model.username,
+            password: this.model.password,
+            checkKey: this.currdatetime,
+            remember_me: rememberMe
+          }
+          console.log('登录参数', loginParams)
+          this.Login(loginParams)
+            .then(res => {
               this.$emit('success', res.result)
-            }).catch((err) => {
+            })
+            .catch(err => {
               //update-begin-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
-              if(err && err.code===412){
-                this.handleChangeCheckCode();
+              if (err && err.code === 412) {
+                this.handleChangeCheckCode()
               }
               //update-end-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
               this.$emit('fail', err)
-            });
-          }else{
-            this.$emit('validateFail')
-          }
-        })
-      }
-
-
+            })
+        } else {
+          this.$emit('validateFail')
+        }
+      })
     }
-
   }
+}
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>