功能变化: 登录页样式优化

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,8 +67,16 @@ export default {
       ]
     }
   },
-  mounted () {},
+  mounted () {
-  beforeDestroy () {},
+    document.onkeydown = () => {
+      var key = window.event.keyCode
+      if (key === 13) {
+        this.submit()
+      }
+    }
+  },
+  beforeDestroy () {
+  },
   methods: {
     ...mapActions('d2admin/account', ['login']),
     /**
@@ -138,8 +140,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// ----
+  // ----
-.page-login {
+  .page-login {
     position: absolute;
     top: 0;
     left: 0;
@@ -153,45 +155,45 @@ export default {
     -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
     -o-background-size: cover; /* 兼容Opera */
     zoom: 1;
-}
+  }
 
-::v-deep .el-card__body {
+  ::v-deep .el-card__body {
     height: 100%;
     padding: 0;
-}
+  }
 
-.card {
+  .card {
     height: 100%;
     width: 100%;
     border-radius: 30px;
     padding: 0;
     margin-top: 12%;
-}
+  }
 
-.right-card {
+  .right-card {
     float: right;
     text-align: center;
     width: 50%;
     height: 100%;
-}
+  }
 
-.right-card h1 {
+  .right-card h1 {
     color: #098dee;
     margin-bottom: 40px;
     margin-top: 40px;
-}
+  }
 
-.button-login {
+  .button-login {
     width: 100%;
     margin-top: 30px;
-}
+  }
 
-::v-deep .el-input-group__append {
+  ::v-deep .el-input-group__append {
     padding: 0;
-}
+  }
 
-// footer
+  // footer
-.page-login--content-footer {
+  .page-login--content-footer {
     margin-top: 10%;
     padding: 1em 0;
 
@@ -240,5 +242,5 @@ export default {
         margin: 0 1em;
       }
     }
-}
+  }
 </style>

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;

web/src/views/system/login/page.vue

@@ -1,28 +1,21 @@
 <template>
   <div
     class="w3l-signinform"
-    :style="{
+    :style="{background:'url(' +(loginBackground || require('./image/bg.jpg')) +') no-repeat center', backgroundSize: '100% 100%' }"
-      background:
-        'url(' +
-        (loginBackground || require('./image/bg.jpg')) +
-        ') no-repeat center'
-    }"
   >
     <!-- 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 slot="label"><span style="margin: 30px">账号密码登录</span></span>
-                  ><span style="margin: 30px">账号密码登录</span></span
+                <br/>
-                >
-                <br />
                 <el-form
                   ref="loginForm"
                   label-position="top"
@@ -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 () {},
+  created () {
-  mounted () {},
+  },
+  mounted () {
+  },
   methods: {}
 }
 </script>
 
 <style lang="scss" scoped>
-@import './css/style.css';
+  @import './css/style.css';
 
-.copyrights {
+  .copyrights {
     text-indent: -9999px;
     height: 0;
     line-height: 0;
     font-size: 0;
     overflow: hidden;
-}
+  }
-// 快速选择用户面板
+
-.page-login--quick{
+  // 快速选择用户面板
+  .page-login--quick {
     margin-top: 20px;
-}
+  }
-.page-login--quick-user {
+
+  .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;
       }
     }
+
     i {
       font-size: 36px;
       color: $color-text-sub;
     }
+
     span {
       font-size: 12px;
       margin-top: 10px;
       color: $color-text-sub;
     }
-}
+  }
 </style>