mirror of
https://github.com/chillzhuang/Saber.git
synced 2024-12-26 07:35:34 +08:00
feat new theme
This commit is contained in:
parent
3091696221
commit
f9abf2254b
@ -44,6 +44,14 @@ export default {
|
||||
{
|
||||
name: "炫彩主题",
|
||||
value: "theme-star"
|
||||
},
|
||||
{
|
||||
name: "iview主题",
|
||||
value: "theme-iview"
|
||||
},
|
||||
{
|
||||
name: "d2主题",
|
||||
value: "theme-d2"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
@ -1,15 +0,0 @@
|
||||
//修改阿里巴巴图表库样式
|
||||
.iconfont{
|
||||
margin-right: 5px;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.avue-icon-select__item{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.avue-icon-select__list .iconfont{
|
||||
padding: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.avue-icon-select__list .iconfont:hover{
|
||||
transform: scale(1.4);
|
||||
}
|
@ -18,14 +18,11 @@
|
||||
@import './media.scss';
|
||||
//通用配置
|
||||
@import './normalize.scss';
|
||||
//通用配置
|
||||
@import './avue.scss';
|
||||
|
||||
a {
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
* {
|
||||
*{
|
||||
outline: none;
|
||||
}
|
||||
}
|
@ -24,13 +24,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item--divided:before,
|
||||
.el-menu,
|
||||
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.el-message__icon,
|
||||
.el-message__content {
|
||||
@ -58,7 +52,11 @@
|
||||
.el-main {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
|
||||
.el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,38 @@
|
||||
|
||||
|
||||
.el-menu--popup{
|
||||
.el-menu-item{
|
||||
background-color: #20222a;
|
||||
i,span{
|
||||
color:hsla(0,0%,100%,.7);
|
||||
}
|
||||
&:hover{
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background-color: rgba(0,0,0,.8);
|
||||
&:before {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: #409eff;
|
||||
position: absolute;
|
||||
}
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.avue-sidebar {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
padding-top: 74px;
|
||||
padding-top: 60px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: #20222a;
|
||||
@ -24,77 +55,29 @@
|
||||
font-size: 14px;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
}
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
font-size: 14px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
}
|
||||
.el-menu-item {
|
||||
span,i{
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
.el-menu-item,.el-submenu__title{
|
||||
i,span{
|
||||
color:hsla(0,0%,100%,.7);
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
span,
|
||||
i {
|
||||
color: #fff;
|
||||
&:hover{
|
||||
background: transparent;
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
span,
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
&::before {
|
||||
content: " ";
|
||||
&:before {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: $mainBg;
|
||||
position: absolute
|
||||
background: #409eff;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu__title {
|
||||
span,i{
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
&:hover {
|
||||
i,
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
background-color:transparent ;
|
||||
}
|
||||
}
|
||||
.el-submenu .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
span,i{
|
||||
color:rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
&.is-active {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
span,
|
||||
i {
|
||||
color: #fff
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
span,
|
||||
i {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
57
src/styles/theme/d2.scss
Normal file
57
src/styles/theme/d2.scss
Normal file
@ -0,0 +1,57 @@
|
||||
.theme-d2 {
|
||||
.avue-logo{
|
||||
color: #409EFF;
|
||||
background-color: #ebf1f6;
|
||||
box-shadow: none;
|
||||
.avue-logo_title{
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.avue-top{
|
||||
background-color: #ebf1f6;
|
||||
box-shadow: none;
|
||||
}
|
||||
.avue-main{
|
||||
padding: 0 5px;
|
||||
}
|
||||
.avue-tags{
|
||||
margin-left: 6px;
|
||||
padding: 0;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 3px;
|
||||
background-color: #ebf1f6;
|
||||
box-shadow: none;
|
||||
.el-tabs__item{
|
||||
border-left: 1px solid #cfd7e5 !important;
|
||||
margin: 0 !important;
|
||||
background-color: rgba(0,0,0,.03) !important;
|
||||
color: #606266 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
&:first-child{
|
||||
border-left: none !important;
|
||||
}
|
||||
}
|
||||
.is-active{
|
||||
border-bottom:1px solid #fff !important;
|
||||
background-color: #fff !important;
|
||||
color: #409EFF !important;
|
||||
}
|
||||
}
|
||||
.avue-sidebar{
|
||||
background-color: #ebf1f6;
|
||||
box-shadow: none;
|
||||
.el-menu-item,.el-submenu__title{
|
||||
i,span{
|
||||
color:#606266
|
||||
}
|
||||
&:hover,&.is-active{
|
||||
background: hsla(0,0%,100%,.5);
|
||||
i,span{
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -3,3 +3,10 @@
|
||||
|
||||
// 炫酷主题
|
||||
@import './star.scss';
|
||||
|
||||
|
||||
// d2主题
|
||||
@import './d2.scss';
|
||||
|
||||
//iview
|
||||
@import './iview.scss';
|
||||
|
76
src/styles/theme/iview.scss
Normal file
76
src/styles/theme/iview.scss
Normal file
@ -0,0 +1,76 @@
|
||||
.theme-iview {
|
||||
.avue-logo{
|
||||
background: #001529;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
.avue-logo_title{
|
||||
padding: 5px 8px 8px 8px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
font-size: 25px;
|
||||
color:#fff;
|
||||
font-weight: 500;
|
||||
display: inline;
|
||||
background-color: #409EFF;
|
||||
}
|
||||
}
|
||||
.avue-tags{
|
||||
padding: 3px 5px 5px 0;
|
||||
background: #f0f0f0;
|
||||
box-shadow: inset 0 0 3px 2px hsla(0,0%,39.2%,.1);
|
||||
.is-active{
|
||||
&:before{
|
||||
background: #409EFF !important;
|
||||
}
|
||||
}
|
||||
.el-tabs__item{
|
||||
padding: 0 15px !important;
|
||||
position: relative;
|
||||
height: 32px !important;
|
||||
line-height:32px !important;
|
||||
border: 1px solid #e8eaec!important;
|
||||
color: #515a6e!important;
|
||||
background: #fff!important;
|
||||
border-radius: 3px;
|
||||
&:before{
|
||||
content:'';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right:10px;
|
||||
border-radius: 50%;
|
||||
background: #e8eaec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avue-sidebar{
|
||||
background: #001529;
|
||||
.el-menu-item{
|
||||
&.is-active {
|
||||
background-color: #000c17;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
i,span{
|
||||
color:#409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu{
|
||||
.el-menu-item{
|
||||
&.is-active {
|
||||
background-color: #409EFF;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -3,112 +3,66 @@
|
||||
background-image: url("/img/bg/star-squashed.jpg");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.avue-logo{
|
||||
color: #fff;
|
||||
}
|
||||
.avue-header,
|
||||
.avue-logo,
|
||||
.tags-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-card {
|
||||
.el-card,.error-page {
|
||||
opacity: .9;
|
||||
}
|
||||
.top {
|
||||
.el-dropdown {
|
||||
color: #fff;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.top-item {
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.avue-tabs {
|
||||
padding: 0 20px ;
|
||||
}
|
||||
.avue-sidebar,
|
||||
.logo,
|
||||
.el-menu-item,
|
||||
.el-submenu__title,
|
||||
.el-menu {
|
||||
background-color: transparent
|
||||
}
|
||||
.logo_title,
|
||||
.avue-breadcrumb,
|
||||
{
|
||||
color: #fff ;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item.is-active {
|
||||
border-bottom: none;
|
||||
}
|
||||
.top {
|
||||
border-bottom: none;
|
||||
}
|
||||
.avue-tags {
|
||||
.avue-tags{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-top: none;
|
||||
}
|
||||
.tag-item {
|
||||
color: #fff ;
|
||||
border: none ;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
&.is-active {
|
||||
color: #fff ;
|
||||
border: 1px solid #fff ;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
.tag-item-icon {
|
||||
color: #fff ;
|
||||
.avue-top{
|
||||
.avue-breadcrumb{
|
||||
color:#fff;
|
||||
}
|
||||
.el-menu-item{
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
&.is-active{
|
||||
background-color: rgba(0,0,0,.4)
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
i,
|
||||
span {
|
||||
color: #fff ;
|
||||
.el-dropdown{
|
||||
color:#fff;
|
||||
}
|
||||
&:hover {
|
||||
i,
|
||||
span {
|
||||
color: #409eff ;
|
||||
}
|
||||
.avue-sidebar{
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
|
||||
background-color:transparent;
|
||||
.el-menu-item,.el-submenu__title{
|
||||
i,span{
|
||||
color:#fff
|
||||
}
|
||||
&:hover{
|
||||
background: transparent;
|
||||
i,span{
|
||||
color:#409EFF;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background-color: rgba(0, 0, 0, .4) ;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .4) ;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu__title {
|
||||
i,
|
||||
span {
|
||||
color: #fff ;
|
||||
|
||||
.top-search {
|
||||
.el-input__inner{
|
||||
color: #333;
|
||||
}
|
||||
&:hover {
|
||||
i,
|
||||
span {
|
||||
color: #409eff ;
|
||||
}
|
||||
background-color:transparent ;
|
||||
}
|
||||
}
|
||||
.el-submenu .el-menu-item {
|
||||
&.is-active {
|
||||
background-color: rgba(0, 0, 0, .4) ;
|
||||
span,
|
||||
i {
|
||||
color: $mainBg ;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .4) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-search {
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
|
@ -1,4 +1,32 @@
|
||||
.theme-white {
|
||||
.el-menu--popup{
|
||||
.el-menu-item{
|
||||
background-color: #fff;
|
||||
i,span{
|
||||
color:#666;
|
||||
}
|
||||
&:hover{
|
||||
i,span{
|
||||
color:#333;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background-color: #409EFF;
|
||||
&:before {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: #409eff;
|
||||
position: absolute;
|
||||
}
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.avue-header,
|
||||
.avue-logo,
|
||||
.tags-container {
|
||||
@ -16,7 +44,7 @@
|
||||
color:#fff;
|
||||
}
|
||||
.logo_title,
|
||||
.avue-breadcrumb,
|
||||
.avue-breadcrumb
|
||||
{
|
||||
color: #fff ;
|
||||
i {
|
||||
@ -37,60 +65,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--popup{
|
||||
background-color: #fff ;
|
||||
.el-menu-item{
|
||||
background-color: #fff ;
|
||||
span,i {
|
||||
color:#666 ;
|
||||
}
|
||||
&.is-active{
|
||||
background-color:#409EFF ;
|
||||
span,i {
|
||||
color:#fff ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.avue-sidebar{
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
|
||||
.el-menu{
|
||||
background-color: #fff ;
|
||||
}
|
||||
background-color:#fff ;
|
||||
background-color: #fff;
|
||||
padding-top: 70px;
|
||||
.el-menu-item,.el-submenu__title{
|
||||
i,span{
|
||||
color:#666 ;
|
||||
}
|
||||
background-color:#fff ;
|
||||
}
|
||||
.el-menu-item,.el-submenu__title{
|
||||
&:hover{
|
||||
background-color: transparent ;
|
||||
i,span{
|
||||
color:#666 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu-item.is-active,.el-submenu__title.is-active{
|
||||
background-color:#409EFF ;
|
||||
i,span{
|
||||
color:#fff ;
|
||||
}
|
||||
&::before{
|
||||
display: none;
|
||||
color:#666
|
||||
}
|
||||
&:hover{
|
||||
background-color: #409EFF ;
|
||||
i,span{
|
||||
color:#fff ;
|
||||
}
|
||||
background: transparent;
|
||||
i,span{
|
||||
color:#333;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
background-color: #409EFF;
|
||||
i,span{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-search {
|
||||
.el-input__inner{
|
||||
color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
|
@ -1,7 +1,7 @@
|
||||
.avue-top {
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
color: rgba(0, 0, 0, .65);
|
||||
font-size: 28px;
|
||||
height: 64px;
|
||||
|
Loading…
Reference in New Issue
Block a user