feat:添加暗黑样式

src/components/MoreFilters/src/components/SelectValue.vue

@@ -205,6 +205,7 @@ const clickSeeAll = () => {
   background-color: white;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-6);
+  background-color: var(--tips-bg-color);
 }
 .select:hover {
   border: 1px solid var(--color-theme);
@@ -333,7 +334,7 @@ const clickSeeAll = () => {
   overflow: scroll;
 }
 .isDisabled {
-  background-color: #f5f7fa;
+  background-color: var(--tips-bg-color);
   color: #a8abb2;
   cursor: not-allowed;
   box-shadow: none !important;

src/components/ScoringGrade/components/DialogColorful.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import BubbleLight from '../image/bubble_corner_colorful.png'
+import BubbleDark from '../image/bubble_corner_colorful_darkmode.png'
 const props = defineProps({
   colorfulSrc: String,
   isshowexpression: Boolean,
@@ -10,6 +12,7 @@ const emits = defineEmits(['submitDetails'])
 const submitDetails = (val: any) => {
   emits('submitDetails', val)
 }
+const theme = localStorage.getItem('theme')
 </script>
 <template>
   <div class="colorfulflex">
@@ -18,7 +21,7 @@ const submitDetails = (val: any) => {
         <img :src="props.colorfulSrc" />
       </div>
       <div class="vector">
-        <img class="vector_img" src="../image/bubble_corner_colorful.png" />
+        <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
     <div v-if="props.isshowDetails" class="dialogcolorful submit">
@@ -38,7 +41,7 @@ const submitDetails = (val: any) => {
         </div>
       </div>
       <div class="vector vector_submit">
-        <img class="vector_img" src="../image/bubble_corner_colorful.png" />
+        <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
       </div>
     </div>
   </div>
@@ -62,7 +65,7 @@ const submitDetails = (val: any) => {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-4);
   border-radius: var(--border-radius-12) var(--border-radius-12) 0 var(--border-radius-12);
-  background: linear-gradient(251deg, rgba(242, 244, 247) 0%, rgba(255, 237, 230) 100%);
+  background: var(--scoring-colurful-color);
   padding: 8px;
   width: 56px;
   height: 56px;
@@ -108,4 +111,9 @@ const submitDetails = (val: any) => {
   font-weight: 400;
   font-size: var(--font-size-3);
 }
+.inputdetails {
+  background-color: var(--management-bg-bolor);
+  border-radius: 6px;
+  border-color: var(--border-color-1);
+}
 </style>

src/components/ScoringGrade/components/DialogUe.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import BubbleLight from '../image/bubble_corner.png'
+import BubbleDark from '../image/bubble_corner_darkmode.png'
 
 const props = defineProps({
   content: String,
@@ -77,6 +79,7 @@ const changeSmileRadio = (title: any, value: any) => {
   SmileObj[title] = value
   emits('changeSmileRadio', SmileObj)
 }
+const theme = localStorage.getItem('theme')
 </script>
 <template>
   <div style="margin-bottom: 8px">
@@ -130,7 +133,9 @@ const changeSmileRadio = (title: any, value: any) => {
         </div>
       </div>
     </div>
-    <div class="vector"><img class="vector_img" src="../image/bubble_corner.png" /></div>
+    <div class="vector">
+      <img class="vector_img" :src="theme == 'light' ? BubbleLight : BubbleDark" />
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -142,7 +147,7 @@ const changeSmileRadio = (title: any, value: any) => {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-4);
   border-radius: var(--border-radius-12) var(--border-radius-12) var(--border-radius-12) 0;
-  background-color: #f2f4f7;
+  background-color: var(--scoring-bg-color);
   padding: 8px;
 }
 .vector {
@@ -154,6 +159,7 @@ const changeSmileRadio = (title: any, value: any) => {
 :deep(.el-checkbox-button__inner) {
   color: var(--tag-info-text-color);
   font-size: var(--font-size-3);
+  background-color: var(--management-bg-bolor);
   font-weight: 400;
   padding: 0;
   width: 180px;
@@ -161,7 +167,7 @@ const changeSmileRadio = (title: any, value: any) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   border-radius: var(--border-radius-6);
   margin-bottom: 8px;
 }

src/components/ScoringGrade/src/ScoringGrade.vue

@@ -389,7 +389,7 @@ const SubmitText = ref()
   width: 64px;
   height: 64px;
   border-radius: 12px 0 0 12px;
-  background-color: #fff;
+  background-color: var(--management-bg-bolor);
   position: absolute;
   box-shadow: -2px 2px 12px rgba(0, 0, 0, 15%);
   z-index: 2013;
@@ -400,7 +400,7 @@ const SubmitText = ref()
   justify-content: center;
 }
 .el-avatar {
-  background-color: #fff;
+  background-color: var(--management-bg-bolor);
   cursor: pointer;
 }
 .score_flex {
@@ -410,7 +410,7 @@ const SubmitText = ref()
   position: absolute;
   right: 64px;
   top: -30px;
-  background-color: white;
+  background-color: var(--management-bg-bolor);
   border-radius: 12px 0 0 12px;
 }
 .score {

src/styles/elementui.scss

@@ -119,10 +119,8 @@ button.el-button.el-button--text {
 .el-button.el-button--grey {
   border: none;
   background-color: var(--color-grey);
-  color: var(--color-accent-1);
-  .icon_more {
-    fill: var(--color-accent-1);
-  }
+  color: var(--color-neutral-1);
+  fill: var(--color-neutral-1);
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
     fill: var(--color-theme);
@@ -331,6 +329,7 @@ div.el-drawer {
   }
   .el-drawer__body {
     padding: 16px;
+    background-color: var(--color-table-header-bg);
   }
   .el-drawer__close-btn:focus i,
   .el-drawer__close-btn:hover i {
@@ -619,6 +618,9 @@ div .scoreDialog header.el-dialog__header {
   height: 48px;
   border-radius: 6px 6px 0 0;
 }
+div .el-dialog.scoreDialog {
+  background-color: var(--management-bg-bolor);
+}
 div .scoreDialog .el-dialog__body {
   margin-top: 40px;
 }
@@ -707,6 +709,8 @@ div .el-loading-spinner .path {
 }
 div .ShowAlerIcon {
   width: 342px;
+  background-color: var(--tips-bg-color) !important;
+  border-color: var(--tips-bg-color) !important;
 }
 div .dash_popver {
   border-radius: 12px !important;

src/styles/theme-g.scss

@@ -8,6 +8,7 @@
     rgba(118, 145, 255,0.1) 49.92%,
     rgba(96, 242, 255,0.1) 98.78%
   );
+  --scoring-colurful-color: linear-gradient(251deg, rgba(113, 103, 99) 0%,rgba(92, 106, 125) 100%);
 
   // button 
   --color-btn-default-bg-color: transparent;
@@ -41,4 +42,17 @@
   // 日历
   --color-orange-6: rgba(237, 109, 0,0.2);
   --color-range-text: #ED6D00;
+
+  // more filters
+  --color-table-header-bg: #343A43;
+  --icon-color-black: #fff;
+  --more-filters-background-color: #2A2E34;
+  --addparties-background-color: #343A43;
+  --color-border-top: #3F434A;
+
+  --tag-bg-color: rgba(239, 239, 240, 0.1);
+  --tag-info-text-color: #fff;
+  --tips-bg-color: rgba(26, 28, 32, 1);
+
+  --scoring-bg-color: #525b69;
 }

src/styles/theme.scss

@@ -149,10 +149,14 @@
     rgba(240, 243, 255, 0.5) 44.57%,
     rgba(224, 247, 249, 0.6) 80.46%,
     rgba(255, 255, 255, 0.3)
-  )
+  );
   
   --color-range-text: #2b2f36;
+  --tag-bg-color: rgba(239, 239, 240);
+  --tips-bg-color: rgba(26, 28, 32, 1);
+  --scoring-bg-color: #f2f4f7;
   
+  --scoring-colurful-color: linear-gradient(251deg, rgba(242, 244, 247) 0%, rgba(255, 237, 230) 100%);
 }
 
 :root.dark {

src/views/Booking/src/BookingView.vue

@@ -415,7 +415,7 @@ const SearchInput = () => {
               placement="bottom"
             >
               <span class="iconfont_icon iconfont_icon_tip">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_search" aria-hidden="true">
                   <use xlink:href="#icon-icon_info_b"></use>
                 </svg>
               </span>
@@ -510,12 +510,13 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: #efeff0;
+  border-color: var(--tag-bg-color);
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
   font-weight: 600;
   font-size: var(--font-size-2);
+  background-color: var(--tag-bg-color) !important;
 }
 .iconfont_icon_tip {
   margin-left: 8px;

src/views/Tracking/src/TrackingView.vue

@@ -645,7 +645,7 @@ const SearchInput = () => {
         <el-input placeholder="Search shipment No./reference No...." v-model="TrackingSearch">
           <template #prefix>
             <span class="iconfont_icon">
-              <svg class="iconfont" aria-hidden="true">
+              <svg class="iconfont icon_search" aria-hidden="true">
                 <use xlink:href="#icon-icon_search_b"></use>
               </svg>
             </span>
@@ -660,7 +660,7 @@ const SearchInput = () => {
               placement="bottom"
             >
               <span class="iconfont_icon iconfont_icon_tip">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_search" aria-hidden="true">
                   <use xlink:href="#icon-icon_info_b"></use>
                 </svg>
               </span>
@@ -756,12 +756,23 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: #efeff0;
+  border-color: var(--tag-bg-color);
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
   font-weight: 600;
   font-size: var(--font-size-2);
+  background-color: var(--tag-bg-color) !important;
+}
+.iconfont_icon_tip {
+  margin-left: 8px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+}
+.icon_search {
+  fill: var(--color-neutral-1);
 }
 @media only screen and (min-width: 1280px) {
   .search {