github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 11:34:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整主题配色，优化登录界面

Browse Source
This commit is contained in:
hooray
2021-01-07 10:05:03 +08:00
parent 150267062e
commit 34eb44edf6
3 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/resources/variables.scss
+6 -6
View File
@@ -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 {
src/layout/index.vue
+1
View File
@@ -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 {
src/views/login.vue
+10 -11
View File
@@ -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;