<template>
<ul class="triangle_step">
<li
:class="{cur:active>=index}"
v-for="(item,index) in stepArr"
:key="index"
:style="{width:width}"
@click="handlStepsClick(index)"
>
<span class="titlebox">{{ item.title }}</span>
<div
v-if="index<stepArr.length-1"
:class="active>=index?'jiaoActive':'jiao'"
/>
<div class="interval" />
</li>
</ul>
</template>
<script>
export default {
name: 'AimsSteps',
props: {
active: {
default: 0
},
stepArr: {
default: []
},
width: {
default: '100%'
},
stepFlag: {
default: false
}
},
data () {
return {
}
},
methods: {
handlStepsClick (index) {
if (this.stepFlag) {
this.$emit('change', index)
}
}
}
}
</script>
<style scoped lang="scss">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.triangle_step{
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
li{
height: 40px;
background: #F5F7FA;
color:#666;
text-align: center;
line-height: 40px;
/*width: 20%;*/
/*flex-basis: 100%;*/
position: relative;
cursor: pointer;
}
li.cur{
background: #E6EEFB;
color: #4E80F8;
// cursor: pointer;
}
.titlebox{
text-align: center;
white-space: nowrap;
text-overflow: ellipsis
}
/*三角形绘制*/
.jiao{
width: 0;
height: 0;
border-top: 20px solid transparent;/*高度一半*/
border-left: 20px solid #F5F7FA; /*调整宽度*/
border-bottom: 20px solid transparent;/*高度一半*/
position: absolute;
right:-20px;/*跟宽度保持一致*/
top:0;
z-index: 2;
}
.jiaoActive{
width: 0;
height: 0;
border-top: 20px solid transparent;/*高度一半*/
border-left: 20px solid #E6EEFB; /*调整宽度*/
border-bottom: 20px solid transparent;/*高度一半*/
position: absolute;
right:-20px;/*跟宽度保持一致*/
top:0;
z-index: 2;
}
/*大3个px的边 26-20/2*/
.interval{
width: 0;
height: 0;
border-top: 26px solid transparent;/*高度一半*/
border-left: 26px solid #fff; /*调整宽度*/
border-bottom: 26px solid transparent;/*高度一半*/
position: absolute;
right:-26px;/*跟宽度保持一致*/
top:-6px;
z-index: 1;
}
li:last-child .interval{
display: none;
}
}
</style>