|
|
|
@@ -20,16 +20,28 @@
|
|
|
|
|
<template v-for="(route, index) in routes" :key="route.segmentNo">
|
|
|
|
|
<div class="route-overview__node">
|
|
|
|
|
<span :class="['route-badge', index === 0 ? 'start' : 'middle']">{{ index === 0 ? '起' : '经' }}</span>
|
|
|
|
|
<strong>{{ route.departureName || '-' }}</strong>
|
|
|
|
|
<small>{{ route.departureAddress || '-' }}</small>
|
|
|
|
|
<small>{{ contactText(route.departureContact, route.departurePhone) }}</small>
|
|
|
|
|
<el-tooltip :content="route.departureName || '-'" placement="top" :show-after="120">
|
|
|
|
|
<strong>{{ route.departureName || '-' }}</strong>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<el-tooltip :content="route.departureAddress || '-'" placement="top" :show-after="120">
|
|
|
|
|
<small>{{ route.departureAddress || '-' }}</small>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<el-tooltip :content="contactText(route.departureContact, route.departurePhone)" placement="top" :show-after="120">
|
|
|
|
|
<small>{{ contactText(route.departureContact, route.departurePhone) }}</small>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="route-overview__line"></div>
|
|
|
|
|
<div v-if="index === routes.length - 1" class="route-overview__node">
|
|
|
|
|
<span class="route-badge end">终</span>
|
|
|
|
|
<strong>{{ route.arrivalName || '-' }}</strong>
|
|
|
|
|
<small>{{ route.arrivalAddress || '-' }}</small>
|
|
|
|
|
<small>{{ contactText(route.arrivalContact, route.arrivalPhone) }}</small>
|
|
|
|
|
<el-tooltip :content="route.arrivalName || '-'" placement="top" :show-after="120">
|
|
|
|
|
<strong>{{ route.arrivalName || '-' }}</strong>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<el-tooltip :content="route.arrivalAddress || '-'" placement="top" :show-after="120">
|
|
|
|
|
<small>{{ route.arrivalAddress || '-' }}</small>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<el-tooltip :content="contactText(route.arrivalContact, route.arrivalPhone)" placement="top" :show-after="120">
|
|
|
|
|
<small>{{ contactText(route.arrivalContact, route.arrivalPhone) }}</small>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
@@ -676,10 +688,10 @@ export default {
|
|
|
|
|
.overview-content { display: grid; grid-template-columns: minmax(400px, .9fr) minmax(620px, 1.6fr); gap: 28px; padding: 8px 24px 20px; }
|
|
|
|
|
.overview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0; dt { margin-bottom: 6px; color: #909399; font-size: 13px; } dd { margin: 0; color: #409eff; font-size: 14px; word-break: break-all; } }
|
|
|
|
|
.overview-meta dd.overview-meta__plain-value { color: #303133; }
|
|
|
|
|
.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-overview { display: flex; align-items: flex-start; justify-content: flex-start; padding: 8px 24px 0; overflow-x: auto; }
|
|
|
|
|
.route-overview__node { display: grid; flex: 0 0 auto; min-width: 130px; max-width: 200px; justify-items: center; gap: 6px; text-align: center; padding: 0 4px; strong { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } small { color: #606266; max-width: 100%; overflow: hidden; text-overflow: ellipsis; 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: 6px solid #e4e7ed; }
|
|
|
|
|
.route-overview__line { flex: 0 1 56px; min-width: 24px; 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%; } }
|
|
|
|
@@ -704,4 +716,7 @@ export default {
|
|
|
|
|
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
|
|
|
@media screen and (max-width: 1200px) { .overview-content { grid-template-columns: 1fr; } .route-overview { justify-content: flex-start; } }
|
|
|
|
|
@media screen and (max-width: 992px) { .dispatch-bottom { left: 0; width: 100%; } }
|
|
|
|
|
.route-overview {
|
|
|
|
|
margin-top: -30px !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|