重新优化时间线

src/pagesA/discrepancy/discrepancy.vue

@@ -6,31 +6,31 @@
                 :key="index"
                 class="timeline-item"
             >
-                <!-- 时间节点 -->
-                <view class="timeline-node">
-                    <view class="node-circle"></view>
-                    <view
-                        class="node-line"
-                        v-if="index !== freQuenceList.length - 1"
-                    ></view>
-                </view>
-
-                <!-- 内容区域 -->
                 <view class="timeline-content">
-                    <view class="timeline-time"
-                        >{{ formatTime(item.leaveTime) }}目标离开</view
-                    >
-                    <view
-                        style="
-                            flex: 1;
-                            width: 2rpx;
-                            height: 40rpx;
-                            background-color: #7e5648;
-                        "
-                    ></view>
-                    <view class="timeline-time"
-                        >{{ formatTime(item.enterTime) }}目标进入</view
-                    >
+                    <!-- 左侧：目标离开 -->
+                    <view class="timeline-time timeline-time-left">
+                        <text class="time-text">{{
+                            formatTime(item.enterTime)
+                        }}</text>
+                        <text class="event-text">目标离开</text>
+                    </view>
+
+                    <!-- 中间：时间轴 -->
+                    <view class="timeline-line">
+                        <view class="node-circle"></view>
+                        <view
+                            class="node-line"
+                            v-if="index !== freQuenceList.length - 1"
+                        ></view>
+                    </view>
+
+                    <!-- 右侧：目标进入 -->
+                    <view class="timeline-time timeline-time-right">
+                        <text class="time-text">{{
+                            formatTime(item.leaveTime)
+                        }}</text>
+                        <text class="event-text">目标进入</text>
+                    </view>
                 </view>
             </view>
         </view>
@@ -57,68 +57,85 @@ export default {
 
 <style scoped>
 .timeline-container {
-    padding: 20rpx 30rpx;
-    height: 100vh;
-    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
+    padding: 30rpx;
+    background: linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%);
     box-sizing: border-box;
 }
 
 .timeBox {
-    overflow: scroll;
-    height: 98vh;
+    overflow-y: auto;
+    height: 100vh;
 }
 
 .timeline-item {
     display: flex;
+    justify-content: center;
     padding-bottom: 40rpx;
     position: relative;
 }
 
-.timeline-node {
+.timeline-content {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    width: 40rpx;
-    margin-right: 20rpx;
-    margin-top: 50rpx;
+    justify-content: center;
+    width: 100%;
+    position: relative;
 }
 
-.node-circle {
-    width: 20rpx;
-    height: 20rpx;
-    border-radius: 50%;
-    background-color: #7f5447;
-    z-index: 1;
+.timeline-time {
+    font-size: 24rpx;
+    color: #99715f;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
 }
 
-.node-line {
-    width: 2rpx;
-    height: 100rpx;
-    background-color: #7e5648;
-    /* margin-top: 40rpx; */
+.timeline-time-left {
+    margin-right: 30rpx;
+    align-items: flex-end;
+    text-align: right;
 }
 
-.timeline-content {
-    flex: 1;
-    padding-bottom: 20rpx;
+.timeline-time-right {
+    margin-left: 30rpx;
+    align-items: flex-start;
+    text-align: left;
 }
 
-.timeline-time {
+.time-text {
     font-size: 24rpx;
+    color: #99715f;
+    font-weight: bold;
+    margin-bottom: 6rpx;
+}
+
+.event-text {
+    font-size: 22rpx;
     color: #999;
-    margin-bottom: 8rpx;
 }
 
-.timeline-title {
-    font-size: 32rpx;
-    color: #333;
-    font-weight: bold;
-    margin-bottom: 8rpx;
+.timeline-line {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 4rpx;
+    min-height: 120rpx;
+    background-color: #7e5648;
+    position: relative;
 }
 
-.timeline-desc {
-    font-size: 28rpx;
-    color: #666;
-    line-height: 1.5;
+.node-circle {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 50%;
+    background-color: #7e5648;
+    border: 4rpx solid #fff;
+    z-index: 2;
+    margin: 10rpx 0;
+}
+.node-line {
+    flex: 1;
+    width: 4rpx;
+    background-color: #7e5648;
 }
 </style>