Commit e91a063d authored by liuqing's avatar liuqing

楼层

parent ae671471
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [
{ top: '0.4rem', left: '0.5rem' },
{ top: '0.4rem', left: '1.8rem' },
// ... 其他对象 ...
{ top: '2.5rem', left: '0.5rem' },
{ top: '2.5rem', left: '0.5rem' }
];
// 将数组随机排序
arr.sort(function() {
return Math.random() - 0.5;
});
var selectedArr = [];
var part1 = [];
var part2 = [];
var part3 = [];
var numSelected = 0;
// 随机选择7、8、10或12个元素
var numToSelect = [ 12];
var randomNum = Math.floor(Math.random() * 4); // 随机选择7、8、10或12
numSelected = numToSelect[randomNum];
// 将选中的元素分成3个部分
var numPerPart = Math.floor(numSelected / 3);
// 平均从3个数据中选择
var startIndex = 0;
for (var i = 0; i < numSelected; i++) {
var currentPart = i % 3;
if (currentPart === 0) {
part1.push(arr[startIndex + Math.floor(i / 3)]);
} else if (currentPart === 1) {
part2.push(arr[startIndex + Math.floor(i / 3)]);
} else {
part3.push(arr[startIndex + Math.floor(i / 3)]);
}
}
console.log(part1);
console.log(part2);
console.log(part3);
</script>
</body>
</html>
\ No newline at end of file
......@@ -16,6 +16,16 @@
});
});
</script>
<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">
......
<!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/plan_floor.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">
<span>A栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #ffba00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>B栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #43e04e;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>C栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style=" background-color: #2f8fff;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>D栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff6363;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>E栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ff8a00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>F栋</span>
</div>
<div class="menu-num">
<span>监控点</span>
<span style="background-color: #ffba00;">35</span>
</div>
</li>
<li>
<div class="menu-mc">
<span>G栋</span>
</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="xzqy_floor">
<a href="1"> <img src="../static/images/xzqy.png"/></a>
</li>
<li class="jyl_floor">
<a href="jyl"> <img src="../static/images/jyl.png"/></a>
</li>
<li class="cuican_floor">
<a href="3"> <img src="../static/images/cuican.png"/></a>
</li>
<li class="litan_floor">
<a href="4"> <img src="../static/images/lidan.png"/></a>
</li>
<li class="wss_floor">
<a href="5"> <img src="../static/images/wss.png"/></a>
</li>
<li class="nanjian_floor">
<a href="5"> <img src="../static/images/lanjian.png"/></a>
</li>
<li class="beijianyu_floor">
<a href="5"> <img src="../static/images/beijianyu.png"/></a>
</li>
<li class="beijian_floor">
<a href="5"> <img src="../static/images/beiche.png"/></a>
</li>
<li class="nanchejian_floor">
<a href="5"> <img src="../static/images/lanche.png"/></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -121,14 +121,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
width: 20%;
float: left;
}
.area-right{
background: url(../images/floor_lp.png) no-repeat;
height: 23rem;
float: right;
background-size: cover;
width: 78%;
background-size: 100% 100%;
}
.area-content .area-left .title{
font-size: 0.6rem;
text-align: center;
......@@ -139,7 +132,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
margin-top: 20px;
}
.left-menu ul li{
background-color: #435770ad;
background-color: #0d2a5b;
border-radius: 7px;
margin-top: 0.6rem;
display: flex;
......@@ -285,4 +278,43 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
.bue-yewu .map img:hover {
transform: scale(1.05); /* 鼠标悬停时图标放大为原来的1.2倍 */
}
\ No newline at end of file
}
/**监控业务数据**/
.area-right ul .xzqy_floor{
right: 5.2rem;
top: 11rem;
}
/**监控业务数据**/
.area-right ul .jyl_floor{
right: 12rem;
top: 7rem;
}
.area-right ul .cuican_floor{
right: 4.8rem;
top: 8.3rem;
}
.area-right ul .litan_floor{
right: 5rem;
top: 6.8rem;
}
.area-right ul .wss_floor{
right: 6.8rem;
top: 5.6rem;
}
.area-right ul .nanjian_floor{
right: 9rem;
top: 4.3rem;
}
.area-right ul .beijian_floor{
right: 13rem;
top: 3.6rem;
}
.area-right ul .nanchejian_floor{
right: 17rem;
top: 2.6rem;
}
.area-right ul .beijianyu_floor{
left: 15rem;
top: 5rem;
}
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment