component-流程进度（不借用组件）

1.实现效果

2.具体代码

<!-- 流程-进度 -->
<template><!-- 进度 --><div class="SignRate"><!-- 进度展示 --><div class="stepCircleFather"><!-- 步骤条 --><div class="stepContent" v-for="(item,index) in dataList" :key="index"><!-- 圆点 --><!-- item.statues 1-已完成 2-当前进行 3-未进行---><div class="circleCont" :class="item.statues==1?'contCir1':item.statues==2?'contCir2':'contCir3'"><div class="circle" :class="item.statues==1?'circle1':item.statues==2?'circle2':'circle3'"></div></div><!-- 线 --><div class="thinLine" :class="item.statues==1?'line1':item.statues==2?'line2':'line3'"></div><!-- 时间与内容 --><div class="timeAndContent"><!-- 节点 --><span :class="item.statues==1?'color1':item.statues==2?'color2':'color3'">{{ item.planNote }}</span><div :class="item.statues==2?'currentCont' : ''"><!-- 名称与时间 --><a-tooltip placement="top"><template slot="title">{{ item.content }}</template><div class="contentEllipsis">{{ item.content }}</div></a-tooltip><!-- 说明原因 --><a-tooltip placement="top"><template slot="title">{{ item.reson }}</template><div class="contentEllipsis">{{ item.reson }}</div></a-tooltip></div></div></div></div></div>
</template>
<script>
export default {name: 'progressFlow',data() {return {dataList: [{}],}},activated() {},methods: {init(){},},
}
</script>
<style lang="less" scoped>
// 进度
.SignRate{height:calc(100vh - 570px);margin-top: 20px; background-color: #fff;min-height: 250px;border-radius: 5px;
}
// 进度内容-父级
.stepCircleFather{height: 200px;width: 95%;margin-left: 5%;overflow-y:hidden;overflow-x: scroll;background-color: #fff;display: flex; align-items: center;flex-wrap: nowrap;
}
// 进度内容
.stepContent{height: 100px;width: 20%;min-width: 250px;font-size: 1rem;display: flex;align-items: center;justify-content: flex-start;flex-wrap:wrap;
}
// 圆圈与圆点
.circleCont{border-radius: 50%;width: 21px;height:21px;display: flex;align-items: center;justify-content: center;
}
// 圆点
.circle{height: 15px;width: 15px;border-radius: 15px;
}
// 圆圈外围判断
.contCir1{border: 1px solid #2c8cf0;
}
.contCir2{border: 1px solid red;
}
.contCir3{border: 1px solid #e7e7e7;
}
// 已完成
.circle1{background-color: #2c8cf0;
}
// 当前进行
.circle2{height: 15px;width: 15px;border-radius: 15px;background-color: red;
}
// 未进行
.circle3{background-color: #e7e7e7;
}
// 线条
.thinLine{height: 2px;width: calc(100% - 21px);
}
// 已完成线条
.line1{background-color: #2c8cf0;
}
// 未进行线条
.line3{background-color: #e7e7e7;
}
// 当前状态后的线条
.line2{background-color: #e7e7e7;width: calc(100% - 21px);
}
// 最后完成没有线条
.stepContent:last-child .thinLine {opacity: 0;
}
// 已进行
.color1{font-size: 15px;
}
// 当前状态 字体颜色
.color2{color: #1b1b1b;font-size: 15px;font-weight: 600;
}
// 未进行
.color3{font-size: 15px;color: #dddddd;
}
// 内容
.currentCont{background-color: #f4f6fb;padding: 10px;font-size: 14px;border-radius: 5px;
}
// 时间与内容
.timeAndContent{min-width: 270px;height: 70px;font-size: 15px;span:last-child{color: #999999;display: block;}
}
</style>

根据自己需求在 dataList中添加对应的数据，主要状态item.statues 1-已完成 2-当前进行 3-未进行