Skip to content

Commit a2e1750

Browse files
vanoneanggongjs
vanoneang
authored and
gongjs
committed
Component (#127)
* fix:UI插件 * optimize: 调整reuse宽度 * fix:temp * fix: 修改table样式 * merge * perf(user): optimize ui * table样式 * feat(table): 添加组合示例 * fix * optimize: ui
1 parent d496808 commit a2e1750

29 files changed

Lines changed: 14235 additions & 87 deletions

File tree

‎public/iconfont.css‎

Lines changed: 38 additions & 6 deletions
Large diffs are not rendered by default.

‎src/App.vue‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -56,23 +56,3 @@ export default {
5656
}
5757
}
5858
</style>
59-
60-
<style>
61-
::-webkit-scrollbar-track-piece {
62-
background-color: #273b6f;
63-
}
64-
65-
::-webkit-scrollbar {
66-
width: 0px;
67-
height: 0px;
68-
}
69-
70-
::-webkit-scrollbar-thumb {
71-
background-color: rgba(22, 37, 87, 0.7);
72-
background-clip: padding-box;
73-
}
74-
75-
::-webkit-scrollbar-thumb:hover {
76-
background-color: #bbb;
77-
}
78-
</style>

‎src/assets/img/user/corner.png‎

836 Bytes
Loading

‎src/assets/img/user/user-bg.png‎

3.75 KB
Loading

‎src/assets/styles/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@import './realize/animation';
44
@import './realize/transition';
55
@import './realize/global';
6-
@import './realize/elementUi';
76

87
.lin-container {
98
.lin-title {

src/assets/styles/realize/elementUi.scss renamed to src/assets/styles/realize/element-variables.scss

Lines changed: 159 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,116 @@
1-
@import './variable.scss';
1+
/* 改变主题色变量 */
2+
$--color-primary: #3963bc;
3+
4+
$--color-primary: #3963bc;
5+
$--color-success: #00c292 !default;
6+
$--color-warning: #dee2e6 !default;
7+
$--color-danger: #f4516c !default;
8+
9+
/* 改变 icon 字体路径变量，必需 */
10+
$--font-path: "~element-ui/lib/theme-chalk/fonts";
11+
12+
@import "~element-ui/packages/theme-chalk/src/index";
13+
14+
@import "./lin-variables.scss";
15+
16+
// button
17+
.el-button {
18+
padding: 8px 16px;
19+
border-radius: 2px;
20+
&.el-button--mini {
21+
padding:5px 12px;
22+
}
23+
}
24+
.el-button--primary.is-plain,
25+
.el-button--success.is-plain,
26+
.el-button--info.is-plain,
27+
.el-button--danger.is-plain,
28+
.el-button--warning.is-plain {
29+
background: #fff;
30+
}
31+
.el-button--primary {
32+
&.is-plain {
33+
color: #3963bc;
34+
background: #fff;
35+
border: 1px solid #3963bc;
36+
}
37+
&:hover,
38+
&:focus {
39+
background: #0037ad;
40+
border: 1px solid #0037ad;
41+
}
42+
}
43+
.el-button--success {
44+
&.is-plain {
45+
color: #34bfa3;
46+
background: #fff;
47+
border: 1px solid #34bfa3;
48+
}
49+
&:hover,
50+
&:focus {
51+
background: #009d72;
52+
border: 1px solid #009d72;
53+
}
54+
}
55+
.el-button--danger {
56+
&.is-plain {
57+
color: #f4516c;
58+
background: #fff;
59+
border: 1px solid #f4516c;
60+
}
61+
&:hover,
62+
&:focus {
63+
background: #d62f40;
64+
border: 1px solid #d62f40;
65+
}
66+
}
67+
.el-button--warning {
68+
color: #8c98ae;
69+
&.is-plain {
70+
color: #8c98ae;
71+
background: #fff;
72+
border: 1px solid #8c98ae;
73+
&:hover,
74+
&:focus {
75+
background: #8c98ae;
76+
color: #fff;
77+
border: 1px solid #8c98ae;
78+
}
79+
&.is-disabled {
80+
color: #8c98ae;
81+
background: #fff;
82+
border: 1px solid #8c98ae;
83+
opacity: 0.5;
84+
&:hover,
85+
&:focus {
86+
color: #8c98ae;
87+
background: #fff;
88+
border: 1px solid #8c98ae;
89+
opacity: 0.5;
90+
}
91+
}
92+
}
93+
94+
&:hover,
95+
&:focus {
96+
color: #8c98ae;
97+
background: #bfcbd7;
98+
border: 1px solid #bfcbd7;
99+
}
100+
&.is-disabled {
101+
background: #dee2e6;
102+
color: #8c98ae;
103+
border: 1px solid #dee2e6;
104+
opacity: 0.5;
105+
&:hover,
106+
&:focus {
107+
background: #dee2e6;
108+
color: #8c98ae;
109+
border: 1px solid #dee2e6;
110+
opacity: 0.5;
111+
}
112+
}
113+
}
2114

3115
// checkbox
4116
.module-box .module .el-checkbox__label {
@@ -130,10 +242,30 @@
130242

131243
// table
132244
.el-table {
245+
border-top: 1px solid $table-border-color;
133246
border-left: 1px solid $table-border-color;
134247
border-right: 1px solid $table-border-color;
135248
}
136249

250+
.el-table:not(.el-table--border) {
251+
td {
252+
border: none;
253+
}
254+
}
255+
.el-table--border {
256+
border-right: none !important;
257+
table {
258+
border-top: none !important;
259+
}
260+
}
261+
262+
.el-table .cell {
263+
display: flex;
264+
margin-top: 2px;
265+
margin-bottom: 2px;
266+
padding-left: 20px;
267+
}
268+
137269
.el-table thead tr th .cell {
138270
color: #333;
139271
font-weight: 500;
@@ -150,35 +282,25 @@
150282
thead tr {
151283
height: 62px;
152284
}
153-
154-
tr:nth-child(odd) {
155-
background-color: #f8f9fa;
285+
.el-table__body tr {
286+
height: 52px;
156287
}
157-
158-
th:not(:last-child) {
159-
border: none !important;
288+
.el-table th, .el-table td {
289+
padding: 9px 0px;
160290
}
161-
162-
td {
163-
border: none !important;
291+
.el-table--striped .el-table__body tr {
292+
background: #f8f9fa;
164293
}
165-
166-
table {
167-
border-top: 1px solid #dee2e6;
294+
.el-table--striped .el-table__body tr.el-table__row--striped td {
295+
background: #fff;
168296
}
169-
170-
.el-table .cell {
171-
display: flex;
172-
margin-top: 2px;
173-
margin-bottom: 2px;
174-
padding-left: 20px;
297+
.el-table__body tr.current-row > td,
298+
.el-table__body tr.hover-row.current-row > td,
299+
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
300+
.el-table__body tr.hover-row.el-table__row--striped > td,
301+
.el-table__body tr.hover-row > td {
302+
background-color: #ecf5ff;
175303
}
176-
177-
.el-table th.is-leaf,
178-
.el-table td {
179-
border-bottom: none;
180-
}
181-
182304
// dialog
183305
.el-dialog__footer {
184306
text-align: left;
@@ -218,7 +340,7 @@ table {
218340
position: relative;
219341

220342
&:before {
221-
content: '';
343+
content: "";
222344
width: 4px;
223345
height: 4px;
224346
border-radius: 50%;
@@ -237,7 +359,7 @@ table {
237359
position: relative;
238360

239361
&:before {
240-
content: '';
362+
content: "";
241363
width: 6px;
242364
height: 6px;
243365
border-radius: 50%;
@@ -248,12 +370,13 @@ table {
248370
top: 23px;
249371
}
250372
}
251-
&.third { // 3级
373+
&.third {
374+
// 3级
252375
.el-menu-item {
253376
position: relative;
254-
377+
255378
&:before {
256-
content: '';
379+
content: "";
257380
width: 4px;
258381
height: 4px;
259382
border-radius: 50%;
@@ -263,16 +386,16 @@ table {
263386
top: 23px;
264387
}
265388
}
266-
389+
267390
.el-menu-item-group__title {
268391
padding: 0;
269392
}
270-
393+
271394
.el-menu-item.is-active {
272395
position: relative;
273-
396+
274397
&:before {
275-
content: '';
398+
content: "";
276399
width: 6px;
277400
height: 6px;
278401
border-radius: 50%;
@@ -347,8 +470,8 @@ table {
347470
height: $menuItem-height;
348471
transition: border-color 0s, background-color 0s, color 0s;
349472
}
350-
351-
.el-menu--inline{
473+
474+
.el-menu--inline {
352475
background: $menuItem-bg !important;
353476
&:hover {
354477
background-color: $menuItem-hover !important;

src/assets/styles/realize/variable.scss renamed to src/assets/styles/realize/lin-variables.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ $header-background: #EEF4F9;
1414
$right-side-font-color: #666666;
1515
$reuse-tab-item-background: #E9EDF7;
1616

17-
18-
/* 按键 */
19-
$button-background: #f8fafb;
20-
2117
$title-color: #45526b;
2218
$parent-title-color: #3963bc;
2319

‎src/assets/styles/share.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
@import "./realize/variable";
2+
@import "./realize/lin-variables";
33
@import "./realize/mixin";

‎src/components/base/source-code/source-code.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="wrapper" @click="showSourceCode">
3+
<i class="iconfont icon-daima1" style="font-size: 12px;margin-right:3px"></i>本页源码
4+
</div>
5+
</template>
6+
7+
8+
<script type="text/ecmascript-6">
9+
export default {
10+
props: {
11+
link: {
12+
type: String,
13+
default: 'https://github.com/TaleLin/lin-cms-vue',
14+
},
15+
},
16+
methods: {
17+
showSourceCode() {
18+
window.open(this.link)
19+
},
20+
},
21+
}
22+
</script>
23+
24+
<style lang="scss" scoped>
25+
.wrapper {
26+
user-select: none;
27+
cursor: pointer;
28+
opacity: 1;
29+
position: fixed;
30+
z-index: 9999;
31+
right: -11.5px;
32+
bottom: 20px;
33+
font-size: 12px;
34+
line-height: 12px;
35+
font-weight: 700;
36+
border-radius: 4px;
37+
padding: 7px 15px;
38+
padding-right: 19px;
39+
background-color: rgba(0,0,0,.7);
40+
border: 1px solid #000;
41+
color: #fff;
42+
-webkit-transition: all .3s;
43+
transition: all .3s;
44+
&:hover {
45+
right: -4px;
46+
background-color: rgba(0,0,0,.9);
47+
}
48+
}
49+
</style>

‎src/components/base/sticky-top/sticky-top.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
.wrapper {
99
position: sticky;
1010
top: 0;
11-
z-index: 1;
11+
z-index: 9;
12+
background:#fff;
1213
}
1314
</style>

0 commit comments

Comments
 (0)