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-未进行

原文地址：https://blog.csdn.net/2301_76671906/article/details/144442784

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！