blade/Saber
1
0
Fork 0
mirror of https://github.com/chillzhuang/Saber.git synced 2024-11-05 10:09:40 +08:00
Code Issues Projects Releases Wiki Activity

feat new theme

Browse Source
This commit is contained in:
smallwei 2019-03-06 14:27:36 +08:00
parent 3091696221
commit f9abf2254b
11 changed files with 286 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/page/index/top/top-theme.vue
View File

@ -44,6 +44,14 @@ export default {
{
name: "炫彩主题",
value: "theme-star"
},
{
name: "iview主题",
value: "theme-iview"
},
{
name: "d2主题",
value: "theme-d2"
}
]
};

15
src/styles/avue.scss
View File

@ -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);
}

11
src/styles/common.scss
View File

@ -18,14 +18,11 @@
@import './media.scss';
//通用配置
@import './normalize.scss';
//通用配置
@import './avue.scss';
a {
a{
text-decoration: none;
color: #333;
color:#333;
}
* {
*{
outline: none;
}
}

14
src/styles/element-ui.scss
View File

@ -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;
}
}

109
src/styles/sidebar.scss
View File

@ -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
View 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;
}
}
}
}
}

7
src/styles/theme/index.scss
View File

@ -3,3 +3,10 @@
// 炫酷主题
@import './star.scss';
// d2主题
@import './d2.scss';
//iview
@import './iview.scss';

76
src/styles/theme/iview.scss Normal file
View 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;
}
}
}
}
}
}

122
src/styles/theme/star.scss
View File

@ -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 */

87
src/styles/theme/white.scss
View File

@ -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 {

2
src/styles/top.scss
View File

@ -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;