From 34eb44edf60692782c286783c51558cc3cab5f61 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Thu, 7 Jan 2021 10:05:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BB=E9=A2=98=E9=85=8D?=
 =?UTF-8?q?=E8=89=B2=EF=BC=8C=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/resources/variables.scss | 12 ++++++------
 src/layout/index.vue                       |  1 +
 src/views/login.vue                        | 21 ++++++++++-----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/assets/styles/resources/variables.scss b/src/assets/styles/resources/variables.scss
index b8d27484..fc12dbcb 100644
--- a/src/assets/styles/resources/variables.scss
+++ b/src/assets/styles/resources/variables.scss
@@ -19,27 +19,27 @@ $g-app-bg: #fff;
 $g-main-bg: #f5f7f9;
 
 // 头部背景色
-$g-header-bg: #736477;
+$g-header-bg: #222b45;
 // 头部导航文字颜色
 $g-header-menu-color: #fff;
 // 头部导航选中颜色
 $g-header-menu-active-bg: lighten($g-header-bg, 10);
 
 // 主侧边栏背景色
-$g-main-sidebar-bg: #736477;
+$g-main-sidebar-bg: #222b45;
 // 主侧边栏文字颜色
 $g-main-sidebar-menu-color: #fff;
 // 主侧边栏菜单选中背景色
 $g-main-sidebar-menu-active-bg: lighten($g-main-sidebar-bg, 10);
 
 // 次侧边栏背景色
-$g-sub-sidebar-bg: #ddcdcd;
+$g-sub-sidebar-bg: #fafafa;
 // 次侧边栏菜单文字颜色
-$g-sub-sidebar-menu-color: #89768f;
+$g-sub-sidebar-menu-color: #37414b;
 // 次侧边栏菜单文字选中颜色
-$g-sub-sidebar-menu-active-color: darken($g-sub-sidebar-menu-color, 30);
+$g-sub-sidebar-menu-active-color: #e7f4ff;
 // 次侧边栏菜单选中背景色
-$g-sub-sidebar-menu-active-bg: #b5a5a5;
+$g-sub-sidebar-menu-active-bg: #5482ee;
 
 // 输出给js使用
 :export {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c6114b42..5e17cf76 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -384,6 +384,7 @@ header {
         left: 0;
         top: 0;
         bottom: 0;
+        box-shadow: 10px 0 10px -10px darken($g-sub-sidebar-bg, 20);
         &.is-collapse {
             width: 64px;
             .sidebar-logo {
diff --git a/src/views/login.vue b/src/views/login.vue
index 5c1e4545..841ebdd9 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -3,7 +3,7 @@
         <div class="bg-banner" />
         <div id="login-box">
             <div class="login-banner" />
-            <el-form ref="form" :model="form" :rules="rules" class="flex-container login-form" auto-complete="on" label-position="left">
+            <el-form ref="form" :model="form" :rules="rules" class="login-form" auto-complete="on" label-position="left">
                 <div class="title-container">
                     <h3 class="title">{{ title }}管理后台</h3>
                 </div>
@@ -21,9 +21,11 @@
                     </el-form-item>
                 </div>
                 <el-checkbox v-model="form.remember">记住我</el-checkbox>
-                <el-button :loading="loading" type="primary" style="width: 100%;" @click.native.prevent="handleLogin">登录</el-button>
-                <div style="margin-top: 20px; color: #999; font-size: 14px; text-align: center;">
-                    演示帐号一键登录：<span style="padding: 0 5px; cursor: pointer; color: #666;" @click="testAccount('admin')">admin</span>或<span style="padding: 0 5px; cursor: pointer; color: #666;" @click="testAccount('test')">test</span>
+                <el-button :loading="loading" type="primary" style="width: 100%;" @click.native.prevent="handleLogin">登 录</el-button>
+                <div style="margin-top: 20px; margin-bottom: -10px; color: #666; font-size: 14px; text-align: center; font-weight: bold;">
+                    <span style="margin-right: 5px;">演示帐号一键登录：</span>
+                    <el-button type="danger" size="mini" @click="testAccount('admin')">admin</el-button>
+                    <el-button type="danger" size="mini" plain @click="testAccount('test')">test</el-button>
                 </div>
             </el-form>
         </div>
@@ -111,8 +113,9 @@ export default {
     z-index: 0;
     width: 100%;
     height: 100%;
-    background-size: cover;
     background-image: url(../assets/images/login-bg.jpg);
+    background-size: cover;
+    background-position: center center;
 }
 #login-box {
     display: flex;
@@ -122,22 +125,18 @@ export default {
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     background: rgba(255, 255, 255, 0.8);
-    height: 400px;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 0 5px #999;
     .login-banner {
         width: 300px;
-        height: 400px;
         background-image: url(../assets/images/login-banner.jpg);
         background-size: cover;
-    }
-    .flex-container {
-        width: 400px;
+        background-position: center center;
     }
     .login-form {
         width: 450px;
-        padding: 50px 35px 0;
+        padding: 50px 35px 30px;
         overflow: hidden;
         .svg-icon {
             vertical-align: -0.35em;