[Vue3]简易时间轴组件

[Vue3]简易时间轴组件

<template>
    <div ref="container" class="timeline-container">
        <!--     计划部分   -->
        <div class="plan-box">
            <span class="plan-title">计划</span>
            <!--    计划时间轴    -->
            <div class="plan-timeline">
                <div v-for="(node, index) in nodeList" :key="index" class="timeline-item">
                    <p>{{ node.name }}</p>
                    <p>{{ node.time }}</p>

                    <div class="item-node"></div>
                </div>

                <!--   手动添加一个结束节点-->
                <div class="timeline-item end-item">
                    <div class="item-node"></div>
                </div>

                <div class="plan-timeline-progress"></div>
            </div>
        </div>

        <!--   实际部分  -->
        <div class="actual-box">
            <span class="actual-title">实际</span>
            <div class="actual-timeline">
                <div class="actual-timeline-progress"></div>
                <div v-for="(node, index) in nodeList" :key="index" class="timeline-item">
                    <div class="item-node"></div>
                    <p>{{ node.time }}</p>
                    <p>{{ node.name }}</p>
                </div>
                <!--   手动添加一个结束节点-->
                <div class="timeline-item end-item">
                    <div class="item-node"></div>
                </div>
            </div>
        </div>

        <!--            <svg viewBox="25 25 50 50" class="circular small">-->
        <!--                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>-->
        <!--            </svg>-->
    </div>
</template>

<script setup>
import { toRefs } from 'vue';

const props = defineProps({
    planStartTime: {
        type: String,
        default: '2021-05-01'
    },
    planEndTime: {
        type: String,
        default: '2022-05-01'
    },
    actualStartTime: {
        type: String,
        default: '2021-05-01'
    },
    actualEndTime: {
        type: String,
        default: '2022-05-01'
    },
    nodeList: {
        type: Array,
        default: [
            {
                name: 'DVT',
                time: '2021-05-01'
            },
            {
                name: 'T版',
                time: '2021-08-01'
            },
            {
                name: 'DVT样机评审（全功能样机）',
                time: '2022-02-01'
            }
        ]
    }
});

const { planStartTime, planEndTime, actualEndTime, actualStartTime, nodeList } = toRefs(props);
</script>

<style lang="less" scoped>
//@cbackground: #f1f8ffb3;
//@borderColor: #f2f6fc54;

@mainColor: #3cca64;

// -------------------------------公共样式--------------------------------------
.timeline-container {
    //border: 1px solid black;
    padding: 10px;
    overflow: auto;
    margin-top: 20px;
}

// 时间轴上的圆点样式
.item-node {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;

    border-radius: 50%;
    border: 4px solid @mainColor;
    background: white;
}

.end-item {
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    width: 0 !important;
}
// -------------------------------计划部分样式-----------------------------------

.plan-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.plan-title {
    display: inline-block;
    padding: 20px 10px;
    border: 1px solid black;
    background: @mainColor;
    color: white;
    font-weight: bold;
}

.plan-timeline {
    transform: translateY(-25%);
    padding: 10px;
    //border: 1px solid black;
    display: inline-block;

    .plan-timeline-progress {
        width: 100%;
        height: 6px;
        background: @mainColor;
    }

    .timeline-item {
        height: 50px;
    }

    .item-node {
        transform: translate(-50%, 75%);
        bottom: 0;
    }
}

// ----------------------------------实际部分样式-----------------------------

.actual-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.actual-title {
    display: inline-block;
    padding: 20px 10px;
    border: 1px solid black;
    background: @mainColor;
    color: white;
    font-weight: bold;
}

.actual-timeline {
    padding: 10px;
    //border: 1px solid black;
    display: inline-block;
    transform: translateY(25%);
    .actual-timeline-progress {
        width: 100%;
        height: 6px;
        background: @mainColor;
    }

    .timeline-item {
        height: 50px;
    }

    .item-node {
        top: 0;
        transform: translate(-50%, -75%);
    }
}

// 时间轴上一个item的样式
.timeline-item {
    display: inline-block;
    //border: 1px solid black;
    vertical-align: top;
    margin-right: 10px;
    //margin-bottom: 10px;
    //overflow: hidden;
    padding: 10px 15px 0;
    //text-align: center;
    position: relative;
    font-size: 14px;
    //height: 50px;
    //background: @mainColor;
    //color: white;
    font-weight: bold;
}
</style>