feat: 合并master_zyh分支代码

src/components/MoreFilters/src/MoreFilters.vue

@@ -1239,10 +1239,10 @@ const moreFiltersGuideImg = computed(() => {
 
 <style lang="scss" scoped>
 img.more-filters-guide-class {
-  right: -1px;
+  right: -20px;
   top: -1px;
-  width: 327px;
-  z-index: 20000;
+  width: 361px;
+  z-index: 1500;
 }
 
 .icon_more {

src/components/VTipTooltip/src/VTipTooltip.vue

@@ -7,7 +7,8 @@ const props = withDefaults(
     width?: number
   }>(),
   {
-    placement: 'bottom'
+    placement: 'bottom',
+    width: 368
   }
 )
 
@@ -21,11 +22,11 @@ const visible = ref(false)
       popper-class="v-tip-tooltip"
       v-model="visible"
       :placement="props.placement"
-      trigger="hover"
+      trigger="click"
     >
       <span class="font_family icon-icon_info_b"></span>
       <template #content>
-        <div class="label">{{ props.label }}</div>
+        <div class="label" :style="{ width: props.width + 'px' }">{{ props.label }}</div>
         <div style="text-align: center">
           <img :style="{ width: props.width + 'px' }" class="photo" :src="props.img" alt="" />
         </div>
@@ -38,20 +39,15 @@ const visible = ref(false)
 div.v-tip-tooltip {
   padding: 16px;
   border-radius: 12px;
-  // background-color: var(--color-tour-next-btn-color) !important;
   border: 0 !important;
   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1) !important;
-  // .el-popper__arrow:before {
-  //   border: 2 !important;
-  //   background-color: var(--color-tour-next-btn-color) !important;
-  //   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1) !important;
-  // }
+
   .label {
     color: #f0f1f3;
     font-size: 14px;
+    white-space: wrap;
   }
   .photo {
-    width: 368px;
     margin-top: 8px;
     border-radius: 6px;
   }

src/stores/modules/guide.ts

@@ -73,7 +73,7 @@ const oceanSteps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }
@@ -141,7 +141,7 @@ const airSteps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }

src/styles/driver.scss

@@ -2,6 +2,7 @@ div.driver-popover {
   width: 400px;
   max-width: 400px;
   padding: 15px;
+  padding-top: 27px;
   padding-bottom: 8px;
   background-image: linear-gradient(96deg, #b58eff 2.25%, #fdbc94 97.98%);
   box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.1);
@@ -34,8 +35,8 @@ div.driver-popover-arrow-side-bottom {
 }
 // 关闭图标
 button.driver-popover-close-btn {
-  top: -1px;
-  right: -6px;
+  top: 3px;
+  right: 4px;
   color: #2b2f36;
   &:hover,
   &:focus {

src/styles/index.scss

@@ -61,5 +61,5 @@
 .position-absolute-guide {
   position: absolute;
   z-index: 1200;
-  box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.2);
+  // box-shadow: 3px 3px 16px 0px rgba(0, 0, 0, 0.2);
 }

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

@@ -98,7 +98,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }
@@ -223,23 +223,21 @@ defineExpose({
 }
 
 .download-file-guide-class {
-  right: 203px;
+  right: 187px;
   top: 246px;
-  width: 419px;
-  height: 285px;
+  width: 431px;
+  height: 304px;
   &.download-file-guide-dark-class {
-    transform: translate(0px, -0.4px);
-    width: 411px;
-    height: 287px;
+    right: 187px;
+    width: 431px;
+    height: 304px;
   }
 }
 .customize-columns-guide-class {
-  right: 25px;
+  right: 5px;
   top: 245px;
-  width: 647px;
-  height: 441px;
-  &.customize-columns-guide-dark-class {
-    right: 24px;
-  }
+  width: 682px;
+  height: 473px;
+  transform: translateX(0.9px);
 }
 </style>

src/views/Dashboard/src/DashboardView.vue

@@ -904,6 +904,9 @@ function handleImageClick(event) {
           id="view-management-guide"
           v-if="guideStore.dashboard.isShowViewManagementGuidePhoto"
           class="view-management-guide-class"
+          :class="{
+            'view-management-guide-dark-class': themeStore.theme === 'dark'
+          }"
           :src="viewManagementImg"
           alt=""
         />
@@ -994,8 +997,8 @@ function handleImageClick(event) {
               <template #header>
                 <div class="Title_flex" style="position: relative">
                   <img
-                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
                     id="kpi-chart-guide"
+                    v-if="guideStore.dashboard.isShowKpiChartGuidePhoto"
                     class="kpi-chart-guide-class position-absolute-guide"
                     :src="kpiChartImg"
                     alt=""
@@ -1062,6 +1065,7 @@ function handleImageClick(event) {
                     <VTipTooltip
                       :img="pendingChartTip"
                       :width="420"
+                      :placement="'bottom-start'"
                       :label="'Pending Report：Showing shipments which are soon to depart/arrive.'"
                     ></VTipTooltip>
                   </div>
@@ -1145,6 +1149,7 @@ function handleImageClick(event) {
                     {{ item.title }}
                     <VTipTooltip
                       :img="containerChartTip"
+                      :placement="'bottom-start'"
                       :label="'Container Count：Total Container Volume by Month (Last 12 Months)'"
                     ></VTipTooltip>
                   </div>
@@ -1408,27 +1413,32 @@ function handleImageClick(event) {
 .view-management-guide-class {
   position: absolute;
   top: 0px;
-  right: 89px;
-  width: 343px;
-  height: 478px;
+  right: 85px;
+  width: 437px;
+  height: 603px;
   z-index: 1500;
+  &.view-management-guide-dark-class {
+    width: 439px;
+    height: 622px;
+  }
 }
 .save-config-guide-class {
   position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 186px;
-  height: 149px;
+  top: -1px;
+  right: -13px;
+  width: 183px;
+  height: 160px;
   z-index: 1500;
+  transform: translate(-0.8px, 0px);
   &.save-config-guide-dark-class {
-    top: -1px;
-    width: 187px;
-    height: 153px;
+    width: 182px;
+    height: 157px;
+    right: -12px;
   }
 }
 .kpi-chart-guide-class {
-  top: -1px;
-  left: 10px;
+  top: -2px;
+  left: -50px;
   width: 589px;
   height: 478px;
   z-index: 3500;

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

@@ -303,10 +303,10 @@ const guideStore = useGuideStore()
 }
 .transport-mode-guide-class {
   position: absolute;
-  right: 0px;
+  right: -16px;
   top: -1px;
-  width: 417px;
-  height: 314px;
+  width: 431px;
+  height: 327px;
   z-index: 1000;
 }
 :deep(.el-checkbox-button__inner) {

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

@@ -12,7 +12,7 @@ const steps: any = [
       title: '',
       description:
         'The Dashboard integrates different types of reports. You can freely select the reports you need. ',
-      side: 'bottom'
+      side: 'left'
     }
   },
   {
@@ -55,7 +55,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }

src/views/Dashboard/src/guideImage/test.vue

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

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

@@ -103,7 +103,7 @@ const steps: any = [
     popover: {
       title: '',
       description:
-        'After closing, you can still click the "page guide" button to view the page guide of the current page.',
+        'After closing, you can still click the "Page Guide" button to view the page guide of the current page.',
       side: 'bottom'
     }
   }
@@ -234,21 +234,22 @@ defineExpose({
 
 <style lang="scss" scoped>
 .download-file-guide-class {
-  right: 203px;
+  right: 187px;
   top: 246px;
-  width: 416px;
-  height: 287px;
+  width: 431px;
+  height: 304px;
   transform: translate(0.7px, -0.3px);
   &.download-file-guide-dark-class {
-    transform: translate(0.7px, -0.3px);
-    width: 411px;
-    height: 287px;
+    right: 187px;
+    width: 431px;
+    height: 304px;
   }
 }
 .customize-columns-guide-class {
-  right: 24px;
-  top: 246px;
-  width: 642px;
-  height: 441px;
+  right: 5px;
+  top: 245px;
+  width: 681px;
+  height: 486px;
+  transform: translateX(0.9px);
 }
 </style>