feat:修改部分暗黑样式

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

@@ -164,9 +164,10 @@ const placeholder = computed(() => {
   height: 48px;
   display: flex;
   align-items: center;
+  border-left: 1px solid var(--border-color-2);
 }
 .footer_right {
-  border-left: 1px solid var(--color-border);
+  border-left: 1px solid var(--border-color-2);
   padding-left: 8px;
 }
 .el-button--noborder {

src/components/FliterTags/src/FilterTags.vue

@@ -132,7 +132,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
 }
 .v-tag__all {
   font-weight: 400;
-  background-color: #feecf3;
+  background-color: var(--color-tag-all-bg-color);
   color: #e26394;
 }
 .v-tag__created {

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

@@ -334,7 +334,7 @@ const clickSeeAll = () => {
   overflow: scroll;
 }
 .isDisabled {
-  background-color: var(--tips-bg-color);
+  background-color: var(--input-disabled-bg-color);
   color: #a8abb2;
   cursor: not-allowed;
   box-shadow: none !important;

src/components/ScoringGrade/components/DialogColorful.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref } from 'vue'
 import { useThemeStore } from '@/stores/modules/theme'
 import BubbleLight from '../image/bubble_corner_colorful.png'
 import BubbleDark from '../image/bubble_corner_colorful_darkmode.png'
@@ -14,27 +14,9 @@ const submitDetails = (val: any) => {
   emits('submitDetails', val)
 }
 const themeStore = useThemeStore()
-const ScoringRef = ref()
-// 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        ScoringRef.value.classList.add('dark-bg')
-      } else {
-        ScoringRef.value.classList.remove('dark-bg')
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
-})
 </script>
 <template>
-  <div class="colorfulflex" ref="ScoringRef">
+  <div class="colorfulflex">
     <div v-if="props.isshowexpression" class="dialogcolorful">
       <div class="dialogue">
         <img :src="props.colorfulSrc" />
@@ -113,6 +95,7 @@ onMounted(() => {
   .el-textarea__inner {
     resize: none; // 去除右下角图标
     padding: 5px 7px 5px 10px;
+    box-shadow: 0 0 0 1px var(--color-select-border) inset;
   }
 }
 .submit_button {

src/components/ScoringGrade/components/DialogUe.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref } from 'vue'
 import { useThemeStore } from '@/stores/modules/theme'
 import BubbleLight from '../image/bubble_corner.png'
 import BubbleDark from '../image/bubble_corner_darkmode.png'
@@ -81,27 +81,9 @@ const changeSmileRadio = (title: any, value: any) => {
   emits('changeSmileRadio', SmileObj)
 }
 const themeStore = useThemeStore()
-const ScoringRef = ref()
-// 判断当前系统主题模式
-onMounted(() => {
-  watch(
-    () => themeStore.theme,
-    (newVal) => {
-      if (newVal === 'dark') {
-        ScoringRef.value.classList.add('dark-bg')
-      } else {
-        ScoringRef.value.classList.remove('dark-bg')
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  )
-})
 </script>
 <template>
-  <div style="margin-bottom: 8px" ref="ScoringRef">
+  <div style="margin-bottom: 8px">
     <div class="dialogue" :style="{ width: props.dialogWidth }">
       {{ props.content }}
       <div v-if="props.isShowAngry" class="dialogflex">

src/styles/Antdui.scss

@@ -62,9 +62,7 @@
   }
   .ant-picker-dropdown .ant-picker-panel-container {
     background-color: var(--management-bg-color);
-  }
-  .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels .ant-picker-panel {
-    border-left: 1px solid var(--border-color-2);
+    border: 1px solid var(--border-color-2);
   }
   .ant-picker-footer {
     border-top: 1px solid var(--border-color-2);
@@ -99,4 +97,7 @@
 }
 .ant-picker.ant-picker-disabled {
   border-color: var(--border-color-2);
+}
+.ant-picker-dropdown.ant-picker-dropdown-placement-bottomLeft .ant-picker-range-arrow {
+  display: none;
 }

src/styles/elementui.scss

@@ -373,7 +373,7 @@ div .el-select__placeholder.is-transparent {
 }
 div.el-input__wrapper {
   box-shadow: 0 0 0 1px var(--color-border) inset;
-  padding-left: 8px;
+  padding: 0 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
   box-shadow: 0 0 0 1px var(--color-theme) inset;
@@ -656,7 +656,6 @@ div .scoreDialog .el-dialog__body {
 }
 div .scoreDialog2 header.el-dialog__header {
   background: var(--dashboard-scoring-bg-color);
-  position: fixed;
   width: 640px;
   border-radius: 6px 6px 0 0;
   height: 48px;

src/styles/theme-g.scss

@@ -23,11 +23,14 @@
   // filterstag
   --color-tag-checked-all: rgba(255, 117, 0, 0.2);
   --color-tag-all-bg: rgba(255, 117, 0, 0.2);
+  --color-tag-all-bg-color:rgba(226,99,148,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-cancelled: rgba(240,241,243,0.7)
   --color-tag-departure-bg: rgba(64, 166, 229, 0.2);
   --color-tag-cargo-received-bg: rgba(111, 124, 241, 0.2);
+  --color-tag-cargo-received: #6f7cf1;
   --color-tag-arrived-bg: rgba(1, 183, 161, 0.2);
   --color-tag-completed-bg: rgba(91, 180, 98, 0.2);
 
@@ -62,7 +65,7 @@
   --scoring-smile-radio-color: #626871;
 
   // 输入框禁用的颜色
-  --input-disabled-bg-color: #2b2f36;
+  --input-disabled-bg-color: rgba(244,244,244,0.2);
   --input-disabled-text-color: #66696f;
   --color-recent-name: rgba(240,241,243,0.1);
   --color-disabled-bg: #2b2b2c;

src/styles/theme.scss

@@ -66,6 +66,7 @@
   --color-tag-created-bg: #e5f0fb;
   --color-tag-booked-bg: #f3e6fa;
   --color-tag-all-bg: #ffe5cf;
+  --color-tag-all-bg-color:#feecf3;
   --color-tag-cargo-received-bg: #eaecff;
   --color-tag-departure-bg: #d9edfa;
   --color-tag-arrived-bg: #e7faf8;

src/views/Booking/src/BookingView.vue

@@ -513,7 +513,6 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: var(--tag-bg-color);
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
@@ -543,5 +542,6 @@ const SearchInput = () => {
 }
 :deep(.log_input .el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
 }
 </style>

src/views/Dashboard/src/DashboardView.vue

@@ -1224,11 +1224,14 @@ const ClickParams = (val: any) => {
   vertical-align: -2px;
 }
 .Management {
-  max-height: 800px;
-  overflow-y: auto;
+  max-height: 640px;
+  overflow-y: hidden;
   border-radius: 12px;
   background-color: var(--management-bg-color);
 }
+.Management:hover {
+  overflow-y: scroll;
+}
 .title {
   font-weight: 700;
   font-size: var(--font-size-5);

src/views/Dashboard/src/components/PieChart.vue

@@ -1,11 +1,13 @@
 <!-- 饼状图 -->
  <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 const props = defineProps({
   PieData: Object
 })
 const pie_data = ref(props.PieData)
+const themeStore = useThemeStore()
 watch(
   () => props.PieData,
   (current) => {
@@ -116,7 +118,10 @@ const initOption: any = reactive({
       alignTo: 'labelLine',
       rich: {
         name: {
-          fontFamily: 'Lato-Light'
+          fontFamily: 'Lato-Light',
+          color: '#646A73',
+          fontSize: '12px',
+          fontWeight: '700'
         },
         time: {
           fontSize: '10px',
@@ -164,6 +169,28 @@ const initOption: any = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.title.textStyle.color = '#f0f1f3'
+        initOption.series.label.rich.time.color = 'rgba(240,241,243,0.7)'
+        initOption.series.label.rich.name.color = 'rgba(240,241,243,0.7)'
+        initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
+        initChart()
+      } else {
+        initOption.title.textStyle.color = '#2B2F36'
+        initOption.series.label.rich.time.color = '#999'
+        initOption.series.label.rich.name.color = '#646A73'
+        initOption.legend.textStyle.color = '#646A73'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()

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

@@ -617,6 +617,7 @@ const submitDetails = (val: any) => {
   .el-textarea__inner {
     resize: none; // 去除右下角图标
     padding: 5px 7px 5px 10px;
+    box-shadow: 0 0 0 1px var(--color-select-border) inset;
   }
 }
 .smile_flex {

src/views/OperationLog/src/OperationLog.vue

@@ -288,5 +288,6 @@ const DateChange = (date: any) => {
 }
 :deep(.log_input .el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
 }
 </style>

src/views/Tracking/src/TrackingView.vue

@@ -760,7 +760,6 @@ const SearchInput = () => {
   flex-wrap: wrap;
 }
 .tag {
-  border-color: var(--tag-bg-color);
   border-radius: var(--border-radius-22);
   margin: 0 8px 8px 0;
   color: var(--color-neutral-1);
@@ -790,5 +789,6 @@ const SearchInput = () => {
 }
 :deep(.log_input .el-input__wrapper) {
   box-shadow: 0 0 0 1px var(--color-select-border) inset;
+  border-radius: 6px;
 }
 </style>