style: 调整导览样式

src/assets/image/test.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="scss" scoped></style>

src/components/MoreFilters/src/MoreFilters.vue

@@ -528,7 +528,8 @@ const drawer = ref(false)
 const props = defineProps({
   isShipment: Boolean,
   searchTableQeury: Object,
-  isShowMoreFiltersGuidePhoto: Boolean
+  isShowMoreFiltersGuidePhoto: Boolean,
+  pageMode: String
 })
 const PartyTypeoptions = computed(() => {
   if (props.isShipment) {
@@ -1008,14 +1009,21 @@ watch(
     searchTableQeurytest.value = current
   }
 )
-import moreFiltersImgLight from '@/views/Tracking/src/image/more-filters-guide.png'
-import moreFiltersImgDark from '@/views/Tracking/src/image/dark-more-filters-guide.png'
+import trackingMoreFiltersImgLight from './image/tracking-more-filters-guide.png'
+import trackingMoreFiltersImgDark from './image/tracking-dark-more-filters-guide.png'
+import bookingMoreFiltersImgLight from './image/booking-more-filters-guide.png'
+import bookingMoreFiltersImgDark from './image/booking-dark-more-filters-guide.png'
 import { useThemeStore } from '@/stores/modules/theme'
 
 const themeStore = useThemeStore()
 
 const moreFiltersGuideImg = computed(() => {
-  return themeStore.theme === 'dark' ? moreFiltersImgDark : moreFiltersImgLight
+  console.log('props.pageMode', props.pageMode)
+  if (props.pageMode === 'tracking') {
+    return themeStore.theme === 'dark' ? trackingMoreFiltersImgDark : trackingMoreFiltersImgLight
+  } else {
+    return themeStore.theme === 'dark' ? bookingMoreFiltersImgDark : bookingMoreFiltersImgLight
+  }
 })
 </script>
 <template>
@@ -1239,7 +1247,7 @@ img.more-filters-guide-class {
   z-index: 20000;
   &.dark-more-filters-guide-class {
     right: 0px;
-    width: 250px;
+    width: 200px;
   }
 }
 
@@ -1274,6 +1282,7 @@ img.more-filters-guide-class {
 
 .Filters_title {
   margin: 0 8px;
+  margin-left: 7px;
 }
 
 :deep(.el-drawer__header) {

src/components/VTipTooltip/src/VTipTooltip.vue

@@ -21,7 +21,7 @@ const visible = ref(false)
       popper-class="v-tip-tooltip"
       v-model="visible"
       :placement="props.placement"
-      trigger="click"
+      trigger="hover"
     >
       <span class="font_family icon-icon_info_b"></span>
       <template #content>

src/views/Booking/src/BookingView.vue

@@ -459,6 +459,7 @@ const handleGuide = () => {
       </div>
       <MoreFilters
         :isShipment="false"
+        :pageMode="'booking'"
         :searchTableQeury="searchTableQeury"
         @MoreFiltersSearch="MoreFiltersSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"

src/views/Booking/src/components/BookingGuide.vue

@@ -3,8 +3,8 @@ import { useDriver } from '@/utils/driverGuide'
 import { useGuideStore } from '@/stores/modules/guide'
 import { useThemeStore } from '@/stores/modules/theme'
 
-import customizeColumnsImgLight from '@/views/Tracking/src/image/customize-columns.png'
-import customizeColumnsImgDark from '@/views/Tracking/src/image/dark-customize-columns.png'
+import customizeColumnsImgLight from '../image/customize-columns.png'
+import customizeColumnsImgDark from '../image/dark-customize-columns.png'
 
 import downloadFileImgLight from '@/views/Tracking/src/image/download-guide.png'
 import downloadFileImgDark from '@/views/Tracking/src/image/dark-download-guide.png'
@@ -194,6 +194,7 @@ defineExpose({
     <!-- download-file-guide -->
     <Teleport to="body">
       <img
+        :class="{ 'download-file-guide-dark-class': themeStore.theme === 'dark' }"
         id="booking-download-file-guide"
         v-show="bookingGuideStore.isShowDownloadFileGuidePhoto"
         class="position-absolute-guide download-file-guide-class"
@@ -204,6 +205,7 @@ defineExpose({
     <!-- customize-columns-guide  -->
     <Teleport to="body">
       <img
+        :class="{ 'customize-columns-guide-dark-class': themeStore.theme === 'dark' }"
         id="booking-customize-columns-guide"
         v-show="bookingGuideStore.isShowCustomizeColumnsGuidePhoto"
         class="position-absolute-guide customize-columns-guide-class"
@@ -221,15 +223,21 @@ defineExpose({
 }
 
 .download-file-guide-class {
-  right: 204px;
-  top: 245px;
-  width: 488px;
-  height: 333px;
+  right: 203px;
+  top: 246px;
+  width: 317px;
+  height: 234px;
+  &.download-file-guide-dark-class {
+    width: 322px;
+  }
 }
 .customize-columns-guide-class {
-  right: 24px;
-  top: 246px;
-  width: 515px;
-  height: 353px;
+  right: 25px;
+  top: 245px;
+  width: 647px;
+  height: 441px;
+  &.customize-columns-guide-dark-class {
+    right: 24px;
+  }
 }
 </style>

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -485,11 +485,11 @@ defineExpose({
           @click="handleDownload"
           style="padding-left: 10px"
         >
-          <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
+          <span style="margin-right: 5px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>
-        <el-button style="padding-left: 10px" type="default" @click="handleCustomizeColumns">
-          <span style="margin-right: 8px" class="font_family icon-icon_column_b"></span>
+        <el-button style="padding: 0 17px 0 9px" type="default" @click="handleCustomizeColumns">
+          <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
           Customize Columns
         </el-button>
       </div>

src/views/Dashboard/src/DashboardView.vue

@@ -1378,7 +1378,7 @@ function handleImageClick(event) {
 }
 .kpi-chart-guide-class {
   top: -1px;
-  right: -1px;
+  left: 10px;
   width: 589px;
   height: 478px;
   z-index: 3500;

src/views/Dashboard/src/components/DashboardGuide.vue

@@ -29,7 +29,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'Click the icon next to the report name to view the data explanation for each report.',
+        'Hover the icon next to the report name to view the data explanation for each report.',
       side: 'bottom'
     }
   },

src/views/Tracking/src/TrackingView.vue

@@ -711,7 +711,7 @@ const handleGuide = () => {
         @clearMoreFiltersTags="clearMoreFiltersTags"
         @defaultMorefilters="defaultMorefilters"
         :isShowMoreFiltersGuidePhoto="guideStore.tracking.isShowMoreFiltersGuidePhoto"
-        :imgGuideId="'more-filters-guide'"
+        :pageMode="'tracking'"
       ></MoreFilters>
       <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
         >Search</el-button
@@ -763,37 +763,6 @@ const handleGuide = () => {
   display: flex;
   flex-direction: column;
 }
-.filter-guide-class {
-  top: -3px;
-  left: -2px;
-  height: 29px;
-  width: 592px;
-}
-img.more-filters-guide-class {
-  right: 38px;
-  top: 155px;
-  height: 634px;
-  width: 243px;
-  z-index: 20000;
-}
-.download-file-guide-class {
-  right: 85px;
-  top: 243px;
-  width: 377px;
-  height: 236px;
-}
-.customize-columns-guide-class {
-  right: 8px;
-  top: 249px;
-  width: 694px;
-  height: 474px;
-}
-.tab-filter-guide-class {
-  left: 248px;
-  top: 118px;
-  height: 42px;
-  z-index: 20000;
-}
 
 .Title {
   display: flex;

src/views/Tracking/src/components/TrackingGuide.vue

@@ -205,13 +205,16 @@ defineExpose({
     <!-- 多区域自定义高亮组件 -->
     <!-- <MultiHighlightGuide v-if="showExtraHighlights" :items="extraHighlightItems" /> -->
 
-    <!-- download-file-guide -->
+    <!-- download-file-guide  -->
     <Teleport to="body">
       <img
         style="box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1)"
         id="download-file-guide"
-        class="position-absolute-guide download-file-guide-class"
+        :class="{
+          'download-file-guide-dark-class': themeStore.theme === 'dark'
+        }"
         v-if="trackingGuideStore.isShowDownloadFileGuidePhoto"
+        class="position-absolute-guide download-file-guide-class"
         :src="downloadFileImg"
         alt=""
       />
@@ -231,15 +234,19 @@ defineExpose({
 
 <style lang="scss" scoped>
 .download-file-guide-class {
-  right: 204px;
-  top: 245px;
-  width: 488px;
-  height: 333px;
+  right: 203px;
+  top: 246px;
+  width: 316px;
+  height: 234px;
+  &.download-file-guide-dark-class {
+    width: 320px;
+    right: 202px;
+  }
 }
 .customize-columns-guide-class {
   right: 24px;
   top: 246px;
-  width: 515px;
-  height: 353px;
+  width: 642px;
+  height: 441px;
 }
 </style>

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -9,6 +9,7 @@ import { transportationMode } from '@/components/TransportationMode'
 import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useVisitedRowState } from '@/stores/modules/visitedRow'
+import { theme } from 'ant-design-vue'
 
 const visitedRowState = useVisitedRowState()
 const themeStore = useThemeStore()
@@ -575,13 +576,14 @@ defineExpose({
           class="el-button--main"
           :class="{ 'el-button--pain-theme': themeStore.theme === 'dark' }"
           @click="handleDownload"
+          :style="{ paddingRight: themeStore.theme === 'dark' ? '17px' : '15px' }"
           style="padding-left: 10px"
         >
-          <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
+          <span style="margin-right: 6px" class="font_family icon-icon_download_b"></span>
           Download
         </el-button>
         <el-button style="padding-left: 10px" type="default" @click="handleCustomizeColumns">
-          <span style="margin-right: 8px" class="font_family icon-icon_column_b"></span>
+          <span style="margin-right: 6px" class="font_family icon-icon_column_b"></span>
           Customize Columns
         </el-button>
       </div>

src/views/Tracking/src/image/test.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style lang="scss" scoped></style>