From f28363d03c3539b0219c5b58ea8b7db37d50be6f Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 23 四月 2024 22:34:17 +0800
Subject: [PATCH] 编辑时间轴组件
---
src/views/mdc/processParam/TimeLine.vue | 14 +++++++++++++-
1 files changed, 13 insertions(+), 1 deletions(-)
diff --git a/src/views/mdc/processParam/TimeLine.vue b/src/views/mdc/processParam/TimeLine.vue
index e920e4d..17217a6 100644
--- a/src/views/mdc/processParam/TimeLine.vue
+++ b/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 {
--
Gitblit v1.9.3