优化用户的登录界面

jshERP-web/src/components/layouts/UserLayout.vue

@@ -1,19 +1,33 @@
 <template>
-  <div id="userLayout" :class="['user-layout-wrapper', device]">
+  <div class="back-layout">
-    <div class="container">
+    <div id="userLayout" :class="['user-layout-wrapper', device]">
-      <div class="top">
+      <div class="container">
-        <div class="header">
+        <div class="poster-img">
-          <a-row>
+          <img src="/static/rightImg.png?v=320">
-            <a-col>
+        </div>
-              <a href="/">
+        <div class="right-form">
-                <span class="title">{{systemTitle}}</span>
+          <div class="top">
-                <small class="desc">V3.2</small>
+            <div class="header">
-              </a>
+              <a-row>
-            </a-col>
+                <a-col>
-          </a-row>
+                  <a href="/">
+                    <span class="title">{{systemTitle}}</span>
+                    <small class="desc">V3.2</small>
+                  </a>
+                </a-col>
+              </a-row>
+            </div>
+          </div>
+          <route-view></route-view>
         </div>
       </div>
-      <route-view></route-view>
+    </div>
+    <div class="footer" v-if="device === 'desktop'">
+      <p>
+        © 2015-2030 {{systemTitle}} - All Right Reserved
+        <a style="color:#00458a;" :href="systemUrl" target="_blank">官方网站</a>
+        版权所有
+      </p>
     </div>
   </div>
 </template>
@@ -28,7 +42,8 @@
     mixins: [mixinDevice],
     data () {
       return {
-        systemTitle: window.SYS_TITLE
+        systemTitle: window.SYS_TITLE,
+        systemUrl: window.SYS_URL,
       }
     },
     mounted () {
@@ -40,8 +55,29 @@
   }
 </script>
 
+<style scoped>
+  .back-layout {
+    width: 100%;
+    height: 100%;
+    background-image: url(/static/bgimg.png?v=1);
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    overflow: hidden;
+  }
+  #userLayout.user-layout-wrapper.mobile {
+    position: fixed;
+    left: 6%;
+    top: 10%;
+    margin-left: 0px;
+  }
+</style>
 <style lang="less" scoped>
   #userLayout.user-layout-wrapper {
+    position: fixed;
+    left: 50%;
+    top: 16%;
+    margin-left: -543px;
     height: 100%;
 
     &.mobile {
@@ -51,74 +87,98 @@
           width: 98%;
         }
       }
+      .poster-img {
+        display: none;
+      }
     }
 
     .container {
+      float: left;
       width: 100%;
-      min-height: 100%;
+      z-index: 99;
-      background-size: 100%;
+      height: 70%;
-      padding: 110px 0 144px;
-      position: relative;
 
-      a {
+      .poster-img {
-        text-decoration: none;
+        float: left;
+        height: 100%;
       }
 
-      .top {
+      .right-form {
-        text-align: center;
+        background-size: 100%;
+        position: relative;
+        width: 340px;
+        height: 520px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 8px;
+        right: 0;
+        top: 0;
+        padding: 30px 30px 0 30px;
+        margin-top: 30px;
+        -webkit-box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
+        box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
+        overflow: hidden;
 
-        .header {
+        a {
-          height: 44px;
+          text-decoration: none;
-          line-height: 44px;
-          margin-bottom: 45px;
-          .title {
-            font-size: 35px;
-            color: #666;
-            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: 700;
-            position: relative;
-            top: 2px;
-          }
-          .desc {
-            font-size: 16px;
-            color: #666;
-            margin-top: 12px;
-            margin-left: 10px;
-            margin-bottom: 40px;
-          }
         }
-      }
 
-      .main {
+        .top {
-        min-width: 260px;
+          text-align: center;
-        width: 368px;
-        margin: 0 auto;
-      }
 
-      .footer {
+          .header {
-        position: absolute;
+            height: 44px;
-        width: 100%;
+            line-height: 44px;
-        bottom: 0;
+            margin-top: 45px;
-        padding: 0 16px;
+            margin-bottom: 45px;
-        margin: 48px 0 24px;
+            .title {
-        text-align: center;
+              font-size: 35px;
-
+              color: #666;
-        .links {
+              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";
-          margin-bottom: 8px;
+              font-weight: 700;
-          font-size: 14px;
+              position: relative;
-          a {
+              top: 2px;
-            color: rgba(0, 0, 0, 0.45);
+            }
-            transition: all 0.3s;
+            .desc {
-            &:not(:last-child) {
+              font-size: 16px;
-              margin-right: 40px;
+              color: #666;
+              margin-top: 12px;
+              margin-left: 10px;
+              margin-bottom: 40px;
             }
           }
         }
-        .copyright {
+
-          color: rgba(0, 0, 0, 0.45);
+        .main {
-          font-size: 14px;
+          min-width: 260px;
+          width: 280px;
+          margin: 0 auto;
         }
       }
     }
   }
+  .footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 0 16px;
+    margin: 48px 0 12px;
+    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>

jshERP-web/src/views/user/Login.vue

@@ -41,14 +41,14 @@
           :loading="loginBtn"
           @mouseover="initWeixin"
           @click.stop.prevent="handleSubmit"
-          :disabled="loginBtn">确定
+          :disabled="loginBtn">登 录
         </a-button>
       </a-form-item>
 
-      <div class="login-copyright">
+      <div class="login-copyright" v-if="device === 'mobile'">
         <a-row>
           <a-col>
-            © 2015-2030 {{systemTitle}} - Powered By
+            © 2015-2030 Powered By
             <a style="color:#00458a;" :href="systemUrl" target="_blank">官方网站</a>
           </a-col>
         </a-row>
@@ -63,23 +63,21 @@
 </template>
 <!-- BY cao_yu_li -->
 <script>
-  import md5 from "md5"
+  import md5 from 'md5'
-  import api from '@/api'
   import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
-  import { mapActions } from "vuex"
+  import { mapActions } from 'vuex'
-  import { timeFix } from "@/utils/util"
+  import { timeFix } from '@/utils/util'
   import Vue from 'vue'
-  import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
+  import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
-  import { putAction,postAction,getAction } from '@/api/manage'
+  import { getAction } from '@/api/manage'
-  import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'
+  import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
-  import store from '@/store/'
+  import { mixinDevice } from '@/utils/mixin.js'
-  import { USER_INFO } from "@/store/mutation-types"
-  import pick from 'lodash.pick'
 
   export default {
     components: {
       TwoStepCaptcha
     },
+    mixins: [mixinDevice],
     data () {
       return {
         customActiveKey: "tab1",

jshERP-web/src/views/user/Register.vue

@@ -35,7 +35,7 @@
       </a-form-item>
 
       <a-row :gutter="0">
-        <a-col :span="16">
+        <a-col :span="14">
           <a-form-item fieldDecoratorId="inputCode">
             <!--20200510 cfm: 为方便测试，不输入验证码可： default-value="xxxx"-->
             <a-input
@@ -48,7 +48,7 @@
             </a-input>
           </a-form-item>
         </a-col>
-        <a-col :span="8" style="text-align: right">
+        <a-col :span="10" 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>
@@ -68,10 +68,10 @@
         <router-link class="login" :to="{ name: 'login' }">使用已有租户登录</router-link>
       </a-form-item>
 
-      <div class="login-copyright">
+      <div class="login-copyright" v-if="device === 'mobile'">
         <a-row>
           <a-col>
-            © 2015-2030 {{systemTitle}} - Powered By
+            © 2015-2030 Powered By
             <a style="color:#00458a;" :href="systemUrl" target="_blank">官方网站</a>
           </a-col>
         </a-row>