Story排版修改

2025-08-05 19:02:14 +08:00
parent 63ae33288d
commit 141e8d9818
68 changed files with 536 additions and 3902 deletions
--- a/src/pages/story/index.css
+++ b/src/pages/story/index.css
@@ -0,0 +1,140 @@
+.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;
+}