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)" > @@ -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) + '%' }; +}