Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css">
<style>
.area-right{
background: url(../static/images/floor_lp.png) no-repeat;
height: 23rem;
float: right;
background-size: cover;
width: 78%;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="../static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="area-left">
<div class="title">某某测试监区平面图</div>
<div class="left-menu">
<ul>
<li>
<div class="menu-mc">
<span>办公楼</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff6363;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #ffba00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #43e04e;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #2f8fff;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff6363;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff8a00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ffba00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #43e04e;">35</span>
</div>
</li>
</ul>
</div>
</div>
<div class="area-right">
<div class="area-box">
<ul>
<li class="a_floor">
<a href="#"> <img src="../static/images/A_floor.png"/></a>
</li>
<li class="bg1_floor">
<a href="#"> <img src="../static/images/bgq_floor.png"/></a>
</li>
<li class="b_floor">
<a href="#"> <img src="../static/images/B_floor.png"/></a>
</li>
<li class="g_floor">
<a href="#"> <img src="../static/images/G_floor.png"/></a>
</li>
<li class="c_floor">
<a href="#"> <img src="../static/images/C_floor.png"/></a>
</li>
<li class="e_floor">
<a href="#"> <img src="../static/images/E_floor.png"/></a>
<li class="d_floor">
<a href="#"> <img src="../static/images/D_floor.png"/></a>
</li>
<li class="d_floor_index">
<a href="#"> <img src="../static/images/D_floor_1.png"/></a>
</li>
<li class="f_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
</li>
<!-- <li class="h_floor">
<a href="#"> <img src="../static/images/F_floor.png"/></a>
</li> -->
</ul>
</div>