style(business-crud-page): 优化运单详情起终点区域样式

- 将起终点区域改为垂直时间轴风格，左侧显示两个圆点，右侧显示详细地址及省市区信息
- 删除旧的起终点样式类，确认无其他引用，保证代码清晰
- 实现响应式设计，窄屏时垂直时间轴自动变为整行展示

style(master-order-editor): 调整多联总单编辑页收发货信息布局

- 修复竖向时间轴节点图标被压扁问题，增加最小宽高和防止缩小样式
- 优化收发货信息输入区网格布局，地址项独占前两列，宽度加大，支持长地址显示
- 响应式下地址项独占整行，保证小屏幕下不被截断
- 修改搜索栏白底样式，让选择常用地址弹窗搜索栏也使用白底，保持视觉一致性

src/views/business/components/business-crud-page.vue

@@ -2669,26 +2669,33 @@
                 </span>
               </div>
               <div class="business-crud-page__waybill-route">
-                <div class="business-crud-page__waybill-route-head">
-                  <b>起</b
-                  ><strong>{{
-                    detailRow.departureName || detailRow.departureAddress || '-'
-                  }}</strong
-                  ><b class="end">终</b
-                  ><strong>{{ detailRow.arrivalName || detailRow.arrivalAddress || '-' }}</strong>
+                <div class="business-crud-page__waybill-route-item">
+                  <span class="business-crud-page__waybill-route-dot"></span>
+                  <div class="business-crud-page__waybill-route-detail">
+                    <span class="business-crud-page__waybill-route-label">发货地</span>
+                    <strong class="business-crud-page__waybill-route-name">{{
+                      detailRow.departureName || detailRow.departureAddress || '-'
+                    }}</strong>
+                    <el-tooltip :content="detailRow.departureAddress || '-'" placement="top">
+                      <span class="business-crud-page__waybill-route-addr">{{
+                        formatTransportPlanProvinceCityDistrict(detailRow.departureAddress)
+                      }}</span>
+                    </el-tooltip>
+                  </div>
                 </div>
-                <div class="business-crud-page__waybill-route-text">
-                  <el-tooltip :content="detailRow.departureAddress || '-'" placement="top">
-                    <span>{{
-                      formatTransportPlanProvinceCityDistrict(detailRow.departureAddress)
-                    }}</span>
-                  </el-tooltip>
-                  <span>　→　</span>
-                  <el-tooltip :content="detailRow.arrivalAddress || '-'" placement="top">
-                    <span>{{
-                      formatTransportPlanProvinceCityDistrict(detailRow.arrivalAddress)
-                    }}</span>
-                  </el-tooltip>
+                <div class="business-crud-page__waybill-route-item">
+                  <span class="business-crud-page__waybill-route-dot is-end"></span>
+                  <div class="business-crud-page__waybill-route-detail">
+                    <span class="business-crud-page__waybill-route-label">收货地</span>
+                    <strong class="business-crud-page__waybill-route-name">{{
+                      detailRow.arrivalName || detailRow.arrivalAddress || '-'
+                    }}</strong>
+                    <el-tooltip :content="detailRow.arrivalAddress || '-'" placement="top">
+                      <span class="business-crud-page__waybill-route-addr">{{
+                        formatTransportPlanProvinceCityDistrict(detailRow.arrivalAddress)
+                      }}</span>
+                    </el-tooltip>
+                  </div>
                 </div>
               </div>
               <div class="business-crud-page__waybill-attachments">
@@ -15397,62 +15404,86 @@ export default {
     grid-row: 1 / span 3;
     grid-column: 5;
     min-width: 0;
-    padding: 8px 0;
+    padding: 4px 0;
   }
 
-  &__waybill-route-head {
+  &__waybill-route-item {
+    position: relative;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    align-items: stretch;
     gap: 12px;
 
-    b {
-      display: inline-flex;
-      flex: 0 0 auto;
-      width: 34px;
-      height: 34px;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      border-radius: 4px;
-      background: #409eff;
-
-      &.end {
-        background: #e6a23c;
-      }
-    }
-
-    strong {
-      min-width: 0;
-      overflow: hidden;
-      color: #303133;
-      font-size: 18px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &::before {
-      flex: 1;
-      order: 2;
-      height: 4px;
-      content: '';
-      background: #e4e7ed;
-    }
-
-    b.end {
-      order: 3;
-    }
-
-    strong:last-child {
-      order: 4;
+    & + & {
+      margin-top: 18px;
     }
   }
 
-  &__waybill-route-text {
-    margin-top: 12px;
+  &__waybill-route-dot {
+    position: relative;
+    flex: 0 0 auto;
+    width: 12px;
+    margin-top: 2px;
+
+    &::before {
+      display: block;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      content: '';
+      background: #409eff;
+      box-shadow: 0 0 0 3px #fff, 0 0 0 4px #c6e0ff;
+    }
+
+    &.is-end::before {
+      background: #e6a23c;
+      box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f5d9b0;
+    }
+  }
+
+  &__waybill-route-item:not(:last-child) &__waybill-route-dot::after {
+    content: '';
+    position: absolute;
+    top: 14px;
+    left: 5px;
+    width: 2px;
+    height: calc(100% + 10px);
+    background: repeating-linear-gradient(
+      to bottom,
+      #c0c4cc 0,
+      #c0c4cc 4px,
+      transparent 4px,
+      transparent 8px
+    );
+  }
+
+  &__waybill-route-detail {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__waybill-route-label {
+    color: #909399;
+    font-size: 12px;
+  }
+
+  &__waybill-route-name {
+    color: #303133;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.4;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  &__waybill-route-addr {
     overflow: hidden;
     color: #606266;
-    text-align: center;
+    font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }