feat: 合并feat_theme分支

package.json

@@ -26,6 +26,7 @@
     "axios": "^1.7.5",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
+    "decimal.js": "^10.4.3",
     "echarts": "^5.5.1",
     "element-plus": "^2.8.1",
     "exceljs": "^4.4.0",

src/components/DateRange/src/DateRange.vue

@@ -292,18 +292,26 @@ const clearDaterangeObj = () => {
 </script>
 <template>
   <div class="select">
-    <el-popover trigger="click" :width="400" :visible="Date_visible">
+    <el-popover
+      trigger="click"
+      :width="400"
+      :visible="Date_visible"
+      :popper-style="{
+        backgroundColor: 'var(--management-bg-bolor)',
+        borderColor: 'var(--management-bg-bolor)'
+      }"
+    >
       <template #reference>
         <div class="Date_Range" @blur="Date_visible = false" @click="Date_visible = !Date_visible">
           <div class="select_title">Date Range</div>
           <span class="iconfont_icon">
-            <svg class="iconfont" aria-hidden="true">
+            <svg class="iconfont icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
         </div>
       </template>
-      <div>
+      <div style="background-color: var(--management-bg-bolor)">
         <div class="title">Date Range</div>
         <div class="ETD">
           <CalendarDate
@@ -404,7 +412,7 @@ const clearDaterangeObj = () => {
 .title {
   font-weight: 700;
   font-size: var(--font-size-5);
-  background-color: #f6f8fa;
+  background-color: var(--color-header-bg);
   height: 48px;
   display: flex;
   align-items: center;
@@ -447,7 +455,7 @@ const clearDaterangeObj = () => {
   height: 40px;
 }
 .AddType {
-  background-color: var(--color-neutral-4);
+  background-color: var(--color-header-bg);
   margin: 0 16px 8px 16px;
   padding: 8px;
   border-radius: var(--border-radius-6);
@@ -493,4 +501,7 @@ const clearDaterangeObj = () => {
   padding: 0 4px;
   height: 24px;
 }
+.icon_dark {
+  fill: var(--color-neutral-1);
+}
 </style>

src/components/DateRange/src/components/CalendarDate.vue

@@ -104,7 +104,11 @@ const isTwoDate = (date: any) => {
     <a-range-picker
       separator="To"
       :showToday="false"
-      :style="{ width: props.CalendarWidth }"
+      :style="{
+        width: props.CalendarWidth,
+        backgroundColor: 'var(--management-bg-bolo)',
+        borderColor: 'var(--border-color-1)'
+      }"
       :open="open"
       :disabled="Disabled"
       @change="changeRangeData"
@@ -117,7 +121,7 @@ const isTwoDate = (date: any) => {
     >
       <template #suffixIcon>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_suffix" aria-hidden="true">
             <use xlink:href="#icon-icon_date_b"></use>
           </svg>
         </span>
@@ -154,7 +158,7 @@ const isTwoDate = (date: any) => {
   align-items: center;
 }
 .footer_right {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
   padding-left: 8px;
 }
 .el-button--noborder {
@@ -172,4 +176,7 @@ const isTwoDate = (date: any) => {
   width: 14px;
   height: 14px;
 }
+.icon_suffix {
+  fill: var(--color-neutral-1);
+}
 </style>

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -129,7 +129,7 @@ const placeholder = computed(() => {
     >
       <template #suffixIcon>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_date_b"></use>
           </svg>
         </span>

src/components/IconDropDown/src/IconDropDown.vue

@@ -13,6 +13,6 @@
 .iconfont_select {
   width: 17px;
   height: 17px;
-  fill: var(--color-btn-default-dark-bg);
+  fill: var(--color-neutral-1);
 }
 </style>

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;
 }
@@ -219,9 +225,9 @@ const changeSmileRadio = (title: any, value: any) => {
 }
 .content_left {
   height: 41px;
-  background-color: #fff;
+  background-color: var(--management-bg-bolor);
   font-weight: 400;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   font-size: var(--font-size-3);
   border-radius: 6px 0 0 6px;
   display: flex;
@@ -234,7 +240,7 @@ const changeSmileRadio = (title: any, value: any) => {
   justify-content: center;
 }
 .content_right {
-  background-color: #e0e2e6;
+  background-color: var(--scoring-smile-radio-color);
   border-radius: 0 6px 6px 0;
 }
 .el-radio {

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/components/TransportMode/src/TransportMode.vue

@@ -180,7 +180,7 @@ const defaultTransport = () => {
       <div class="el-dropdown-link">
         <div class="select_title">Transport Mode</div>
         <span class="iconfont_icon">
-          <svg class="iconfont" aria-hidden="true">
+          <svg class="iconfont icon_dark" aria-hidden="true">
             <use xlink:href="#icon-icon_dropdown_b"></use>
           </svg>
         </span>
@@ -244,6 +244,7 @@ const defaultTransport = () => {
 .iconfont_select {
   width: 17px;
   height: 17px;
+  fill: var(--color-neutral-1);
 }
 .select {
   width: 186px;
@@ -307,7 +308,7 @@ const defaultTransport = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color-2);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -339,8 +340,13 @@ const defaultTransport = () => {
   border-radius: var(--border-radius-6);
   border-color: var(--border-hover-color);
 }
+:deep(.el-dropdown-menu) {
+  background-color: var(--management-bg-bolor);
+}
 .dropdownwidth {
   width: 248px;
+  background-color: var(--management-bg-bolor);
+  border-color: var(--management-bg-bolor);
 }
 @media only screen and (min-width: 1280px) {
   .el-dropdown-link,
@@ -362,6 +368,6 @@ const defaultTransport = () => {
 }
 .el-divider--horizontal {
   margin: 8px 0;
-  border-top-color: var(--color-border);
+  border-top-color: var(--border-color-2);
 }
 </style>

src/components/VBox_Dashboard/src/VBox_Dashboard.vue

@@ -75,6 +75,7 @@ const vBoxPopoverRef = ref()
   margin-right: 0;
 }
 .cancel {
+  fill: var(--color-neutral-1);
   position: absolute;
   right: 12px;
   top: 12px;
@@ -94,6 +95,7 @@ const vBoxPopoverRef = ref()
     padding: 0 16px 0 48px;
     height: 48px;
     line-height: 48px;
+    fill: var(--color-neutral-1);
     font-size: 18px;
     border-bottom: 1px solid var(--color-border);
     font-weight: 700;

src/styles/Antdui.scss

@@ -1,6 +1,6 @@
 .ant-picker-range {
   height: 32px;
-  border: 1px solid var(--color-border-1);
+  border: 1px solid var(--border-color-1);
 }
 .ant-picker:hover, .ant-picker-focused {
   border-color: var(--color-theme);
@@ -55,11 +55,14 @@
   .ant-picker-dropdown .ant-picker-header-view button:hover {
     color: var(--color-theme);
   }
+  .ant-picker-dropdown .ant-picker-panel-container {
+    background-color: var(--management-bg-bolor);
+  }
   .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels .ant-picker-panel {
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--border-color-2);
   }
   .ant-picker-footer {
-    border-top: 1px solid var(--color-border);
+    border-top: 1px solid var(--border-color-2);
   }
   .ant-picker-dropdown .ant-picker-panel {
     border: none;
@@ -71,6 +74,25 @@
   color: var(--color-neutral-3);
  }
 .ant-picker-dropdown .ant-picker-decade-panel,.ant-picker-dropdown .ant-picker-year-panel,.ant-picker-dropdown .ant-picker-quarter-panel,.ant-picker-dropdown .ant-picker-month-panel,.ant-picker-dropdown .ant-picker-week-panel,.ant-picker-dropdown .ant-picker-date-panel,.ant-picker-dropdown .ant-picker-time-panel {
-  
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
+}
+.ant-picker .ant-picker-input >input, .ant-picker .ant-picker-input >input::placeholder {
+  color: var(--color-neutral-1);
+}
+.ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
+  color: var(--color-range-text);
+}
+.ant-picker-dropdown .ant-picker-header {
+  border-bottom: 1px solid var(--border-color-2);
+}
+.ant-picker .ant-picker-clear {
+  background-color: var(--management-bg-bolor);
+  color: var(--color-neutral-1);
+}
+.ant-picker .ant-picker-clear:hover {
+  color: var(--color-neutral-1);
+}
+.ant-picker {
+  background-color: var(--management-bg-bolor);
+  color: var(--color-neutral-1);
 }

src/styles/elementui.scss

@@ -1,7 +1,7 @@
 // button
 .el-button.el-button--noborder {
   border: none;
-  background-color: var(--color-white);
+  background-color: var(--management-bg-bolor);
   span {
     color: var(--color-theme);
   }
@@ -30,9 +30,10 @@ button.el-button.el-button--text {
 }
 
 .el-button.el-button--default {
-  background-color: var(--color-white);
+  background-color: var(--color-btn-default-bg-color);
   color: var(--color-neutral-1);
-  border: 1px solid var(--color-border);
+  fill: var(--color-neutral-1);
+  border: 1px solid var(--border-color-1);
   margin-left: 8px !important;
   &:hover {
     border: 1px solid var(--color-btn-default-bg-hover);
@@ -50,6 +51,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-theme);
   }
+  fill: var(--color-theme);
   &:hover {
     border: 1px solid var(--color-btn-main-plain-bg-hover);
     background-color: var(--color-btn-main-plain-bg-hover);
@@ -64,6 +66,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-main-bg-hover);
     color: var(--color-white);
@@ -77,6 +80,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-success-bg-hover);
     color: var(--color-white);
@@ -90,6 +94,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-warning-bg-hover);
     color: var(--color-white);
@@ -103,6 +108,7 @@ button.el-button.el-button--text {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-danger-bg-hover);
     color: var(--color-white);
@@ -113,7 +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);
+  color: var(--color-neutral-1);
+  fill: var(--color-neutral-1);
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
     fill: var(--color-theme);
@@ -128,6 +135,7 @@ button.el-button.el-button--text {
   padding: 0 4px;
   background-color: #f6f6fe;
   color: var(--color-accent-1);
+  fill: var(--color-accent-1);
   &:hover {
     background-color: var(--color-btn-default-bg-hover);
     fill: var(--color-theme);
@@ -155,6 +163,7 @@ button.el-button.el-button--icon {
   span {
     color: var(--color-white);
   }
+  fill: var(--color-white);
   &:hover {
     background-color: var(--color-btn-default-dark-bg);
     fill: var(--color-btn-default-dark-hover);
@@ -203,6 +212,7 @@ div.el-dialog {
   padding: 0 0 8px;
   border-radius: 12px;
   overflow: hidden;
+  background-color: var(--management-bg-bolor);
 }
 header.el-dialog__header {
   padding: 12px 16px;
@@ -320,6 +330,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 {
@@ -342,12 +353,12 @@ div .el-select__placeholder.is-transparent {
   }
 }
 div.el-input__wrapper {
-  box-shadow: 0 0 0 1px var(--color-email-border) inset;
+  box-shadow: 0 0 0 1px var(--border-color-1) inset;
   padding-left: 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
   box-shadow: 0 0 0 1px var(--color-theme) inset;
-  background-color: var(--el-input-focus) !important;
+  background-color: var(--color-mode) !important;
 }
 div.el-input__wrapper:hover {
   box-shadow: 0 0 0 1px var(--color-theme) inset;
@@ -373,7 +384,13 @@ div .el-dropdown__popper .el-dropdown__list {
   user-select: none;
 }
 div .el-checkbox__inner:hover {
-  border-color: var(--color-border);
+  border-color: var(--border-color-1);
+}
+div .el-checkbox__inner {
+  border-color: var(--border-color-1);
+}
+div .el-checkbox__input.is-checked .el-checkbox__inner:after {
+  border-color: var(--color-mode);
 }
 div .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: var(--color-theme);
@@ -408,7 +425,7 @@ div .el-popper[data-popper-placement^='bottom'] > .el-popper__arrow {
   top: 0;
 }
 div .el-dropdown-menu__item {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   border-radius: var(--border-radius-6);
 }
 div .el-dropdown__popper.el-popper,
@@ -450,7 +467,7 @@ div .el-collapse-item__content {
   }
 }
 div .el-select__wrapper {
-  box-shadow: 0 0 0 1px var(--color-border);
+  box-shadow: 0 0 0 1px var(--border-color-1);
 }
 div .el-select__wrapper.is-focused {
   box-shadow: 0 0 0 1px var(--color-theme);
@@ -596,31 +613,20 @@ div .el-select__wrapper.is-disabled,
   box-shadow: none !important;
 }
 div .scoreDialog header.el-dialog__header {
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255),
-    rgba(255, 244, 235) 22.66%,
-    rgba(240, 243, 255) 44.57%,
-    rgba(224, 247, 249) 80.46%,
-    rgba(255, 255, 255)
-  );
+  background: var(--dashboard-scoring-bg-color);
   position: fixed;
   width: 640px;
   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;
 }
 div .scoreDialog2 header.el-dialog__header {
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255),
-    rgba(255, 244, 235) 22.66%,
-    rgba(240, 243, 255) 44.57%,
-    rgba(224, 247, 249) 80.46%,
-    rgba(255, 255, 255)
-  );
+  background: var(--dashboard-scoring-bg-color);
   position: fixed;
   width: 640px;
   border-radius: 6px 6px 0 0;
@@ -704,6 +710,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;
@@ -715,3 +723,16 @@ div .el-month-table td.today .el-date-table-cell__text {
   color: var(--color-neutral-1);
   font-weight: 400;
 }
+div .el-select-dropdown {
+  background-color: var(--color-header-bg);
+  border-color: var(--color-header-bg);
+}
+div label.smile_radio .el-radio__inner {
+  background-color: var(--management-bg-bolor);
+}
+div .el-radio__inner:hover {
+  border-color: var(--color-theme);
+}
+div .dash_popver {
+  background-color: var(--management-bg-bolor) !important;
+}

src/styles/index.scss

@@ -47,3 +47,6 @@
   border-radius: var(--border-radius-6);
   background: var(--border-hover-color);
 }
+.icon_dark {
+  fill: var(--color-neutral-1);
+}

src/styles/theme-g.scss

@@ -1,2 +1,59 @@
 :root.dark {
+  // 菜单栏
+  --color-mune-active-bg: rgba(255, 117, 0, 0.2);
+  // 横幅
+  --dashboard-scoring-bg-color: linear-gradient(
+    270deg,
+    rgba(255, 182, 121,0.1) 0.9%,
+    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;
+  --color-btn-default-bg-hover:rgba(255, 117, 0, 0.2);
+  --color-btn-default-dark-bg: #ED6D00;
+  --color-btn-default-dark-hover: #fff;
+  --color-grey: #3C414A;
+
+  --management-bg-bolor: #3e454f;
+
+  // filterstag
+  --color-tag-checked-all: rgba(255, 117, 0, 0.2);
+  --color-tag-all-bg: rgba(255, 117, 0, 0.2);
+  --color-tag-created-bg: rgba(1, 103, 251, 0.2);
+  --color-tag-confirmed-bg: rgba(179, 232, 93, 0.15);
+  --color-tag-cancelled-bg: rgba(240, 241, 243, 0.2);
+  --color-tag-departure-bg: rgba(64, 166, 229, 0.2);
+  --color-tag-cargo-received-bg: rgba(111, 124, 241, 0.2);
+  --color-tag-arrived-bg: rgba(1, 183, 161, 0.2);
+  --color-tag-completed-bg: rgba(91, 180, 98, 0.2);
+
+  --border-color-1: #656f7d;
+  --border-color-2: #4C515A;
+  --border-hover-color: rgba(255, 117, 0, 0.2);
+
+
+  --el-color-info: #fff;
+  --el-border-color-light: #3e454f;
+  --el-checkbox-bg-color: #656f7d;
+
+  // 日历
+  --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;
+  --scoring-smile-radio-color: #626871;
 }

src/styles/theme.scss

@@ -73,6 +73,8 @@
   --color-tag-Departed-bg: #d9edfa;
 
   --color-border: #eaebed;
+  --border-color-1: #eaebed;
+  --border-color-2: #eaebed;
   --color-border-1: #e8eaee;
   --color-border-2: #eaebed;
 
@@ -85,11 +87,12 @@
   // 按钮
   // default
   --color-btn-default-bg-hover: #fff1e6;
+  --color-btn-default-bg-color: #fff;
   // dark
   --color-btn-default-dark-bg: #2b2f36;
   --color-btn-default-dark-hover: #ff7500;
   // main-plain
-  --color-btn-main-plain-bg-hover: #fff1e6;
+  --color-btn-main-plain-bg-hover: hsl(26, 100%, 95%);
   // main
   --color-btn-main-bg-hover: #d56200;
   // success
@@ -109,6 +112,8 @@
 
   --color-header-bg: #f6f8fa;
 
+  --management-bg-bolor: #fff;
+
   // 字体
   --font-size-1: 10px;
   --font-size-2: 12px;
@@ -146,6 +151,27 @@
   --color-email-border: #eaebed;
   --w-e-textarea-bg-color: #ffffff;
   --color-divider: #eaebed;
+  // 横幅
+  --dashboard-scoring-bg-color: linear-gradient(
+    251deg,
+    rgba(255, 255, 255, 0.3),
+    rgba(255, 244, 235, 0.5) 22.66%,
+    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%
+  );
+  --scoring-smile-radio-color: #e0e2e6;
 }
 
 :root.dark {
@@ -153,8 +179,8 @@
 
   // 文字颜色
   --color-neutral-1: #f0f1f3;
-  --color-neutral-2: ragba(240, 241, 243, 0.7);
-  --color-neutral-3: ragba(240, 241, 243, 0.3);
+  --color-neutral-2: rgba(240, 241, 243, 0.7);
+  --color-neutral-3: rgba(240, 241, 243, 0.3);
   --color-border: #3f434a;
   --color-header-bg: #30353c;
 
@@ -171,6 +197,7 @@
   --color-detail-email-record-bg: #343a43;
   --color-divider: #4c515a;
   --color-avatar: var(--color-mode);
+  --color-header-bg: #343a43;
 
   // ElementUI
   // 整体背景颜色

src/views/Booking/src/BookingView.vue

@@ -400,7 +400,7 @@ const SearchInput = () => {
         >
           <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>
@@ -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;
@@ -524,6 +525,9 @@ const SearchInput = () => {
   display: flex;
   align-items: center;
 }
+.icon_search {
+  fill: var(--color-neutral-1);
+}
 @media only screen and (min-width: 1280px) {
   .search {
     width: 480px;

src/views/Dashboard/src/DashboardView.vue

@@ -391,7 +391,11 @@ const RevenueObj = reactive({
   isShowTooltips: true
 })
 const RevenueLoading = ref(true)
+const revenue_date_start = ref()
+const revenue_date_end = ref()
 const GetRevenueEcharts = (val: any) => {
+  revenue_date_start.value = val.date_start
+  revenue_date_end.value = val.date_end
   dashboardObj.RevenueDefaultData = val
   $api
     .GetRevenueEcharts({
@@ -777,7 +781,7 @@ const ClickParams = (val: any) => {
     <div class="Title">
       <div>Dashboard</div>
       <div>
-        <el-popover trigger="click" width="400">
+        <el-popover trigger="click" width="400" popper-style="border-radius: 12px">
           <template #reference>
             <el-button class="el-button--default">
               <span class="iconfont_icon">
@@ -813,7 +817,12 @@ const ClickParams = (val: any) => {
         </el-popover>
         <el-popover
           :visible="SaveVisible"
-          :popper-style="{ display: 'flex', flexDirection: 'column', alignItems: 'center' }"
+          :popper-style="{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            backgroundColor: 'var(--management-bg-bolor)'
+          }"
         >
           <template #reference>
             <el-button
@@ -1187,8 +1196,8 @@ const ClickParams = (val: any) => {
                   :BarData="RevenueObj"
                   :isRevenue="false"
                   v-vloading="RevenueLoading"
-                  :RevenueStartDate="dashboardObj.RevenueDefaultData.date_start"
-                  :RevenueEndDate="dashboardObj.RevenueDefaultData.date_end"
+                  :RevenueStartDate="revenue_date_start"
+                  :RevenueEndDate="revenue_date_end"
                   style="height: 300px"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
@@ -1203,6 +1212,7 @@ const ClickParams = (val: any) => {
 <style lang="scss" scoped>
 .Title {
   display: flex;
+  background-color: var(--color-mode);
   height: 68px;
   font-size: var(--font-size-6);
   font-weight: 700;
@@ -1216,6 +1226,8 @@ const ClickParams = (val: any) => {
 .Management {
   max-height: 800px;
   overflow-y: auto;
+  border-radius: 12px;
+  background-color: var(--management-bg-bolor);
 }
 .title {
   font-weight: 700;
@@ -1253,6 +1265,9 @@ const ClickParams = (val: any) => {
   display: flex;
   justify-content: center;
 }
+.iconfont_tips {
+  fill: var(--color-neutral-2);
+}
 .tips_text {
   width: 278.43px;
   text-align: center;
@@ -1274,11 +1289,14 @@ const ClickParams = (val: any) => {
 }
 .iconfont_icon_save {
   margin-right: 16px;
+  fill: var(--color-neutral-1);
 }
 .Save_filters:hover {
   border-color: var(--color-btn-default-bg-hover);
   background-color: var(--color-btn-default-bg-hover);
-  fill: var(--color-theme);
+  .iconfont_icon_save {
+    fill: var(--color-theme);
+  }
   div {
     color: var(--color-theme);
   }
@@ -1327,6 +1345,7 @@ const ClickParams = (val: any) => {
 }
 .echarts {
   padding: 0 22px;
+  background-color: var(--color-mode);
 }
 .kpi {
   width: 50%;
@@ -1380,7 +1399,7 @@ const ClickParams = (val: any) => {
 .dashboard {
   z-index: 2014;
   position: relative;
-  background-color: white;
+  background-color: var(--color-mode);
   padding-bottom: 40px;
 }
 :deep(.el-tabs__header) {

src/views/Dashboard/src/components/BarChart.vue

@@ -181,6 +181,7 @@ const initOption = reactive({
       str += '<div style= ' + 'color:#FFF;font-family: Lato-Light>' + params[0].name + '</div>'
       params.forEach((item: any) => {
         allnum += item.value
+        allnum = Number(allnum.toFixed(2))
         str +=
           '<div style= ' +
           'color:#FFF>' +
@@ -190,6 +191,7 @@ const initOption = reactive({
           item.value +
           '</div>'
       })
+      allnum = allnum.toFixed(2)
       str += '<div style= ' + 'color:#FFF;font-family: Lato-Light>Total: ' + allnum + '</div>'
       return str
     },

src/views/Dashboard/src/components/DashFiters.vue

@@ -182,7 +182,7 @@ const DateRangeSearch = () => {
           </span>
           Filters
           <span class="iconfont_icon">
-            <svg class="iconfont" aria-hidden="true">
+            <svg class="iconfont icon_dark" aria-hidden="true">
               <use xlink:href="#icon-icon_dropdown_b"></use>
             </svg>
           </span>
@@ -283,7 +283,7 @@ const DateRangeSearch = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   margin-bottom: 8px;
 }
 :deep(.el-checkbox-button__inner:hover) {
@@ -292,10 +292,10 @@ const DateRangeSearch = () => {
   border-color: var(--color-btn-default-bg-hover);
 }
 :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-  border-color: var(--color-border);
+  border-color: var(--border-color-1);
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-1);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -315,13 +315,19 @@ const DateRangeSearch = () => {
 }
 :deep(.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner) {
   background-color: #eaebed;
-  border-color: var(--color-border);
+  border-color: var(--border-color-1);
   color: #2b2f36;
   font-weight: 700;
 }
 // :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
-//   border-color: var(--color-border);
+//   border-color: var(--border-color-1);
 // }
+:deep(.el-radio-button__original-radio:disabled + .el-radio-button__inner) {
+  border-color: var(--border-color-1);
+}
+:deep(.el-checkbox-button.is-disabled .el-checkbox-button__inner) {
+  border-color: var(--border-color-1);
+}
 .Dash_title {
   height: 48px;
   font-size: 16px;
@@ -345,7 +351,7 @@ const DateRangeSearch = () => {
   justify-content: flex-end;
   align-items: center;
   height: 48px;
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--border-color-1);
   margin-top: 5px;
   font-weight: 400;
   font-size: var(--font-size-3);
@@ -369,6 +375,7 @@ const DateRangeSearch = () => {
   height: 40px;
   display: flex;
   align-items: center;
+  border-color: var(--border-color-1);
 }
 :deep(
     .el-radio-button.is-active
@@ -378,15 +385,18 @@ const DateRangeSearch = () => {
   height: 40px;
   display: flex;
   align-items: center;
+  border-color: var(--border-color-1);
 }
 :deep(.el-radio-button:first-child .el-radio-button__inner) {
   height: 40px;
   display: flex;
+  border-color: var(--border-color-1);
   align-items: center;
 }
 :deep(.el-radio-button__inner) {
   display: flex;
   align-items: center;
   height: 40px;
+  border-color: var(--border-color-1);
 }
 </style>

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -395,7 +395,7 @@ const submitDetails = (val: any) => {
           <div class="buttom">
             <div class="previous" @click="previous">
               <span class="iconfont_icon">
-                <svg class="iconfont" aria-hidden="true">
+                <svg class="iconfont icon_dark" aria-hidden="true">
                   <use xlink:href="#icon-icon_back_b"></use>
                 </svg>
               </span>
@@ -429,9 +429,9 @@ const submitDetails = (val: any) => {
         </el-result>
       </el-dialog>
     </div>
-    <div @click="isShowScoring = false" style="cursor: pointer">
+    <div @click="isShowScoring = false" style="cursor: pointer; fill: var(--color-neutral-1)">
       <span class="iconfont_icon">
-        <svg class="iconfont" aria-hidden="true">
+        <svg class="iconfont icon_dark" aria-hidden="true">
           <use xlink:href="#icon-icon_reject_b"></use>
         </svg>
       </span>
@@ -445,14 +445,7 @@ const submitDetails = (val: any) => {
   justify-content: space-between;
   padding-right: 24px;
   align-items: center;
-  background: linear-gradient(
-    251deg,
-    rgba(255, 255, 255, 0.3),
-    rgba(255, 244, 235, 0.5) 22.66%,
-    rgba(240, 243, 255, 0.5) 44.57%,
-    rgba(224, 247, 249, 0.6) 80.46%,
-    rgba(255, 255, 255, 0.3)
-  );
+  background: var(--dashboard-scoring-bg-color);
   height: 48px;
 }
 .scoring_img {
@@ -562,14 +555,15 @@ const submitDetails = (val: 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 !important;
+  width: 180px;
   height: 40px;
   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;
 }
@@ -582,7 +576,7 @@ const submitDetails = (val: any) => {
   border-color: transparent;
 }
 :deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-1);
   border-top-left-radius: var(--border-radius-6);
   border-bottom-left-radius: var(--border-radius-6);
 }
@@ -603,6 +597,9 @@ const submitDetails = (val: any) => {
 }
 .inputdetails {
   margin-top: 8px;
+  background-color: var(--management-bg-bolor);
+  border-radius: 6px;
+  border-color: var(--border-color-1);
 }
 :deep(.el-textarea) {
   .el-textarea__inner {
@@ -636,9 +633,9 @@ const submitDetails = (val: any) => {
 }
 .content_left {
   height: 41px;
-  background-color: #fff;
+  background-color: var(--management-bg-bolor);
   font-weight: 400;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--border-color-1);
   font-size: var(--font-size-3);
   border-radius: 6px 0 0 6px;
   display: flex;
@@ -651,7 +648,7 @@ const submitDetails = (val: any) => {
   justify-content: center;
 }
 .content_right {
-  background-color: #e0e2e6;
+  background-color: var(--scoring-smile-radio-color);
   border-radius: 0 6px 6px 0;
 }
 .el-radio {

src/views/Login/src/loginView.vue

@@ -489,7 +489,7 @@ const errorTipsRef = ref()
     position: absolute;
     top: 0;
     width: 100%;
-    background: linear-gradient(251deg, #fff4eb 22.66%, #f0f3ff 44.57%, #e0f7f9 70.46%);
+    background: var(--dashboard-scoring-bg-color);
   }
 }
 

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 {