From 4a364d65d24020dcacab6c1ee86f854d8de8cd36 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 19 五月 2025 09:05:19 +0800
Subject: [PATCH] feat
---
culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue | 98 +++++++++++++++++++++++++++----------------------
1 files changed, 54 insertions(+), 44 deletions(-)
diff --git a/culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue b/culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue
index 4de0a9a..4691991 100644
--- a/culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue
+++ b/culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue
@@ -1,29 +1,23 @@
<template>
<div class="record-timeline">
<el-timeline>
- <el-timeline-item
- v-for="(item, idx) in list"
- :key="idx"
- :type="item.type === '入库' ? 'primary' : 'warning'"
- :color="item.type === '入库' ? '#04A9A7' : '#FF9900'"
- :icon="''"
- :timestamp="''"
- >
+ <el-timeline-item v-for="(item, idx) in list" :key="idx" :type="item.type == '2' ? 'primary' : 'warning'"
+ :color="item.type == '2' ? '#04A9A7' : '#FF9900'" :icon="''" :timestamp="''">
<div class="timeline-row">
- <div :class="['left-block', item.type === '入库' ? 'in' : 'out']">
- <div class="type-tag">{{ item.type }}</div>
+ <div :class="['left-block', item.type == '2' ? 'in' : 'out']">
+ <div class="type-tag">{{ item.type == 2 ? '入库' : '出库' }}</div>
<div class="info-main">
- <div class="info-title">操作人：{{ item.operator || '--' }}</div>
- <div class="info-time">操作时间：{{ item.operateTime || '--' }}</div>
+ <div class="info-title">操作人：{{ item.handleName || '--' }}</div>
+ <div class="info-time">操作时间：{{ item.boundTime || '--' }}</div>
</div>
</div>
<div :class="[
- 'right-block',
- item.confirmTime && item.confirmTime !== '--' ?
- (item.type === '入库' ? 'confirmed-in' : 'confirmed-out') :
+ 'right-block',
+ item.confirmTime && item.confirmTime !== '--' ?
+ (item.type === '2' ? 'confirmed-in' : 'confirmed-out') :
'unconfirmed'
]">
- <div class="info-title">保藏人：{{ item.reviewer || '--' }}</div>
+ <div class="info-title">保藏人：{{ item.preserveName || '--' }}</div>
<div class="info-time">确认时间：{{ item.confirmTime || '--' }}</div>
</div>
</div>
@@ -71,7 +65,8 @@
width: 12px !important;
height: 12px !important;
left: -6px;
- top: 34px !important; /* 微调位置使其看起来完全居中 */
+ top: 34px !important;
+ /* 微调位置使其看起来完全居中 */
margin: 0 !important;
background: #ffffff;
box-shadow: none !important;
@@ -83,18 +78,23 @@
border-left: 3px solid #e6e6e6;
left: -1px;
top: 0;
- height: 114px; /* 84px + 30px */
+ height: 114px;
+ /* 84px + 30px */
z-index: 1;
}
:deep(.el-timeline-item:first-child .el-timeline-item__tail) {
- top: 34px; /* 与节点位置对应 */
- height: 80px; /* 调整为与新节点位置匹配 */
+ top: 34px;
+ /* 与节点位置对应 */
+ height: 80px;
+ /* 调整为与新节点位置匹配 */
}
:deep(.el-timeline-item:last-child .el-timeline-item__tail) {
- height: 34px; /* 调整为与新节点位置匹配 */
- display: block !important; /* 确保显示 */
+ height: 34px;
+ /* 调整为与新节点位置匹配 */
+ display: block !important;
+ /* 确保显示 */
}
:deep(.el-timeline-item__content) {
@@ -113,18 +113,23 @@
gap: 14px;
height: 84px;
width: 100%;
- flex-wrap: wrap; /* 允许在小屏幕上换行 */
+ flex-wrap: wrap;
+ /* 允许在小屏幕上换行 */
}
-.left-block, .right-block {
+.left-block,
+.right-block {
width: 330px;
border-radius: 10px;
padding: 0;
background: #f5f7fa;
display: flex;
- min-width: 270px; /* 减小最小宽度 */
- max-width: 330px; /* 设置最大宽度 */
- width: 100%; /* 使用百分比宽度 */
+ min-width: 270px;
+ /* 减小最小宽度 */
+ max-width: 330px;
+ /* 设置最大宽度 */
+ width: 100%;
+ /* 使用百分比宽度 */
height: 84px;
box-sizing: border-box;
}
@@ -170,12 +175,13 @@
font-size: 16px;
font-weight: bold;
color: #fff;
- background: linear-gradient( 180deg, #0ACBCA 0%, #049C9A 100%);
- letter-spacing: 8px; /* 增加字间距 */
+ background: linear-gradient(180deg, #0ACBCA 0%, #049C9A 100%);
+ letter-spacing: 8px;
+ /* 增加字间距 */
}
.left-block.out .type-tag {
- background: linear-gradient( 180deg, #FDBF2D 0%, #FA8B14 100%);
+ background: linear-gradient(180deg, #FDBF2D 0%, #FA8B14 100%);
}
.info-main {
@@ -245,10 +251,12 @@
/* 添加媒体查询，适配小屏幕设备 */
@media screen and (max-width: 1200px) {
- .left-block, .right-block {
+
+ .left-block,
+ .right-block {
min-width: 240px;
}
-
+
.timeline-row {
gap: 10px;
}
@@ -256,56 +264,58 @@
@media screen and (max-width: 992px) {
.timeline-row {
- flex-direction: column; /* 垂直排列 */
+ flex-direction: column;
+ /* 垂直排列 */
height: auto;
gap: 8px;
}
-
- .left-block, .right-block {
+
+ .left-block,
+ .right-block {
width: 100%;
max-width: 100%;
}
-
+
:deep(.el-timeline-item) {
position: relative;
height: auto;
min-height: 176px;
margin-bottom: 40px;
}
-
+
:deep(.el-timeline-item__wrapper) {
height: auto !important;
min-height: 176px;
}
-
+
:deep(.el-timeline-item__tail) {
height: calc(100% + 40px);
}
-
+
:deep(.el-timeline-item:last-of-type) {
margin-bottom: 0;
}
-
+
:deep(.el-timeline-item:last-of-type .el-timeline-item__tail) {
height: 34px;
}
-
+
/* 第一个元素的轴线需要特殊处理 */
:deep(.el-timeline-item:first-of-type .el-timeline-item__tail) {
top: 34px;
height: calc(100% + 40px - 34px);
}
-
+
/* 确保所有轴线正确连接 */
:deep(.el-timeline-item__tail) {
top: 0;
height: calc(100% + 40px);
}
-
+
/* 修正内容区域的高度 */
:deep(.el-timeline-item__content) {
height: auto;
min-height: 176px;
}
}
-</style>
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.7.1