style: 修改shipment status和Customer column部分暗黑模式样式

src/components/CustomizeColumns/src/CustomizeColumns.vue

@@ -349,11 +349,7 @@ defineExpose({
           placeholder="Search columns you preffered"
         >
           <template #prefix>
-            <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
-                <use xlink:href="#icon-icon_search_b"></use>
-              </svg>
-            </span>
+            <span class="font_family icon-icon_search_b"></span>
           </template>
           <el-option
             v-for="item in searchOptions"
@@ -578,9 +574,10 @@ defineExpose({
       padding-left: 12px;
       border: 1px solid var(--color-border);
       border-radius: 6px;
+      background-color: var(--color-customize-column-item-bg);
 
       &:hover {
-        background-color: #fff1e5;
+        background-color: var(--color-customize-column-item-hover-bg);
         box-shadow: 4px 4px 32px 0px rgba(0, 0, 0, 0.1);
       }
 
@@ -590,7 +587,7 @@ defineExpose({
 
       span.draggable-icon {
         margin-right: 12px;
-        color: var(--color-neutral-3);
+        color: var(--color-customize-column-item-drag-icon);
       }
 
       .font_family {
@@ -608,13 +605,18 @@ defineExpose({
   }
 
   .ghost-column {
-    opacity: 0;
     cursor: move !important;
+    span {
+      opacity: 0;
+    }
+    border: 1px dashed var(--color-customize-column-item-drag-border) !important;
+    background-color: var(--color-customize-column-item-drag-bg) !important;
+    box-shadow: none !important;
   }
 
   .fallback-class {
     opacity: 1 !important;
-    background-color: #fff1e5 !important;
+    background-color: var(--color-customize-column-item-hover-bg) !important;
     cursor: move !important;
   }
 }
@@ -630,7 +632,7 @@ defineExpose({
     .el-tabs {
       .el-tabs__header {
         margin-bottom: 0px;
-        border-bottom: 1px solid #ebeef5;
+        border-bottom: 1px solid var(--color-customize-column-tabs-header-border);
       }
 
       .el-tabs__item {
@@ -655,9 +657,9 @@ defineExpose({
 }
 
 .right-select-columns {
-  background-color: #fffbf7;
+  background-color: var(--color-customize-column-right-section-bg);
   padding-top: 0;
-  border: 1px dashed var(--color-border);
+  border: 1px dashed var(--color-customize-column-right-section-border);
   border-radius: 12px;
 
   & > .title {
@@ -672,10 +674,6 @@ defineExpose({
     padding: 8px;
     padding-bottom: 0px;
   }
-
-  .column-item {
-    background-color: #fff;
-  }
 }
 </style>
 <style lang="scss">
@@ -701,13 +699,16 @@ defineExpose({
 
   .el-tabs__nav-prev {
     border-right: 1px solid var(--color-border);
-    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 0px 12px rgba(0, 0, 0, 0.3);
+    // .el-icon {
+    //   color: white;
+    // }
     /* 左侧阴影 */
   }
 
   .el-tabs__nav-next {
     border-left: 1px solid var(--color-border);
-    box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: -2px 0px 12px rgba(0, 0, 0, 0.2);
     /* 左侧阴影 */
   }
 

src/components/ShipmentStatus/src/ShipmentStatus.vue

@@ -111,7 +111,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
       font-weight: 700;
       text-align: center;
       line-height: 16px;
-      color: #fff;
+      color: var(--color-mode);
     }
     .right-info {
       flex: 1;
@@ -143,7 +143,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
         .label {
           // width: 96px;
           background-color: var(--color-neutral-1);
-          color: #fff;
+          color: var(--color-mode);
           font-weight: 500;
           font-size: 12px;
           border-radius: 3px 0 0 3px;
@@ -151,7 +151,7 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
         .detail-path {
           flex: 1;
           width: 252px;
-          background-color: #fff;
+          background-color: transparent;
           font-weight: 700;
           color: var(--color-neutral-1);
           border: 1px solid #bfc1c3;
@@ -190,21 +190,21 @@ const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
   &.last {
     & > .data {
       .left-step-icon {
-        background-color: #ccd1db;
+        background-color: var(--color-shipment-status-label-bg);
       }
       .right-info {
         .step-dot {
-          background-color: #ccd1db;
+          background-color: var(--color-shipment-status-label-bg);
         }
         .path {
           .label {
-            background-color: #ccd1db;
+            background-color: var(--color-shipment-status-label-bg);
 
             font-weight: 600;
             color: var(--color-neutral-1);
           }
           .detail-path {
-            border-color: #ccd1db;
+            border-color: var(--color-shipment-status-label-bg);
           }
         }
       }

src/styles/theme.scss

@@ -185,6 +185,17 @@
 
   --color-tracking-routes-item-bg: #fef8f3;
   --color-tracking-routes-item-leg-bg: #f6f2ee;
+
+  --color-customize-column-right-section-bg: #fffbf7;
+  --color-customize-column-right-section-border: #eaebed;
+  --color-customize-column-item-bg: #fff;
+  --color-customize-column-item-hover-bg: #fff1e5;
+  --color-customize-column-item-drag-icon: var(--color-neutral-3);
+  --color-customize-column-item-drag-border: var(--color-customize-column-right-section-bg);
+  --color-customize-column-item-drag-bg: var(--color-customize-column-right-section-bg);
+  --color-customize-column-tabs-header-border: #ebeef5;
+
+  --color-shipment-status-label-bg: #ccd1db;
 }
 
 :root.dark {
@@ -202,6 +213,16 @@
   --color-download-file-filter-tag-bg: #3f4249;
   --color-download-file-selected-column-tag-bg: #474e57;
 
+  --color-customize-column-right-section-bg: #453b36;
+  --color-customize-column-right-section-border: var(--color-theme);
+  --color-customize-column-item-bg: #3a4149;
+  --color-customize-column-item-hover-bg: #585b60;
+  --color-customize-column-item-drag-icon: var(--color-neutral-1);
+  --color-customize-column-item-drag-border: var(--color-theme);
+  --color-customize-column-item-drag-bg: #7d4c26;
+  --color-customize-column-tabs-header-border: #3f434a;
+
+  --color-shipment-status-label-bg: #656f7d;
   // 滚动条
   --color-scrollbar-thumb: #656f7d;
 

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -324,7 +324,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -272,7 +272,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -395,6 +395,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           .line_container hr {
             width: 100%;
             border-radius: 0 2px 6px 0;
+            border-color: var(--color-neutral-1);
           }
           .line_container .right-icon {
             position: absolute;
@@ -402,7 +403,7 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
             right: 0px;
             width: 10px;
             height: 11px;
-            border-top: 2px solid #000000;
+            border-top: 2px solid var(--color-neutral-1);
             transform: rotate(30deg);
             border-radius: 0 1px 0 0;
           }

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -357,16 +357,16 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
     margin-left: 8px;
   }
   .line_container hr {
-    border-color: #484c52;
+    border-color: var(--color-neutral-1);
     border-top: none;
   }
 
   .line_container .right-icon {
-    border-top: 1px solid #484c52;
-    border-radius: 0 1px 1px 0;
-    top: -2px;
+    border-top: 2px solid var(--color-neutral-1);
+    border-radius: 0 2px 2px 0px;
+    top: -4px;
     right: 0px;
-    width: 10px;
+    width: 12px;
     height: 12px;
   }
   .date-info {
@@ -487,6 +487,7 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
   width: 100%;
   min-width: 16px;
   border-radius: 0 2px 6px 0;
+  border-color: var(--color-neutral-1);
 }
 
 .line_container .right-icon {
@@ -495,7 +496,7 @@ const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinatio
   right: 0px;
   width: 10px;
   height: 11px;
-  border-top: 2px solid #000000;
+  border-top: 2px solid var(--color-neutral-1);
   transform: rotate(30deg);
   border-radius: 0 1px 0 0;
 }

src/views/Tracking/src/components/TrackingDetail/src/components/TransportStep.vue

@@ -67,6 +67,7 @@ const handleTabClick = (name: string) => {
   }
   .content {
     height: calc(100% - 48px);
+    background-color: var(--color-mode);
   }
 }
 </style>