Merge branch 'feat_theme_g' of United_Software/k_online_ui into 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/api/module/common.ts

@@ -255,3 +255,18 @@ export const getDashboardFilters = (config: any) => {
     config
   )
 }
+
+/**
+ * 获取首页筛选条件
+ */
+export const RevenueDownload = (params:any,config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'revenue',
+      ...params
+    },
+    config
+  )
+}

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-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: #ffffff !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;
@@ -714,4 +722,17 @@ div .el-month-table td .el-date-table-cell__text {
 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;
@@ -136,6 +141,23 @@
   --tag-info-text-color: #2b2f36;
 
   --dashboard-text-color: #646a73;
+  // 横幅
+  --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 {
@@ -143,10 +165,10 @@
 
   // 文字颜色
   --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: #3f434a;
+  --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

@@ -90,7 +90,7 @@ const GetDashboardData = () => {
         GetTop10ODEcharts(Top10DefaultData.value)
         GetCo2EmissionEcharts(Co2OriginDefaultData.value)
         GetCo2DestinationEcharts(Co2DestinationDefaultData.value)
-        // GetRevenueEcharts(RevenueDefaultData.value)
+        GetRevenueEcharts(RevenueDefaultData.value)
       })
     })
 }
@@ -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
@@ -1006,6 +1015,7 @@ const ClickParams = (val: any) => {
                   :BarData="containerObj"
                   v-vloading="containerLoading"
                   style="height: 300px"
+                  :isRevenue="true"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
@@ -1093,6 +1103,7 @@ const ClickParams = (val: any) => {
                   @clickParams="ClickParams(item.title)"
                   v-vloading="EmissionLoading"
                   style="height: 250px"
+                  :isRevenue="true"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
@@ -1119,13 +1130,13 @@ const ClickParams = (val: any) => {
                   :BarData="DestinationObj"
                   v-vloading="DestinationLoading"
                   style="height: 250px"
+                  :isRevenue="true"
                   @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
           </div>
-          <!-- Revenue -->
           <!-- <div
             v-else-if="item.title === 'Revenue' && item.switchValue"
             class="KPI_Pending"
@@ -1166,7 +1177,8 @@ const ClickParams = (val: any) => {
               </template>
             </VBox_Dashboard>
           </div>
-          <!-- <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
+          <!-- Revenue -->
+          <div v-else-if="item.title === 'Revenue Spent' && item.switchValue" class="KPI_Pending">
             <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
               <template #header>
                 <div class="Title_flex">
@@ -1181,15 +1193,17 @@ const ClickParams = (val: any) => {
               </template>
               <template #content>
                 <BarChart
-                  ref="seller_chart_CO2_destination"
                   :BarData="RevenueObj"
+                  :isRevenue="false"
                   v-vloading="RevenueLoading"
+                  :RevenueStartDate="revenue_date_start"
+                  :RevenueEndDate="revenue_date_end"
                   style="height: 300px"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
               </template>
             </VBox_Dashboard>
-          </div> -->
+          </div>
         </template>
       </VueDraggable>
     </div>
@@ -1198,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;
@@ -1211,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;
@@ -1248,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;
@@ -1269,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);
   }
@@ -1322,6 +1345,7 @@ const ClickParams = (val: any) => {
 }
 .echarts {
   padding: 0 22px;
+  background-color: var(--color-mode);
 }
 .kpi {
   width: 50%;
@@ -1375,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

@@ -6,7 +6,10 @@ import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
 const props = defineProps({
   BarData: Object,
-  barHeight: Object
+  barHeight: Object,
+  isRevenue: Boolean,
+  RevenueStartDate: String,
+  RevenueEndDate: String
 })
 const bar_data = ref(props.BarData)
 const bar_ref = ref()
@@ -14,7 +17,6 @@ watch(
   () => props.BarData,
   (current) => {
     bar_data.value = current
-    initOption.title.text = bar_title.value
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
     initOption.legend.data = Name.value
@@ -23,6 +25,9 @@ watch(
     initOption.toolbox.feature.saveAsImage.name = downloadName.value
     initOption.toolbox.show = isShowTooltips.value
     initChart()
+    if (props.isRevenue) {
+      initOption.title.text = bar_title.value
+    }
   },
   {
     deep: true
@@ -64,132 +69,86 @@ const downloadName = computed(() => {
 const isShowTooltips = computed(() => {
   return bar_data.value?.isShowTooltips
 })
-const columns1 = [
-  {
-    title: 'Currency',
-    dataIndex: 'Currency'
-  },
-  {
-    title: 'Total Amount',
-    dataIndex: 'Total Amount'
-  },
-  {
-    title: 'Month',
-    dataIndex: 'Month'
-  }
-]
-const columns2 = [
-  {
-    title: 'Invoice Issue Date',
-    dataIndex: 'Invoice Issue Date'
-  },
-  {
-    title: 'Invoice Number',
-    dataIndex: 'Invoice Number'
-  },
-  {
-    title: 'HBL Number',
-    dataIndex: 'HBL Number'
-  },
-  {
-    title: 'Amount',
-    dataIndex: 'Amount'
-  },
-  {
-    title: 'Currency',
-    dataIndex: 'Currency'
-  }
-]
-const tableData = [
-  {
-    Currency: 'ust',
-    ['Total Amount']: '1,985',
-    Month: 'JAN,2024'
-  }
-]
-const tableData2 = [
-  {
-    ['Invoice Issue Date']: '11/12/2024',
-    ['Invoice Number']: 'H907657653',
-    ['HBL Number']: 'SXTYOA201733',
-    Amount: 580,
-    Currency: 'USD'
-  }
-]
-let filterA = columns1.map((el: any) => {
-  return el.dataIndex
-})
-let titleA = columns1.map((el: any) => {
-  return el.title
-})
-let filterB = columns2.map((el: any) => {
-  return el.dataIndex
-})
-let titleB = columns2.map((el: any) => {
-  return el.title
-})
-let result: any = [
-  {
-    tHeader: titleA,
-    filterVal: filterA,
-    tableDatas: tableData,
-    sheetName: 'Monthly Summary Data'
-  },
-  {
-    tHeader: titleB,
-    filterVal: filterB,
-    tableDatas: tableData2,
-    sheetName: 'Invoice Detailed Data'
-  }
-]
-let header: any = []
-let data: any = []
-let sheetname: any = []
-let formatJson = (filterVal: any, jsonData: any) => {
-  return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
-}
-for (var i in result) {
-  header.push(result[i].tHeader)
-  sheetname.push(result[i].sheetName)
-  data.push(formatJson(result[i].filterVal, result[i].tableDatas))
-}
-const exportData = ({ header, data, sheetname, filename }: any) => {
-  // 将表头插入数据数组中
-  for (let i = 0; i < header.length; i++) {
-    data[i].unshift(header[i])
-  }
-  let ws_name = sheetname
-  // 创建工作簿对象
-  let wb = XLSX.utils.book_new()
-  let ws: any = []
-  // 创建每个工作表并设置列宽
-  for (let j = 0; j < header.length; j++) {
-    ws.push(XLSX.utils.aoa_to_sheet(data[j]))
-    let arr: any = []
-    header[j].forEach((val: any) => {
-      arr.push({
-        wpx: 120
-      })
+const exportData = ({ filename }: any) => {
+  $api
+    .RevenueDownload({
+      date_start: props.RevenueStartDate,
+      date_end: props.RevenueEndDate
     })
-    ws[j]['!cols'] = arr
-  }
-  // 将工作表对象添加到工作簿中
-  for (let k = 0; k < header.length; k++) {
-    wb.SheetNames.push(ws_name[k])
-    wb.Sheets[ws_name[k]] = ws[k]
-  }
-  XLSX.writeFile(wb, filename + '.xlsx') // 导出文件
-  // const data = XLSX.utils.json_to_sheet(tableData) //此处tableData.value为表格的数据
-  // const wb = XLSX.utils.book_new()
-  // XLSX.utils.book_append_sheet(wb, data, 'test-data') //test-data为自定义的sheet表名
-  // XLSX.writeFile(wb, 'test.xlsx') //test.xlsx为自定义的文件名
+    .then((res: any) => {
+      if (res.code === 200) {
+        let header: any = []
+        let data: any = []
+        let sheetname: any = []
+        let filterA = res.data.r2_cloumn.map((el: any) => {
+          return el.dataIndex
+        })
+        let titleA = res.data.r2_cloumn.map((el: any) => {
+          return el.title
+        })
+        let filterB = res.data.r3_cloumn.map((el: any) => {
+          return el.dataIndex
+        })
+        let titleB = res.data.r3_cloumn.map((el: any) => {
+          return el.title
+        })
+        let result: any = [
+          {
+            tHeader: titleA,
+            filterVal: filterA,
+            tableDatas: res.data.r2,
+            sheetName: res.data.r2_title
+          },
+          {
+            tHeader: titleB,
+            filterVal: filterB,
+            tableDatas: res.data.r3,
+            sheetName: res.data.r3_title
+          }
+        ]
+        let formatJson = (filterVal: any, jsonData: any) => {
+          return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
+        }
+        for (var i in result) {
+          header.push(result[i].tHeader)
+          sheetname.push(result[i].sheetName)
+          data.push(formatJson(result[i].filterVal, result[i].tableDatas))
+        }
+        // 将表头插入数据数组中
+        for (let i = 0; i < header.length; i++) {
+          data[i].unshift(header[i])
+        }
+        let ws_name = sheetname
+        // 创建工作簿对象
+        let wb = XLSX.utils.book_new()
+        let ws: any = []
+        // 创建每个工作表并设置列宽
+        for (let j = 0; j < header.length; j++) {
+          ws.push(XLSX.utils.aoa_to_sheet(data[j]))
+          let arr: any = []
+          header[j].forEach((val: any) => {
+            arr.push({
+              wpx: 120
+            })
+          })
+          ws[j]['!cols'] = arr
+        }
+        // 将工作表对象添加到工作簿中
+        for (let k = 0; k < header.length; k++) {
+          wb.SheetNames.push(ws_name[k])
+          wb.Sheets[ws_name[k]] = ws[k]
+        }
+        XLSX.writeFile(wb, filename + '.xlsx') // 导出文件
+      }
+    })
+    .finally(() => {})
 }
 
 // 数额
 const initOption = reactive({
   //标题
   title: {
-    text: bar_title.value || '', //主标题
+    text: bar_title.value || 'Total:', //主标题
     left: 19,
     top: 9.5,
     textStyle: {
@@ -222,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>' +
@@ -231,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
     },
@@ -313,7 +274,7 @@ const initOption = reactive({
         icon: 'image://' + updateIcon,
         onclick: function () {
           let filename = 'Revenue Spent Details ' + barName.value[0] + '-' + barName.value[1]
-          exportData({ header, data, sheetname, filename: filename })
+          exportData({ filename: filename })
         }
       }
     },
@@ -341,7 +302,6 @@ const clickParams = () => {
 }
 const initChart = () => {
   const bar_chart = echarts.init(bar_ref.value)
-  bar_chart.setOption(initOption)
   //图表响应式
   window.addEventListener('resize', () => {
     bar_chart.resize()
@@ -360,14 +320,17 @@ const initChart = () => {
       initOption.series.forEach((item: any, index: any) => {
         if (item.name == Object.keys(trueObj)) {
           initOption.series[index].label.show = true
+          initOption.title.text = `Total: ${initOption.series[index].total}`
         }
       })
     } else {
       initOption.series.forEach((item: any, index: any) => {
         initOption.series[index].label.show = false
+        initOption.title.text = `Total: `
       })
     }
   })
+  bar_chart.setOption(initOption)
 }
 
 defineExpose({

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,10 +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/Layout/src/LayoutView.vue

@@ -28,12 +28,14 @@ const handleMenuCollapse = (val: boolean) => {
       </div>
       <Menu v-model="isCollapse" @update:modelValue="handleMenuCollapse"></Menu>
     </el-aside>
+
     <!-- 右侧整体布局 -->
     <el-container style="min-width: 900px">
       <!-- 顶部Header -->
       <el-header class="layout-header">
         <Header></Header>
       </el-header>
+
       <!-- 主体内容 -->
       <el-main class="layout-content">
         <router-view />
@@ -57,12 +59,12 @@ const handleMenuCollapse = (val: boolean) => {
     border-right: 1px solid var(--color-border);
     overflow: hidden;
     transition: all 0.3s;
-    :deep(.el-scrollbar__view) {
-      height: 100%;
-    }
-    .el-menu {
-      height: calc(100% - 120px);
-    }
+    // :deep(.el-scrollbar__view) {
+    //   height: 100%;
+    // }
+    // .el-menu {
+    //   height: calc(100% - 120px);
+    // }
   }
   .layout-header {
     position: relative;

src/views/Layout/src/components/Header/HeaderView.vue

@@ -150,6 +150,10 @@ const handleLogin = () => {
             <span class="font_family icon-icon_password_b"></span>
             Change Password
           </div>
+          <div class="item" @click="handleChangePassword">
+            <span class="font_family icon-icon_password_b"></span>
+            User Manual
+          </div>
           <div class="item" @click="handleLogout">
             <span class="font_family icon-icon_export_b"></span>
             Logout

src/views/Layout/src/components/Menu/MenuView.vue

@@ -1,46 +1,14 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
+import { CaretRight } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
 const isCollapse = defineModel<boolean>()
-// [
-//   {
-//     index: '1',
-//     label: 'Dashboard',
-//     icon: 'icon_data_fill_b',
-//     path: '/dashboard'
-//   },
-//   {
-//     index: '3',
-//     label: 'Booking',
-//     icon: 'icon_booking__fill_b',
-//     path: '/booking'
-//   },
-//   {
-//     index: '4',
-//     label: 'Tracking',
-//     icon: 'icon_tracking__fill_b',
-//     path: '/tracking'
-//   },
 
-//   {
-//     index: '6',
-//     label: 'System Management',
-//     icon: 'icon_system__management_fill_b',
-//     type: 'list',
-//     children: [
-//       {
-//         index: '5-4',
-//         label: 'Operation Log',
-//         path: '/Operationlog'
-//       }
-//     ]
-//   }
-// ]
 const menuList = ref()
 watch(
   () => userStore.username,
@@ -136,51 +104,88 @@ const handleCollapseClick = () => {
   isCollapse.value = !isCollapse.value
 }
 const menuRef = ref()
+
+// 友情链接
+const activeName = ref('1')
+// const blogrollList = ref([
+//   {
+//     icon: () => import('./images/flag.png'),
+//     title: 'Kerry Siam Seaport Web Service',
+//     link: 'https://www.kerrysiamseaport.com/'
+//   }
+// ])
+
+const jumpLink = (link: string) => {
+  window.open(link, '_blank')
+}
 </script>
 
 <template>
-  <el-menu
-    ref="menuRef"
-    class="layout-menu"
-    @select="changeRouter"
-    :default-active="activeMenu"
-    :collapse="isCollapse"
-  >
-    <template v-for="item in menuList" :key="item.index">
-      <el-menu-item
-        :class="{
-          'clear-active-style': route.path === '/login' || route.path === '/reset-password'
-        }"
-        v-if="item.type !== 'list'"
-        :index="item.path"
-      >
-        <span class="font_family" :class="[`icon-${item.icon}`]"></span>
-        <template #title>{{ item.label }}</template>
-      </el-menu-item>
-      <el-sub-menu v-else :index="item.path">
-        <template #title>
-          <div class="font_family" style="font-size: 16px" :class="[`icon-${item.icon}`]"></div>
-          <span>{{ item.label }}</span>
-        </template>
-        <template v-for="childrenItem in item.children" :key="childrenItem.index">
-          <el-menu-item :index="childrenItem.path">{{ childrenItem.label }}</el-menu-item>
-        </template>
-      </el-sub-menu>
-    </template>
-  </el-menu>
-  <div class="collapse-icon">
-    <div @click="handleCollapseClick">
-      <span
-        :style="{ transform: isCollapse ? 'rotate(0deg)' : 'rotate(180deg)' }"
-        class="font_family icon-icon_menu_collapse_b"
-      ></span>
+  <div class="left-section">
+    <el-menu
+      ref="menuRef"
+      class="layout-menu"
+      @select="changeRouter"
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+    >
+      <template v-for="item in menuList" :key="item.index">
+        <el-menu-item
+          :class="{
+            'clear-active-style': route.path === '/login' || route.path === '/reset-password'
+          }"
+          v-if="item.type !== 'list'"
+          :index="item.path"
+        >
+          <span class="font_family" :class="[`icon-${item.icon}`]"></span>
+          <template #title>{{ item.label }}</template>
+        </el-menu-item>
+        <el-sub-menu v-else :index="item.path">
+          <template #title>
+            <div class="font_family" style="font-size: 16px" :class="[`icon-${item.icon}`]"></div>
+            <span>{{ item.label }}</span>
+          </template>
+          <template v-for="childrenItem in item.children" :key="childrenItem.index">
+            <el-menu-item :index="childrenItem.path">{{ childrenItem.label }}</el-menu-item>
+          </template>
+        </el-sub-menu>
+      </template>
+    </el-menu>
+    <div class="blogroll" :class="{ collapse: isCollapse }">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item title="REGIONAL SOLUTIONS" name="1" :icon="CaretRight">
+          <div class="blogroll-content">
+            <div class="blogroll-item" @click="jumpLink('https://www.kerrysiamseaport.com/')">
+              <img
+                style="height: 16px; width: 16px; margin-right: 4px"
+                src="./images/flag.png"
+                alt="string"
+              />
+              <span class="title">Kerry Siam Seaport Web Service</span>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="collapse-icon">
+      <div @click="handleCollapseClick">
+        <span
+          :style="{ transform: isCollapse ? 'rotate(0deg)' : 'rotate(180deg)' }"
+          class="font_family icon-icon_menu_collapse_b"
+        ></span>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.left-section {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 64px);
+}
 .layout-menu {
-  height: calc(100% - 120px);
+  flex: 1;
   border-bottom: 1px solid var(--color-border);
   border-right: none;
   .font_family {
@@ -247,4 +252,57 @@ li.clear-active-style {
     padding-left: 36px !important;
   }
 }
+
+.blogroll {
+  position: relative;
+  &.collapse {
+    display: none;
+  }
+  :deep(.el-collapse) {
+    border-top: none;
+    .el-collapse-item__arrow {
+      color: #b5b9bf;
+      align-self: center;
+    }
+  }
+  :deep(.el-collapse-item__header) {
+    align-items: normal;
+    position: sticky;
+    top: 1px;
+    height: 40px;
+    line-height: 42px;
+    padding: 0 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    font-weight: 700;
+  }
+}
+.blogroll-content {
+  max-height: 180px;
+  padding: 0 8px;
+  overflow: auto;
+  .blogroll-item {
+    height: 40px;
+    margin-top: 4px;
+    padding: 0 8px;
+    line-height: 40px;
+    font-size: 12px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: all 0.3s;
+    .font_family {
+      margin-right: 4px;
+    }
+    span {
+      vertical-align: middle;
+    }
+
+    &:hover {
+      background-color: var(--color-mune-active-bg);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+  }
+}
 </style>

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 {