修改样式的bug

src/views/factoryCalendar/components/StatisticsView.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="industrial-stat-board">
+  <div
+    class="industrial-stat-board"
+    :class="{ 'is-stat-scrolling': isScrolling }"
+  >
     <div class="industrial-grid-layer" aria-hidden="true">
       <span class="grid-beam grid-beam-main"></span>
       <span class="grid-beam grid-beam-sub"></span>
@@ -81,6 +84,9 @@
               placement="top"
               effect="light"
               :content="vm.scheduleTooltip"
+              :disabled="isScrolling"
+              :enterable="false"
+              popper-class="factory-calendar-stat-tooltip"
             >
               <div class="schedule-radar">
                 <div
@@ -102,6 +108,9 @@
                 placement="top"
                 effect="light"
                 :content="vm.getScheduleSegmentTooltip(item)"
+                :disabled="isScrolling"
+                :enterable="false"
+                popper-class="factory-calendar-stat-tooltip"
               >
                 <div
                   class="schedule-segment-row"
@@ -138,6 +147,9 @@
               placement="top"
               effect="light"
               :content="vm.getMonthBarTooltip(item)"
+              :disabled="isScrolling"
+              :enterable="false"
+              popper-class="factory-calendar-stat-tooltip"
             >
               <div
                 class="month-telemetry-row"
@@ -173,6 +185,9 @@
               placement="top"
               effect="light"
               :content="vm.getCalendarTypeTooltip(item)"
+              :disabled="isScrolling"
+              :enterable="false"
+              popper-class="factory-calendar-stat-tooltip"
             >
               <div
                 class="type-distribution-row"
@@ -220,6 +235,9 @@
                 placement="top"
                 effect="light"
                 :content="vm.getConflictTrendTooltip(item)"
+                :disabled="isScrolling"
+                :enterable="false"
+                popper-class="factory-calendar-stat-tooltip"
               >
                 <div
                   class="conflict-bar"
@@ -248,6 +266,12 @@
         required: true
       }
     },
+    data() {
+      return {
+        isScrolling: false,
+        scrollIdleTimer: null
+      };
+    },
     computed: {
       panelTitle() {
         const query = this.vm.viewQuery || {};
@@ -284,7 +308,57 @@
         return Number(stat?.value || 0);
       }
     },
+    mounted() {
+      this.bindStatScrollGuard();
+    },
+    beforeDestroy() {
+      this.unbindStatScrollGuard();
+    },
     methods: {
+      bindStatScrollGuard() {
+        if (typeof window === 'undefined') {
+          return;
+        }
+        this._statScrollHandler = this.markStatScrolling;
+        window.addEventListener('wheel', this._statScrollHandler, {
+          passive: true,
+          capture: true
+        });
+        window.addEventListener('touchmove', this._statScrollHandler, {
+          passive: true,
+          capture: true
+        });
+        window.addEventListener('scroll', this._statScrollHandler, {
+          passive: true,
+          capture: true
+        });
+        document.addEventListener('scroll', this._statScrollHandler, {
+          passive: true,
+          capture: true
+        });
+      },
+      unbindStatScrollGuard() {
+        if (typeof window === 'undefined' || !this._statScrollHandler) {
+          return;
+        }
+        window.removeEventListener('wheel', this._statScrollHandler, true);
+        window.removeEventListener('touchmove', this._statScrollHandler, true);
+        window.removeEventListener('scroll', this._statScrollHandler, true);
+        document.removeEventListener('scroll', this._statScrollHandler, true);
+        clearTimeout(this.scrollIdleTimer);
+        document.body.classList.remove('factory-calendar-stat-scrolling');
+      },
+      markStatScrolling() {
+        if (!this.isScrolling) {
+          this.isScrolling = true;
+        }
+        document.body.classList.add('factory-calendar-stat-scrolling');
+        clearTimeout(this.scrollIdleTimer);
+        this.scrollIdleTimer = setTimeout(() => {
+          this.isScrolling = false;
+          document.body.classList.remove('factory-calendar-stat-scrolling');
+        }, 180);
+      },
       getKpiColor(key) {
         const colorMap = {
           work: '#2f7cf6',

src/views/factoryCalendar/components/factoryCalendar.scss

@@ -5210,3 +5210,114 @@
     line-height: 18px;
     white-space: nowrap;
   }
+
+  .factory-calendar .industrial-stat-board {
+    contain: paint;
+    overflow-anchor: none;
+  }
+
+  .factory-calendar .industrial-stat-board.is-stat-scrolling {
+    pointer-events: none;
+  }
+
+  .factory-calendar .industrial-stat-board.is-stat-scrolling *,
+  .factory-calendar .industrial-stat-board.is-stat-scrolling *::before,
+  .factory-calendar .industrial-stat-board.is-stat-scrolling *::after {
+    transition: none !important;
+  }
+
+  @at-root body.factory-calendar-stat-scrolling .factory-calendar-stat-tooltip {
+    display: none !important;
+  }
+
+  .factory-calendar .schedule-radar,
+  .factory-calendar .schedule-segment-row,
+  .factory-calendar .month-telemetry-row,
+  .factory-calendar .type-distribution-row,
+  .factory-calendar .conflict-bar {
+    cursor: pointer;
+    transition:
+      border-color 0.22s ease,
+      box-shadow 0.22s ease,
+      transform 0.22s ease,
+      background 0.22s ease;
+    will-change: transform;
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .schedule-radar:hover,
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .schedule-segment-row:hover,
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .month-telemetry-row:hover,
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .type-distribution-row:hover {
+    border-color: rgba(35, 178, 208, 0.46);
+    background:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(222, 249, 251, 0.82)),
+      rgba(255, 255, 255, 0.84);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.94),
+      0 10px 22px rgba(35, 132, 168, 0.13),
+      0 0 0 3px rgba(52, 211, 190, 0.08);
+    transform: translateY(-2px);
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .schedule-radar:hover {
+    animation: factoryStatTipPulse 0.48s ease-out both;
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .schedule-segment-row:hover .segment-track i,
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .month-telemetry-row:hover .month-track i {
+    filter: saturate(1.12);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.36),
+      0 0 16px var(--segment-color, var(--month-color));
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .type-distribution-row:hover .type-orbit {
+    transform: scale(1.05);
+    box-shadow:
+      inset 4px 5px 8px rgba(255, 255, 255, 0.76),
+      inset -5px -6px 10px rgba(66, 121, 148, 0.14),
+      0 8px 16px rgba(35, 132, 168, 0.12);
+  }
+
+  .factory-calendar .type-orbit,
+  .factory-calendar .conflict-bar span {
+    transition:
+      box-shadow 0.22s ease,
+      transform 0.22s ease,
+      filter 0.22s ease;
+    will-change: transform;
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .conflict-bar:hover span {
+    filter: saturate(1.12);
+    transform: translateY(-3px) scaleY(1.04);
+    transform-origin: center bottom;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.54),
+      0 8px 16px rgba(53, 183, 200, 0.22);
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .conflict-bar:not(.is-zero):hover span {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 8px 16px rgba(229, 87, 97, 0.22);
+  }
+
+  .factory-calendar .industrial-stat-board:not(.is-stat-scrolling) .conflict-bar:hover em {
+    color: #16384d;
+    font-weight: 600;
+  }
+
+  @keyframes factoryStatTipPulse {
+    0% {
+      transform: translateY(0) scale(1);
+    }
+
+    58% {
+      transform: translateY(-2px) scale(1.015);
+    }
+
+    100% {
+      transform: translateY(-2px) scale(1);
+    }
+  }