From 177133726fbe6d5a2bc99b9733ca0a8095342d0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Fri, 13 May 2022 23:30:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=98=E5=8C=96:=20?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/login/base.vue      | 232 ++++++++++++-----------
 web/src/views/system/login/css/style.css |   4 +-
 web/src/views/system/login/page.vue      |  92 ++++-----
 3 files changed, 166 insertions(+), 162 deletions(-)

diff --git a/web/src/views/system/login/base.vue b/web/src/views/system/login/base.vue
index 0328151..d49077d 100644
--- a/web/src/views/system/login/base.vue
+++ b/web/src/views/system/login/base.vue
@@ -3,33 +3,27 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions } from 'vuex'
 import localeMixin from '@/locales/mixin.js'
 import * as api from '@/views/system/login/api'
 
 export default {
   mixins: [localeMixin],
-  computed: {
-    ...mapState('d2admin', {
-      siteName: (state) => state.settings.siteName, // 网站名称
-      siteLogo: (state) =>
-        state.settings.siteLogo || require('./image/dvadmin.png'), // 网站logo地址
-      loginBackground: (state) =>
-        state.settings.loginBackground || require('./image/bg.jpg'), // 登录页背景图
-      copyright: (state) => state.settings.copyright, // 版权
-      keepRecord: (state) => state.settings.keepRecord, // 备案
-      helpUrl: (state) => state.settings.helpUrl, // 帮助
-      privacyUrl: (state) => state.settings.privacyUrl, // 隐私
-      clauseUrl: (state) => state.settings.clauseUrl, // 条款
-      captchaState: (state) => state.settings.captchaState// 验证码
-    })
-  },
   beforeCreate () {
     // 初始化配置
     this.$store.dispatch('d2admin/settings/init')
   },
   data () {
     return {
+      siteName: this.systemConfig('login.site_name'), // 网站名称
+      siteLogo: this.systemConfig('login.site_logo') || require('./image/dvadmin.png'), // 网站logo地址
+      loginBackground: this.systemConfig('login.login_background') || require('./image/bg.jpg'), // 登录页背景图
+      copyright: this.systemConfig('login.copyright'), // 版权
+      keepRecord: this.systemConfig('login.keep_record'), // 备案
+      helpUrl: this.systemConfig('login.help_url'), // 帮助
+      privacyUrl: this.systemConfig('login.privacy_url'), // 隐私
+      clauseUrl: this.systemConfig('login.clause_url'), // 条款
+      captchaState: this.systemConfig('login.captcha_state'), // 验证码
       processTitle: process.env.VUE_APP_TITLE || 'D2Admin',
       backgroundImage: 'url(' + this.loginBackground + ')',
       // 表单
@@ -73,13 +67,21 @@ export default {
       ]
     }
   },
-  mounted () {},
-  beforeDestroy () {},
+  mounted () {
+    document.onkeydown = () => {
+      var key = window.event.keyCode
+      if (key === 13) {
+        this.submit()
+      }
+    }
+  },
+  beforeDestroy () {
+  },
   methods: {
     ...mapActions('d2admin/account', ['login']),
     /**
-     * 获取验证码
-     */
+       * 获取验证码
+       */
     getCaptcha () {
       console.log(2, this.captchaState, this.captchaState !== undefined)
       if (this.captchaState !== undefined && !this.captchaState) return
@@ -90,8 +92,8 @@ export default {
       })
     },
     /**
-     * @description 提交表单
-     */
+       * @description 提交表单
+       */
     // 提交登录信息
     submit () {
       const that = this
@@ -138,107 +140,107 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// ----
-.page-login {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-image: url(./image/bg.jpg);
-  background-position: center 0;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: cover;
-  -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
-  -o-background-size: cover; /* 兼容Opera */
-  zoom: 1;
-}
+  // ----
+  .page-login {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: url(./image/bg.jpg);
+    background-position: center 0;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
+    -o-background-size: cover; /* 兼容Opera */
+    zoom: 1;
+  }
 
-::v-deep .el-card__body {
-  height: 100%;
-  padding: 0;
-}
+  ::v-deep .el-card__body {
+    height: 100%;
+    padding: 0;
+  }
 
-.card {
-  height: 100%;
-  width: 100%;
-  border-radius: 30px;
-  padding: 0;
-  margin-top: 12%;
-}
+  .card {
+    height: 100%;
+    width: 100%;
+    border-radius: 30px;
+    padding: 0;
+    margin-top: 12%;
+  }
 
-.right-card {
-  float: right;
-  text-align: center;
-  width: 50%;
-  height: 100%;
-}
-
-.right-card h1 {
-  color: #098dee;
-  margin-bottom: 40px;
-  margin-top: 40px;
-}
-
-.button-login {
-  width: 100%;
-  margin-top: 30px;
-}
-
-::v-deep .el-input-group__append {
-  padding: 0;
-}
-
-// footer
-.page-login--content-footer {
-  margin-top: 10%;
-  padding: 1em 0;
-
-  .page-login--content-footer-locales {
-    padding: 0px;
-    margin: 0px;
-    margin-bottom: 15px;
-    font-size: 12px;
-    line-height: 12px;
+  .right-card {
+    float: right;
     text-align: center;
-    color: $color-text-normal;
+    width: 50%;
+    height: 100%;
+  }
 
-    a {
+  .right-card h1 {
+    color: #098dee;
+    margin-bottom: 40px;
+    margin-top: 40px;
+  }
+
+  .button-login {
+    width: 100%;
+    margin-top: 30px;
+  }
+
+  ::v-deep .el-input-group__append {
+    padding: 0;
+  }
+
+  // footer
+  .page-login--content-footer {
+    margin-top: 10%;
+    padding: 1em 0;
+
+    .page-login--content-footer-locales {
+      padding: 0px;
+      margin: 0px;
+      margin-bottom: 15px;
+      font-size: 12px;
+      line-height: 12px;
+      text-align: center;
       color: $color-text-normal;
-      margin: 0 0.5em;
 
-      &:hover {
-        color: $color-text-main;
+      a {
+        color: $color-text-normal;
+        margin: 0 0.5em;
+
+        &:hover {
+          color: $color-text-main;
+        }
+      }
+    }
+
+    .page-login--content-footer-copyright {
+      padding: 0px;
+      margin: 0px;
+      margin-bottom: 10px;
+      font-size: 12px;
+      line-height: 12px;
+      text-align: center;
+      color: $color-text-normal;
+
+      a {
+        color: $color-text-normal;
+      }
+    }
+
+    .page-login--content-footer-options {
+      padding: 0px;
+      margin: 0px;
+      font-size: 12px;
+      line-height: 12px;
+      text-align: center;
+
+      a {
+        color: $color-text-normal;
+        margin: 0 1em;
       }
     }
   }
-
-  .page-login--content-footer-copyright {
-    padding: 0px;
-    margin: 0px;
-    margin-bottom: 10px;
-    font-size: 12px;
-    line-height: 12px;
-    text-align: center;
-    color: $color-text-normal;
-
-    a {
-      color: $color-text-normal;
-    }
-  }
-
-  .page-login--content-footer-options {
-    padding: 0px;
-    margin: 0px;
-    font-size: 12px;
-    line-height: 12px;
-    text-align: center;
-
-    a {
-      color: $color-text-normal;
-      margin: 0 1em;
-    }
-  }
-}
 </style>
diff --git a/web/src/views/system/login/css/style.css b/web/src/views/system/login/css/style.css
index a8618c1..05aac86 100644
--- a/web/src/views/system/login/css/style.css
+++ b/web/src/views/system/login/css/style.css
@@ -114,7 +114,7 @@ img {
 .page-login--logo{
     margin: 0 auto;
     top: 10px;
-    left: 52em;
+    left: 52%;
     position: absolute;
 }
 /*-- //Reset-Code --*/
@@ -231,7 +231,7 @@ img {
     color: #444;
     text-transform: capitalize;
 }
-h1 {
+.w3_info h1 {
     font-size: 36px;
     font-weight: 600;
     color: #fff;
diff --git a/web/src/views/system/login/page.vue b/web/src/views/system/login/page.vue
index b304df8..7490ade 100644
--- a/web/src/views/system/login/page.vue
+++ b/web/src/views/system/login/page.vue
@@ -1,28 +1,21 @@
 <template>
   <div
     class="w3l-signinform"
-    :style="{
-      background:
-        'url(' +
-        (loginBackground || require('./image/bg.jpg')) +
-        ') no-repeat center'
-    }"
+    :style="{background:'url(' +(loginBackground || require('./image/bg.jpg')) +') no-repeat center', backgroundSize: '100% 100%' }"
   >
     <!-- container -->
     <div class="wrapper">
       <!-- main content -->
       <div class="w3l-form-info">
         <!-- logo -->
-        <img class="page-login--logo" :src="siteLogo" width="300" />
+        <img class="page-login--logo" :src="siteLogo" width="300"/>
         <div class="w3_info">
           <h2 style="text-align: center">{{ siteName || processTitle }}</h2>
           <el-card shadow="always" class="card">
             <el-tabs v-model="activeName">
               <el-tab-pane label="账号密码登录" name="first" stretch>
-                <span slot="label"
-                  ><span style="margin: 30px">账号密码登录</span></span
-                >
-                <br />
+                <span slot="label"><span style="margin: 30px">账号密码登录</span></span>
+                <br/>
                 <el-form
                   ref="loginForm"
                   label-position="top"
@@ -104,7 +97,7 @@
             <p>
               <a href="https://beian.miit.gov.cn" target="_blank">{{
                 keepRecord
-              }}</a>
+                }}</a>
               | <a :href="helpUrl || '#'" target="_blank">帮助</a> |
               <a :href="privacyUrl || '#'" target="_blank">隐私</a> |
               <a :href="clauseUrl || '#'" target="_blank">条款</a>
@@ -120,7 +113,7 @@
       <el-row :gutter="10" style="margin: -20px 0px -10px 0px">
         <el-col v-for="(user, index) in users" :key="index" :span="8">
           <div class="page-login--quick-user" @click="handleUserBtnClick(user)">
-            <d2-icon name="user-circle-o" />
+            <d2-icon name="user-circle-o"/>
             <span>{{ user.name }}</span>
           </div>
         </el-col>
@@ -139,47 +132,56 @@ export default {
       activeName: 'first'
     }
   },
-  created () {},
-  mounted () {},
+  created () {
+  },
+  mounted () {
+  },
   methods: {}
 }
 </script>
 
 <style lang="scss" scoped>
-@import './css/style.css';
+  @import './css/style.css';
+
+  .copyrights {
+    text-indent: -9999px;
+    height: 0;
+    line-height: 0;
+    font-size: 0;
+    overflow: hidden;
+  }
+
+  // 快速选择用户面板
+  .page-login--quick {
+    margin-top: 20px;
+  }
+
+  .page-login--quick-user {
+    @extend %flex-center-col;
+    padding: 10px 0px;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: $color-bg;
+
+      i {
+        color: $color-text-normal;
+      }
+
+      span {
+        color: $color-text-normal;
+      }
+    }
 
-.copyrights {
-  text-indent: -9999px;
-  height: 0;
-  line-height: 0;
-  font-size: 0;
-  overflow: hidden;
-}
-// 快速选择用户面板
-.page-login--quick{
-  margin-top: 20px;
-}
-.page-login--quick-user {
-  @extend %flex-center-col;
-  padding: 10px 0px;
-  border-radius: 4px;
-  &:hover {
-    background-color: $color-bg;
     i {
-      color: $color-text-normal;
+      font-size: 36px;
+      color: $color-text-sub;
     }
+
     span {
-      color: $color-text-normal;
+      font-size: 12px;
+      margin-top: 10px;
+      color: $color-text-sub;
     }
   }
-  i {
-    font-size: 36px;
-    color: $color-text-sub;
-  }
-  span {
-    font-size: 12px;
-    margin-top: 10px;
-    color: $color-text-sub;
-  }
-}
 </style>