From b614ce926c25b18b5a65ffa7b04e8ad06ccc7edd Mon Sep 17 00:00:00 2001 From: cwchen <1048842385@qq.com> Date: Tue, 23 Sep 2025 16:51:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bns/css/compreDisplay/compreDisplay.css | 14 +- bns/css/home/home.css | 294 +++++++++++++++++++++- bns/html/compreDisplay/compreDisplay.html | 16 +- bns/html/home/home.html | 2 +- bns/img/back-title-gs.png | Bin 184078 -> 183076 bytes bns/js/compreDisplay/map.js | 7 +- bns/js/home/home.js | 244 ++++++++++++++---- bns/js/system/IPUtils.js | 14 +- login.html | 4 +- 9 files changed, 514 insertions(+), 81 deletions(-) diff --git a/bns/css/compreDisplay/compreDisplay.css b/bns/css/compreDisplay/compreDisplay.css index 8fbc378..caa49ff 100644 --- a/bns/css/compreDisplay/compreDisplay.css +++ b/bns/css/compreDisplay/compreDisplay.css @@ -17,7 +17,7 @@ body { } #content-box { - width: 100%; + width: 99.56%; height: 100%; /*padding: 0.5% 0.5% 0 0.5%;*/ box-sizing: border-box; @@ -30,7 +30,8 @@ body { } #left { - width: 32.108%; + /* width: 32.108%; */ + width: 24.108%; padding: 1% 0.5% 0 0.45%; z-index: 1000; justify-content: space-between; @@ -38,7 +39,8 @@ body { } #left-box { - width: 77.016%; + /* width: 77.016%; */ + width: 100%; } #left-box2 { @@ -47,13 +49,13 @@ body { } #center-box { - width: 37.0901%; + width: 50.0901%; padding: 1% 0.5% 0 0.45%; position: relative; } #right { - width: 30.1045%; + width: 24.1045%; padding: 1% 0.5% 0 0.45%; z-index: 1000; justify-content: space-between; @@ -66,7 +68,7 @@ body { } #right-box { - width: 82.32%; + width: 100%; z-index: 1000; } diff --git a/bns/css/home/home.css b/bns/css/home/home.css index 9ab315f..ff13eaf 100644 --- a/bns/css/home/home.css +++ b/bns/css/home/home.css @@ -85,12 +85,15 @@ html { flex-direction: column; } -.top-box, .bottom-box { +.top-box{ width: 100%; - height: 50%; + height: 36%; } - +.bottom-box { + width: 100%; + height: 64%; +} .date-info { width: 15%; @@ -239,6 +242,291 @@ html { /*导航栏样式设置 end*/ +/* mega menu start */ +.mega-menu { + position: absolute; + left: 50%; + top: 98px; + transform: translateX(-50%); + width: 95%; /* 增加宽度，让更多列有空间展示 */ + max-width: 1500px; /* 增加最大宽度 */ + background: #06182E; + border-radius: 10px; + box-shadow: 0 8px 24px rgba(0,0,0,.35); + padding: 20px 24px; + /* 使用渐变动画：默认隐藏但保留布局用于过渡 */ + display: block; + opacity: 0; + visibility: hidden; + pointer-events: none; + transform: translate(-50%, -6px); /* 初始向上偏移，出现时下滑 */ + transition: opacity .18s ease, visibility .18s ease, transform .18s ease; + z-index: 9999; + border: 1px solid rgba(143, 255, 250, 0.2); + /* 确保父菜单是一个完整的大盒子 */ + min-height: 200px; + max-height: 700px; /* 增加父菜单最大高度 */ + overflow-y: auto; /* 确保内容可滚动显示 */ + overflow-x: visible; /* 允许水平内容显示 */ +} + +/* ========== 滚动条样式（深色主题） ========== */ +/* 默认隐藏滚动条，悬停时显示（WebKit） */ +.mega-menu::-webkit-scrollbar, +.group-list::-webkit-scrollbar, +.sub-list::-webkit-scrollbar { + width: 0; + height: 0; +} +.mega-menu:hover::-webkit-scrollbar, +.group-list:hover::-webkit-scrollbar, +.sub-list:hover::-webkit-scrollbar { + width: 8px; + height: 8px; +} +.mega-menu::-webkit-scrollbar-track, +.group-list::-webkit-scrollbar-track, +.sub-list::-webkit-scrollbar-track { + background: rgba(255,255,255,0.04); + border-radius: 8px; +} +.mega-menu::-webkit-scrollbar-thumb, +.group-list::-webkit-scrollbar-thumb, +.sub-list::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, rgba(225,225,225,0.45), rgba(240,240,240,0.45)); + border-radius: 8px; + border: 1px solid rgba(0,0,0,0.08); +} +.mega-menu::-webkit-scrollbar-thumb:hover, +.group-list::-webkit-scrollbar-thumb:hover, +.sub-list::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, rgba(235,235,235,0.65), rgba(245,245,245,0.65)); +} +/* Firefox: 默认隐藏，悬停显示 */ +.mega-menu, +.group-list, +.sub-list { + scrollbar-width: none; /* 默认隐藏 */ + scrollbar-color: rgba(225,225,225,0.45) rgba(255,255,255,0.04); +} +.mega-menu:hover, +.group-list:hover, +.sub-list:hover { + scrollbar-width: thin; /* 悬停显示 */ +} + +.mega-menu.show { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translate(-50%, 0); +} + +.mega-row { + display: flex; + flex-wrap: wrap; + gap: 24px; +} + +.mega-col { + flex: 1 1 auto; /* 允许自动调整宽度 */ + min-width: 280px; /* 减小最小宽度 */ + max-width: 100%; /* 最大宽度不超过父容器 */ +} + +/* 子菜单容器：在同一容器中按列换行展示，始终位于左侧父菜单列的右侧 */ +.mega-col-inner { + max-height: 700px; /* 容器高度限制，内部可滚动 */ + width: 100%; + position: relative; + overflow-y: auto; + overflow-x: hidden; + display: flex; /* 从左往右排列 */ + flex-wrap: wrap; /* 超出自动换行 */ + gap: 16px 24px; /* 行间/列间间距 */ + align-items: flex-start; /* 顶部对齐 */ +} + +.mega-group { + margin-bottom: 0; + padding: 12px 14px; + /* 渐变色背景：青绿 -> 深蓝，低饱和度以避免干扰文字可读性 */ + background: linear-gradient(135deg, rgba(20,210,190,0.10) 0%, rgba(8,63,92,0.20) 100%); + border-radius: 10px; + /* border: 1px solid rgba(143, 255, 250, 0.15); */ + flex: 0 1 200px; /* 每个卡片基础宽度，允许收缩换行 */ +} + +/* 保持每个分组为独立块，作为整体换列 */ +.sub-group, +.mega-list { + break-inside: avoid; + -webkit-column-break-inside: avoid; + -moz-column-break-inside: avoid; + page-break-inside: avoid; + /* 确保分组作为整体换列，不被拆分 */ + display: inline-block; + width: 100%; + vertical-align: top; + margin-top: 0; /* 确保第一行没有额外间距 */ +} + +.group-title { + display: flex; + align-items: center; + color: #14D2BE; /* 系统青绿 */ + font-size: 18px; + font-weight: 700; + margin-bottom: 10px; +} + +.group-title .dot { + display: inline-block; + width: 6px; + height: 6px; + background: #8FFFFA; + border-radius: 50%; + margin-right: 8px; +} + +.group-list { + /* 文本纵向列表，不换列 */ + height: 250px; + overflow-y: auto; + overflow-x: hidden; + display: block; +} + +.group-list a { + display: block; + color: #DBDBDB; /* 深色底下使用浅色文字 */ + font-size: 14px; + line-height: 1.5; + padding: 6px 0 6px 16px; + margin: 4px 0; + text-decoration: none; + background: transparent; + border: 0; + position: relative; +} +.group-list a::before { + content: "•"; + position: absolute; + left: 0; + top: 0; + line-height: 2.3; + color: #14D2BE; +} + +.group-list a:hover, +.group-list a.active { + background: transparent; + color: #00B8A3; +} + +.sub-group { + margin-bottom: 10px; + padding: 8px 10px; + background: rgba(255,255,255,0.05); /* 添加背景 */ + border-radius: 8px; + border: 1px solid rgba(143, 255, 250, 0.1); /* 添加边框 */ +} + +.sub-title { + color: #8FFFFA; + font-size: 14px; + margin: 6px 0 4px 6px; +} + +.sub-list { + /* 二级文本列表 */ + max-height: 240px; + overflow-y: auto; + overflow-x: hidden; + display: block; +} + +.sub-list a { + display: block; + color: #DBDBDB; /* 提升可读性 */ + font-size: 13px; + line-height: 1.5; + padding: 4px 0 4px 18px; + margin: 2px 0; + text-decoration: none; + background: transparent; + border: 0; + position: relative; +} +.sub-list a::before { + content: "–"; + position: absolute; + left: 6px; + top: 0; + line-height: 1.5; + color: #9CA3AF; +} + +.sub-list a:hover, +.sub-list a.active { + background: transparent; + color: #00B8A3; +} + +.mega-list { + margin: 0; + padding: 0; + background: transparent; + border: 0; +} + +.mega-list a { + display: block; + color: #DBDBDB; /* 深色底浅色字 */ + padding: 6px 0 6px 16px; + text-decoration: none; + font-size: 14px; + transition: color 0.2s ease; + margin: 4px 0; + background: transparent; + border: 0; + line-height: 1.5; + position: relative; +} +.mega-list a::before { + content: "•"; + position: absolute; + left: 0; + top: 0; + line-height: 1.5; + color: #14D2BE; +} + +.mega-list a:hover { + background: transparent; + color: #00B8A3; +} + +.mega-list a.active { + background: #2F5D6B; + color: #8FFFFA; + font-weight: 600; +} + +.mega-divider { + height: 1px; + background: rgba(255,255,255,.08); + margin: 8px 0 12px; +} +/* mega menu end */ + +/* 父级禁用点击的样式 */ +a.disabled-parent { + cursor: default; + opacity: 0.7; + pointer-events: auto; /* 允许悬浮显示，但点击被 JS 阻止 */ +} + /* layer 右侧呼出 start */ @keyframes layui-rl { from { diff --git a/bns/html/compreDisplay/compreDisplay.html b/bns/html/compreDisplay/compreDisplay.html index 9949480..739f4ca 100644 --- a/bns/html/compreDisplay/compreDisplay.html +++ b/bns/html/compreDisplay/compreDisplay.html @@ -136,13 +136,13 @@ -
+ +

地形

@@ -184,7 +184,7 @@

投产工程

- + -->
@@ -272,7 +272,7 @@
+
-->
diff --git a/bns/html/home/home.html b/bns/html/home/home.html index 5abe2fe..bff8f8c 100644 --- a/bns/html/home/home.html +++ b/bns/html/home/home.html @@ -20,7 +20,7 @@ - 主动安全值班助手 + 吉林基建管控平台