style(business): 调整多处组件样式优化详情页视觉效果

- 修改 loading-manage.vue 中流程线条高度和颜色为6px浅灰色
- 在 master-order.vue 添加节点名称悬浮提示，调整进度条宽度和高度，居中标题字号
- 更新 master-order-detail.vue 路由线条样式加粗为6px浅灰色
- 优化 master-order-dispatch.vue 路由线条宽度改为6px浅灰色
- voucher-manage.vue 表单结构新增 section-card 容器组件，上传区和关联运输批次按钮布局优化
- voucher-manage.vue 引入 SectionCard 组件用于包裹上传表单区域

src/views/business/components/master-order-detail.vue

@@ -117,7 +117,7 @@ export default {
 .route-map__node { display: grid; flex: 0 0 150px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } }
 .route-map__progress { color: #409eff !important; }
 .route-badge { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 4px; background: #67c23a; color: #fff; font-weight: 600; &.start { background: #409eff; } &.end { background: #e6a23c; } }
-.route-map__line { flex: 1 0 64px; min-width: 64px; height: 32px; border-bottom: 2px solid #606266; }
+.route-map__line { flex: 1 0 64px; min-width: 64px; height: 32px; border-bottom: 6px solid #e4e7ed; }
 .execution-detail-heading { padding: 20px 24px 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } }
 .segment-detail { padding: 16px 24px; border-top: 1px solid #eff1f7; header { display: flex; align-items: center; justify-content: space-between; margin: -16px -24px 8px; padding: 12px 24px; cursor: pointer; background: #fafbfc; h3 { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 16px; } em { color: #409eff; font-style: normal; } } }
 .segment-detail__progress { color: #606266; font-size: 14px; font-weight: 400; }

src/views/business/components/master-order-dispatch.vue

@@ -627,7 +627,7 @@ export default {
 .route-overview { display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 8px; overflow-x: auto; }
 .route-overview__node { display: grid; flex: 0 0 130px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } }
 .route-badge { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 4px; background: #67c23a; color: #fff; font-weight: 600; &.start { background: #409eff; } &.end { background: #e6a23c; } }
-.route-overview__line { flex: 1 0 56px; min-width: 56px; height: 32px; margin-top: 0; border-bottom: 2px solid #606266; }
+.route-overview__line { flex: 1 0 56px; min-width: 56px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; }
 .segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } }
 .segment-content { padding: 16px 24px; }
 .dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } }

src/views/business/loading-manage.vue

@@ -2360,7 +2360,7 @@ export default {
   .loading-detail__value { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; }
   .loading-detail__steps { display: flex; align-items: flex-start; overflow-x: auto; padding: 8px 4px 16px; }
   .loading-detail__step { position: relative; min-width: 190px; flex: 1; text-align: center; }
-  .loading-detail__step:not(:last-child)::after { position: absolute; z-index: 0; top: 16px; left: calc(50% + 25px); width: calc(100% - 50px); height: 2px; content: ''; background: #606266; }
+  .loading-detail__step:not(:last-child)::after { position: absolute; z-index: 0; top: 16px; left: calc(50% + 25px); width: calc(100% - 50px); height: 6px; content: ''; background: #e4e7ed; }
   .loading-detail__step-line { display: flex; align-items: center; justify-content: center; }
   .loading-detail__step-dot { position: relative; z-index: 1; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #fff; border-radius: 4px; font-weight: 600; }
   .loading-detail__step-dot.start { background: #409eff; }.loading-detail__step-dot.middle { background: #67c23a; }.loading-detail__step-dot.end { background: #e6a23c; }

src/views/business/master-order.vue

@@ -76,7 +76,7 @@
                   <div class="route-point">
                     <span :class="['route-node', node.type]">{{ node.text }}</span>
                     <div class="route-detail">
-                      <strong>{{ node.name }}</strong>
+                      <el-tooltip placement="top"><template #content>{{ node.name }}</template><strong>{{ node.name }}</strong></el-tooltip>
                       <span v-for="line in node.lines" :key="line">{{ line }}</span>
                     </div>
                   </div>
@@ -511,8 +511,8 @@ export default {
     }
   }
   .route-connector {
-    width: clamp(180px, 20vw, 344px);
+    width: clamp(180px, 20vw, 266px);
-    flex: 0 0 clamp(180px, 20vw, 344px);
+    flex: 0 0 clamp(180px, 20vw, 266px);
     padding-top: 2px;
     margin: 0 -6px;
     small {
@@ -525,8 +525,8 @@ export default {
       line-height: 1.2;
     }
     :deep(.el-progress-bar__outer) {
-      height: 8px !important;
+      height: 6px !important;
-      background-color: #f1f2f5;
+      background-color: #e4e7ed;
     }
     :deep(.el-progress-bar__inner) {
       background-color: #409eff;
@@ -538,6 +538,8 @@ export default {
     header {
       margin-bottom: 10px;
       font-weight: 600;
+      font-size: 14px;
+      text-align: center;
     }
     .el-link {
       display: flex;

src/views/business/voucher-manage.vue

@@ -153,15 +153,16 @@
     destroy-on-close
     :before-close="beforeUploadDialogClose"
   >
-    <el-form
+    <section-card>
-      ref="uploadFormRef"
+      <el-form
-      :model="editing"
+        ref="uploadFormRef"
-      :rules="rules"
+        :model="editing"
-      label-position="right"
+        :rules="rules"
-      label-width="auto"
+        label-position="right"
-      class="voucher-manage-page__upload-form"
+        label-width="auto"
-    >
+        class="voucher-manage-page__upload-form"
-      <el-form-item label="项目名称" prop="projectId"
+      >
+        <el-form-item label="项目名称" prop="projectId"
         ><el-select
           v-model="editing.projectId"
           class="voucher-manage-page__project-select"
@@ -169,13 +170,13 @@
           filterable
           placeholder="请选择"
           @change="changeProject"
-          ><el-option
+        ><el-option
-            v-for="item in projectOptions"
+          v-for="item in projectOptions"
-            :key="item.id"
+          :key="item.id"
-            :label="item.projectName"
+          :label="item.projectName"
-            :value="item.id" /></el-select
+          :value="item.id" /></el-select
-      ></el-form-item>
+        ></el-form-item>
-      <el-form-item label="执行凭证" prop="fileUrl"
+        <el-form-item label="执行凭证" prop="fileUrl"
         ><el-upload
           action="#"
           accept=".zip,.7z"
@@ -183,26 +184,28 @@
           :limit="1"
           :on-change="uploadVoucher"
           :on-remove="clearFile"
-          ><el-button
+        ><el-button
-            type="primary"
+          type="primary"
-            :loading="uploading"
+          :loading="uploading"
-            :disabled="!editing.projectId || uploading"
+          :disabled="!editing.projectId || uploading"
-            >上传</el-button
+        >上传</el-button
-          ><template #tip
+        ><template #tip
-            ><span class="voucher-manage-page__upload-tip"
+        ><span class="voucher-manage-page__upload-tip"
-              >支持 zip、7z 格式，采用分片上传，上传中断后可在“上传进度”继续上传。</span
+        >支持 zip、7z 格式，采用分片上传，上传中断后可在“上传进度”继续上传。</span
-            ></template
+        ></template
-          ></el-upload
+        ></el-upload
         ><el-progress
           v-if="uploading || editing.fileTaskId"
           :percentage="uploadPercent"
           :status="uploadPercent === 100 ? 'success' : undefined"
           class="voucher-manage-page__upload-progress"
-      /></el-form-item>
+        /></el-form-item>
-      <el-form-item label="关联运输批次" prop="waybillImportBatchIds"
+        <el-form-item label="关联运输批次" prop="waybillImportBatchIds"
         ><el-button type="primary" @click="openBatchDialog">选择</el-button></el-form-item
-      >
+        >
-    </el-form>
+      </el-form>
+    </section-card>
+
     <el-table :data="selectedBatches" border
       ><el-table-column type="index" label="序号" width="80" /><el-table-column
         prop="batchNo"
@@ -405,6 +408,7 @@ import md5 from 'js-md5';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { getList as getProjectList } from '@/api/business/project-apply';
 import * as api from '@/api/business/voucher-manage';
+import SectionCard from '@/components/section-card/main.vue';
 
 const loading = ref(false),
   rows = ref([]),