菜单栏高度判断优化显示

 <!--
 <!--
  * @Date: 2024-09-26 13:42:11
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-17 11:21:45
+ * @LastEditTime: 2024-10-17 12:27:11
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -274,6 +274,14 @@ export default {
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
           desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
           product: []
           product: []
         }
         }
+      }, {
+        name: '能源管理',
+        icon: 'https://cdn.ipadbiz.cn/hager/icon/%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6@2x.png',
+        info: {
+          name: '智能控制',
+          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
+          product: []
+        }
       }],
       }],
       product_info: {},
       product_info: {},
       is_active: '',
       is_active: '',
@@ -354,6 +362,40 @@ export default {
     onClickProduct() {
     onClickProduct() {
       // 当鼠标悬停时
       // 当鼠标悬停时
       this.show = true;
       this.show = true;
+      // 处理菜单高度被挡住的问题
+      function isElementVisible($element) {
+        var windowHeight = $(window).height(); // 获取窗口高度
+        var windowScrollTop = $(window).scrollTop(); // 获取窗口的滚动高度
+
+        var elementOffsetTop = $element.offset().top; // 获取元素的顶部偏移
+        var elementHeight = $element.outerHeight(); // 获取元素高度
+
+        // 判断元素是否完全在可视区域内
+        if (elementOffsetTop >= windowScrollTop &&
+            elementOffsetTop + elementHeight <= windowScrollTop + windowHeight) {
+          return true; // 元素完全可见
+        } else if (elementOffsetTop < windowScrollTop ||
+            elementOffsetTop + elementHeight > windowScrollTop + windowHeight) {
+          return false; // 元素被挡住或部分被遮挡
+        }
+      }
+      var $productRightWrapper = $('.product-right-wrapper');
+
+      if (isElementVisible($productRightWrapper)) {
+        console.log(".product-right-wrapper 完全可见");
+      } else {
+        console.log(".product-right-wrapper 被部分或完全遮挡");
+        this.$nextTick(() => {
+          const productRightWrapper = document.querySelector('.product-right-wrapper');
+          // 获取窗口的高度
+          const windowHeight = $(window).height();
+          // 计算适合的高度，假设元素的 top 值固定，调整高度为可用高度
+          const topOffset = $('.product-right-wrapper').offset().top; // 获取元素距离顶部的偏移量
+          const availableHeight = windowHeight - topOffset;
+          // 设置 .product-right-wrapper 的最大高度，确保不会溢出窗口
+          productRightWrapper.style.height = availableHeight + 'px';
+        })
+      }
     },
     },
     onClick (item, index) {
     onClick (item, index) {
       this.product_info = item.info;
       this.product_info = item.info;
@@ -468,6 +510,7 @@ export default {
         flex-basis: 66.67%;
         flex-basis: 66.67%;
         background-color: @background-color;
         background-color: @background-color;
         padding: 1.75rem 1.5rem;
         padding: 1.75rem 1.5rem;
+        overflow: scroll;
         .product-right-title {
         .product-right-title {
           display: flex;
           display: flex;
           justify-content: space-between;
           justify-content: space-between;