<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="''"
|
>
|
<div class="timeline-row">
|
<div :class="['left-block', item.type === '入库' ? 'in' : 'out']">
|
<div class="type-tag">{{ item.type }}</div>
|
<div class="info-main">
|
<div class="info-title">操作人：{{ item.operator || '--' }}</div>
|
<div class="info-time">操作时间：{{ item.operateTime || '--' }}</div>
|
</div>
|
</div>
|
<div :class="[
|
'right-block',
|
item.confirmTime && item.confirmTime !== '--' ?
|
(item.type === '入库' ? 'confirmed-in' : 'confirmed-out') :
|
'unconfirmed'
|
]">
|
<div class="info-title">保藏人：{{ item.reviewer || '--' }}</div>
|
<div class="info-time">确认时间：{{ item.confirmTime || '--' }}</div>
|
</div>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'RecordTimeline',
|
props: {
|
list: {
|
type: Array,
|
default: () => []
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.record-timeline {
|
border-radius: 12px;
|
padding: 0 0 24px 0;
|
min-height: 400px;
|
}
|
|
:deep(.el-timeline) {
|
padding-left: 32px;
|
}
|
|
:deep(.el-timeline-item) {
|
position: relative;
|
margin-bottom: 30px;
|
height: 84px;
|
box-sizing: border-box;
|
}
|
|
:deep(.el-timeline-item:last-child) {
|
margin-bottom: 0;
|
}
|
|
:deep(.el-timeline-item__node) {
|
position: absolute;
|
width: 12px !important;
|
height: 12px !important;
|
left: -6px;
|
top: 34px !important; /* 微调位置使其看起来完全居中 */
|
margin: 0 !important;
|
background: #ffffff;
|
box-shadow: none !important;
|
border: none !important;
|
z-index: 3;
|
}
|
|
:deep(.el-timeline-item__tail) {
|
border-left: 3px solid #e6e6e6;
|
left: -1px;
|
top: 0;
|
height: 114px; /* 84px + 30px */
|
z-index: 1;
|
}
|
|
:deep(.el-timeline-item:first-child .el-timeline-item__tail) {
|
top: 34px; /* 与节点位置对应 */
|
height: 80px; /* 调整为与新节点位置匹配 */
|
}
|
|
:deep(.el-timeline-item:last-child .el-timeline-item__tail) {
|
height: 34px; /* 调整为与新节点位置匹配 */
|
display: block !important; /* 确保显示 */
|
}
|
|
:deep(.el-timeline-item__content) {
|
padding-left: 45px;
|
height: 84px;
|
}
|
|
:deep(.el-timeline-item__wrapper) {
|
height: 84px;
|
padding: 0;
|
margin: 0;
|
}
|
|
.timeline-row {
|
display: flex;
|
gap: 14px;
|
height: 84px;
|
width: 100%;
|
flex-wrap: wrap; /* 允许在小屏幕上换行 */
|
}
|
|
.left-block, .right-block {
|
width: 330px;
|
border-radius: 10px;
|
padding: 0;
|
background: #f5f7fa;
|
display: flex;
|
min-width: 270px; /* 减小最小宽度 */
|
max-width: 330px; /* 设置最大宽度 */
|
width: 100%; /* 使用百分比宽度 */
|
height: 84px;
|
box-sizing: border-box;
|
}
|
|
.left-block.in {
|
background: #E6F6F6;
|
}
|
|
.left-block.out {
|
background: #FBF5EC;
|
}
|
|
.right-block {
|
padding: 16px 20px 12px 20px;
|
flex-direction: column;
|
height: 84px;
|
overflow: hidden;
|
box-sizing: border-box;
|
}
|
|
.right-block.unconfirmed {
|
background: #F5F7FB;
|
}
|
|
.right-block.confirmed-in {
|
background: #E6F6F6;
|
}
|
|
.right-block.confirmed-out {
|
background: #FBF5EC;
|
}
|
|
.type-tag {
|
width: 35px;
|
height: 84px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
writing-mode: vertical-lr;
|
text-orientation: upright;
|
text-align: center;
|
border-radius: 10px 0 0 10px;
|
font-size: 16px;
|
font-weight: bold;
|
color: #fff;
|
background: linear-gradient( 180deg, #0ACBCA 0%, #049C9A 100%);
|
letter-spacing: 8px; /* 增加字间距 */
|
}
|
|
.left-block.out .type-tag {
|
background: linear-gradient( 180deg, #FDBF2D 0%, #FA8B14 100%);
|
}
|
|
.info-main {
|
flex: 1;
|
padding: 16px 20px 12px 20px;
|
}
|
|
.info-title {
|
font-size: 16px;
|
color: #333;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.info-time {
|
font-size: 14px;
|
color: #999;
|
}
|
|
:deep(.el-timeline-item__node--primary)::before {
|
content: '';
|
position: absolute;
|
top: -4px;
|
left: -4px;
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background: linear-gradient(180deg, #0ACBCA 0%, #049C9A 100%);
|
z-index: -1;
|
}
|
|
:deep(.el-timeline-item__node--primary)::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 12px;
|
height: 12px;
|
border-radius: 50%;
|
background: #ffffff;
|
z-index: 1;
|
}
|
|
:deep(.el-timeline-item__node--warning)::before {
|
content: '';
|
position: absolute;
|
top: -4px;
|
left: -4px;
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background: linear-gradient(180deg, #FDBF2D 0%, #FA8B14 100%);
|
z-index: -1;
|
}
|
|
:deep(.el-timeline-item__node--warning)::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 12px;
|
height: 12px;
|
border-radius: 50%;
|
background: #ffffff;
|
z-index: 1;
|
}
|
|
/* 添加媒体查询，适配小屏幕设备 */
|
@media screen and (max-width: 1200px) {
|
.left-block, .right-block {
|
min-width: 240px;
|
}
|
|
.timeline-row {
|
gap: 10px;
|
}
|
}
|
|
@media screen and (max-width: 992px) {
|
.timeline-row {
|
flex-direction: column; /* 垂直排列 */
|
height: auto;
|
gap: 8px;
|
}
|
|
.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>
|
