Skip to content

Commit 3bf1ca9

Browse files
pettyAlwayspettyAlways
committed
[功能新增] 主题换肤
1 parent 13cd924 commit 3bf1ca9

17 files changed

+87095
-228
lines changed

‎src/App.vue

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ export default {
1111
</script>
1212

1313
<style lang="scss">
14-
@import 'normalize.css/normalize.css';
1514
@import './style/index.scss';
16-
* {
17-
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
15+
#app {
16+
height: 100%;
1817
}
1918
</style>

‎src/components/common-sidebar/index.vue

+28-20
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
<template>
2-
<el-menu mode="vertical"
3-
class="menus-group--vertical"
4-
unique-opened
5-
background-color=""
6-
:collapse="isCollapse"
7-
:default-active="activeTagName">
8-
<menuSidebar :menus="permissions[curConfigure]"></menuSidebar>
9-
</el-menu>
2+
<div class="menus-group" :style="{ height: clientHeight + 'px' }">
3+
<el-menu mode="vertical"
4+
class="menus-group--vertical"
5+
unique-opened
6+
background-color=""
7+
:collapse="isCollapse"
8+
:default-active="activeTagName">
9+
<menuSidebar :menus="permissions[curConfigure]"></menuSidebar>
10+
</el-menu>
11+
</div>
1012
</template>
1113

1214
<script>
1315
import { mapGetters } from 'vuex'
1416
import menuSidebar from '../menu-sidebar'
1517
export default {
18+
data() {
19+
return {
20+
clientHeight: ''
21+
}
22+
},
23+
mounted() {
24+
this.clientHeight = document.body.clientHeight - 61
25+
},
1626
components: {
1727
menuSidebar
1828
},
@@ -41,17 +51,15 @@
4151
</script>
4252

4353
<style scoped lang="scss">
44-
.menus-group--vertical:not(.el-menu--collapse) {
45-
position: fixed;
46-
top: 61px;
47-
width: 200px;
48-
height: 100%;
49-
min-height: 500px;
50-
/*background: {
51-
image: -webkit-gradient(linear, left top, right top, from(#1278f6), to(#00b4aa));
52-
image: -webkit-linear-gradient(left, #1278f6, #00b4aa);
53-
image: -moz-linear-gradient(left, #1278f6, #00b4aa);
54-
image: linear-gradient(to bottom, #f2f2f2, #f5f5f5);
55-
}*/
54+
.menus-group {
55+
overflow: hidden;
56+
.menus-group--vertical:not(.el-menu--collapse) {
57+
height: 100%;
58+
width: calc(100% + 20px);
59+
// 让滚动条一直出现占据上面扩展的20px，否则在高度没有超出的情况下没有滚动条
60+
// 占据导致菜单的宽度拉长了20px,最右侧的收缩箭头右移20px
61+
overflow-y: scroll;
62+
}
5663
}
64+
5765
</style>

‎src/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import Vue from 'vue'
22
import App from './App'
33
import router from './router'
44
import ElementUI from 'element-ui'
5-
import '@/style/theme_sky_sea.scss'
5+
// import '@/style/theme_sky_sea.scss'
6+
import '@/style/theme_love_sense.scss'
67
// 状态机
78
import store from './store'
89
// 国际化

‎src/style/index.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
@import './transition.scss';
22

33
* {
4-
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
4+
margin: 0px;
55
}
66
body {
7+
height: 100%;
78
-moz-osx-font-smoothing: grayscale;
89
-webkit-font-smoothing: antialiased;
910
text-rendering: optimizeLegibility;
1011
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
1112
}
1213

1314
html {
15+
height: 100%;
1416
box-sizing: border-box;
1517
}
1618

‎src/style/theme_love_sense.scss

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
@charset "utf-8";
2+
// 点缀色：elementui主题色
3+
$elementPrimaryColor: #a45915;
4+
// 网站配色($primaryColor的对比色)
5+
$contrastColor: #f6f6e7;
6+
// 网站主色调
7+
$primaryColor: #FFCCCC;
8+
9+
/* 改变主题色变量 */
10+
$--color-primary: $elementPrimaryColor;
11+
/* elementu所有组件的白底色*/
12+
$--color-white: darken($primaryColor, 6%);
13+
14+
/* 表格自定义样式*/
15+
$--table-header-color: $contrastColor;
16+
$--table-header-background: darken($primaryColor, 16%);
17+
$--table-text-color: lighten($contrastColor, 8%);
18+
$--color-text-secondary: $--color-primary;
19+
$--input-border: 1px solid darken($primaryColor, 20%);
20+
21+
/* 树组件自定义样式*/
22+
$--tree-text-color: lighten($contrastColor, 10%);
23+
$--tree-node-hover-color: darken($primaryColor, 20%);
24+
25+
/*对话框*/
26+
$--color-info: $elementPrimaryColor;
27+
$--color-text-regular: $contrastColor;
28+
29+
/*输入框*/
30+
$--input-disabled-fill: darken($primaryColor, 10%);
31+
$--input-disabled-border: darken($primaryColor, 12%);
32+
$--input-disabled-color: darken($contrastColor, 12%);
33+
$--input-focus-border: darken($contrastColor, 12%);
34+
$--input-placeholder-color: darken($contrastColor, 10%);
35+
// 箭头的颜色
36+
$--select-input-color: $contrastColor;
37+
38+
/*下拉框*/
39+
$--select-option-hover-background: darken($primaryColor, 15%);
40+
41+
/* 改变 icon 字体路径变量，必需 */
42+
$--font-path: '~element-ui/lib/theme-chalk/fonts';
43+
44+
/* elementui组件所有的样式文件*/
45+
@import "~element-ui/packages/theme-chalk/src/index";
46+
47+
.cms-container {
48+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
49+
font-size: 14px;
50+
color: lighten($primaryColor, 30%);
51+
// 输入框边框颜色
52+
.el-input__inner {
53+
border-color: darken($primaryColor, 12%);
54+
}
55+
// 表格不同行颜色
56+
.el-table--striped .el-table__body tr.el-table__row--striped {
57+
td {
58+
background: darken($primaryColor, 9%) !important;
59+
}
60+
}
61+
// 树节点选中
62+
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
63+
background-color: darken($primaryColor, 20%);
64+
}
65+
.el-tree .el-tree-node__content {
66+
padding-top: 20px !important;
67+
padding-bottom: 20px !important;
68+
}
69+
// 遮罩层颜色
70+
.el-loading-mask {
71+
background: $primaryColor;
72+
}
73+
74+
// 菜单下拉箭头大小默认12px
75+
.el-submenu__icon-arrow {
76+
font-size: 16px;
77+
}
78+
// 定义网站底色
79+
background: $contrastColor;
80+
// 网站头样式
81+
.navbar-container {
82+
background: {
83+
image: -webkit-gradient(linear, left top, right top, from(darken($primaryColor, 10%)), to(darken($primaryColor, 15%)));
84+
image: -webkit-linear-gradient(45deg, darken($primaryColor, 10%), darken($primaryColor, 15%) 50%, darken($primaryColor, 10%));
85+
image: -moz-linear-gradient(45deg, darken($primaryColor, 10%), darken($primaryColor, 15%) 50%, darken($primaryColor, 10%));
86+
image: linear-gradient(45deg,darken($primaryColor, 10%),darken($primaryColor, 15%) 50%, darken($primaryColor, 10%));
87+
}
88+
.information-date {
89+
color: lighten($primaryColor, 30%)
90+
}
91+
}
92+
// 定义左边栏颜色
93+
.sys-configure__sidebar {
94+
.menus-group--vertical {
95+
background: darken($primaryColor, 10%);
96+
.sidebar-menu {
97+
.sidebar-menu__item {
98+
background: $primaryColor;
99+
margin-bottom: 1px;
100+
.el-menu-item {
101+
border-top: 1px solid darken($primaryColor, 10%);
102+
}
103+
}
104+
}
105+
.el-submenu {
106+
&.is-opened {
107+
background: $primaryColor;
108+
.el-menu {
109+
background: $primaryColor;
110+
}
111+
}
112+
.el-menu {
113+
background: $primaryColor;
114+
}
115+
}
116+
.el-submenu__title {
117+
padding: 0 0 0 10px !important;
118+
&:hover {
119+
background-color: $primaryColor;
120+
}
121+
&:focus, &:hover {
122+
outline: 0;
123+
background-color: $primaryColor;
124+
}
125+
i {
126+
color: black;
127+
}
128+
}
129+
// 菜单聚焦时字体颜色
130+
.el-menu-item.is-active {
131+
color: $contrastColor;
132+
}
133+
// 菜单聚焦时背景色
134+
.el-menu-item:focus, .el-menu-item:hover, .el-menu-item.is-active {
135+
background: darken($primaryColor, 20%);;
136+
color: $contrastColor;
137+
}
138+
}
139+
}
140+
.cms-container__sidebar--hide {
141+
background: darken($primaryColor, 10%);
142+
}
143+
144+
// 定义中间区域样式
145+
.cms-container__main, .cms-container__main--hide {
146+
// tab页颜色样式
147+
.tabs-container {
148+
background: darken($primaryColor, 10%);
149+
.tags-view-item {
150+
&.active {
151+
.el-tag {
152+
background-color: darken($primaryColor, 30%);
153+
}
154+
}
155+
.el-tag {
156+
background: $primaryColor;
157+
border: 1px solid darken($primaryColor, 16%);
158+
color: lighten($contrastColor, 10%);
159+
.el-icon-close {
160+
color: lighten($contrastColor, 10%);
161+
}
162+
}
163+
}
164+
}
165+
// main面板颜色样式
166+
.main-container {
167+
background: $primaryColor;
168+
}
169+
170+
}
171+
}
172+
173+

0 commit comments

Comments
 (0)