style: 调整首页导览

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

@@ -55,5 +55,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'
     }
   }

src/views/Dashboard/src/DashboardView.vue

@@ -901,6 +901,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=""
         />
@@ -991,8 +994,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=""
@@ -1405,27 +1408,33 @@ function handleImageClick(event) {
 .view-management-guide-class {
   position: absolute;
   top: 0px;
-  right: 89px;
-  width: 343px;
-  height: 478px;
+  right: 86px;
+  width: 437px;
+  height: 603px;
   z-index: 1500;
+  &.view-management-guide-dark-class {
+    right: 85px;
+    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/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'
     }
   }