Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
hager
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2024-10-17 16:15:36 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
6da3ba25573f878229e3fcdf902b353ddff275a5
6da3ba25
1 parent
57ee4156
菜单栏高度判断优化显示
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
44 additions
and
1 deletions
src/components/common/hagerHeader.vue
src/components/common/hagerHeader.vue
View file @
6da3ba2
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 1
1:21:45
* @LastEditTime: 2024-10-17 1
2:27:11
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
...
...
@@ -274,6 +274,14 @@ export default {
desc: '探索配电新境界,我们的产品引领行业潮流,提供高效、安全的配电解决方案,助您事业更上一层楼!',
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: {},
is_active: '',
...
...
@@ -354,6 +362,40 @@ export default {
onClickProduct() {
// 当鼠标悬停时
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) {
this.product_info = item.info;
...
...
@@ -468,6 +510,7 @@ export default {
flex-basis: 66.67%;
background-color: @background-color;
padding: 1.75rem 1.5rem;
overflow: scroll;
.product-right-title {
display: flex;
justify-content: space-between;
...
...
Please
register
or
login
to post a comment