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> <template>
<div> <div>
<Steps :current="index"> <Steps :current="index">
<!--<Step title="开始"></Step>--> <!--<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>--> <!--<Step title="结束"></Step>-->
</Steps> </Steps>
<Button @click="change">change</Button> <Button @click="change">change</Button>

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

@ -128,9 +128,6 @@
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.@{steps-prefix-cls}-head {
background: #fff;
}
.@{steps-prefix-cls}-head-inner { .@{steps-prefix-cls}-head-inner {
display: block; display: block;
@ -172,8 +169,6 @@
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
background: #fff;
> a:first-child:last-child { > a:first-child:last-child {
color: #666; color: #666;
} }
@ -342,12 +337,39 @@
&.@{steps-prefix-cls}-hidden { &.@{steps-prefix-cls}-hidden {
visibility: hidden; visibility: hidden;
} }
.@{steps-prefix-cls}-tail {
display: none;
}
.@{steps-prefix-cls}-content { .@{steps-prefix-cls}-content {
//max-width: 100px; //max-width: 100px;
padding-left: 35px; padding-left: 45px;
} }
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head { .@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
padding-left: 10px; 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;
}
} }
} }