编辑时间轴组件

gaoshp

2024-04-23 f28363d03c3539b0219c5b58ea8b7db37d50be6f

 src/views/mdc/processParam/TimeLine.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-23 20:03:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-23 22:20:35
 * @LastEditTime: 2024-04-23 22:32:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
-->
<template>
@@ -12,6 +12,8 @@
            </el-col>
        </el-row>
        <div class="timeline-box">
            <div class="timeline-box-current" :style="{ width: 100 / lines.length + '%' }"></div>
            <div class="timeline-box-hover"></div>
            <div class="timeline-box-item" v-for="item in dateList" :key="item.startTime" :style="{
                width: item.width + '%',
                background: item.color
@@ -117,11 +119,21 @@
.timeline-box {
    height: 20px;
    display: flex;
    position: relative;

    &-item {
        text-align: center;
        flex: 0 0 auto;
    }

    .timeline-box-current,
    .timeline-box-hover {
        height: 20px;
        position: absolute;
        left: 0;
        z-index: 1;
        border: 1px solid red;
    }
}

.timeline-line {