.timeline { position: relative; padding: 20px; max-width: 100%; text-align: left; overflow-y: auto; max-height: 80vh; scroll-behavior: smooth; transition: transform 0.3s ease; scrollbar-width: none; -ms-overflow-style: none; } .timeline::-webkit-scrollbar { display: none; } /* 主时间线容器 */ .timeline-event-container { position: relative; background-color: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.3s ease; overflow: visible; } .timeline-event-container:hover { background-color: #f9f9f9; } /* 主时间线内容 */ .timeline-event { display: flex; align-items: center; transition: transform 0.3s ease, opacity 0.3s ease; border-left: 2px solid #f1f1f1; margin-bottom: 20px; background-color: transparent; padding: 10px; position: relative; } .timeline-event:hover { transform: translateX(10px); } .timeline-event.minimized { transform: scale(0.9); opacity: 0.7; } /* 展开按钮样式 */ .expand-trigger { position: absolute; top: 8px; right: 8px; z-index: 10; font-size: 12px; transition: transform 0.2s ease; } .expand-trigger:hover { transform: scale(1.05); } /* 子时间线动画容器 */ .sub-timeline-wrapper { margin-top: 12px; animation: zoomIn 0.4s ease forwards; background-color: #fafafa; padding: 12px; border-radius: 8px; border: 1px dashed #ddd; } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ant-timeline { max-width: 100%; margin-left: 0 !important; } .timeline-item { transition: transform 0.3s ease-in-out; } .timeline-item.expanded { transform: scale(0.95); z-index: 1; } .sub-timeline { transform-origin: top left; animation: zoomIn 0.3s ease forwards; } .timeline-dot { background-color: #f1f1f1; border: none; border-radius: 50%; height: 10px; width: 10px; position: absolute; left: 15px; top: 20px; z-index: 1; } .timeline-content { margin: 5px; background: transparent; position: relative; } .timeline-content-text { padding-left: 10px; background: #fff; } .timeline-content h2 { margin: 0 0 10px 0; } .timeline-content span { color: #888; font-style: italic; }