Skip to content

Commit 4b38023

Browse files
harsimaharsima
committed
scss优化
1 parent a8d83b1 commit 4b38023

13 files changed

+129
-129
lines changed

‎src/assets/css/_function.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
// eg. pxTorem(20px) => 1rem
1212
@function pxTorem($px) {
1313
$px: dropUnit($px);
14-
$base: dropUnit($baseRem);
14+
$base: dropUnit($fontRem);
1515
@return #{$px / $base}rem;
1616
}

‎src/assets/css/_mixin.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@mixin remCalc($property, $values...) {
66
$max: length($values); //返回$values列表的长度值
77
$remValues: '';
8-
$base: dropUnit($baseRem);
8+
$base: dropUnit($fontRem);
99
@for $i from 1 through $max {
1010
$value: dropUnit(nth($values, $i));
1111
$remValues: #{$remValues + ($value / $base)}rem;

‎src/assets/css/common/article.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.sys-article{
2-
font-size: $basicFontSize;
3-
line-height: $basicFontSize*1.7;
2+
font-size: $fontSize;
3+
line-height: $fontSize*1.7;
44
margin-bottom: 2*$basicMargin;
5-
// padding: 0 16px;
65
h2{
7-
font-size: $basicFontSize*1.3;
6+
font-size: $fontSize*1.3;
87
padding: $basicPadding 0;
98
}
109
& > div{

‎src/assets/css/common/common.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
.sys-app{
1+
.sys-app,
2+
.sys-error-page,
3+
.sys-full-page{
24
position: relative;
35
width: 100%;
46
height: 100%;
@@ -11,18 +13,12 @@
1113
overflow-y: auto;
1214
box-sizing: border-box;
1315
}
14-
.sys-error-page,
15-
.sys-full-page{
16-
position: relative;
17-
width: 100%;
18-
height: 100%;
19-
}
2016
.sys-content{
2117
position: absolute;
2218
top: $headerHeight;
2319
right: 0;
2420
bottom: 0;
25-
padding-top: 57px;
21+
padding-top: 53px;
2622
&.left{
2723
left: $leftNavWidth;
2824
}

‎src/assets/css/common/header.scss

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
height: $headerHeight;
1010
line-height: $headerHeight;
1111
padding-left: 20px;
12-
color: $white;
12+
color: $headerColor;
1313
font-size: $headerFontSize;
1414
}
1515
.userInfo {
@@ -18,24 +18,20 @@
1818
&>ul {
1919
height: $headerHeight;
2020
&>li {
21-
display: block;
22-
float: left;
21+
display: inline-block;
2322
height: $headerHeight;
23+
line-height: $headerHeight;
2424
margin-right: 20px;
25-
color: $white;
25+
color: $headerColor;
2626
.lang {
27-
line-height: $headerHeight;
28-
color: $lightGray;
27+
color: darken($headerColor, 20%);
2928
cursor: pointer;
3029
&.cur {
31-
color: $white;
30+
color: $headerColor;
3231
}
3332
}
3433
.user {
35-
display: block;
36-
height: $headerHeight;
37-
line-height: $headerHeight;
38-
color: $white;
34+
color: $headerColor;
3935
cursor: pointer;
4036
}
4137
}

‎src/assets/css/common/sidenav.scss

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
/* 二三级菜单 */
22
.el-menu--horizontal{
3+
.el-menu{
4+
background-color: $topSubNavBg;
5+
.el-menu-item, .el-submenu__title{
6+
color: $topSubNavItemColor;
7+
background-color: $topSubNavBg;
8+
}
9+
}
310
.el-menu-item:not(.is-disabled):hover,
411
.el-submenu__title:hover{
512
color: $topSubNavItemColor;
6-
background-color: $topNavItemActiveBg;
13+
background-color: $topSubNavItemHover;
714
}
815
}
916
.side-nav {
1017
.el-menu{
1118
border-right: none;
12-
background-color: $sidenavBgColor;
1319
z-index: 10;
1420
}
1521
.full-screen-navBg{
@@ -29,12 +35,21 @@
2935
bottom: 0;
3036
left: 0;
3137
width: $leftNavWidth;
32-
background-color: $sidenavBgColor;
33-
border-right: $sidenavBorder;
38+
background-color: $leftNavBg;
39+
border-right: $leftNavBorder;
3440
overflow: auto;
35-
.el-menu-item.is-active{
36-
background-color: $--menu-item-hover-fill;
37-
color: $--menu-item-color;
41+
.el-menu{
42+
background-color: $leftNavBg;
43+
.el-submenu__title{
44+
color: $leftNavColor;
45+
}
46+
}
47+
.el-menu-item{
48+
color: $leftNavColor;
49+
.is-active{
50+
background-color: $--menu-item-hover-fill;
51+
color: $--menu-item-color;
52+
}
3853
}
3954
box-sizing: border-box;
4055
}

‎src/assets/css/reset.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ html {
3737
height: 100%;
3838
}
3939
body {
40-
font-size: $basicFontSize;
41-
font-family: $basicFontFamily;
42-
color: $basicFontColor;
40+
font-size: $fontSize;
41+
font-family: $fontFamily;
42+
color: $fontColor;
4343
height: 100%;
4444
}
4545
.fl {

‎src/assets/css/theme-dark.scss

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
/** 第三方主题 **/
2-
@import "~element-ui/lib/theme-chalk/index.css";
1+
/** 主题样式 **/
2+
@import './theme/dark';
3+
@import "../libs/element-variables-dark";
4+
$--font-path: '~element-ui/lib/theme-chalk/fonts';
5+
6+
/** 默认样式 **/
7+
@import './theme/default';
8+
@import "~element-ui/packages/theme-chalk/src/index";
39

410
/** 项目主题 **/
5-
@import './theme/dark';
611
@import 'base';

‎src/assets/css/theme-default.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
/** 主题样式 **/
12
@import './theme/default';
2-
3-
/** 第三方主题 **/
43
@import "../libs/element-variables-default";
5-
/* 改变 icon 字体路径变量，必需 */
64
$--font-path: '~element-ui/lib/theme-chalk/fonts';
5+
6+
/** 默认样式 **/
77
@import "~element-ui/packages/theme-chalk/src/index";
88

99
/** 项目主题 **/

‎src/assets/css/theme/dark.scss

Lines changed: 24 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,40 @@
1-
// 基础颜色
2-
//-------------------------------
3-
$white: #fff;
1+
$themeColor: #465873;
2+
$baseImageURL: '~sysStatic/images/dark/';
3+
4+
/* 基础颜色
5+
-------------------------- */
46
$lighterGray: #eee;
57
$lightGray: #ccc;
6-
$neutralGray: #aaa;
7-
$gray: #999;
8-
$darkGray: #666;
9-
$darkerGray: #333;
10-
$red: #d45b5b;
118

12-
// 主题颜色
13-
//-------------------------------
14-
$themeColor: #324053;
159
$themeColorLighter: lighten($themeColor, 5%);
16-
$themeGray: #f2f2f2;
17-
$fontColor: $darkerGray;
18-
$linkColor: #42b983;
19-
$borderColor: #d2d2d2;
20-
$pageColor: $white;
21-
$shadowColor: rgba(0,0,0,0);
22-
23-
// 字体及图片设置
24-
//-------------------------------
25-
// 设置1rem = 20px。需要与util/rem.js中的值相同
26-
$baseRem: 20px;
27-
// 非响应式基本字号大小
28-
$basicFontSize: 14px;
29-
// 响应式基本字号大小
30-
$baseResponseSize: 1.3rem;
31-
$basicFontFamily: "Helvetica", "Microsoft Yahei", san-serif;
32-
$basicFontColor: $fontColor;
33-
$basicMargin: 10px;
34-
$basicPadding: $basicMargin;
35-
// 图片主题路径
36-
$baseImageURL: '~sysStatic/images/green/';
10+
$themeColorDarken: darken($themeColor, 8%);
3711

38-
// 组件设置
39-
//-------------------------------
4012

41-
// login
42-
$loginBg: $themeColor;
13+
/* 组件设置
14+
-------------------------- */
15+
/* login */
16+
$loginBg: url($baseImageURL+"login.jpg") center center no-repeat;
4317
$loginBtn: #424f60;
4418
$loginTextColor: $lightGray;
45-
$loginErrTextColor: $red;
46-
$loginInputErrBg: inherit;
4719
$loginInputBorderColor: rgba(255,255,255,.1);
4820
$loginInputBg: $themeColor;
21+
$loginInputErrBg: inherit;
4922
$loginInputColor: $loginTextColor;
5023
$loginLangCurBg: #ff6363;
5124
$loginLangCurColor: $themeColor;
5225

53-
// header
54-
$headerHeight: 60px;
55-
$headerBgColor: darken($themeColor, 5%);
56-
$headerBorderColor: none;
57-
$headerShadow: $shadowColor;
58-
$headerColor: #c2c2c2;
59-
$headerFontSize: 20px;
26+
/* header */
27+
$headerBgColor: $themeColorDarken;
28+
29+
/* nav */
30+
$leftNavBg: $themeColor;
31+
$leftNavColor: $lighterGray;
32+
$leftNavBorder: none;
6033

61-
// sidenav
62-
$leftNavWidth: 160px;
63-
$sidenavBgColor: $themeColor;
64-
$sidenavCurrent: #20a0ff;
65-
$sidenavBorder: none;
34+
$topNavItemColor: $leftNavColor;
35+
$topNavItemHoverBg: darken($headerBgColor, 8%);
36+
$topNavItemActiveBg: #20a0ff;
6637

67-
// sysNotes
68-
$notesBgColor: $lighterGray;
69-
$notesBorderColor: $themeColor;
38+
$topSubNavBg: $headerBgColor;
39+
$topSubNavItemColor: $topNavItemColor;
40+
$topSubNavItemHover: $topNavItemHoverBg;

0 commit comments

Comments
 (0)