Skip to content

Commit c84d029

Browse files
author
吴博
committed
样式调整
1 parent 03c784c commit c84d029

File tree

14 files changed

+182
-59
lines changed

14 files changed

+182
-59
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,18 @@
1111
"lint": "eslint --ext .js,.vue src"
1212
},
1313
"dependencies": {
14+
"@types/lodash": "^4.14.159",
1415
"axios": "^0.16.2",
1516
"babel-polyfill": "^6.26.0",
17+
"ckeditor4-vue": "^1.0.1",
1618
"clipboard": "^1.7.1",
1719
"codeages-design": "^0.1.6",
1820
"element-ui": "^1.4.0",
1921
"highlight.js": "^9.12.0",
2022
"jquery": "^3.2.1",
2123
"less": "^2.7.2",
2224
"less-loader": "^4.0.5",
25+
"lodash": "^4.17.19",
2326
"mockjs": "^1.0.1-beta3",
2427
"moment": "^2.18.1",
2528
"qs": "^6.5.0",

‎src/assets/styles/element-layout.less

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11

2-
.element-layout-facility {
3-
position: fixed;
4-
top: 56px;
5-
left: 0;
6-
width: 272px;
7-
padding: 18px 18px 18px 32px;
8-
font-family: PingFangSC-Medium;
9-
font-size: 20px;
10-
color: #333;
11-
line-height: 20px;
12-
background-color: #fafafa;
13-
}
2+
//.element-layout-facility {
3+
// position: fixed;
4+
// top: 56px;
5+
// left: 0;
6+
// width: 272px;
7+
// padding: 18px 18px 18px 32px;
8+
// font-family: PingFangSC-Medium;
9+
// font-size: 20px;
10+
// color: #333;
11+
// line-height: 20px;
12+
// background-color: #fafafa;
13+
//}

‎src/assets/styles/header.less

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
//.site-header {
2-
// position: fixed;
3-
// top: 0;
4-
// left: 0;
5-
// right: 0;
6-
// background-color: #f5faff;
7-
// padding: 0 0 0 200px;
8-
// height: 60px;
9-
// z-index: 99;
10-
//}
11-
121
.site-header {
132
position: fixed;
143
top: 0;
@@ -26,7 +15,6 @@
2615
background-color: #f5faff;
2716
}
2817

29-
3018
.site-header__logo {
3119
position: absolute;
3220
top: 0;
@@ -62,6 +50,53 @@
6250
}
6351
&.active {
6452
color: @brand-primary;
53+
.nav-child-icon {
54+
border-top-color: @brand-primary;
55+
}
56+
}
57+
}
58+
.nav-child-icon {
59+
position: absolute;
60+
right: -14px;
61+
top: 50%;
62+
width: 0;
63+
height: 0;
64+
margin-top: -3px;
65+
border-top: 6px solid #999;
66+
border-right: 6px solid transparent;
67+
border-bottom: 6px solid transparent;
68+
border-left: 6px solid transparent;
69+
}
70+
.nav-child {
71+
position: absolute;
72+
left: 50%;
73+
top: 90%;
74+
width: 146px;
75+
padding: 10px 0;
76+
margin-left: -73px;
77+
font-size: 14px;
78+
line-height: 20px;
79+
color: #999;
80+
background: #fff;
81+
box-shadow: 0 0 12px 0 rgba(0,0,0,0.10);
82+
list-style-type: none;
83+
&:before {
84+
position: absolute;
85+
top: -8px;
86+
left: 69px;
87+
content: "";
88+
width: 0;
89+
height: 0;
90+
border-top: 4px solid transparent;
91+
border-left: 4px solid transparent;
92+
border-right: 4px solid transparent;
93+
border-bottom: 4px solid #fff;
94+
}
95+
li {
96+
padding: 6px 24px;
97+
&:hover {
98+
background-color: #f1f9ff;
99+
}
65100
}
66101
}
67102
}

‎src/assets/styles/homepage.less

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
left: 0;
55
right: 0;
66
bottom: 0;
7+
width: 1200px;
78
overflow-y: auto;
89
}
910

@@ -224,7 +225,7 @@
224225
font-size: 24px;
225226
color: #313131;
226227
letter-spacing: 0;
227-
line-height: 32px;
228+
line-height: 32px;
228229
}
229230

230231
.site-homepage-feature__content {
@@ -265,7 +266,7 @@
265266
color: rgba(255, 255, 255, 1);
266267
}
267268
}
268-
}
269+
}
269270
}
270271

271272
.site-homepage-footer__copyright {
@@ -275,4 +276,4 @@
275276
color: #fff;
276277
text-align: center;
277278
line-height: 20px;
278-
}
279+
}

‎src/assets/styles/sidebar.less

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.site-sidebar {
22
position: fixed;
3-
top: 56px;
3+
top: 72px;
44
left: 0;
55
bottom: 0;
66
width: 272px;
@@ -11,11 +11,13 @@
1111
}
1212

1313
.site-sidebar__column__title {
14-
padding: 20px 16px 12px 32px;
14+
padding-bottom: 8px;
15+
margin: 12px 32px;
1516
font-family: PingFangSC-Medium;
1617
font-size: 14px;
1718
color: #333333;
1819
line-height: 20px;
20+
border-bottom: solid 1px #ebebeb;
1921
}
2022

2123
.site-sidebar__nav {
@@ -27,26 +29,13 @@
2729
font-size: 14px;
2830
line-height: 20px;
2931
color: #666;
30-
padding: 8px 16px 8px 44px;
32+
padding: 12px 32px 12px 44px;
3133
cursor: pointer;
32-
//&:hover {
33-
// cursor: pointer;
34-
// .cd-hover-light;
35-
// .cd-transition;
36-
// .nav-en {
37-
// .cd-hover-light;
38-
// .cd-transition;
39-
// }
40-
//}
4134
&:hover,
4235
&.active {
43-
box-shadow: inset -2px 0 0 0 @brand-primary;
36+
color: #31a1ff;
37+
box-shadow: inset -2px 0 0 0 #31a1ff;
4438
background-color: #f1f9ff;
4539
}
46-
.nav-en {
47-
font-size: 12px;
48-
margin-left: 4px;
49-
color: rgba(0, 0, 0, 0.32);
50-
}
5140
}
5241
}

‎src/data/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,11 @@ const navMenu:any[] = [
229229
},
230230
{
231231
'text': '元素布局',
232-
'name': 'element-layout'
232+
'name': 'element-layout',
233+
'children': [
234+
{ 'text': 'PC端元素布局', 'name': 'pc-element-layout' },
235+
{ 'text': '移动端元素布局', 'name': 'mobile-element-layout' },
236+
]
233237
},
234238
{
235239
'text': '组件',

‎src/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Vue from 'vue';
22
import MetaInfo from 'vue-meta-info';
3+
import CKEditor from 'ckeditor4-vue';
34
import router from '@/router';
45
import filters from '@/filters';
56
import plugins from '@/plugins';
@@ -12,6 +13,7 @@ import * as cd from 'codeages-design';
1213
import 'codeages-design/src/less/codeages-design.less';
1314
import '@/assets/styles/main.less';
1415

16+
Vue.use( CKEditor );
1517
Vue.use(MetaInfo);
1618
Vue.use(filters);
1719
Vue.use(plugins);

‎src/router/index.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@ const routes = [
2525
component: (resolve) => require(['@/views/principle.vue'], resolve),
2626
},
2727
{
28-
path: '/element-layout',
29-
name: 'element-layout',
28+
path: '/pc-element-layout',
29+
name: 'pc-element-layout',
3030
component: (resolve) => require(['@/views/element-layout.vue'], resolve),
3131
},
32+
{
33+
path: '/mobile-element-layout',
34+
name: 'mobile-element-layout',
35+
component: (resolve) => require(['@/views/element-layout.vue'], resolve),
36+
},
3237
{
3338
path: '/resources',
3439
name: 'resources',
@@ -38,6 +43,16 @@ const routes = [
3843
path: '/',
3944
name: 'homepage',
4045
component: (resolve) => require(['@/views/homepage.vue'], resolve),
46+
},
47+
{
48+
path: '/admin',
49+
name: 'admin',
50+
component: (resolve) => require(['@/views/admin/admin.vue'], resolve),
51+
},
52+
{
53+
path: '/login',
54+
name: 'login',
55+
component: (resolve) => require(['@/views/admin/login.vue'], resolve),
4156
}
4257
];
4358

‎src/views/admin/admin.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<ckeditor value="Hello, World!"></ckeditor>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'admin',
10+
}
11+
</script>

‎src/views/admin/login.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div></div>
3+
</template>
4+
5+
<script>
6+
export default {}
7+
</script>

‎src/views/element-layout.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<div id="app" class="site-wrap" :class="{ 'hide-sidebar': isHideSidebar }">
33
<x-header></x-header>
4-
<div class="element-layout-facility">PC端</div>
5-
<x-side-bar @sidebarToggle="sidebarToggle" :menus="menus" style="top: 112px;"></x-side-bar>
4+
<x-side-bar @sidebarToggle="sidebarToggle" :menus="menus"></x-side-bar>
65
<main class="site-main">
76
<div class="site-content">
87
<keep-alive>

‎src/views/header.vue

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,16 @@
77
</div>
88
<div class="site-header__nav cd-clearfix">
99
<ul class="">
10-
<li :class="{ active: routeName === nav.name }"
11-
@click="switchNav(nav.name)"
12-
v-for="(nav, index) in navMenu"
13-
:key="index">
10+
<li :class="{ active: routeName === nav.name }"
11+
@click="switchNav(nav)"
12+
v-for="nav in navMenu">
1413
{{nav.text}}
14+
<template v-if="nav.children">
15+
<div class="nav-child-icon"></div>
16+
<ul class="nav-child" v-if="nav.children" v-show="childShow[nav.name]">
17+
<li v-for="item in nav.children" :key="item.name" @click="switchNav(item, nav)">{{ item.text }}</li>
18+
</ul>
19+
</template>
1520
</li>
1621
</ul>
1722
<theme-picker @ok="pickerOk">
@@ -24,32 +29,62 @@
2429

2530
<script lang="ts">
2631
import Vue from 'vue';
27-
import { Component } from 'vue-property-decorator';
32+
import { Component, Watch } from 'vue-property-decorator';
2833
2934
import ThemePicker from '@/components/theme-picker.vue';
3035
import { version } from 'codeages-design/package.json';
3136
import { navMenu } from '@/data';
37+
import * as _ from 'lodash';
38+
39+
interface Nav {
40+
name: String,
41+
text: String,
42+
children: Nav[],
43+
}
3244
3345
@Component({
3446
components: {
3547
ThemePicker,
3648
},
3749
})
50+
3851
export default class extends Vue {
39-
navMenu: any[] = navMenu;
52+
navMenu: Nav[] = navMenu;
4053
routeName: string = null;
4154
chalk: string = (<any>window).chalk;
55+
childShow: Object = {};
56+
57+
resetNavMenu() {
58+
for (let i = 0;i < this.navMenu.length;i++) {
59+
const nav = this.navMenu[i];
60+
if (nav.children) {
61+
const index = _.findIndex(nav.children, item => item.name === this.routeName);
62+
if (index > -1) {
63+
this.navMenu[i] = (<any>Object).assign({}, this.navMenu[i], nav.children[index]);
64+
}
65+
}
66+
}
67+
}
4268
4369
created() {
4470
this.getRoute();
71+
this.resetNavMenu();
4572
}
4673
4774
getRoute() {
4875
this.routeName = this.$route.matched[0].name;
4976
}
5077
51-
switchNav(name) {
52-
this.$router.push({ name: name });
78+
switchNav(nav, parent) {
79+
if (nav.children) {
80+
this.$set(this.childShow, nav.name, !this.childShow[nav.name]);
81+
return;
82+
} else if (parent) {
83+
this.$set(this.childShow, nav.name, false);
84+
this.routeName = nav.name;
85+
this.resetNavMenu();
86+
}
87+
this.$router.push({ name: nav.name });
5388
}
5489
5590
pickerOk(oldColor, newColor) {

‎src/views/sidebar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
:key="submenuIndex"
1313
:class="{ active: routeName === submenu.name }"
1414
@click="switchNav(submenu.name)">
15-
<span>{{ submenu.text_zh }}</span>
1615
<span class="nav-en" v-if="!menu.isHideEn">{{ submenu.text_en }}</span>
16+
<span>{{ submenu.text_zh }}</span>
1717
</li>
1818
</ul>
1919
</div>

0 commit comments

Comments
 (0)