index.vue
<template>
<div>
<Steps :stepInfo="stepInfo">
<template slot="temp">
<StepsT v-for="(item, index) in stepInfo.list" :key="index" :index="index" :stepInfo="stepInfo">
<template slot="topTitle">
{{ item.name }}
</template>
<template slot="bottomTitle">
<div>计划开始:{{ item.startTime }}</div>
</template>
<template slot="bottomTitle">
<div>实际开始:{{ item.endTime }}</div>
</template>
</StepsT>
</template>
</Steps>
</div>
</template>
<script>
import Steps from './stepsTemp.vue'
import StepsT from './stepsTemps.vue'
export default {
components: { Steps, StepsT },
data() {
return {
stepInfo: {
list: [{
name: '基础施工',
startTime: '2021.03.30',
endTime: '2021.03.30',
},{
name: '主体施工',
startTime: '2021.03.30',
endTime: '2021.03.30',
},{
name: '二次结构',
startTime: '2021.03.30',
endTime: '2021.03.30',
},{
name: '装饰工程',
startTime: '2021.03.30',
endTime: '2021.03.30',
}],
step: 2
}
}
},
mounted() {},
methods: {}
}
</script>
<style scoped lang="scss">
</style>
stepsTemp.vue
<template>
<div class="stepBox">
<div class="stepOut">
<ul class="stepOutBox">
<slot name="temp"></slot>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {},
data() {
return {}
},
mounted() {},
methods: {}
}
</script>
<style scoped lang="scss">
// 设置滚动条的样式
// 滚动条宽高
.stepBox::-webkit-scrollbar {
width: 6px;
height: 6px;
}
// 滚动条滑块
.stepBox::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
// 滚动条背景
.stepBox::-webkit-scrollbar-track-piece {
background: #808488;
border-radius: 10px;
}
.stepBox::-webkit-scrollbar-button {
display: none;
}
.stepBox {
width: 600px;
overflow: auto;
user-select:none;
.stepOut {
// width: 100%;
// height: 70px;
display: flex;
// justify-content: center;
margin: 60px 0;
.stepOutBox {
display: flex;
position: relative;
margin: 0;
padding: 0;
// width: 100%;
}
}
}
</style>
stepsTemps.vue
<template>
<!-- <li class="stepItem" :style="'width: ' + 100 / stepInfo.list.length + '%'"> -->
<li class="stepItem">
<div v-if="index === 0" :class="stepInfo.step <= 0 ? 'nullLine leftLine' : 'nullLine leftLine active'"></div>
<div v-if="index === stepInfo.list.length - 1" :class="stepInfo.step >= stepInfo.list.length ? 'nullLine rightLine active' : 'nullLine rightLine'"></div>
<div class="topTitle">
<slot name="topTitle"></slot>
</div>
<div class="reRound icon">
<div class="maxRound"></div>
<div :class="stepInfo.step >= index + 1 ? 'minRound active':'minRound'"></div>
</div>
<div :class="stepInfo.step >= index + 2 ? 'line active' : 'line'" v-if="index!==stepInfo.list.length - 1"></div>
<div class="diamond">
<img src="./diamond.png" alt="">
</div>
<div class="stepStatus">
<slot name="bottomTitle"></slot>
</div>
</li>
</template>
<script>
export default {
props: {
// 传递步骤参数
stepInfo: {
type: Object,
default: function () {
return {
list: [],
step: 0
}
}
},
index: { type: Number, default: '' }
},
data() {
return {}
},
mounted() {},
methods: {}
}
</script>
<style scoped lang="scss">
.reRound {
position: relative;
.maxRound {
width: 17px;
height: 17px;
border-radius: 50%;
border: 1px solid #3681FF;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: #0a0d2c;
}
.minRound {
width: 9px;
height: 9px;
background: #FF8417;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.stepOut {
width: 100%;
height: 70px;
display: flex;
justify-content: center;
margin: 40px 0;
.stepOutBox {
position: relative;
margin: 0;
padding: 0;
width: 100%;
.nullLine {
position: absolute;
top: 4%;
// transform: translate(-50%, -50%);
width: 37%;
height: 8px;
z-index: 111;
background: #FF8417;
}
.leftLine {
left: 10%;
// background: #7AB2FF;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rightLine {
right: 10%;
// background: #FF8417;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active {
background-color: #7AB2FF!important;
}
.stepItem {
width: 200px;
height: 70px;
float: left;
font-size: 16px;
text-align: center;
position: relative;
list-style: none;
.topTitle {
// position: absolute;
// left: 50%;
// top: -30px;
// transform: translate(-50%, -50%);
// font-weight: bold;
position: absolute;
left: 50%;
top: -20px;
transform: translate(-50%, -50%);
font-size: 16px;
}
.icon {
// width: 13px;
height: 13px;
// border-radius: 50%;
// background: #FF8417;
margin: 0 auto;
position: relative;
z-index: 888;
}
.line {
position: absolute;
top: 3px;
left: 53%;
width: 94%;
height: 8px;
background: #FF8417;
z-index: 111;
}
.stepStatus {
font-size: 12px;
}
.diamond {
margin: 14px 0;
img {
width: 8px;
}
}
}
}
}
</style>