element-ui修改el-steps默认样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
默认样式:
<template>
<div>
<el-steps :active=values space="400px" align-center>
<el-step :title="item.title" :description="item.date" v-for="(item,index) in stepsData" :key="index">
</el-step>
</el-steps>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepsData: [
{
title: '启动',
date: ''
},
{
title: '发布',
date: ''
},
{
title: '洽谈',
date: ''
},
{
title: '规划',
date: ''
},
{
title: '签约',
date: ''
},
{
title: '落项',
date: ''
},
],
values: 3
}
}
}
</script>
修改后样式:
代码只修改样式
代码如下:
<style scoped>
/*---------步骤条样式---start------*/
$border-sizes: 3px;
$background_color: #C0C4CC;
$el-step-icon-height: 40px;
$el-step-icon-width: 40px;
$el-step-icon-font-size: 24px;
$el-step-icon-background: #FFF;
$el-step-icon-margin: 2.5%;
$is-finish-background: #EB6F67;
$el-step_title_is-process: #666666;
$el-step__description_is-finish: #999999;
/*---------步骤条样式---end------*/
.text-color {
color: white;
}
/*步骤条样式修改------------start----------*/
/*is-finish 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish {
color: $is-finish-background !important;
border-color: $is-finish-background !important;
}
/*is-process 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process {
color: $background_color;
border-color: $background_color;
}
/*is-wait 圆圈颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait {
color: $background_color;
border-color: $background_color;
}
/*is-finish title 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-finish {
color: $el-step_title_is-process;
font-weight: 700;
}
/*is-process title 颜色*/
.el-steps.el-steps--horizontal[data-v-9ebad220] .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
font-weight: 700;
color:$el-step_title_is-process;
}
/*description 颜色*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__description.is-finish {
color: $el-step__description_is-finish;
}
/*is-finish 进程结束,is-process 状态颜色非加粗*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__title.is-process {
font-weight: 700;
color: $el-step_title_is-process;
}
/* is-finish line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__line {
position: absolute;
border-color: inherit;
background-color: $is-finish-background;
margin-top: $el-step-icon-margin;
border: $border-sizes solid;
}
/* is-process line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__line {
border-color: inherit;
background-color: $background_color;
margin-top: $el-step-icon-margin;
border: $border-sizes solid;
}
/* is-wait line连线粗细*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__line {
border-color: inherit;
background-color: $background_color;
margin-top: $el-step-icon-margin;
border: $border-sizes solid;
}
/* 已完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-finish /deep/ .el-step__icon {
z-index: 1;
width: $el-step-icon-width;
height: $el-step-icon-height;
font-size: $el-step-icon-font-size;
border: $border-sizes solid;
background: $el-step-icon-background;
}
/* 过度点 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-process /deep/ .el-step__icon {
z-index: 1;
width: $el-step-icon-width;
height: $el-step-icon-height;
border: $border-sizes solid;
font-size: $el-step-icon-font-size;
background:$el-step-icon-background;
color: $is-finish-background !important;
border-color: $is-finish-background !important;
}
/* 未完成 圆圈大小修改*/
.el-steps.el-steps--horizontal /deep/ .el-step.is-horizontal.is-center /deep/ .el-step__head.is-wait /deep/ .el-step__icon {
z-index: 1;
width: $el-step-icon-width;
height: $el-step-icon-height;
font-size: $el-step-icon-font-size;
border: $border-sizes solid;
background:$el-step-icon-background;
}
/*步骤条样式修改------------end----------*/
</style>
能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)