From 6c91889e3394e09d62d8aa2bf600128fc59584e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 7 Aug 2026 01:29:32 +0800
Subject: [PATCH] =?UTF-8?q?style(business):=20=E4=BC=98=E5=8C=96=E8=B0=83?=
 =?UTF-8?q?=E5=BA=A6=E8=B7=AF=E7=BA=BF=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=8F=8A=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用车辆图标替换调度路线横线，提升视觉表现
- 调整调度路线布局，使用 grid 增强对齐和间距控制
- 修改调度路线节点样式，统一圆形背景和阴影效果
- 优化标题、地址、联系人文本样式，增加省略号和颜色区分
- 调整调度路线图标容器样式，增加边框和柔和阴影
- 使用伪元素实现两侧虚线提醒，增强组件连接感
---
 .../components/business-crud-page.vue         | 77 ++++++++++++-------
 1 file changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue
index 6e7ffbb..ef98146 100644
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -2189,7 +2189,9 @@
                     </div>
                   </div>
                 </div>
-                <div class="business-crud-page__dispatch-route-line" />
+                <div class="business-crud-page__dispatch-route-vehicle">
+                  <el-icon><Van /></el-icon>
+                </div>
                 <div class="business-crud-page__dispatch-route-item">
                   <span class="business-crud-page__dispatch-route-badge is-end">终</span>
                   <div class="business-crud-page__dispatch-route-body">
@@ -9413,18 +9415,18 @@ export default {
   }
 
   &__dispatch-route {
+    position: relative;
     display: grid;
     grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
     gap: 12px;
-    justify-items: center;
+    align-items: center;
     height: 100%;
-    padding-top: 22px;
   }
 
   &__dispatch-route-item {
     display: flex;
-    align-items: flex-start;
-    gap: 10px;
+    align-items: center;
+    gap: 12px;
     max-width: 100%;
   }
 
@@ -9435,10 +9437,11 @@ export default {
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 4px;
+    border-radius: 50%;
     color: #fff;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 600;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
     &.is-start {
       background: #2a92ff;
@@ -9455,46 +9458,62 @@ export default {
   }
 
   &__dispatch-route-title {
-    font-size: 20px;
-    line-height: 1.3;
+    font-size: 18px;
+    line-height: 1.35;
     color: #303133;
     font-weight: 600;
-    word-break: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__dispatch-route-address {
-    margin-top: 6px;
+    margin-top: 4px;
     font-size: 13px;
-    line-height: 1.45;
+    line-height: 1.5;
     color: #606266;
   }
 
   &__dispatch-route-contact {
-    margin-top: 4px;
+    margin-top: 2px;
     font-size: 13px;
-    color: #606266;
+    color: #909399;
   }
 
-  &__dispatch-route-line {
+  &__dispatch-route-vehicle {
     position: relative;
-    margin-top: 20px;
-    width: 56px;
-    height: 2px;
-    background-image: linear-gradient(
-      to right,
-      var(--el-color-primary) 0,
-      var(--el-color-primary) 6px,
-      transparent 6px,
-      transparent 10px
-    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    margin: 0 auto;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--el-color-primary);
+    color: var(--el-color-primary);
+    font-size: 22px;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.18);
 
+    &::before,
     &::after {
       content: '';
       position: absolute;
-      right: -1px;
-      top: -4px;
-      border: 5px solid transparent;
-      border-left-color: var(--el-color-primary);
+      top: 50%;
+      width: 20px;
+      height: 0;
+      border-top: 2px dashed var(--el-color-primary-light-5);
+      transform: translateY(-50%);
+    }
+
+    &::before {
+      right: 100%;
+      margin-right: 6px;
+    }
+
+    &::after {
+      left: 100%;
+      margin-left: 6px;
     }
   }