From 340171e744dce4f464602c50bc74d52923d33fc2 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Tue, 13 Oct 2026 10:51:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=A7=BB=E5=8A=A8=E7=AB=AF):=20=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E8=BF=9B=E5=BA=A6=E6=9D=A1=E8=BF=9E=E7=BA=BF=E6=8C=89?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=95=B0=E5=8A=A8=E6=80=81=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=EF=BC=8C=E9=80=82=E9=85=8D=E9=9D=9E5=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/order/detail/ProgressBar.vue   | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/uni-app/src/dynamic-pages/components/order/detail/ProgressBar.vue b/frontend/uni-app/src/dynamic-pages/components/order/detail/ProgressBar.vue
index 21f08018a..de8922c19 100644
--- a/frontend/uni-app/src/dynamic-pages/components/order/detail/ProgressBar.vue
+++ b/frontend/uni-app/src/dynamic-pages/components/order/detail/ProgressBar.vue
@@ -27,6 +27,7 @@
             v-if="idx < nodes.length - 1"
             class="line"
             :class="nodes[idx + 1].completed ? 'bg-color' : ''"
+            :style="lineStyle(idx)"
           ></view>
         </template>
       </view>
@@ -61,6 +62,19 @@ const p = computed(() => (props.section && props.section.props) || {});
 const ctx = computed(() => (props.section && props.section._ctx) || {});
 /** 进度节点数组，每项含 {title, key, completed, active, time} */
 const nodes = computed(() => p.value.nodes || []);
+/**
+ * 连线定位：N 个节点 flex:1 均分，第 i 个点中心在 (i+0.5)×100/N%，
+ * 第 idx 段连线连接相邻两点中心，两端各留 2% 间隙（内联样式按节点数动态计算，
+ * 兼容实物 5 节点、自提/卡密 4 节点、网盘 3 节点及插件自定义节点数）
+ * @param {number} idx 连线段索引（连接第 idx 与 idx+1 个节点）
+ * @return {object} left/width 内联样式
+ */
+function lineStyle(idx) {
+  const n = nodes.value.length;
+  if (n < 2) return {};
+  const seg = 100 / n;
+  return { left: ((idx + 0.5) * seg + 2) + '%', width: (seg - 4) + '%' };
+}
 </script>
 
 <style scoped>
@@ -72,18 +86,8 @@ const nodes = computed(() => p.value.nodes || []);
 .progress > .iconfont { flex: 1; text-align: center; position: relative; z-index: 2; }
 .iconfont { font-size: 32rpx; color: #ddd; }
 .iconfont.font-num { color: var(--view-theme, #e93323); }
-/* 连线为覆盖段：从上一个点中心连到下一个点中心（两端各留约 2% 间隙）。
-   点与文字同用 flex:1 均分格，5 节点时点中心在 10/30/50/70/90%，与 navCon 文字对齐 */
+/* 连线为覆盖段：位置由 lineStyle() 按节点数内联下发（点中心连到相邻点中心，
+   两端各留 2% 间隙），与节点文字行同轴，任意节点数均对齐 */
 .line { position: absolute; top: 50%; margin: -2rpx 0 0 0; height: 4rpx; background: #ddd; }
 .line.bg-color { background: var(--view-theme, #e93323); }
-.line:nth-child(2) { left: 12%; width: 16%; }
-.line:nth-child(4) { left: 32%; width: 16%; }
-.line:nth-child(6) { left: 52%; width: 16%; }
-.line:nth-child(8) { left: 72%; width: 16%; }
-/* #ifdef H5 */
-/* 到店自提为 4 节点：点中心在 12.5/37.5/62.5/87.5% */
-.progress:not(:has(.line:nth-child(8))) .line:nth-child(2) { left: 14.5%; width: 21%; }
-.progress:not(:has(.line:nth-child(8))) .line:nth-child(4) { left: 39.5%; width: 21%; }
-.progress:not(:has(.line:nth-child(8))) .line:nth-child(6) { left: 64.5%; width: 21%; }
-/* #endif */
 </style>