yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端新增可配置侧边栏风格，可以配置网页主题色

Browse Source
This commit is contained in:
Devil
2021-06-25 17:24:02 +08:00
parent 7e1348cb41
commit 9f5b59c4b5
15 changed files with 9950 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style/basics.scss
+8 -1
View File
@@ -1,3 +1,4 @@
// basice
$font-size: 14px;
$icon-size:17px;
@@ -14,10 +15,11 @@ $width-mobile-aside:210px;
$color-aside:rgba(255, 255, 255,.9);
$icon-arrow-size-aside:12px;
$width-submenu-aside:55px;
$bg-aside:#191a23;
$bg-aside:#fff;
$height-aside-tilte:64px;
$height-aside-img:30px;
$width-aside-img:30px;
$aside-color:#000;
// header
$height-header: 60px;
// nav-scroll
@@ -35,3 +37,8 @@ $height-car:68px;
// mobile
$padding-xs: 5px;
$margin-xs: 5px;
:export{
bg_aside : $bg-aside ;
color_aside : $aside-color
}
web/src/style/element_visiable.scss
+15
View File
@@ -0,0 +1,15 @@
/* 改变主题色变量 */
$--color-primary: #1890ff;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
:export {
colorPrimary: $--color-primary
}
web/src/style/main.scss
+2 -122
View File
@@ -8,7 +8,7 @@
*/
@import '@/style/basics.scss';
@import "side.scss";
html {
line-height: 1.15;
/* 1 */
@@ -546,138 +546,18 @@ li {
top: 0;
}
.el-aside {
-webkit-transition: width .2s;
transition: width .2s;
width: $width-aside;
background-color: $bg-aside;
height: 100%;
position: fixed;
font-size: 0;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
.el-menu {
border-right: none;
}
.tilte {
min-height: $height-aside-tilte;
line-height: $height-aside-tilte;
background: $bg-aside;
text-align: center;
.logoimg {
width: $width-aside-img;
height: $height-aside-img;
vertical-align: middle;
background: #fff;
border-radius: 50%;
padding: 3px;
}
.tit-text {
display: inline-block;
color: #fff;
font-weight: 600;
font-size: 20px;
vertical-align: middle;
padding-left: 10px;
}
}
}
.aside {
.el-menu-vertical {
background-color: $bg-aside;
}
.el-submenu {
background-color: $bg-aside;
.el-menu {
.el-menu-item {
background-color: #000408;
height: 44px;
line-height: 44px;
}
.is-active {
background-color: #1890ff;
// 关闭三级菜单二级菜单样式
ul{
border:none;
}
}
// 关闭三级菜单二级菜单样式
.is-active.is-opened{
background-color: #191a23;
ul{
border:none;
}
}
}
}
.el-menu-item:focus, .el-menu-item:hover{
background-color: transparent;
}
.el-menu-item:hover i,
.el-menu-item:hover span {
color: #fff;
}
.el-submenu__title:hover {
background-color: $bg-aside;
}
.el-submenu__title:hover i,
.el-submenu__title:hover span {
color: #fff;
}
.el-menu--inline {
border-left: 5px solid #2c3b41;
}
}
.hideside {
.aside {
width: $width-hideside-aside;
}
}
.mobile.hideside {
.el-aside {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate3d(-210px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
.mobile {
.el-aside {
-webkit-transition: -webkit-transform .28s;
transition: -webkit-transform .28s;
transition: transform .28s;
transition: transform .28s, -webkit-transform .28s;
width: $width-mobile-aside;
}
}
.main-cont.el-main {
min-height: 100%;
-webkit-transition: margin-left .28s;
transition: margin-left .28s;
margin-left: $width-aside;
position: relative;
}
.hideside {
.main-cont.el-main {
margin-left: 54px;
//margin-left: 54px;
}
}
web/src/style/side.scss
+71
View File
@@ -0,0 +1,71 @@
@import '@/style/basics.scss';
.el-aside {
-webkit-transition: width .2s;
transition: width .2s;
width: $width-aside;
background-color: $bg-aside;
height: 100%;
position: fixed;
font-size: 0;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
color: $aside-color;
.el-menu {
border-right: none;
}
.tilte {
min-height: $height-aside-tilte;
line-height: $height-aside-tilte;
background: $bg-aside;
text-align: center;
.logoimg {
width: $width-aside-img;
height: $height-aside-img;
vertical-align: middle;
background: #fff;
border-radius: 50%;
padding: 3px;
}
.tit-text {
display: inline-block;
color: $aside-color;
font-weight: 600;
font-size: 20px;
vertical-align: middle;
padding-left: 10px;
}
}
}
.hideside {
.aside {
width: $width-hideside-aside;
}
}
.mobile.hideside {
.el-aside {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate3d(-210px, 0, 0);
transform: translate3d(-220px, 0, 0);
}
}
.mobile {
.el-aside {
-webkit-transition: -webkit-transform .28s;
transition: -webkit-transform .28s;
transition: transform .28s;
transition: transform .28s, -webkit-transform .28s;
margin-left: -54px;
}
}