Skip to content

Commit 212be74

Browse files
wangtunanwangtunan
committed
重构badge组件样式
1 parent a192201 commit 212be74

File tree

5 files changed

+72
-112
lines changed

5 files changed

+72
-112
lines changed

‎src/assets/theme/mixin/badge-mixin.styl

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
badge-status($primaryColor, $successColor, $warningColor, $dangerColor, $infoColor)
2-
&-primary
3-
background-color: $primaryColor;
4-
&-success
5-
background-color: $successColor;
6-
&-warning
7-
background-color: $warningColor;
8-
&-danger
9-
background-color: $dangerColor;
10-
&-info
11-
background-color: $infoColor;
1+
badge-type($types, $colors)
2+
for type, index in $types
3+
&-{type}
4+
background-color: $colors[index];

‎src/assets/theme/src/badge-variables.styl

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ $badge-veritcal-padding = 0
22
$badge-horizontal-padding = 6px
33
$badge-size = 18px
44
$badge-border-radius = 10px
5-
$badge-border-width = 1px
6-
$badge-border-style = solid
7-
$badge-border-color = #fff
85
$badge-font-size = 12px
96
$badge-color = #fff
107
$badge-dot-size = 8px
11-
$badge-dot-absolute-right = 5px
8+
$badge-dot-absolute-right = 5px
9+
$badge-types = primary success warning danger info

‎src/base/badge/badge.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,16 @@ export default {
6464
.mooc-badge
6565
position: relative;
6666
display: inline-block;
67-
vertical-align: middle;
6867
.mooc-badge-content
6968
display: inline-block;
7069
padding: $badge-veritcal-padding $badge-horizontal-padding;
7170
height: $badge-size;
7271
line-height: $badge-size;
7372
border-radius: $badge-border-radius;
7473
background-color: $base-danger;
75-
border: $badge-border-width $badge-border-style $badge-border-color;
7674
color: $badge-color;
7775
font-size: $badge-font-size;
78-
badge-status($base-primary, $base-success, $base-warning, $base-danger, $base-info);
76+
badge-type($badge-types, $base-primary $base-success $base-warning $base-danger $base-info);
7977
&.is-absolute
8078
position: absolute;
8179
top: 0;

‎src/base/timeline-item/timeline-item.vue

Lines changed: 62 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,47 @@
11
<template>
2-
<li class="timeline-item">
3-
<div class="timeline-item-line" />
2+
<div class="mooc-timeline-item">
3+
<!-- line -->
4+
<div class="mooc-timeline-item-line"></div>
45

6+
<!-- dot -->
57
<div
68
v-if="!$slots.dot"
7-
class="timeline-item-dot"
9+
class="mooc-timeline-item-dot"
810
:style="{
911
'background-color': color
1012
}"
1113
:class="[
12-
`timeline-item-dot-${size || ''}`,
13-
`timeline-item-dot-${type || ''}`
14+
type && `mooc-timeline-item-dot-${type}`,
15+
size && `mooc-timeline-item-dot-${size}`
1416
]"
15-
/>
16-
17-
<div v-if="$slots.dot" class="timeline-item-dot-customer">
18-
<slot name="dot" />
19-
</div>
17+
></div>
18+
<div v-else class="mooc-timeline-item-dot-customer">
19+
<slot name="dot"></slot>
20+
</div>
2021

21-
<div class="timeline-item-wrapper">
22-
<div v-if="!hideTimestamp && placement==='top'" class="timeline-item-timestamp top">
22+
<!-- content -->
23+
<div class="mooc-timeline-item-wrapper">
24+
<div
25+
v-if="!hideTimestamp && placement == 'top'"
26+
class="mooc-timeline-item-timestamp is-top"
27+
>
2328
{{ timestamp }}
2429
</div>
25-
26-
<div class="timeline-item-content">
27-
<slot />
30+
<div class="mooc-timeline-item-content">
31+
<slot></slot>
2832
</div>
29-
30-
<div v-if="!hideTimestamp && placement==='bottom'" class="timeline-item-timestamp bottom">
33+
<div
34+
v-if="!hideTimestamp && placement == 'bottom'"
35+
class="mooc-timeline-item-timestamp is-bottom"
36+
>
3137
{{ timestamp }}
3238
</div>
3339
</div>
34-
</li>
40+
</div>
3541
</template>
42+
3643
<script>
44+
import { baseType } from 'assets/js/mooc.config.js'
3745
export default {
3846
name: 'MoocTimelineItem',
3947
props: {
@@ -49,86 +57,63 @@ export default {
4957
return ['top', 'bottom'].includes(val)
5058
}
5159
},
52-
size: {
60+
color: String,
61+
type: {
5362
type: String,
54-
default: 'small',
5563
validator (val) {
56-
return ['small', 'normal', 'medium', 'large'].includes(val)
64+
return baseType.includes(val)
5765
}
5866
},
59-
type: {
67+
size: {
6068
type: String,
69+
default: 'small',
6170
validator (val) {
62-
return ['primary', 'success', 'warning', 'danger', 'info'].includes(val)
63-
}
64-
},
65-
color: String
71+
return ['small', 'normal', 'medium', 'large'].includes(val)
72+
}
73+
}
6674
}
6775
}
6876
</script>
6977
<style lang="stylus" scoped>
7078
@import '~assets/theme/variables.styl';
7179
@import '~assets/theme/src/timeline-variables.styl';
72-
.timeline-item
80+
@import '~assets/theme/mixin/timeline-mixin.styl';
81+
.mooc-timeline-item
7382
position: relative;
7483
padding-bottom: $timeline-item-padding-bottom;
7584
&:last-child
76-
.timeline-item-line
85+
.mooc-timeline-item-line
7786
display: none;
78-
&-line
87+
.mooc-timeline-item-line
7988
position: absolute;
80-
left: 4px;
89+
left: $timeline-item-line-left;
8190
top: 0;
8291
height: 100%;
83-
border-left: 2px solid $timeline-item-dot-color;
84-
&-dot
92+
border-left: $timeline-item-border-left-size $timeline-item-border-left-style $base-border-second-color;
93+
.mooc-timeline-item-dot
8594
position: absolute;
8695
top: 0;
87-
border-radius: 50%;
88-
background-color: $timeline-item-dot-color;
89-
&-small
90-
left: -1px;
91-
width: $timeline-item-dot-small-size;
92-
height: $timeline-item-dot-small-size;
93-
&-normal
94-
left: -2px;
95-
width: $timeline-item-dot-normal-size;
96-
height: $timeline-item-dot-normal-size;
97-
&-medium
98-
left: -3px
99-
width: $timeline-item-dot-medium-size;
100-
height: $timeline-item-dot-medium-size;
101-
&-large
102-
left: -4px
103-
width: $timeline-item-dot-large-size;
104-
height: $timeline-item-dot-large-size;
105-
&-primary
106-
background-color: $base-primary;
107-
&-success
108-
background-color: $base-success;
109-
&-warning
110-
background-color: $base-warning;
111-
&-danger
112-
background-color: $base-danger;
113-
&-info
114-
background-color: $base-info;
115-
&-dot-customer
116-
position: absolute;
117-
display: flex;
118-
justify-content: center;
119-
align-items: center;
120-
&-wrapper
96+
border-radius: $base-border-radius-circle;
97+
background-color: $base-border-second-color;
98+
timeline-status($timeline-item-small-left, $timeline-item-small-size, $timeline-item-status-args);
99+
timeline-type($timeline-item-type-args, $base-primary $base-success $base-warning $base-danger $base-info);
100+
&-customer
101+
position: absolute;
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
.mooc-timeline-item-wrapper
121106
position: relative;
122107
top: 0;
123108
padding-left: $timeline-item-wrapper-padding-left;
124-
.timeline-item-content
125-
line-height: 1;
126-
color: $timeline-item-title-color;
127-
.timeline-item-timestamp
128-
color: $base-info;
129-
line-height: 1;
130-
&.top
131-
margin-bottom: 8px;
132-
&.bottom
133-
margin-top: 8px;
134-
</style>
109+
.mooc-timeline-item-content
110+
line-height: $timeline-item-content-line-height;
111+
color: $base-font-first-color;
112+
.mooc-timeline-item-timestamp
113+
color: $base-info
114+
line-height: $timeline-item-content-line-height;
115+
&.is-top
116+
margin-bottom: $timeline-item-timestamp-margin;
117+
&.is-bottom
118+
margin-top: $timeline-item-timestamp-margin;
119+
</style>

‎src/pages/test/test.vue

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,8 @@
11
<template>
22
<div class="test">
3-
<mooc-timeline>
4-
<mooc-timeline-item size="small" type="primary" timestamp="2019-11-12 17:53:56">
5-
123
6-
</mooc-timeline-item>
7-
<mooc-timeline-item size="normal" type="success" timestamp="2019-11-11 17:53:56">
8-
456
9-
</mooc-timeline-item>
10-
<mooc-timeline-item size="medium" type="warning" timestamp="2019-11-12 17:53:56">
11-
789
12-
</mooc-timeline-item>
13-
<mooc-timeline-item size="large" type="danger" timestamp="2019-11-11 17:53:56">
14-
123
15-
</mooc-timeline-item>
16-
<mooc-timeline-item size="large" type="info" timestamp="2019-11-11 17:53:56">
17-
456
18-
</mooc-timeline-item>
19-
</mooc-timeline>
3+
<mooc-badge value="9" type="success">
4+
12312
5+
</mooc-badge>
206
</div>
217
</template>
228
<script>

0 commit comments

Comments
 (0)