fix: 时间线

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -12,7 +12,11 @@
                 <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`"
                     class="phenology-bar">
                     <div class="phenology-title"
-                        :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
+                        :class="{
+                            'phenology-title--wide': showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                            'phenology-red': !shouldShowBlue(p),
+                            'phenology-blue': shouldShowBlue(p),
+                        }"
                         v-if="shouldShowPhenologyBarTitle(idx)">
                         {{ p.phenologyName }}
                     </div>
@@ -81,11 +85,17 @@
                         </div>
                         <template v-if="showPhenologyName">
                             <template v-if="r.name === p.phenologyName">
-                                <div class="phenology-name text-blue"
-                                    :class="{ 'phenology-red': !shouldShowBlueLeft(p, r), 'phenology-blue': shouldShowBlueLeft(p, r) }"
-                                    :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
-                                    {{ r.name }}
-                                </div>
+                                <template v-if="!shouldShowPhenologyBarTitle(idx)">
+                                    <div class="phenology-name"
+                                        :class="{
+                                            single: showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                                            'phenology-red': !shouldShowBlueLeft(p, r),
+                                            'text-blue': shouldShowBlueLeft(p, r),
+                                        }"
+                                        :style="p.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
+                                        {{ p.phenologyName }}
+                                    </div>
+                                </template>
                             </template>
                             <template v-else>
                                 <template v-if="p.phenologyName === getNextPhenologyName(idx, rIdx)">
@@ -406,6 +416,13 @@ const shouldShowPhenologyBarTitle = (idx) => {
     return list[idx]?.phenologyName !== list[idx - 1]?.phenologyName;
 };
 
+// 是否存在与物候期不同的生育期行（需要左右两列竖条）；否则物候条占满单列宽度即可
+const phenologyNeedsTwoLabelColumns = (p) => {
+    const list = Array.isArray(p?.reproductiveList) ? p.reproductiveList : [];
+    if (!list.length) return false;
+    return list.some((r) => r.name !== p.phenologyName);
+};
+
 // 获取下一个reproductive-item的phenologyName
 const getNextPhenologyName = (currentPhenologyIdx, currentReproductiveIdx) => {
     const currentPhenology = phenologyList.value[currentPhenologyIdx];
@@ -1298,16 +1315,22 @@ watch(
 
         .phenology-title {
             width: 18px;
-            height: 99.5%;
+            top: 0;
+            bottom: 0;
+            left: -1px;
+            height: auto;
             color: #fff;
             font-size: 12px;
             position: absolute;
-            // left: 39px;
-            left: -1px;
             z-index: 10;
             text-align: center;
             display: flex;
             align-items: center;
+            justify-content: center;
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            letter-spacing: 3px;
+            word-break: break-all;
 
             &.phenology-blue {
                 background: #2199f8;
@@ -1317,6 +1340,10 @@ watch(
                 background: #f1f1f1;
                 color: #808080;
             }
+
+            &.phenology-title--wide {
+                width: 39px;
+            }
         }
 
         .reproductive-item {
@@ -1339,6 +1366,8 @@ watch(
                 padding: 4px 0;
                 font-size: 12px;
                 box-sizing: border-box;
+                writing-mode: vertical-rl;
+                text-orientation: upright;
 
                 &.mr {
                     margin-right: 3px;
@@ -1347,8 +1376,11 @@ watch(
                 &.single {
                     width: 39px;
                     line-height: 39px;
-                    // z-index: 10;
-                    // position: relative;
+
+                    &.text-blue,
+                    &.text-red {
+                        line-height: 16px;
+                    }
                 }
 
                 &.phenology-blue {
@@ -1690,12 +1722,14 @@ watch(
         }
     }
 
-    .reproductive-item+.reproductive-item {
-        padding-top: 3px;
+    .reproductive-item + .reproductive-item {
+        margin-top: 4px;
+        padding-top: 0;
     }
 
-    .phenology-bar+.phenology-bar {
-        padding-top: 3px;
+    .phenology-bar + .phenology-bar {
+        margin-top: 4px;
+        padding-top: 0;
     }
 
     .timeline-term {