Skip to content

Commit bab8c56

Browse files
lucienstarvanoneang
lucienstar
authored and
vanoneang
committed
修改 select 多选时的选项颜色， 修改浮标文字没有居中 (#188)
* style(src/components/layout/SideBar.vue): 菜单文字过长则显示省略号 菜单文字过长则显示省略号 * style(修改通知组件默认样式): * style(linCmsUi): 修改 Notification 通知组件 Icon 样式 * feat(linCmsUi): 新增步骤条组件展示页 新增步骤条组件展示页 * style(linCmsUi): 修改 select 多选时的选项颜色， 修改浮标文字没有居中
1 parent 37e44bc commit bab8c56

File tree

5 files changed

+298
-6
lines changed

5 files changed

+298
-6
lines changed

‎src/assets/styles/realize/element-variables.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -847,3 +847,30 @@ $typeMap: (primary:#3963BC,
847847
color: #3963BC;
848848
}
849849
}
850+
851+
/* select */
852+
@include b(select) {
853+
.el-tag {
854+
background-color: #3963bc !important;
855+
&__close.el-icon-close {
856+
background-color: #3963bc;
857+
right: -7px;
858+
top: 0;
859+
color: #fff;
860+
861+
&:hover {
862+
background-color: #fff;
863+
color: #3963bc;
864+
}
865+
}
866+
}
867+
}
868+
869+
/* Badge */
870+
871+
@include b(badge) {
872+
@include e(content) {
873+
vertical-align: super;
874+
}
875+
}
876+

‎src/components/notify/notify.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,14 +191,12 @@ export default {
191191
overflow: hidden;
192192
color: #c4c9d2;
193193
}
194-
</style>
195-
<style>
196-
.el-badge__content.is-fixed {
194+
.notify /deep/ .el-badge__content.is-fixed {
197195
transform-origin: center center;
198196
transform: translateY(-50%) translateX(100%) scale(0.8) !important;
199197
}
200198
201-
.el-badge__content {
199+
.notify /deep/ .el-badge__content {
202200
border: 1px solid transparent !important;
203201
line-height: 20px !important;
204202
}

‎src/config/stage/plugins.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// 本文件是自动生成, 请勿修改
2-
import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
32
import custom from '@/plugins/custom/stage-config'
3+
import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
44

55
const pluginsConfig = [
6-
LinCmsUi,
76
custom,
7+
LinCmsUi,
88
]
99

1010
export default pluginsConfig

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,16 @@ const LinCmsUiRouter = {
132132
icon: 'iconfont icon-jiemiansheji',
133133
right: null,
134134
},
135+
{
136+
title: 'Steps 步骤条',
137+
type: 'view',
138+
name: null,
139+
route: '/lin-cms-ui/navigation/steps',
140+
filePath: 'plugins/LinCmsUi/views/navigation/Steps.vue',
141+
inNav: true,
142+
icon: 'iconfont icon-jiemiansheji',
143+
right: null,
144+
},
135145
],
136146
},
137147
{

‎src/plugins/LinCmsUi/views/navigation/Steps.vue‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<template>
2+
<div class="lin-container">
3+
<div class="lin-title">Steps 步骤条</div>
4+
<div class="lin-wrap-ui">
5+
<el-card style="margin-bottom:50px;">
6+
<div slot="header">
7+
<span>基础用法</span>
8+
</div>
9+
<el-row>
10+
<div>
11+
<el-steps :active="active" finish-status="success">
12+
<el-step title="步骤 1"></el-step>
13+
<el-step title="步骤 2"></el-step>
14+
<el-step title="步骤 3"></el-step>
15+
</el-steps>
16+
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
17+
</div>
18+
</el-row>
19+
<el-collapse>
20+
<el-collapse-item title="查看代码" name="2">
21+
<div style="white-space: pre-wrap;">{{base}}</div>
22+
</el-collapse-item>
23+
</el-collapse>
24+
</el-card>
25+
<el-card style="margin-bottom:50px;">
26+
<div slot="header">
27+
<span>含状态步骤条</span>
28+
</div>
29+
<el-row>
30+
<div>
31+
<el-steps :space="200" :active="1" finish-status="success">
32+
<el-step title="已完成"></el-step>
33+
<el-step title="进行中"></el-step>
34+
<el-step title="步骤 3"></el-step>
35+
</el-steps>
36+
</div>
37+
</el-row>
38+
<el-collapse class="test" style="color:red;">
39+
<el-collapse-item title="查看代码" name="2">
40+
<div style="white-space: pre-wrap;">{{title}}</div>
41+
</el-collapse-item>
42+
</el-collapse>
43+
</el-card>
44+
<el-card style="margin-bottom:50px;">
45+
<div slot="header">
46+
<span>有描述的步骤条</span>
47+
</div>
48+
<el-row>
49+
<div>
50+
<el-steps :active="1">
51+
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
52+
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
53+
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
54+
</el-steps>
55+
</div>
56+
</el-row>
57+
<el-collapse class="test" style="color:red;">
58+
<el-collapse-item title="查看代码" name="2">
59+
<div style="white-space: pre-wrap;">{{description}}</div>
60+
</el-collapse-item>
61+
</el-collapse>
62+
</el-card>
63+
64+
<el-card style="margin-bottom:50px;">
65+
<div slot="header">
66+
<span>居中的步骤条</span>
67+
</div>
68+
<el-row>
69+
<div>
70+
<el-steps :active="2" align-center>
71+
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
72+
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
73+
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
74+
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
75+
</el-steps>
76+
</div>
77+
</el-row>
78+
<el-collapse>
79+
<el-collapse-item title="查看代码" name="2">
80+
<div style="white-space: pre-wrap;">{{alignCenter}}</div>
81+
</el-collapse-item>
82+
</el-collapse>
83+
</el-card>
84+
85+
<el-card style="margin-bottom:50px;">
86+
<div slot="header">
87+
<span>带图标的步骤条</span>
88+
</div>
89+
<el-row>
90+
<div>
91+
<el-steps :active="1">
92+
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
93+
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
94+
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
95+
</el-steps>
96+
</div>
97+
</el-row>
98+
<el-collapse>
99+
<el-collapse-item title="查看代码" name="2">
100+
<div style="white-space: pre-wrap;">{{icon}}</div>
101+
</el-collapse-item>
102+
</el-collapse>
103+
</el-card>
104+
105+
<el-card style="margin-bottom:50px;">
106+
<div slot="header">
107+
<span>竖式步骤条</span>
108+
</div>
109+
<el-row>
110+
<div>
111+
<div style="height: 300px;">
112+
<el-steps direction="vertical" :active="1">
113+
<el-step title="步骤 1"></el-step>
114+
<el-step title="步骤 2"></el-step>
115+
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
116+
</el-steps>
117+
</div>
118+
</div>
119+
</el-row>
120+
<el-collapse>
121+
<el-collapse-item title="查看代码" name="2">
122+
<div style="white-space: pre-wrap;">{{vertical}}</div>
123+
</el-collapse-item>
124+
</el-collapse>
125+
</el-card>
126+
127+
<el-card style="margin-bottom:50px;">
128+
<div slot="header">
129+
<span>简洁风格的步骤条</span>
130+
</div>
131+
<el-row>
132+
<div>
133+
<el-steps :active="1" simple>
134+
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
135+
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
136+
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
137+
</el-steps>
138+
139+
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
140+
<el-step title="步骤 1" ></el-step>
141+
<el-step title="步骤 2" ></el-step>
142+
<el-step title="步骤 3" ></el-step>
143+
</el-steps>
144+
</div>
145+
</el-row>
146+
<el-collapse>
147+
<el-collapse-item title="查看代码" name="2">
148+
<div style="white-space: pre-wrap;">{{simple}}</div>
149+
</el-collapse-item>
150+
</el-collapse>
151+
</el-card>
152+
</div>
153+
</div>
154+
</template>
155+
156+
<script>
157+
export default {
158+
/* eslint-disable */
159+
name: 'LinCmsUiButton',
160+
components: {},
161+
data() {
162+
return {
163+
active: 0,
164+
base: `
165+
<el-steps :active="active" finish-status="success">
166+
<el-step title="步骤 1"></el-step>
167+
<el-step title="步骤 2"></el-step>
168+
<el-step title="步骤 3"></el-step>
169+
</el-steps>
170+
171+
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
172+
173+
<script>
174+
export default {
175+
data() {
176+
return {
177+
active: 0
178+
};
179+
},
180+
181+
methods: {
182+
next() {
183+
if (this.active++ > 2) this.active = 0;
184+
}
185+
}
186+
}
187+
<\/script>`,
188+
title: `
189+
<el-steps :space="200" :active="1" finish-status="success">
190+
<el-step title="已完成"></el-step>
191+
<el-step title="进行中"></el-step>
192+
<el-step title="步骤 3"></el-step>
193+
</el-steps>`,
194+
alignCenter: `
195+
<el-steps :active="2" align-center>
196+
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
197+
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
198+
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
199+
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
200+
</el-steps>`,
201+
description: `
202+
<el-steps :active="1">
203+
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
204+
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
205+
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
206+
</el-steps>`,
207+
icon: `
208+
<el-steps :active="1">
209+
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
210+
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
211+
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
212+
</el-steps>`,
213+
vertical: `
214+
<div style="height: 300px;">
215+
<el-steps direction="vertical" :active="1">
216+
<el-step title="步骤 1"></el-step>
217+
<el-step title="步骤 2"></el-step>
218+
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
219+
</el-steps>
220+
</div>`,
221+
simple: `
222+
<el-steps :active="1" simple>
223+
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
224+
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
225+
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
226+
</el-steps>
227+
228+
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
229+
<el-step title="步骤 1" ></el-step>
230+
<el-step title="步骤 2" ></el-step>
231+
<el-step title="步骤 3" ></el-step>
232+
/el-steps>`,
233+
}
234+
},
235+
// 计算属性设置
236+
computed: {},
237+
// 数据变更监听
238+
watch: {},
239+
mounted() {
240+
this.init()
241+
},
242+
methods: {
243+
next() {
244+
if (this.active++ > 2) this.active = 0
245+
},
246+
// 执行获取数据等初始化动作
247+
init() {},
248+
},
249+
}
250+
</script>
251+
252+
<style lang="scss" scoped>
253+
@import '../../assets/style/container';
254+
.el-link+.el-link {
255+
margin-left: 30px;
256+
}
257+
</style>

0 commit comments

Comments
 (0)