Merge pull request '删除了验证码组件并且复写了一些UI,修改了页脚' (#3) from lq/Glass-ERP-Vue:test into test

Reviewed-on: http://82.157.76.162:3000/Big-Data-Lab/Glass-ERP-Vue/pulls/3

src/components/layouts/UserLayout.vue

@@ -1,28 +1,32 @@
 <template>
   <div id="userLayout" :class="['user-layout-wrapper', device]">
+    <div class="backImg"></div>
     <div class="container">
       <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>
         <div class="desc">
-          计科院ERP系统是由人工智能大数据实验室设计的系统
+          欢迎您登录
         </div>
       </div>
 
+      <div class="border">
         <route-view></route-view>
+      </div>
 
       <div class="footer">
         <div class="links">
-          <a href="http://doc.jeecg.com" target="_blank">帮助</a>
-          <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
-          <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>
+          <a href="http://www.baidu.com" target="_blank">帮助</a>
+          <a href="https://www.bing.com" target="_blank">隐私</a>
+          <a href="https://www.baidu.com" target="_blank">条款</a>
         </div>
         <div class="copyright">
-          Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品
+          Copyright &copy; <a href="http://www.baidu.com" target="_blank">哈尔滨师范大学人工智能大数据实验室</a> All
+          right reserved
         </div>
       </div>
     </div>
@@ -30,29 +34,51 @@
 </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",
+export default {
+  name: 'UserLayout',
   components: { RouteView },
   mixins: [mixinDevice],
-    data () {
+  data() {
     return {}
   },
-    mounted () {
+  mounted() {
     document.body.classList.add('userLayout')
   },
-    beforeDestroy () {
+  beforeDestroy() {
     document.body.classList.remove('userLayout')
-    },
   }
+}
 </script>
 
 <style lang="less" scoped>
-  #userLayout.user-layout-wrapper {
+#userLayout.user-layout-wrapper {
   height: 100%;
 
+  .border {
+    display: block;
+    width: 50%;
+    margin: 20px auto;
+    padding: 25px;
+    background: #ffffff;
+    color: black;
+    border-radius: 15px;
+    border: 0;
+  }
+
+  .backImg {
+    width: 100%;
+    min-height: 100%;
+    background: #f0f2f5 url(~@/assets/background.jpg) no-repeat 50%;
+    background-size: 100%;
+    padding: 110px 0 144px;
+    position: absolute;
+    background-size: cover;
+    left: 0%;
+  }
+
   &.mobile {
     .container {
       .main {
@@ -63,12 +89,13 @@
   }
 
   .container {
-      width: 100%;
+    width: 900px;
+    background-size: cover;
     min-height: 100%;
-      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
-      background-size: 100%;
     padding: 110px 0 144px;
-      position: relative;
+    position: absolute;
+    background-size: cover;
+    right: 0%;
 
     a {
       text-decoration: none;
@@ -100,17 +127,19 @@
 
         .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";
+          color: white;
+          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;
+        font-size: 30px;
+        color: white;
+        margin-top: 15px;
         margin-bottom: 40px;
       }
     }
@@ -133,7 +162,7 @@
         margin-bottom: 8px;
         font-size: 14px;
         a {
-            color: rgba(0, 0, 0, 0.45);
+          color: white;
           transition: all 0.3s;
           &:not(:last-child) {
             margin-right: 40px;
@@ -141,10 +170,10 @@
         }
       }
       .copyright {
-          color: rgba(0, 0, 0, 0.45);
+        color: white;
         font-size: 14px;
       }
     }
   }
-  }
+}
 </style>

src/components/page/GlobalFooter.vue

@@ -3,27 +3,27 @@
     <div class="links">
       <a href="http://www.jeecg.com" target="_blank">JEECG 首页</a>
       <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">
-        <a-icon type="github"/>
+        <a-icon type="github" />
       </a>
       <a href="https://ant.design/">Ant Design</a>
       <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>
     </div>
     <div class="copyright">
       Copyright
-      <a-icon type="copyright"/>
-      2019 <span>JEECG开源社区 出品</span>
+      <a-icon type="copyright" />
+      2023 <span> 哈尔滨师范大学人工智能大数据实验室 出品</span>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "LayoutFooter"
-  }
+export default {
+  name: 'LayoutFooter'
+}
 </script>
 
 <style lang="less" scoped>
-  .footer {
+.footer {
   padding: 0 16px;
   margin: 48px 0 24px;
   text-align: center;
@@ -32,10 +32,10 @@
     margin-bottom: 8px;
 
     a {
-        color: rgba(0, 0, 0, .45);
+      color: rgba(0, 0, 0, 0.45);
 
       &:hover {
-          color: rgba(0, 0, 0, .65);
+        color: rgba(0, 0, 0, 0.65);
       }
 
       &:not(:last-child) {
@@ -44,8 +44,8 @@
     }
   }
   .copyright {
-      color: rgba(0, 0, 0, .45);
+    color: rgba(230, 228, 235, 0.45);
     font-size: 14px;
   }
-  }
+}
 </style>

src/views/user/LoginAccount.vue

@@ -3,89 +3,78 @@
     <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-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
+          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>
 </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 {
+export default {
   name: 'LoginAccount',
-    data(){
+  data() {
     return {
       requestCodeSuccess: false,
       randCodeImage: '',
       currdatetime: '',
       loginType: 0,
-        model:{
+      model: {
         username: 'admin',
-          password: '123456',
-          inputCode: ''
+        password: '123456'
       },
-        validatorRules:{
-          username: [
-            { required: true, message: '请输入用户名!' },
-            { validator: this.handleUsernameOrEmail }
-          ],
-          password: [{
-            required: true, message: '请输入密码!', validator: 'click'
-          }],
-          inputCode: [{
-            required: true, message: '请输入验证码!'
-          }]
+      validatorRules: {
+        username: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }],
+        password: [
+          {
+            required: true,
+            message: '请输入密码!',
+            validator: 'click'
+          }
+        ]
       }
-
     }
   },
   created() {
-      this.handleChangeCheckCode();
+    this.handleChangeCheckCode()
   },
-    methods:{
+  methods: {
     ...mapActions(['Login']),
     /**刷新验证码*/
-      handleChangeCheckCode(){
-        this.currdatetime = new Date().getTime();
-        this.model.inputCode = ''
-        getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
-          if(res.success){
+    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.requestCodeSuccess = true
+          } else {
             this.$message.error(res.message)
-            this.requestCodeSuccess=false
+            this.requestCodeSuccess = false
           }
-        }).catch(()=>{
-          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})$/;
+    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 {
@@ -98,63 +87,61 @@
      * @param arr
      * @param callback
      */
-      validateFields(arr, callback){
+    validateFields(arr, callback) {
       let promiseArray = []
-        for(let item of arr){
+      for (let item of arr) {
         let p = new Promise((resolve, reject) => {
-            this.$refs['form'].validateField(item, (err)=>{
-              if(!err){
-                resolve();
-              }else{
-                reject(err);
+          this.$refs['form'].validateField(item, err => {
+            if (!err) {
+              resolve()
+            } else {
+              reject(err)
             }
           })
-          });
+        })
         promiseArray.push(p)
       }
-        Promise.all(promiseArray).then(()=>{
+      Promise.all(promiseArray)
+        .then(() => {
           callback()
-        }).catch(err=>{
+        })
+        .catch(err => {
           callback(err)
         })
     },
-      acceptUsername(username){
+    acceptUsername(username) {
       this.model['username'] = username
     },
     //账号密码登录
-      handleLogin(rememberMe){
-        this.validateFields([ 'username', 'password', 'inputCode' ], (err)=>{
-          if(!err){
+    handleLogin(rememberMe) {
+      this.validateFields(['username', 'password'], err => {
+        if (!err) {
           let loginParams = {
             username: this.model.username,
             password: this.model.password,
-              captcha: this.model.inputCode,
             checkKey: this.currdatetime,
-              remember_me: rememberMe,
+            remember_me: rememberMe
           }
-            console.log("登录参数", loginParams)
-            this.Login(loginParams).then((res) => {
+          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{
+            })
+        } else {
           this.$emit('validateFail')
         }
       })
     }
-
-
-    }
-
   }
+}
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>