Skip to content

J
jianchayuan
Commit 9194a4c9 authored by liuqing's avatar liuqing
Browse files
Options

最后一个psd

parent 6c20539b
Hide whitespace changes
Inline Side-by-side
Showing with 2137 additions and 0 deletions
lastdalou/changqu.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '0.75rem',
left: '5.3rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.5rem',
left: '0.52rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.9rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.9rem'
},{
top: '3.8rem',
left: '7.5rem'
},
{
top: '3.55rem',
left: '11.18rem'
}],
'arr2': [{
top: '3.6rem',
left: '0.5rem'
},{
top: '3.6rem',
left: '11.18rem'
},{
top: '2.5rem',
left: '2.45rem'
},{
top: '2.5rem',
left: '3.6rem'
},{
top: '2.5rem',
left: '4.8rem'
},{
top: '2.5rem',
left: '6rem'
},{
top: '2.5rem',
left: '7.2rem'
},{
top: '4.9rem',
left: '2.45rem'
},{
top: '4.9rem',
left: '3.6rem'
},{
top: '4.9rem',
left: '4.8rem'
},{
top: '4.9rem',
left: '6rem'
},{
top: '4.9rem',
left: '7.2rem'
},{
top: '3.8rem',
left: '7.45rem'
},{
top: '3.8rem',
left: '8.9rem'
}],
'arr3': [{
top: '3.6rem',
left: '0.5rem'
},{
top: '3.6rem',
left: '11.18rem'
},{
top: '2.5rem',
left: '2.45rem'
},{
top: '2.5rem',
left: '3.6rem'
},{
top: '2.5rem',
left: '4.8rem'
},{
top: '2.5rem',
left: '6rem'
},{
top: '2.5rem',
left: '7.2rem'
},{
top: '4.9rem',
left: '2.45rem'
},{
top: '4.9rem',
left: '3.6rem'
},{
top: '4.9rem',
left: '4.8rem'
},{
top: '4.9rem',
left: '6rem'
},{
top: '4.9rem',
left: '7.2rem'
},{
top: '3.8rem',
left: '7.45rem'
},{
top: '3.8rem',
left: '8.9rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/changqu_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">一厂区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>19</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>14</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>14</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu1.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(3);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.45rem',
left: '0.6rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.6rem',
left: '9.7rem'
},{
top: '3.8rem',
left: '7.5rem'
},
{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.45rem',
left: '0.58rem'
},{
top: '3.6rem',
left: '1.32rem'
},{
top: '7rem',
left: '0.7rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '2.48rem',
left: '9.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '0.75rem',
left: '10.4rem'
},{
top: '7rem',
left: '10.4rem'
}],
'arr3': [{
top: '0.75rem',
left: '0.75rem'
},{
top: '0.75rem',
left: '5.5rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.6rem',
left: '1.02rem'
},{
top: '7rem',
left: '0.7rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '2.48rem',
left: '9.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '0.75rem',
left: '10.4rem'
},{
top: '7rem',
left: '10.4rem'
}],
'arr4': [{
top: '3.6rem',
left: '5.6rem'
},{
top: '3.6rem',
left: '9.3rem'
},{
top: '3.6rem',
left: '1.9rem'
},],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu1_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">一监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>25</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>24</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu2.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.9rem',
left: '3.8rem'
},{
top: '2.6rem',
left: '7.25rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '9.2rem'
},{
top: '3.6rem',
left: '9.68rem'
},{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '0.8rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr3': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '0.8rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr4': [{
top: '3.6rem',
left: '2.8rem'
},{
top: '3.6rem',
left: '9.3rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu2_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">二监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>8</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu3.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.9rem',
left: '3.8rem'
},{
top: '2.6rem',
left: '7.25rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '9.2rem'
},{
top: '3.6rem',
left: '9.68rem'
},{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr3': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr4': [{
top: '7.15rem',
left: '5.6rem'
},{
top: '0.8rem',
left: '5.6rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu3_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">三监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>8</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu4.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.9rem',
left: '3.8rem'
},{
top: '2.6rem',
left: '7.25rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '9.2rem'
},{
top: '3.6rem',
left: '9.68rem'
},{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr3': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr4': [{
top: '7.15rem',
left: '5.6rem'
},{
top: '0.8rem',
left: '5.6rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu3_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">三监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>8</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>20</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu5.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '2rem',
left: '0.5rem'
},{
top: '4.45rem',
left: '0.58rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '2.48rem',
left: '9.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '3.5rem',
left: '10.18rem'
},{
top: '3.8rem',
left: '7.5rem'
},
{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.3rem',
left: '0.58rem'
},{
top: '7rem',
left: '0.7rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '2.48rem',
left: '9.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.8rem',
left: '9.5rem'
}],
'arr3': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '10.2rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '3.3rem',
left: '0.58rem'
},{
top: '7rem',
left: '0.7rem'
},{
top: '2.48rem',
left: '2.36rem'
},{
top: '2.48rem',
left: '3.36rem'
},{
top: '2.48rem',
left: '4.3rem'
},{
top: '2.48rem',
left: '5.3rem'
},{
top: '2.48rem',
left: '6.28rem'
},{
top: '2.48rem',
left: '7.25rem'
},{
top: '2.48rem',
left: '8.36rem'
},{
top: '2.48rem',
left: '9.36rem'
},{
top: '5rem',
left: '2.36rem'
},{
top: '5rem',
left: '3.36rem'
},{
top: '5rem',
left: '4.3rem'
},{
top: '5rem',
left: '5.3rem'
},{
top: '5rem',
left: '6.28rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '8.36rem'
},{
top: '5rem',
left: '9.36rem'
},{
top: '3.8rem',
left: '9.5rem'
}],
'arr4': [{
top: '7.15rem',
left: '5.6rem'
},{
top: '0.8rem',
left: '5.6rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu5_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">五监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>25</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>22</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jianqu6.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.9rem',
left: '3.8rem'
},{
top: '2.6rem',
left: '7.25rem'
},{
top: '5rem',
left: '7.25rem'
},{
top: '5rem',
left: '9.2rem'
},{
top: '3.6rem',
left: '9.68rem'
},{
top: '2.55rem',
left: '11.08rem'
},{
top: '5.2rem',
left: '11.08rem'
}],
'arr2': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '0.8rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr3': [{
top: '0.75rem',
left: '5.5rem'
},{
top: '0.75rem',
left: '0.8rem'
},{
top: '0.75rem',
left: '10.38rem'
},{
top: '3.4rem',
left: '0.6rem'
},{
top: '3.6rem',
left: '1.34rem'
},{
top: '3.8rem',
left: '9.5rem'
},{
top: '7rem',
left: '10.4rem'
},{
top: '7rem',
left: '5.5rem'
},{
top: '7rem',
left: '0.8rem'
},{
top: '2.6rem',
left: '2.5rem'
},{
top: '2.6rem',
left: '3.7rem'
},{
top: '2.6rem',
left: '5.1rem'
},{
top: '2.6rem',
left: '6.5rem'
},{
top: '2.6rem',
left: '7.9rem'
},{
top: '2.6rem',
left: '9.2rem'
},{
top: '5rem',
left: '2.5rem'
},{
top: '5rem',
left: '3.7rem'
},{
top: '5rem',
left: '5.1rem'
},{
top: '5rem',
left: '6.5rem'
},{
top: '5rem',
left: '7.9rem'
},{
top: '5rem',
left: '9.2rem'
}],
'arr4': [{
top: '7.15rem',
left: '5.6rem'
},{
top: '3.6rem',
left: '9.3rem'
}],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jianqu6_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">六监区</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>8</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>21</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">操场</p>
<p class="monitor">监控点<span>2</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
lastdalou/jiaoyulou.html 0 → 100644
View file @ 9194a4c9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
/* .padding_box {
align-items: normal;
} */
</style>
<script type="text/javascript">
$(function () {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程 当前li添加类，其余兄弟移除类
$(this).addClass('current').siblings().removeClass('current');
// 2、拿到当前点击的索引号
var index = $(this).index();
// 3、下面index对应的模块显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
updateData(index + 1);
})
updateData(1);
});
function updateData(index) {
let dataList = {
'arr1': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.6rem',
left: '2.1rem'
},{
top: '2.5rem',
left: '3.95rem'
},{
top: '2.5rem',
left: '5.95rem'
},{
top: '4.9rem',
left: '3.95rem'
},{
top: '4.9rem',
left: '5.95rem'
},{
top: '2.6rem',
left: '7.8rem'
},{
top: '5rem',
left: '7.8rem'
},{
top: '5rem',
left: '9.2rem'
},{
top: '2.35rem',
left: '9.19rem'
},{
top: '3.5rem',
left: '9.68rem'
},{
top: '4rem',
left: '11.08rem'
}],
'arr2': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.6rem',
left: '2.1rem'
},{
top: '2.5rem',
left: '3.85rem'
},{
top: '2.5rem',
left: '5.15rem'
},{
top: '2.5rem',
left: '6.3rem'
},{
top: '2.5rem',
left: '7.8rem'
},{
top: '4.9rem',
left: '3.85rem'
},{
top: '4.9rem',
left: '6.3rem'
},{
top: '4.9rem',
left: '7.8rem'
},{
top: '4.9rem',
left: '9.2rem'
},{
top: '7rem',
left: '5.4rem'
}],
'arr3': [{
top: '3.5rem',
left: '0.58rem'
},{
top: '3.6rem',
left: '2.1rem'
},{
top: '2.5rem',
left: '3.85rem'
},{
top: '2.5rem',
left: '5.15rem'
},{
top: '2.5rem',
left: '6.3rem'
},{
top: '2.5rem',
left: '7.8rem'
},{
top: '4.9rem',
left: '3.76rem'
},{
top: '4.9rem',
left: '6.3rem'
},{
top: '4.9rem',
left: '7.8rem'
},{
top: '4.9rem',
left: '9.2rem'
},{
top: '7rem',
left: '5.4rem'
},{
top: '4.9rem',
left: '5.2rem'
},],
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jiaoyu_' + index +'.png" alt="">'
let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}
function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`);
}
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class=" padding_box2 clearfix">
<div class="menu_box">
<div class="menu_title_box">教育楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p class="tabName">一楼</p>
<p class="monitor">监控点<span>12</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二楼</p>
<p class="monitor">监控点<span>12</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三楼</p>
<p class="monitor">监控点<span>13</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
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