横向步骤条 尾部连接线

该横向步骤条 item 项高度须一致 ，要将数组分为二维数组，不然反向展示数据处理很麻烦 

<template>
    <div>
        <div class="projectProgress">

            <div class="progressBar" ref="progressBarRef">

                <div :class="{ 'list-li': (index + 1) % 2 !== 0, 'reverse-li': (index + 1) % 2 === 0 }"
                    v-for="(item, index) in projectListData" :key="index">

                    <!-- 正向行 -->
                    <template v-if="(index + 1) % 2 !== 0">
                        <div class="placeholder">

                        </div>
                        <div class="progressItem" v-for="(i, key) in item" :key="key + index">

                            <div class="curveLinkLine"
                                v-if="(key + 1 == item.length) && (index + 1) != projectListData.length">
                            </div>

                            <div>
                                逾期{{ i }}
                            </div>
                            <div class="time">
                                是否正向行{{ (index + 1) % 2 !== 0 }}
                            </div>
                            <div class="label">

                                <div v-if="key != 0" class="connectingLine">
                                </div>
                                <div style="flex: 1;" v-else>

                                </div>
                                <div class="roundShape">

                                </div>
                                <div class="connectingLine" v-if="key + 1 != item.length">
                                </div>
                                <div style="flex: 1;" v-else>
                                </div>
                            </div>
                            <div class="progressName">
                                项目一11
                            </div>
                        </div>
                    </template>
                    <!-- 反向行 -->
                    <template v-else-if="(index + 1) % 2 === 0">


                        <div class="progressItem" v-for="(i, key) in item" :key="key + index">

                            <div class="leftCurveLinkLine"
                                v-if="key + 1 == item.length && index + 1 != projectListData.length">
                            </div>

                            <div>
                                逾期{{ i }}
                            </div>
                            <div class="time">
                                是否正向行{{ (index + 1) % 2 !== 0 }}
                            </div>
                            <div class="label">
                                <div class="connectingLine" v-if="key + 1 != item.length">
                                </div>
                                <div style="flex: 1;" v-else>

                                </div>
                                <div class="roundShape">

                                </div>
                                <div class="connectingLine" v-if="key != 0">
                                </div>
                                <div style="flex: 1;" v-else>
                                </div>
                            </div>
                            <div class="progressName">
                                项目一11
                            </div>
                        </div>
                        <div :style="{ width: 120 * (itemsPerRow - item.length) + 'px' }"
                            v-if="item.length != itemsPerRow" class="placeholder">

                        </div>
                    </template>

                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    props: {
        projectList: {
            type: Array,
            default: () => {
                return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70]
            }
        }
    },

    data() {
        return {
            viewportWidth: '',
            itemsPerRow: '',
            projectListData: JSON.parse(JSON.stringify(this.projectList)),
        }

    },

    mounted() {
        this.updateViewportWidth(); // 在组件挂载后立即更新视口宽度
        // console.log(this.$refs.progressBarRef);

    },
    methods: {
        isFiniteLine(index, isFirst) {

            if (index == 1 || isFirst) {
                return 'is-last-in-row'
            } else {
                return ''
            }
        },
        isLastLine(index, isLast) {

            if (index == this.itemsPerRow || index == this.projectList.length || isLast) {
                return false
            } else {
                return true
            }
        },
        convertToTwoDimensionalArray(items, itemsPerRow) {
            console.log(items, itemsPerRow);
            const result = [];
            for (let i = 0; i < items.length; i += itemsPerRow) {
                result.push(items.slice(i, i + itemsPerRow));
            }
            return result;
        },
        updateViewportWidth() {
            this.$nextTick(() => {
                this.viewportWidth = this.$refs.progressBarRef.clientWidth;
                // 根据视口宽度计算每行的项目数量
                this.itemsPerRow = Math.floor(this.viewportWidth / 120);
                console.log(this.viewportWidth);
                console.log('每行可以放几个', this.itemsPerRow);
                this.projectListData = this.convertToTwoDimensionalArray(this.projectListData, this.itemsPerRow);
                console.log(this.projectListData);

            });


        },
        isLastInRow(index) {
            // 确保viewportWidth和itemsPerRow已经计算
            if (this.viewportWidth === 0) {
                this.updateViewportWidth();
            }
            // 防止除以零的错误
            if (this.itemsPerRow === 0 || this.projectList.length === 0) {
                return false;
            }
            // 计算当前项所在的行数
            const rowIndex = Math.floor(index / this.itemsPerRow);

            // 判断是否为当前行的最后一个元素
            console.log(rowIndex);
            return rowIndex;
        },
    },
}
</script>

<style lang="less" scoped>
.projectProgress {
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressBar {
    margin: 0 auto;
    display: flex;
    // align-items: center;
    flex-wrap: wrap;

    max-width: 1300px;

    // 做到右
    .list-li {

        display: flex;
        flex-wrap: wrap;
        justify-content: start;


    }

    // 右到左
    .reverse-li {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;

        .placeholder {
            flex: 1;
        }


    }

    .progressItem {

        width: 120px;
        margin-bottom: 30px;
        color: #37C7AF;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 2;

        .curveLinkLine {
            width: 50%;
            height: 130%;
            position: absolute;
            top: 60%;
            right: -10px;
            border: 1px solid #37C7AF;
            border-left: none;
            z-index: 1;
            border-top-right-radius: 999px;
            border-bottom-right-radius: 999px;
        }

        .leftCurveLinkLine {
            width: 50%;
            height: 130%;
            position: absolute;
            top: 60%;
            left: -10px;
            border: 1px solid #37C7AF;
            border-right: none;
            // border-bottom: ;
            z-index: 1;
            border-top-left-radius: 999px;
            border-bottom-left-radius: 999px;
        }

        .label {
            width: 100%;
            display: flex;
            align-items: center;


            .connectingLine {

                flex: 1;
                height: 1px;

                // transform: translate3d(-50%,-50%,0);
                background-color: #37C7AF;
            }

            .is-last-in-row {
                width: 0px;
                background-color: #FFFFFF;
            }

            .roundShape {

                margin: 10px 0;
                width: 20px;
                height: 20px;
                border: 5px solid #37C7AF;
                border-radius: 100px;
                border-width: 5px;



            }
        }

        .progressName {

            padding: 0 10px;
        }



    }
}
</style>