样式修改
This commit is contained in:
parent
347a426d68
commit
b614ce926c
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -136,13 +136,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-box2" class="common-height">
|
||||
<!-- <div id="left-box2" class="common-height">
|
||||
<div class="switch-btn">
|
||||
<form class="layui-form switch-form" onsubmit="return false;">
|
||||
<!--<div class="layui-form-item layout">
|
||||
<div class="layui-form-item layout">
|
||||
<p>天气</p>
|
||||
<input type="checkbox" name="weather" lay-skin="switch" lay-filter="weather" title="风险开关">
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="layui-form-item layout">
|
||||
<p>地形</p>
|
||||
<input type="checkbox" name="terrain" lay-skin="switch" lay-filter="terrain" title="地形">
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
<p>投产工程</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="center-box" class="common-height">
|
||||
<div class="switch-type">
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
</form>
|
||||
</div>
|
||||
<div id="right" class="layout common-height">
|
||||
<div id="center-box2" class="common-height">
|
||||
<!-- <div id="center-box2" class="common-height">
|
||||
<div class="multiselect layout">
|
||||
<div class="check-risk layout" isCheck='1'><img src="../../img/title-btn/check/risk-1-check.png">
|
||||
<p checkedName="" style="color: #fff;">全选(<span id="allNum">0</span>)</p>
|
||||
|
|
@ -287,11 +287,9 @@
|
|||
style="">
|
||||
<p checkedName="4" style="color: #2aa998;">四级及以下(<span id="fourNum">0</span>)</p>
|
||||
</div>
|
||||
<!--<div class="check-risk layout" isCheck='1'><img
|
||||
src="../../img/title-btn/check/risk-5-check.png">
|
||||
<p checkedName="5" style="color: #70e180;">五级</p></div>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div id="right-box" class="common-height">
|
||||
<!--作业票-->
|
||||
<div class="main-box3">
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<script src="../../js/home/userBanding.js" type="text/javascript"></script>
|
||||
<script src="../../js/public/openIframe.js" type="text/javascript"></script>
|
||||
|
||||
<title>主动安全值班助手</title>
|
||||
<title>吉林基建管控平台</title>
|
||||
<style>
|
||||
/*input框,select样式*/
|
||||
.layui-select {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 179 KiB |
|
|
@ -15,7 +15,7 @@ function map(dataMap) {
|
|||
echarts.registerMap('anhui', geoJson);
|
||||
myChart.hideLoading();
|
||||
let max = 480,
|
||||
min = 1.2; // todo
|
||||
min = 1.25; // todo
|
||||
let maxSize4Pin = 100,
|
||||
minSize4Pin = 100;
|
||||
|
||||
|
|
@ -86,9 +86,10 @@ function map(dataMap) {
|
|||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontFamily: 'Alibaba PuHuiTi R'
|
||||
fontFamily: 'Alibaba PuHuiTi R',
|
||||
fontSize: 14,
|
||||
},
|
||||
rotate: -20,
|
||||
// rotate: -20,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
|
|
|
|||
|
|
@ -24,13 +24,40 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
element.render();//渲染
|
||||
form.on('submit(formData)', function (data) {
|
||||
submitData(data);
|
||||
|
||||
});
|
||||
|
||||
form.on('submit(formDatas)', function (data) {
|
||||
bgData(data);
|
||||
});
|
||||
// 默认首页
|
||||
initUserExam(user.userId);
|
||||
|
||||
// 顶部父菜单点击:先统一清除选中态,再按业务处理
|
||||
try {
|
||||
$(document).on('click', '.layui-nav>.layui-nav-item>a', function (e) {
|
||||
// 统一清除与设置选中态,避免多项同时高亮
|
||||
$('ul li').removeClass('layui-that layui-this');
|
||||
$(this).parent().addClass('layui-that');
|
||||
|
||||
var txt = $.trim($(this).text());
|
||||
if (txt === '安全管控') {
|
||||
e.preventDefault();
|
||||
$("#ifr-box ").css("background-image", "");
|
||||
$('#indexIframe').attr('src', inde1url);
|
||||
$("#indexIframe").show();
|
||||
$("#layui-tab").hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} catch (err) {}
|
||||
// 默认首页:进入系统直接展示综合展示页
|
||||
try {
|
||||
$('#html').css("background", 'url("../../img/back-gs.png") no-repeat 0 0 / 100% 100% transparent');
|
||||
$("#ifr-box ").css("background-image", "");
|
||||
$('#indexIframe').attr('src', inde1url); // ../compreDisplay/compreDisplay.html
|
||||
$("#indexIframe").show();
|
||||
$("#layui-tab").hide();
|
||||
} catch(e) {}
|
||||
initUserExam(user.userId);
|
||||
getWzXx(user.orgId);
|
||||
window.setTimeout(function () {
|
||||
getWzXx(user.orgId);
|
||||
|
|
@ -53,8 +80,37 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
openNewTab('../dutyTask/violationStatistics.html','19','违章管理')
|
||||
})
|
||||
|
||||
//点击事件
|
||||
$("dd>a,li>a").click(function (e) {
|
||||
//点击事件(兼容 mega menu 内链接)
|
||||
$("dd>a,li>a,.mega-list a,.group-list a,.sub-list a").click(function (e) {
|
||||
// 禁止点击:父级且无可跳转地址
|
||||
var hrefVal = $(this).attr('href');
|
||||
var isDisabledParent = $(this).hasClass('disabled-parent') || hrefVal === 'javascript:;' || hrefVal === './' || hrefVal === '' || hrefVal == null || hrefVal == undefined;
|
||||
if (isDisabledParent) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var isFromMega = $(this).closest('.mega-menu').length > 0;
|
||||
// 特殊:点击顶级“安全管控”或以“安全”开头的菜单,无论是否有下拉,均直接展示综合展示页
|
||||
var textLabel = $(this).text().trim();
|
||||
if (!isFromMega && (textLabel === '安全管控' || textLabel.indexOf('安全') === 0)) {
|
||||
try {
|
||||
$("#ifr-box ").css("background-image", "");
|
||||
$('#indexIframe').attr('src', inde1url);
|
||||
$("#indexIframe").show();
|
||||
$("#layui-tab").hide();
|
||||
// 顶部菜单选中态
|
||||
$('ul li').removeClass('layui-that layui-this');
|
||||
$(this).parents('.layui-nav-item').addClass('layui-that');
|
||||
} catch(err){}
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
// 设置子菜单选中样式
|
||||
if (isFromMega) {
|
||||
// 子菜单高亮
|
||||
$(".mega-list a, .group-list a, .sub-list a").removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
if ($(this).next('dl').length === 0) {
|
||||
e.preventDefault();
|
||||
$('ul li').each(function () {
|
||||
|
|
@ -63,9 +119,16 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
$(this).removeClass('layui-this')
|
||||
}
|
||||
})
|
||||
$(this).parents('.layui-nav-child').removeClass('layui-show');
|
||||
if ($(this).parents('.layui-nav-child').length > 0) {
|
||||
$(this).parents('.layui-nav-child').removeClass('layui-show');
|
||||
}
|
||||
$(this).parents('.layui-nav-item').addClass('layui-that');
|
||||
console.log($(this).attr("href"));
|
||||
// 特殊:mega 内部“安全*”也跳转到综合展示页
|
||||
var menuText = $(this).text().trim();
|
||||
if (menuText === '安全管控' || menuText.indexOf('安全') === 0) {
|
||||
$(this).attr('href', inde1url);
|
||||
}
|
||||
let indexUrls = $(this).attr("href");
|
||||
|
||||
if (indexUrls == inde1url || indexUrls == inde2url || indexUrls == inde3url) {
|
||||
|
|
@ -116,9 +179,9 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
if (nowsrc == inde1url) {//综合暂时
|
||||
imea = "0";
|
||||
} else if (nowsrc == inde2url) {//地市首页
|
||||
imea = "1";
|
||||
imea = "0";
|
||||
} else if (nowsrc == inde3url) {//地市首页
|
||||
imea = "2";
|
||||
imea = "0";
|
||||
}
|
||||
|
||||
$(".layui-nav-item").each(function () {
|
||||
|
|
@ -126,7 +189,7 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
$(this).removeClass('layui-this');
|
||||
console.log($(this).text());
|
||||
console.log($(this).attr("idx"))
|
||||
if ($(this).text() == '综合展示' && imea == 0) {
|
||||
if ($(this).text() == '安全管控' && imea == 0) {
|
||||
$(this).addClass('layui-that');
|
||||
$(this).addClass('layui-this');
|
||||
} else if ($(this).text().indexOf('首页') != '-1' && imea == 1) {
|
||||
|
|
@ -143,7 +206,17 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
})
|
||||
|
||||
}
|
||||
// 再次联动父菜单高亮,避免被上面的清除覆盖
|
||||
if (isFromMega) {
|
||||
var parentMenuId2 = $(this).closest('.mega-menu').attr('id');
|
||||
if (parentMenuId2 && parentMenuId2.indexOf('mega-') === 0) {
|
||||
var pid2 = parentMenuId2.replace('mega-', '');
|
||||
$("#menu-title .layui-nav-item[idx='" + pid2 + "']").addClass('layui-that layui-this');
|
||||
}
|
||||
}
|
||||
$(".mega-menu").removeClass('show');
|
||||
});
|
||||
|
||||
//$("#layui-tab-title").niceScroll({cursorborder:"",cursorcolor:"#c0c4cc",boxzoom:true});
|
||||
})
|
||||
|
||||
|
|
@ -154,6 +227,8 @@ layui.use(['layer', 'form', 'element'], function () {
|
|||
function initMenu() {
|
||||
var user = JSON.parse(decrypt(us));
|
||||
var menus = user.menus;
|
||||
console.log(menus);
|
||||
|
||||
if (menus.length > 0 && menus != '[]') {
|
||||
var num = 0;
|
||||
var allMenus = "";
|
||||
|
|
@ -161,6 +236,7 @@ function initMenu() {
|
|||
let maxMenu=[];
|
||||
var ul = '<ul class="layui-nav layout" style="width: 100%" >'
|
||||
let menNums=0;
|
||||
var megaPanels = ""; // 收集 mega menu 面板
|
||||
for (let i = 0; i < menus.length; i++) {
|
||||
var url = menus[i].url;//路径
|
||||
var menuName = menus[i].menuName;//名称
|
||||
|
|
@ -189,34 +265,12 @@ function initMenu() {
|
|||
menNums++;
|
||||
if (num == 0) {//
|
||||
var width = 'width:' + menuName.length * 20 + 'px;';
|
||||
var li = "<li class='layui-nav-item layui-this' style='margin-right: 5px;'>" +
|
||||
"<a href='" + url + "' index='1' idx='" + id + "' style='" + width + "'>" + menuName + "</a>";
|
||||
var li = "<li class='layui-nav-item layui-this' idx='" + id + "' style='margin-right: 5px;'>" +
|
||||
"<a href='" + url + "' index='1' idx='" + id + "' style='" + width + "' " + (!isLast ? "class='disabled-parent'" : "") + ">" + menuName + "</a>";
|
||||
if (!isLast) {
|
||||
var dl = "";
|
||||
if (childer != null && childer.length > 0) {
|
||||
dl1 = '<dl class="layui-nav-child ">';
|
||||
var dd = "";
|
||||
for (let j = 0; j < childer.length; j++) {
|
||||
var ind = j + 1;
|
||||
if(childer[j].menuName === '课件学习'){
|
||||
kjIdx = childer[j].menuId;
|
||||
}
|
||||
dd += "<dd><a href='" + childer[j].url + "' idx='" + childer[j].menuId + "' index='" + ind + "' >" + childer[j].menuName + "</a></dd>"
|
||||
if (j == 0) {
|
||||
console.log(childer[j].url)
|
||||
if (childer[j].ur != '../compreDisplay/compreDisplay.html') {
|
||||
$('#indexIframe').css("margin-top", "50px");
|
||||
$('#indexIframe').css("height", "96.03%");
|
||||
}
|
||||
$('#indexIframe').attr('src', childer[j].url);
|
||||
indexUrl = childer[j].url;
|
||||
}
|
||||
}
|
||||
var dl2 = "</dl>"
|
||||
dl += dl1 + dd + dl2;
|
||||
megaPanels += buildMegaPanel(id, childer, menuName);
|
||||
}
|
||||
li += dl;
|
||||
|
||||
} else {
|
||||
indexUrl = url;
|
||||
$('#indexIframe').attr('src', url);
|
||||
|
|
@ -234,25 +288,13 @@ function initMenu() {
|
|||
if (menuName.length > 4) {
|
||||
margi += 'margin-right:5px';
|
||||
}
|
||||
var li = "<li class='layui-nav-item ' style='" + margi + "'>" +
|
||||
"<a href='" + url + "' index='2' idx='" + id + "' style='width: " + width + "'>" + menuName + "</a>";
|
||||
if (!isLast) {
|
||||
var dl = "";
|
||||
if (childer != null && childer.length > 0) {
|
||||
dl1 = '<dl class="layui-nav-child">';
|
||||
var dd = ""
|
||||
for (let j = 0; j < childer.length; j++) {
|
||||
if(childer[j].menuName === '课件学习'){
|
||||
kjIdx = childer[j].menuId;
|
||||
}
|
||||
dd += "<dd><a index='2' idx='" + childer[j].menuId + "' href='" + childer[j].url + "'>" + childer[j].menuName + "</a></dd>"
|
||||
}
|
||||
var dl2 = "</dl>"
|
||||
dl += dl1 + dd + dl2;
|
||||
|
||||
}
|
||||
li += dl;
|
||||
}
|
||||
var li = "<li class='layui-nav-item ' idx='" + id + "' style='" + margi + "'>" +
|
||||
"<a href='" + url + "' index='2' idx='" + id + "' style='width: " + width + "' " + (!isLast ? "class='disabled-parent'" : "") + ">" + menuName + "</a>";
|
||||
if (!isLast) {
|
||||
if (childer != null && childer.length > 0) {
|
||||
megaPanels += buildMegaPanel(id, childer, menuName);
|
||||
}
|
||||
}
|
||||
homeMenu += li + "</li>";
|
||||
}
|
||||
|
||||
|
|
@ -269,9 +311,12 @@ function initMenu() {
|
|||
|
||||
var dul = "</ul>"
|
||||
$("#menu-title").empty();
|
||||
$("#menu-title").append(ul + allMenus + dul);
|
||||
$("#menu-title").append(ul + allMenus + dul + megaPanels);
|
||||
$("#menu-user").empty();
|
||||
$("#menu-user").append(userMenus);
|
||||
|
||||
// 绑定悬浮事件
|
||||
bindMegaMenuEvents();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -352,6 +397,97 @@ function addMax(maxMenu){
|
|||
|
||||
}
|
||||
|
||||
// 构建 mega menu 面板
|
||||
function buildMegaPanel(parentId, childer, title){
|
||||
var html = '';
|
||||
html += '<div class="mega-menu" id="mega-' + parentId + '">';
|
||||
html += '<div class="mega-row">';
|
||||
// 单一容器,交给 CSS 多列在同一容器中换列
|
||||
html += '<div class="mega-col"><div class="mega-col-inner">';
|
||||
for (let i = 0; i < childer.length; i++) {
|
||||
var child = childer[i];
|
||||
if(child.menuName === '课件学习'){
|
||||
kjIdx = child.menuId;
|
||||
}
|
||||
if (child.childer && child.childer.length > 0) {
|
||||
html += '<div class="mega-group">';
|
||||
html += '<div class="group-title"><span class="dot"></span>' + (child.menuName || '') + '</div>';
|
||||
html += '<div class="group-list">';
|
||||
for (let k = 0; k < child.childer.length; k++) {
|
||||
var c = child.childer[k];
|
||||
if (c.childer && c.childer.length > 0) {
|
||||
html += '<div class="sub-group">';
|
||||
html += '<div class="sub-title">' + (c.menuName || '') + '</div>';
|
||||
html += '<div class="sub-list">';
|
||||
for (let m = 0; m < c.childer.length; m++) {
|
||||
var s = c.childer[m];
|
||||
html += "<a href='" + (s.url || 'javascript:;') + "' idx='" + s.menuId + "'>" + (s.menuName || '') + "</a>";
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += "<a href='" + (c.url || 'javascript:;') + "' idx='" + c.menuId + "'>" + (c.menuName || '') + "</a>";
|
||||
}
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '<div class="mega-list">';
|
||||
html += "<a href='" + (child.url || 'javascript:;') + "' idx='" + child.menuId + "'>" + (child.menuName || '') + "</a>";
|
||||
html += '</div>';
|
||||
}
|
||||
}
|
||||
html += '</div></div>';
|
||||
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
// 绑定 mega menu 事件
|
||||
function bindMegaMenuEvents() {
|
||||
var hideTimer = null;
|
||||
|
||||
// 悬浮显示:父级菜单进入时显示对应面板,并清除隐藏定时器
|
||||
$(document)
|
||||
.off('mouseenter', '#menu-title .layui-nav-item')
|
||||
.on('mouseenter', '#menu-title .layui-nav-item', function(){
|
||||
if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
|
||||
var idx = $(this).attr('idx');
|
||||
$(".mega-menu").removeClass('show');
|
||||
if (idx) {
|
||||
var megaPanel = $("#mega-"+idx);
|
||||
if (megaPanel.length > 0) {
|
||||
megaPanel.addClass('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
// 父级菜单离开时,稍作延时隐藏,给鼠标移动到面板的时间
|
||||
.off('mouseleave', '#menu-title .layui-nav-item')
|
||||
.on('mouseleave', '#menu-title .layui-nav-item', function(){
|
||||
if (hideTimer) { clearTimeout(hideTimer); }
|
||||
hideTimer = setTimeout(function(){
|
||||
$(".mega-menu").removeClass('show');
|
||||
}, 160);
|
||||
});
|
||||
|
||||
// 在 mega 面板上移动时保持显示;离开时再延时隐藏,避免抖动
|
||||
$(document)
|
||||
.off('mouseenter', '.mega-menu')
|
||||
.on('mouseenter', '.mega-menu', function(){
|
||||
if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
|
||||
$(this).addClass('show');
|
||||
})
|
||||
.off('mouseleave', '.mega-menu')
|
||||
.on('mouseleave', '.mega-menu', function(){
|
||||
if (hideTimer) { clearTimeout(hideTimer); }
|
||||
var self = this;
|
||||
hideTimer = setTimeout(function(){
|
||||
$(self).removeClass('show');
|
||||
}, 160);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*日期动态展示*/
|
||||
showTime();
|
||||
|
|
@ -656,3 +792,5 @@ function reloadDayExamStatus(){
|
|||
function openStudyTask(){
|
||||
openNewTab('../studyExam/studyCourseware.html',kjIdx,'课件学习')
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
//测试环境
|
||||
// let dataUrl = "http://192.168.0.14:11122/basfs/";
|
||||
// let login_url="http://192.168.0.14:11122/ahsfs/login.html";
|
||||
//测试环境
|
||||
let host=window.location.host;
|
||||
// let dataUrl = "https://"+host+"/basfs/";
|
||||
// let login_url="https://"+host+"/ahsfs/login.html";
|
||||
|
||||
// let dataUrl = "http://192.168.0.7:17789/basfs/";
|
||||
// let login_url="http://192.168.0.7:17789/ahsfs/login.html";
|
||||
//只允许包含静态资源-不包含方法 //系统请求路径
|
||||
// let dataUrl = "http://sgwpdm.ah.sgcc.com.cn/basfs/";
|
||||
// let login_url="http://sgwpdm.ah.sgcc.com.cn/ahsfs/login.html";
|
||||
|
||||
|
||||
|
||||
// let login_url="http://sgwpdm.ah.sgcc.com.cn/ahsfs/login.html";
|
||||
|
|
@ -20,9 +26,9 @@ let login_url="http://127.0.0.1:8888/login.html";
|
|||
|
||||
//let login_url="http://127.0.0.1:8848/jjsp_web/login.html";
|
||||
//重定向登录页面
|
||||
let login_url_new = "http://sgwpdm.ah.sgcc.com.cn/sgwpdm/#/weblogin";
|
||||
//let login_url_new = "http://sgwpdm.ah.sgcc.com.cn/sgwpdm/#/weblogin";
|
||||
//分析决策中心
|
||||
let jj_jc_url = "http://sgwpdm.ah.sgcc.com.cn/ahsfs/youo/infrastructureControl/index.html";//决策中心系统
|
||||
//let jj_jc_url = "http://sgwpdm.ah.sgcc.com.cn/ahsfs/youo/infrastructureControl/index.html";//决策中心系统
|
||||
//文件映射路径
|
||||
let photoUrl = dataUrl + "proteam/files/";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>主动安全值班助手</title>
|
||||
<title>吉林基建管控平台</title>
|
||||
</head>
|
||||
<link href="bns/css/login.css" rel="stylesheet">
|
||||
<link href="bns/js/layui/css/layui.css" rel="stylesheet">
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<script src="bns/js/login/login.js" type="text/javascript"></script>
|
||||
<body>
|
||||
<div id="wdiv">
|
||||
<div class="fdiv">主 动 式 安 全 值 班 助 手</div>
|
||||
<div class="fdiv">吉 林 基 建 管 控 平 台</div>
|
||||
<div class="mdiv">
|
||||
<div style="border-bottom:1px solid #FFFFFF;width: 60%;margin-left: 18%;top: 72px;height: 40px;position: absolute">
|
||||
<IMG src="bns/img/login/user.png">
|
||||
|
|
|
|||
Loading…
Reference in New Issue