Skip to content

Commit 8a9615f

Browse files
committed
add dark.theme
1 parent 87d2525 commit 8a9615f

File tree

8 files changed

+36
-99
lines changed

8 files changed

+36
-99
lines changed

src/App.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,5 @@ export default {
1212

1313
<style rel="stylesheet/less" type="text/css" lang="less">
1414
@import "./styles/common.less";
15-
html body {
16-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17-
-webkit-font-smoothing: antialiased;
18-
-moz-osx-font-smoothing: grayscale;
19-
color: #2c3e50;
20-
background: #fff;
21-
}
15+
2216
</style>

src/styles/chalk.theme.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
/*
22
refer to http://stevesanderson.github.io/fixed-height-layouts-demo/two-columns.html
33
*/
4-
5-
body {
6-
font-family: 'Helvetica Neue', Arial, Sans-Serif;
4+
html body {
5+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
color: #2c3e50;
9+
background: #fff;
710
}
811

912
.header, .footer {
@@ -22,10 +25,11 @@ body {
2225
background: #ddd
2326
}
2427

25-
/*.right.col { border-left: 1px solid black; }*/
28+
/*.right.col { border-left: 1px solid #eee; }*/
2629
.right.col .body {
2730
padding: 0 1em;
28-
background: #fff
31+
background: #fff;
32+
border-left: 1px solid #eee;
2933
}
3034

3135
.left.col .body {

src/styles/dark.theme.css

Lines changed: 3 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -32,83 +32,9 @@ body {
3232
background: #495060;
3333
}
3434

35-
.listview {
36-
padding: 0;
37-
margin: 0;
38-
font-weight: bold;
39-
color: #444;
40-
}
41-
42-
.listview li {
43-
list-style-type: none;
44-
background: #eee;
45-
padding: 1em;
46-
border-top: 1px solid #aaa;
47-
border-bottom: 1px solid #fff;
48-
cursor: pointer;
49-
}
50-
51-
.listview li.selected {
52-
background-color: #37F;
53-
color: White;
54-
}
55-
56-
.listview.inset {
57-
margin: 1em 0;
58-
}
59-
60-
.listview.inset li {
61-
background: white;
62-
border: 2px solid #aaa;
63-
border-bottom-width: 0;
64-
}
65-
66-
.listview.inset li:first-child {
67-
border-radius: 1em 1em 0em 0em
68-
}
69-
70-
.listview.inset li:last-child {
71-
border-radius: 0em 0em 1em 1em;
72-
border-bottom-width: 2px;
73-
}
74-
75-
.tiles {
76-
overflow-y: hidden;
77-
}
35+
.el-menu-item.is-active{
36+
color: #ffffff!important;
37+
background-color: #409EFF!important;
7838

79-
.tiles > ul {
80-
width: 1175px;
8139
}
8240

83-
.tiles ul {
84-
margin: 0;
85-
padding: 0;
86-
white-space: nowrap;
87-
}
88-
89-
.tiles li {
90-
list-style-type: none;
91-
display: inline-block;
92-
background-color: #080;
93-
width: 150px;
94-
height: 150px;
95-
padding: 1em;
96-
color: White;
97-
margin: 5px;
98-
font-weight: bold;
99-
zoom: 1;
100-
*display: inline;
101-
}
102-
103-
button {
104-
display: block;
105-
border: 2px solid #aaa;
106-
line-height: normal;
107-
background-color: White;
108-
border-radius: 8px;
109-
margin: 8px 0;
110-
cursor: pointer;
111-
padding: 5px 20px;
112-
font-weight: bold;
113-
color: #333;
114-
}

src/views/index.vue

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<span>
2+
<span style="z-index: 11">
33
<div class="left col" :class="{ collapse: isCollapse }">
4-
<div class="header row " style="text-align: center" :style="{width: isCollapse?'65px':'auto'}">
4+
<div class="header row " style="text-align: center" :style="{width: isCollapse?'64px':'auto'}">
55
<a v-if="!isCollapse" href="https://github.com/TonyLuo/iview-vue-admin" style="color: white;size: 40px">
66
<i class="fa fa-github"></i>
77
</a>
@@ -15,7 +15,7 @@
1515
</div>
1616

1717
</div>
18-
<div class="right col" :style="{left: isCollapse?'65px':'200px'}">
18+
<div class="right col body" :style="{left: isCollapse?'64px':'200px'}">
1919
<ceiling></ceiling>
2020
<tabs class="layout-tabs"></tabs>
2121
<breadcrumb class="layout-breadcrumb"></breadcrumb>
@@ -29,7 +29,8 @@
2929

3030
<style>
3131
@import "./layout/css/layout.css";
32-
@import "../styles/chalk.theme.css";
32+
@import "../styles/dark.theme.css";
33+
/*@import "../styles/chalk.theme.css";*/
3334
3435
.el-header {
3536
background-color: #B3C0D1;

src/views/layout/breadcrumb.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
currentPath () {
2424
return this.$store.state.layout.currentPath.slice()
2525
}
26-
},
26+
}
2727
2828
}
2929
</script>

src/views/layout/css/layout.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ body {
3030
width: 200px;
3131
}
3232
.left.col.collapse {
33-
width: 65px;
33+
width: 64px;
3434
}
3535
.left.col.collapse:hover {
3636
width: 200px;

src/views/layout/sidebar.vue

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
2-
<span>
2+
<span id="sidebar">
33
<el-menu
44
:default-active="currentPageName"
55
:default-openeds="openedMenuList"
66
class="el-menu-vertical-demo disabled-animation"
77
@open="handleOpen"
88
@close="handleClose"
9-
:router="true"
9+
@select="selectMenu"
10+
text-color="#C8C8C8"
11+
active-text-color="#2d8cf0"
12+
background-color="#464c5b"
13+
1014
:collapse="isCollapse"
1115
:class="{'hide-sidebard-text': isCollapse}">
1216
<template v-for="item in menuList">
@@ -43,6 +47,8 @@
4347
/*.hide-sidebard-text i.ivu-menu-submenu-title-icon {*/
4448
/*display: none;*/
4549
/*}*/
50+
51+
4652
</style>
4753
<script>
4854
import { appRouter } from '../../router'
@@ -104,7 +110,7 @@
104110
})
105111
106112
},
107-
changeMenu (menuName) {
113+
selectMenu (menuName) {
108114
console.log(menuName)
109115
this.currentPageName = menuName
110116
this.$router.push({

src/views/layout/tabs.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<span>
3-
43
<el-tag :closable="index !== 0" :key="item.name" v-for="(item, index) in itemList"
54
:type="item.name === currentPageName ? '' : 'info'"
65
@click.native="onClick(item)"
@@ -9,7 +8,14 @@
98
</span>
109
</template>
1110
<style>
11+
.el-tag{
12+
background-color: #ffffff !important;
13+
14+
}
15+
.el-tag--info{
16+
background-color: #f8f8f9 !important;
1217
18+
}
1319
</style>
1420
<script>
1521
export default {

0 commit comments

Comments
 (0)