drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

optimize steps

Browse source 
to fixed steps line in other background-color problem
This commit is contained in:
mo.duan 2019-09-17 10:43:33 +08:00
parent 13492f7e7b
commit 98bd5fd443
2 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/routers/steps.vue
View file

@ -1,8 +1,13 @@
<style>
.ivu-steps{
background: greenyellow;
}
</style>
<template>
<div>
<Steps :current="index">
<!--<Step title="开始"></Step>-->
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
<Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index"></Step>
<!--<Step title="结束"></Step>-->
</Steps>
<Button @click="change">change</Button>

36
src/styles/components/steps.less
View file

@ -128,9 +128,6 @@
display: inline-block;
vertical-align: top;
}
.@{steps-prefix-cls}-head {
background: #fff;
}
.@{steps-prefix-cls}-head-inner {
display: block;
@ -172,8 +169,6 @@
font-size: 14px;
font-weight: bold;
color: #666;
background: #fff;
> a:first-child:last-child {
color: #666;
}
@ -342,12 +337,39 @@
&.@{steps-prefix-cls}-hidden {
visibility: hidden;
}
.@{steps-prefix-cls}-tail {
display: none;
}
.@{steps-prefix-cls}-content {
//max-width: 100px;
padding-left: 35px;
padding-left: 45px;
}
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
padding-left: 10px;
margin-left: -10px;
}
.@{steps-prefix-cls}-item {
overflow: hidden;
&:last-child .@{steps-prefix-cls}-title:after{
display: none;
}
}
.@{steps-prefix-cls}-title {
position: relative;
&:after{
content: '';
position: absolute;
width: 9999px;
height: 1px;
left: 100%;
top: 50%;
background: @border-color-split;
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-title:after {
background: @primary-color;
transition: all @transition-time @ease-in-out;
opacity: 1;
}
}
}