jyyhq/witDisplay/page/home.html

88 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/core/layui.css" />
<link rel="stylesheet" type="text/css" href="../css/home.css" />
<style>
.layui-layer {
background-color: rgba(0,0,0,0)!important;
background-image: url(../img/bgSecondLevel.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.layui-layer-title {
border-bottom: 0 solid #f0f0f0!important;
}
.smart-electricity {
position: relative;
}
.options {
position: absolute; /* 绝对定位 */
left: 0;
top: 100%; /* 在父元素下方显示 */
background-color: #001a1f; /* 背景色 */
/*border: 1px solid #ccc; !* 边框 *!*/
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
z-index: 10; /* 确保选项在其他元素上面 */
}
.options div {
cursor: pointer; /* 鼠标悬停时变为指针 */
}
.interval{
margin-top: 10px;
}
.options div:hover {
background-color: #023944; /* 悬停效果 */
}
</style>
</head>
<body>
<div class="title">
<div></div>
<div class="left">
<div onclick="jump(this,1)">首页</div>
<div onclick="jump(this,7)">电子地图</div>
<div onclick="jump(this,2)" id="video_cl">视频监控</div>
<div onclick="jump(this,4)">火灾报警</div>
<div onclick="jump(this,5)">安全防范</div>
</div>
<div class="right">
<div onclick="jump(this,6)">道闸管理</div>
<div class="smart-electricity" onmouseover="showOptions(this)" onmouseout="hideOptions(this)">
<span class="current-field" onclick="jump(this,3)">智慧用电</span>
<div class="options" style="display: none;">
<div class="interval someClass" onclick="jump(this,9)">智慧空调</div>
<div class="interval lampClass" onclick="jump(this,10)">智慧路灯</div>
</div>
</div>
<div onclick="jump(this,11)">智慧用水</div>
<div onclick="jump(this,12)">光伏储能</div>
<div onclick="jump(this,8)">系统管理</div>
</div>
</div>
<div class="content">
<iframe name="indexName" src="index/index.html" frameborder="no" scrolling="no" allowtransparency="yes"></iframe>
</div>
<div id="alarm" onclick="alarmClick()" title="告警信息">
</div>
<script src="../js/core/jquery-3.6.0.js"></script>
<script src="../js/core/mqtt.min.js"></script>
<script type="text/javascript" src="../js/video/qx/conf.js"></script>
<script src="../js/video/connection_twoToken.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/core/layui2.7.6/layui.js"></script> <!--2.7.6-->
<script src="../js/core/public.js"></script>
<script src="../js/webSocket/sockjs.min.js"></script>
<script src="../js/webSocket/stomp.js"></script>
<script src="../js/webSocket/webSocket.js"></script>
<script src="../js/home.js"></script>
</body>
</html>