[fix 84086] 登录页

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <a-config-provider :locale="locale">
+<!--  autoInsertSpaceInButton 按钮两个字中间会有空格-->
+  <a-config-provider :locale="locale" :autoInsertSpaceInButton="false">
     <!-- 全局空状态 -->
     <template slot="renderEmpty">
       <common-empty/>

src/main.js

@@ -25,7 +25,7 @@ import 'viewerjs/dist/viewer.css'
 import SSO from '@/cas/sso.js'
 import {
   ACCESS_TOKEN,
-  DEFAULT_COLOR,
+  // DEFAULT_COLOR,
   DEFAULT_THEME,
   DEFAULT_LAYOUT_MODE,
   DEFAULT_COLOR_WEAK,
@@ -99,7 +99,7 @@ function main () {
       store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
       store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
       store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
-      store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
+      // store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor)) // 不读缓存主题色，防止缓存覆盖样式
       store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
       store.commit('SET_MULTI_PAGE', Vue.ls.get(DEFAULT_MULTI_PAGE, config.multipage))
     },

src/views/user/Login.vue

@@ -1,34 +1,32 @@
 <template>
   <div class="main" :class="{ 'main-mobile': mobile }">
+    <div class="system-title" v-if="!mobile">
+      <img :src="require('@assets/images/system-title-white.png')" alt="昆鸿设备管理系统">
+    </div>
     <a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
       <div class="user-box">
-        <div class="login-header">用户登录</div>
+        <div class="login-header">账号登录</div>
         <div class="login-body">
+          <div style="margin-bottom: 12px;">
+            <label class="lable-font">账号</label>
+          </div>
           <a-row>
-            <a-col :span="3"></a-col>
+            <a-col :span="24">
-            <label class="lable-font">用户名</label>
-          </a-row>
-          <a-row>
-            <a-col :span="3"></a-col>
-            <a-col :span="18">
               <a-form-item>
                 <a-input
                   size="large"
                   v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
                   type="text"
-                  placeholder="请输入用户名">
+                  placeholder="请输入账号">
                 </a-input>
               </a-form-item>
             </a-col>
-            <a-col :span="3"></a-col>
           </a-row>
-          <a-row>
+          <div style="margin-bottom: 12px;">
-            <a-col :span="3"></a-col>
             <label class="lable-font">密码</label>
-          </a-row>
+          </div>
           <a-row>
-            <a-col :span="3"></a-col>
+            <a-col :span="24">
-            <a-col :span="18">
               <a-form-item>
                 <a-input
                   v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
@@ -42,25 +40,20 @@
                 </a-input>
               </a-form-item>
             </a-col>
-            <a-col :span="3"></a-col>
           </a-row>
           <a-row class="login-btn">
-            <a-col :span="3"></a-col>
+            <a-col :span="24">
-            <a-col :span="18">
+              <a-button
-              <a-form-item>
+                block
-                <a-button
+                size="large"
-                  block
+                type="primary"
-                  size="large"
+                htmlType="submit"
-                  type="primary"
+                :loading="loginBtn"
-                  htmlType="submit"
+                @click.stop.prevent="handleSubmit"
-                  :loading="loginBtn"
+                :disabled="loginBtn">
-                  @click.stop.prevent="handleSubmit"
+                {{ loginBtn ? "登录中" : "登录" }}
-                  :disabled="loginBtn">
+              </a-button>
-                  {{ loginBtn ? "登录中" : "登录" }}
-                </a-button>
-              </a-form-item>
             </a-col>
-            <a-col :span="3"></a-col>
           </a-row>
         </div>
       </div>
@@ -76,8 +69,8 @@
               size="large"
               v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
               type="text"
-              placeholder="请输入用户名">
+              placeholder="请输入账号">
-              <img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/account.png')" alt="用户名"/>
+              <img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/account.png')" alt="账号"/>
             </a-input>
           </a-form-item>
         </a-col>
@@ -141,7 +134,7 @@ export default {
         smsSendBtn: false
       },
       validatorRules: {
-        username: { rules: [{ required: true, message: '请输入用户名' }, { validator: this.handleUsernameOrEmail }] },
+        username: { rules: [{ required: true, message: '请输入账号' }, { validator: this.handleUsernameOrEmail }] },
         password: { rules: [{ required: true, message: '请输入密码', validator: 'click' }] },
         mobile: { rules: [{ validator: this.validateMobile }] },
         captcha: { rule: [{ required: true, message: '请输入验证码!' }] },
@@ -341,153 +334,111 @@ export default {
   .ant-input-affix-wrapper/deep/ .ant-input:not(:first-child){
     padding-left: 40px;
   }
-  .ant-row{
-    margin-bottom: 4%;
-  }
   // pc端背景
   .main:not(.main-mobile) {
-    background: #001125 url("~@/assets/login-bg.png") no-repeat;
+    background: #001125 url("~@assets/login-bg.png") no-repeat;
-    background-position: 8vw 8vh;
+    background-position: center center;
+    background-size: contain;
   }
   .main{
     height: 100%;
     background-color: #001125;
     overflow: hidden;
 
-    .user-layout-login {
+    // pc端系统标题
+    .system-title {
       position: absolute;
-      right: 8vw;
+      left: 50%;
-      top: 20vh;
+      transform: translateX(-50%);
-      width: 600px;
+      top: 15vh;
+      width: 320px;
+      img {
+        width: 100%;
+      }
+    }
+    // 登录部分
+    .user-layout-login {
+      width: 560px;
+      background: rgba(43,59,81,0.9);
       border: 1px solid #647C97;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 25vh;
+      padding: 80px;
 
+      // 账号登录
       .login-header {
-        border-bottom: 1px solid #647C97;
+        height: 42px;
-        line-height: 80px;
+        font-family: PingFang SC, PingFang SC, sans-serif;
-        font-size: 28px;
+        font-size: 30px;
+        color: rgba(255,255,255,0.96);
+        line-height: 35px;
+        margin-bottom: 48px;
         text-align: center;
-        min-height: 80px;
-        height: 80px;
-        padding: 0 16px;
       }
 
+      // 表单
       .login-body {
-        padding: 20px 0;
+        padding: 0;
 
-        .ant-form label {
+        // 输入框
+        .ant-input {
+          height: 48px;
+          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
+          font-weight: 400;
+          font-size: 14px;
+          color: @text-color;
+        }
+
+        // label
+        .lable-font {
+          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi, sans-serif;
+          font-weight: 400;
           font-size: 16px;
-        }
+          color: #A5B8CE;
-      }
+          line-height: 16px;
-    }
-    @media screen and (min-width: 1370px) {
-      .user-layout-login {
-        .user-box{
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-          display: flex;
-          overflow-y: auto;
-          //justify-content: space-between;
-          flex-direction: column;
-          .lable-font{
-            font-weight: 500;
-            //color:#000;
-          }
-          .title{
-            position:relative;
-            display: block;
-            //color: #000;
-            font-size: 28px;
-            font-weight: 500;
-            margin: 0 0 3% 0;
-            text-align: center;
-            //&::after{
-            //  content:'';
-            //  position:absolute;
-            //  bottom: -2px;
-            //  left:calc( 50% - 25px);
-            //  width: 50px;
-            //  height: 3px;
-            //  background-color: #0F6FC4;
-            //}
-          }
-          .login-btn{
-            margin-top: 20px;
-            font-size: 10px;
-          }
-          .ant-row{
-            margin-bottom: 10px;
-          }
-        }
-      }
-
-    }
-    @media screen and (max-width: 1366px) {
-      .user-layout-login {
-        width: 500px;
-
-        .login-header {
-          line-height: 60px;
-          font-size: 18px;
-          text-align: center;
-          min-height: 60px;
-          height: 60px;
-          padding: 0 16px;
         }
 
-        .login-body {
+        // 登录按钮
+        .login-btn {
+          margin-top: 24px;
+          .ant-btn {
+            font-family: PingFang SC, PingFang SC, sans-serif;
+            font-weight: bold;
+            font-size: 18px;
+            color: @text-black;
+            line-height: 18px;
+            height: 58px;
 
-          .ant-form label {
+            &[disabled] {
-            font-size: 13px;
+              color: @text-color;
-          }
-        }
-        .user-box{
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-          display: flex;
-          //justify-content: space-between;
-          flex-direction: column;
-          .lable-font{
-            font-weight: 700;
-            //color:#000;
-          }
-          .title{
-            position:relative;
-            display: block;
-            //color: #000;
-            font-size: 20px;
-            font-weight: 500;
-            margin: 0 0 5% 0;
-            text-align: center;
-            &::after{
-              content:'';
-              position:absolute;
-              bottom: -2px;
-              left:calc( 50% - 15px);
-              width: 35px;
-              height: 3px;
-              background-color: #0F6FC4;
             }
           }
-          .login-btn{
-            margin-top: 2px;
-            font-size: 10px;
-          }
-          .ant-row{
-            margin-bottom: 10px;
-          }
         }
       }
-      .input_height {
-        /deep/ .ant-input{
-
-          height: 30px !important;
-        }
-
-      }
     }
 
+    @media screen and (max-width: 1366px) {
+      .user-layout-login {
+        top: 20vh;
+        transform: translateX(-50%) scale(0.8);
+        padding: 60px;
+      }
+      // pc端系统标题
+      .system-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%) scale(0.8);
+        top: 12vh;
+        width: 320px;
+        img {
+          width: 100%;
+        }
+      }
+    }
+
+    // 移动端
     .user-layout-login-mobile {
       position: relative;
       height: 100vh;
@@ -499,7 +450,7 @@ export default {
         display: block;
         width: 100%;
         height: 2.4rem;
-        background: url("~@/assets/login-bg.png") no-repeat;
+        background: url("~@assets/mobile-login-bg.png") no-repeat;
         background-size: 3.75rem;
       }