Skip to content

Commit 118086c

Browse files
author
吴博
committed
元素布局和侧边栏
1 parent 588eb7d commit 118086c

File tree

15 files changed

+440
-53
lines changed

15 files changed

+440
-53
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules
22
npm-debug.log
33
.DS_Store
4-
.vscode
4+
.vscode
5+
.idea

‎src/assets/styles/common.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ pre {
3232
.site-main {
3333
position: fixed;
3434
top: 56px;
35-
left: 200px;
35+
left: 272px;
3636
right: 0;
3737
bottom: 0;
3838
overflow-y: auto;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
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/main.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55
@import './header.less';
66
@import './sidebar.less';
77
@import './homepage.less';
8+
@import './element-layout.less';

‎src/assets/styles/sidebar.less‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@
33
top: 56px;
44
left: 0;
55
bottom: 0;
6-
width: 200px;
6+
width: 272px;
77
overflow: auto;
88
background: #fff;
9+
border-right: 1px solid #eee;
910
box-shadow: 0 0 4px 0 rgba(0,0,0,0.01), 0 4px 4px 0 rgba(0,0,0,0.04);
1011
}
1112

1213
.site-sidebar__column__title {
13-
padding: 24px 16px 16px 24px;
14-
font-size: 12px;
15-
color: rgba(0, 0, 0, 0.32);
14+
padding: 20px 16px 12px 32px;
15+
font-family: PingFangSC-Medium;
16+
font-size: 14px;
17+
color: #333333;
18+
line-height: 20px;
1619
}
1720

1821
.site-sidebar__nav {
@@ -23,22 +26,22 @@
2326
li {
2427
font-size: 14px;
2528
line-height: 20px;
26-
color: rgba(0, 0, 0, 0.56);
27-
padding: 16px 16px 16px 32px;
28-
&:hover {
29-
cursor: pointer;
30-
.cd-hover-light;
31-
.cd-transition;
32-
.nav-en {
33-
.cd-hover-light;
34-
.cd-transition;
35-
}
36-
}
29+
color: #666;
30+
padding: 8px 16px 8px 44px;
31+
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+
//}
41+
&:hover,
3742
&.active {
38-
color: @brand-primary;
39-
.nav-en {
40-
color: @brand-primary;
41-
}
43+
box-shadow: inset -2px 0 0 0 @brand-primary;
44+
background-color: #f1f9ff;
4245
}
4346
.nav-en {
4447
font-size: 12px;

‎src/data/element-layout.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
const menu = [
2+
{
3+
'text': '元素样式',
4+
'children': [
5+
{
6+
'text_zh': '字体',
7+
'text_en': 'Font ',
8+
'name': 'element_Font'
9+
},
10+
{
11+
'text_zh': '颜色',
12+
'text_en': 'Color',
13+
'name': 'element_Color'
14+
},
15+
{
16+
'text_zh': '线条',
17+
'text_en': 'Line',
18+
'name': 'element_Line'
19+
},
20+
{
21+
'text_zh': '边角',
22+
'text_en': 'Corner',
23+
'name': 'element_Corner'
24+
},
25+
{
26+
'text_zh': '阴影',
27+
'text_en': 'Shadow',
28+
'name': 'element_Shadow'
29+
},
30+
{
31+
'text_zh': '图片',
32+
'text_en': 'Picture',
33+
'name': 'element_Picture'
34+
},
35+
{
36+
'text_zh': '图标',
37+
'text_en': 'Icon',
38+
'name': 'element_Icon'
39+
},
40+
{
41+
'text_zh': '文字链接',
42+
'text_en': 'Link',
43+
'name': 'element_Link'
44+
},
45+
]
46+
},
47+
{
48+
'text': '布局模式',
49+
'isHideEn': true,
50+
'children': [
51+
{
52+
'text_zh': '单位',
53+
'text_en': 'unit',
54+
'name': 'principle_unit'
55+
},
56+
{
57+
'text_zh': '方块',
58+
'text_en': 'block',
59+
'name': 'component_block'
60+
},
61+
{
62+
'text_zh': '间距',
63+
'text_en': 'gap',
64+
'name': 'component_gap'
65+
},
66+
{
67+
'text_zh': '栅格',
68+
'text_en': 'grid',
69+
'name': 'component_grid'
70+
},
71+
{
72+
'text_zh': '布局',
73+
'text_en': 'layout',
74+
'name': 'component_layout'
75+
},
76+
{
77+
'text_zh': '框架',
78+
'text_en': 'frame',
79+
'name': 'component_frame'
80+
},
81+
]
82+
},
83+
]
84+
const data = [];
85+
86+
menu.map(item => {
87+
data.push(...item.children);
88+
});
89+
90+
export default menu;

‎src/data/index.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ const componentMenu:any[] = [
174174
'text_en': 'Pagination',
175175
'name': 'component_pagination'
176176
}
177-
]
177+
]
178178
},
179179
{
180180
'text': '提示 Hint',
@@ -203,7 +203,7 @@ const componentMenu:any[] = [
203203
'text_zh': '加载中',
204204
'text_en': 'Loading',
205205
'name': 'component_loading'
206-
}
206+
}
207207
]
208208
},
209209
{
@@ -222,17 +222,14 @@ const navMenu:any[] = [
222222
{
223223
'text': '首页',
224224
'name': 'homepage'
225-
},
225+
},
226226
{
227227
'text': '原则策略',
228228
'name': 'principle',
229-
children: [
230-
231-
]
232229
},
233230
{
234231
'text': '元素布局',
235-
'name': 'layout'
232+
'name': 'element-layout'
236233
},
237234
{
238235
'text': '组件',
@@ -254,4 +251,4 @@ export {
254251
componentMenu,
255252
navMenu,
256253
componentData
257-
};
254+
};

‎src/data/principle.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
const menu = [
2+
{
3+
'text': 'Codeages Design',
4+
isHideEn: true,
5+
'children': [
6+
{
7+
'text_zh': '简介',
8+
'text_en': 'desc',
9+
'name': 'principle_desc'
10+
},
11+
{
12+
'text_zh': '价值观',
13+
'text_en': 'value',
14+
'name': 'component_value'
15+
},
16+
{
17+
'text_zh': '适用边界',
18+
'text_en': 'boundary',
19+
'name': 'component_boundary'
20+
},
21+
{
22+
'text_zh': '更新日志',
23+
'text_en': 'update_log',
24+
'name': 'component_update_log'
25+
},
26+
]
27+
},
28+
{
29+
'text': '设计共性',
30+
isHideEn: true,
31+
'children': [
32+
{
33+
'text_zh': '一致性',
34+
'text_en': 'coherence',
35+
'name': 'principle_coherence'
36+
},
37+
{
38+
'text_zh': '可控性',
39+
'text_en': 'controlled',
40+
'name': 'component_controlled'
41+
},
42+
{
43+
'text_zh': '亲密性',
44+
'text_en': 'familiarity',
45+
'name': 'component_familiarity'
46+
},
47+
{
48+
'text_zh': '友好性',
49+
'text_en': 'friendly',
50+
'name': 'component_friendly'
51+
},
52+
{
53+
'text_zh': '安全性',
54+
'text_en': 'safety',
55+
'name': 'component_safety'
56+
},
57+
]
58+
},
59+
{
60+
text: '设计原则',
61+
isHideEn: true,
62+
children: [
63+
{
64+
text_zh: '重点突出',
65+
text_en: 'importance',
66+
name: 'principle_importance'
67+
},
68+
{
69+
text_zh: '对齐',
70+
text_en: 'align',
71+
name: 'principle_align'
72+
},
73+
{
74+
text_zh: '重复',
75+
text_en: 'repetition',
76+
name: 'principle_repetition'
77+
},
78+
{
79+
text_zh: '足不出户',
80+
text_en: 'keep_in_doors',
81+
name: 'principle_keep_in_doors'
82+
},
83+
{
84+
text_zh: '简化交互',
85+
text_en: 'interaction',
86+
name: 'principle_interaction'
87+
},
88+
{
89+
text_zh: '巧用过渡',
90+
text_en: 'transform',
91+
name: 'principle_transform'
92+
},
93+
{
94+
text_zh: '及时反馈',
95+
text_en: 'couple_back',
96+
name: 'principle_couple_back'
97+
}
98+
]
99+
},
100+
{
101+
text: '全局规则',
102+
isHideEn: true,
103+
children: [
104+
{
105+
text_zh: '导航',
106+
text_en: 'navigation',
107+
name: 'principle_navigation'
108+
},
109+
{
110+
text_zh: '消息与反馈',
111+
text_en: 'messages',
112+
name: 'principle_messages'
113+
},
114+
{
115+
text_zh: '空状态',
116+
text_en: 'dummy_status',
117+
name: 'principle_dummy_status'
118+
},
119+
]
120+
},
121+
{
122+
text: '动效',
123+
children: [],
124+
},
125+
{
126+
text: '可视化',
127+
children: [],
128+
}
129+
]
130+
const data = [];
131+
132+
menu.map(item => {
133+
data.push(...item.children);
134+
});
135+
136+
export default menu;

‎src/router/element-layout.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { principleData } from '@/data/element-layout.js';
2+
3+
const rules = [];
4+
5+
principleData.map((item) => {
6+
rules.push({
7+
path: item.text_en.toLowerCase(),
8+
name: item.name,
9+
meta: {
10+
title: item.text_zh,
11+
},
12+
component: (resolve) => require([`@/views/element-layout/${item.text_en.toLowerCase()}.vue`], resolve),
13+
})
14+
});
15+
16+
export default rules;

0 commit comments

Comments
 (0)