视频回放，进度条时间显示（vue3）

效果：

<template>
    <div class="time-rule">
        <div :style="{ paddingLeft: initiate + 'px',paddingRight:`${1439-finish}`+ 'px' }">
            <div v-if="initiate!==0" style="background: #FF4D23;">&nbsp;</div>
        </div>
        <!-- 整个时间选择器的容器，设置了宽度、高度和背景颜色 -->
        <div class="time-day" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
            <div class="time-minute" v-for="hour in timesInDay" :key="hour">{{ hour }}</div>
        </div>
        <!-- 前选择的时间点的红色竖线，它的位置由用户的操作来决定。 -->
        <div class="time-cursor" :style="{ left: cursorPosition1 + 'px' }">
            <!-- 显示当前选择的具体时间的文本框，它的位置相对于time-cursor，可以通过拖动来改变选择的时间 -->
            <div class="time-cursor-text">{{ formatTime(cursorPosition1) }}</div>
        </div>
        <div class="time-cursor" :style="{ left: cursorPosition2 + 'px' }">
            <div class="time-cursor-text">{{ formatTime(cursorPosition2) }}</div>
        </div>
    </div>
</template>

<script setup>
    import { ref, computed } from 'vue';
    const initiate = ref(40);
    const finish = ref(410);
    const cursorPosition1 = ref(40); // 第一个光标位置
    const cursorPosition2 = ref(410); // 第二个光标位置
    // 时间显示
    const timesInDay = Array.from({ length: 24 }, (_, i) => {
        const hour = String(i).padStart(2, '0');
        return `${hour}:00`;
    });
    // 鼠标按下事件处理方法
    const handleMouseDown = (e) => {
        const rect = e.target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        // 根据当前鼠标位置选择更新哪个光标的位置
        if (x <= cursorPosition2.value / 2) {
            cursorPosition1.value = x + 0.5;
        } else {
            cursorPosition2.value = x + 0.5;
        }
    };
    // 鼠标移动事件处理方法
    const handleMouseMove = (e) => {
        if (e.buttons === 1) {
            const rect = e.target.getBoundingClientRect();
            const x = e.clientX - rect.left;
            // 根据当前鼠标位置选择更新哪个光标的位置
            if (x <= cursorPosition2.value / 2) {
                cursorPosition1.value = x + 0.5;
            } else {
                cursorPosition2.value = x + 0.5;
            }
        }
    };
    // 鼠标释放事件处理方法
    const handleMouseUp = () => {
        // 清除光标位置
        cursorPosition1.value = 0;
        cursorPosition2.value = 0;
    };
    // 下方时间框时间
    const formatTime = (value) => {
        const hours = Math.floor(value / 60);
        const minutes = value % 60;
        const formattedHours = String(hours).padStart(2, '0');
        const formattedMinutes = String(minutes).padStart(2, '0');
        return `${formattedHours}:${formattedMinutes}`;
    };
</script>

<style scoped>
    .time-rule {
        position: relative;
        height: 65px;
        /* margin: 0 auto; */
        width: 100%;
        font-size: 12px;
        max-width: 1442px;
        background-color: #CCC;
        margin-top: 30px;
    }

    .time-day {
        display: flex;
        position: absolute;
        left: 0;
        top: 15px;
        height: 100%;
        width: 1440px;
        cursor: pointer;
        border-top: 1px solid #999;
    }

    .time-minute {
        width: calc(100% / 24);
        height: 8px;
        text-align: center;
        border-left: 1px solid #999;
        position: relative;
    }

    .time-cursor {
        position: absolute;
        left: 0;
        top: 0px;
        height: 60px;
        width: 2px;
        background-color: #FF4D23;
        text-align: center;

        transform: translateX({
                {
                cursorPosition
            }
        }

        px);
    }

    .time-cursor-text {
        position: absolute;
        padding: 0 5px;
        left: -20px;
        top: 48px;
        border: 1px solid #FF4D23;
        height: 12px;
        line-height: 12px;
        cursor: move;
        background-color: white;
        -ms-user-select: none;
        user-select: none;
    }
</style>