style(business): 优化调度路线组件样式及结构调整

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

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;
+    align-items: center;
-    gap: 10px;
+    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;
+    font-size: 18px;
-    line-height: 1.3;
+    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;
+    display: flex;
-    width: 56px;
+    align-items: center;
-    height: 2px;
+    justify-content: center;
-    background-image: linear-gradient(
+    width: 44px;
-      to right,
+    height: 44px;
-      var(--el-color-primary) 0,
+    margin: 0 auto;
-      var(--el-color-primary) 6px,
+    border-radius: 50%;
-      transparent 6px,
+    background: #fff;
-      transparent 10px
+    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: 50%;
-      top: -4px;
+      width: 20px;
-      border: 5px solid transparent;
+      height: 0;
-      border-left-color: var(--el-color-primary);
+      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;
     }
   }