[fix 84086] 登录页

2024-04-26 13:50:22 +08:00
parent c2697742f0
commit 127706fa11
23 changed files with 109 additions and 157 deletions
@@ -1,5 +1,6 @@
 <template>
-  <a-config-provider :locale="locale">
+<!--  autoInsertSpaceInButton 按钮两个字中间会有空格-->
+  <a-config-provider :locale="locale" :autoInsertSpaceInButton="false">
    <!-- 全局空状态 -->
    <template slot="renderEmpty">
      <common-empty/>
@@ -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))
    },
@@ -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>
-            <label class="lable-font">用户名</label>
-          </a-row>
-          <a-row>
-            <a-col :span="3"></a-col>
-            <a-col :span="18">
+            <a-col :span="24">
              <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>
-            <a-col :span="3"></a-col>
+          <div style="margin-bottom: 12px;">
            <label class="lable-font">密码</label>
-          </a-row>
+          </div>
          <a-row>
-            <a-col :span="3"></a-col>
-            <a-col :span="18">
+            <a-col :span="24">
              <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="18">
-              <a-form-item>
-                <a-button
-                  block
-                  size="large"
-                  type="primary"
-                  htmlType="submit"
-                  :loading="loginBtn"
-                  @click.stop.prevent="handleSubmit"
-                  :disabled="loginBtn">
-                  {{ loginBtn ? "登录中" : "登录" }}
-                </a-button>
-              </a-form-item>
+            <a-col :span="24">
+              <a-button
+                block
+                size="large"
+                type="primary"
+                htmlType="submit"
+                :loading="loginBtn"
+                @click.stop.prevent="handleSubmit"
+                :disabled="loginBtn">
+                {{ loginBtn ? "登录中" : "登录" }}
+              </a-button>
            </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="请输入用户名">
-              <img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/account.png')" alt="用户名"/>
+              placeholder="请输入账号">
+              <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-position: 8vw 8vh;
+    background: #001125 url("~@assets/login-bg.png") no-repeat;
+    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;
-      top: 20vh;
-      width: 600px;
+      left: 50%;
+      transform: translateX(-50%);
+      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;
-        line-height: 80px;
-        font-size: 28px;
+        height: 42px;
+        font-family: PingFang SC, PingFang SC, sans-serif;
+        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;
-        }
-      }
-    }
-    @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;
+          color: #A5B8CE;
+          line-height: 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 {
-            font-size: 13px;
-          }
-        }
-        .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;
+            &[disabled] {
+              color: @text-color;
            }
          }
-          .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;
      }