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 @@ -
+
+ +
@@ -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; } }