Skip to content

Commit 8f21f7e

Browse files
PanJiaChenPanJiaChen
committed
tweak
1 parent 5c647a5 commit 8f21f7e

File tree

6 files changed

+50
-19
lines changed

6 files changed

+50
-19
lines changed

‎src/styles/element-ui.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
//to reset element-ui default css
1+
//to reset element-ui default css
22
.el-upload {
33
input[type="file"] {
44
display: none !important;
@@ -21,6 +21,7 @@
2121
.upload-container {
2222
.el-upload {
2323
width: 100%;
24+
2425
.el-upload-dragger {
2526
width: 100%;
2627
height: 200px;

‎src/styles/index.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ html {
2121
box-sizing: border-box;
2222
}
2323

24-
#app{
24+
#app {
2525
height: 100%;
2626
}
2727

@@ -40,9 +40,9 @@ a:hover {
4040
text-decoration: none;
4141
}
4242

43-
div:focus{
43+
div:focus {
4444
outline: none;
45-
}
45+
}
4646

4747
a:focus,
4848
a:active {
@@ -69,7 +69,7 @@ a:hover {
6969
}
7070

7171
//main-container全局样式
72-
.app-main{
72+
.app-main {
7373
min-height: 100%
7474
}
7575

‎src/styles/mixin.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010
&::-webkit-scrollbar-track-piece {
1111
background: #d3dce6;
1212
}
13+
1314
&::-webkit-scrollbar {
1415
width: 6px;
1516
}
17+
1618
&::-webkit-scrollbar-thumb {
1719
background: #99a9bf;
1820
border-radius: 20px;
@@ -24,4 +26,3 @@
2426
width: 100%;
2527
height: 100%;
2628
}
27-

‎src/styles/sidebar.scss

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
#app {
2+
23
// 主体区域
34
.main-container {
45
min-height: 100%;
56
transition: margin-left .28s;
6-
margin-left: 180px;
7+
margin-left: $sideBarWidth;
78
position: relative;
89
}
10+
911
// 侧边栏
1012
.sidebar-container {
1113
transition: width 0.28s;
12-
width: 180px !important;
14+
width: $sideBarWidth !important;
1315
height: 100%;
1416
position: fixed;
1517
font-size: 0px;
@@ -18,62 +20,79 @@
1820
left: 0;
1921
z-index: 1001;
2022
overflow: hidden;
23+
2124
//reset element-ui css
2225
.horizontal-collapse-transition {
2326
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
2427
}
25-
.el-scrollbar__bar.is-vertical{
28+
29+
.el-scrollbar__bar.is-vertical {
2630
right: 0px;
2731
}
32+
2833
.scrollbar-wrapper {
29-
overflow-x: hidden!important;
34+
overflow-x: hidden !important;
35+
3036
.el-scrollbar__view {
3137
height: 100%;
3238
}
3339
}
40+
3441
.is-horizontal {
3542
display: none;
3643
}
44+
3745
a {
3846
display: inline-block;
3947
width: 100%;
4048
overflow: hidden;
4149
}
50+
4251
.svg-icon {
4352
margin-right: 16px;
4453
}
54+
4555
.el-menu {
4656
border: none;
4757
height: 100%;
4858
width: 100% !important;
4959
}
50-
.is-active > .el-submenu__title{
51-
color: #f4f4f5!important;
60+
61+
.is-active>.el-submenu__title {
62+
color: #f4f4f5 !important;
5263
}
5364
}
65+
5466
.hideSidebar {
5567
.sidebar-container {
5668
width: 36px !important;
5769
}
70+
5871
.main-container {
5972
margin-left: 36px;
6073
}
74+
6175
.submenu-title-noDropdown {
6276
padding-left: 10px !important;
6377
position: relative;
78+
6479
.el-tooltip {
6580
padding: 0 10px !important;
6681
}
6782
}
83+
6884
.el-submenu {
6985
overflow: hidden;
86+
7087
&>.el-submenu__title {
7188
padding-left: 10px !important;
89+
7290
.el-submenu__icon-arrow {
7391
display: none;
7492
}
7593
}
7694
}
95+
7796
.el-menu--collapse {
7897
.el-submenu {
7998
&>.el-submenu__title {
@@ -88,45 +107,52 @@
88107
}
89108
}
90109
}
110+
91111
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
92112
.sidebar-container .el-submenu .el-menu-item {
93-
min-width: 180px !important;
113+
min-width: $sideBarWidth !important;
94114
background-color: $subMenuBg !important;
115+
95116
&:hover {
96117
background-color: $menuHover !important;
97118
}
98119
}
120+
99121
.el-menu--collapse .el-menu .el-submenu {
100-
min-width: 180px !important;
122+
min-width: $sideBarWidth !important;
101123
}
102124

103125
//适配移动端
104126
.mobile {
105127
.main-container {
106128
margin-left: 0px;
107129
}
130+
108131
.sidebar-container {
109132
transition: transform .28s;
110-
width: 180px !important;
133+
width: $sideBarWidth !important;
111134
}
135+
112136
&.hideSidebar {
113137
.sidebar-container {
114138
transition-duration: 0.3s;
115-
transform: translate3d(-180px, 0, 0);
139+
transform: translate3d(-$sideBarWidth, 0, 0);
116140
}
117141
}
118142
}
143+
119144
.withoutAnimation {
145+
120146
.main-container,
121147
.sidebar-container {
122148
transition: none;
123149
}
124150
}
125151
}
126152

127-
.el-menu--vertical{
128-
& >.el-menu{
129-
.svg-icon{
153+
.el-menu--vertical {
154+
&>.el-menu {
155+
.svg-icon {
130156
margin-right: 16px;
131157
}
132158
}

‎src/styles/transition.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
.fade-transform-enter-active {
1717
transition: all .5s;
1818
}
19+
1920
.fade-transform-enter {
2021
opacity: 0;
2122
transform: translateX(-30px);
2223
}
24+
2325
.fade-transform-leave-to {
2426
opacity: 0;
2527
transform: translateX(30px);

‎src/styles/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
$menuBg:#304156;
33
$subMenuBg:#1f2d3d;
44
$menuHover:#001528;
5+
$sideBarWidth: 180px;

0 commit comments

Comments
 (0)