Skip to content

J
jianchayuan
Commit 200eae61 authored by zhangyudan's avatar zhangyudan
Browse files
Options

页面制作完成

parent 4504116c
Hide whitespace changes
Inline Side-by-side
Showing with 1828 additions and 505 deletions
hall/hall.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,36 +21,6 @@
background-size: cover;
}
</style>
<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">
<a class="flex-box" href="./hall.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '0.2rem',
......@@ -106,4 +77,31 @@
}
</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">
<a class="flex-box" href="./hall.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
healthCenter/firstFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.38rem',
left: '0.38rem'
}, {
top: '0.43rem',
left: '5.52rem'
}, {
top: '0.38rem',
left: '9.84rem'
}, {
top: '4.2rem',
left: '5.26rem'
}, {
top: '4.5rem',
left: '9.85rem'
}, {
top: '4.21rem',
left: '11.3rem'
}, {
top: '7.45rem',
left: '1.51rem'
}, {
top: '7.45rem',
left: '4.34rem'
}, {
top: '7.45rem',
left: '8.17rem'
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/wss_01.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
healthCenter/secondFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.43rem',
left: '5.52rem'
}, {
top: '2.4rem',
left: '10.95rem'
}, {
top: '4.15rem',
left: '6.32rem'
}, {
top: '7.45rem',
left: '2.92rem'
}, {
top: '7.45rem',
left: '8.68rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/wss_02.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
heartHealthyBuilding/firstFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '4.1rem',
left: '0.4rem'
}, {
top: '5.4rem',
left: '7.95rem'
}, {
top: '5rem',
left: '2.45rem'
}, {
top: '5.95rem',
left: '0.4rem'
}, {
top: '5.95rem',
left: '3.89rem'
}, {
top: '5.95rem',
left: '7.95rem'
}, {
top: '0.74rem',
left: '8.4rem'
}, {
top: '1.65rem',
left: '8.4rem'
}, {
top: '7.4rem',
left: '8.4rem'
}, {
top: '0.34rem',
left: '11.12rem'
}, {
top: '7.4rem',
left: '11.12rem'
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/xkl_01.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
heartHealthyBuilding/secondFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.36rem',
left: '0.49rem'
}, {
top: '2.52rem',
left: '0.49rem'
}, {
top: '5.27rem',
left: '0.49rem'
}, {
top: '7.4rem',
left: '0.49rem'
}, {
top: '3.3rem',
left: '3.15rem'
}, {
top: '4.2rem',
left: '3.15rem'
}, {
top: '0.36rem',
left: '7.95rem'
}, {
top: '4.6rem',
left: '3.62rem'
}, {
top: '0.73rem',
left: '8.5rem'
}, {
top: '1.57rem',
left: '10.5rem'
}, {
top: '2.95rem',
left: '8.4rem'
}, {
top: '3.4rem',
left: '8.4rem'
}, {
top: '4.6rem',
left: '10.5rem'
}, {
top: '5.27rem',
left: '3.16rem'
}, {
top: '5.27rem',
left: '8.24rem'
}, {
top: '5.9rem',
left: '1.11rem'
}, {
top: '7.4rem',
left: '4.44rem'
}, {
top: '7.4rem',
left: '4.89rem'
}, {
top: '7.4rem',
left: '8.38rem'
}, {
top: '0.36rem',
left: '11.13rem'
}, {
top: '7.4rem',
left: '11.13rem'
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/xkl_02.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
heartHealthyBuilding/thirdFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.36rem',
left: '0.49rem'
}, {
top: '2.52rem',
left: '0.49rem'
}, {
top: '5.27rem',
left: '0.49rem'
}, {
top: '7.4rem',
left: '0.49rem'
}, {
top: '3.3rem',
left: '1.15rem'
}, {
top: '4.65rem',
left: '8rem'
}, {
top: '0.73rem',
left: '8.5rem'
}, {
top: '1.57rem',
left: '10.5rem'
}, {
top: '4.65rem',
left: '8.38rem'
}, {
top: '7.4rem',
left: '5.79rem'
}, {
top: '7.4rem',
left: '6.27rem'
},
{
top: '4.2rem',
left: '3.15rem'
}, {
top: '0.36rem',
left: '11.13rem'
}, {
top: '7.4rem',
left: '11.13rem'
},
]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/xkl_03.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
jcqy/jcqy_cc.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,71 +21,6 @@
background-size: cover;
}
</style>
<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>
<a class="flex-box" href="./jcqy_nwq.html">
<p class="tabName">内围墙</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm1.html">
<p class="tabName">一大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm2.html">
<p class="tabName">二大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_common.html">
<p class="tabName">公共区域</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_playground.html">
<p class="tabName">操场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./jcqy_cc.html">
<p class="tabName">炊场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_operationRoom.html">
<p class="tabName">车间</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '0.33rem',
......@@ -207,4 +143,66 @@
}
</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>
<a class="flex-box" href="./jcqy_nwq.html">
<p class="tabName">内围墙</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm1.html">
<p class="tabName">一大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm2.html">
<p class="tabName">二大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_common.html">
<p class="tabName">公共区域</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_playground.html">
<p class="tabName">操场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./jcqy_cc.html">
<p class="tabName">炊场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_operationRoom.html">
<p class="tabName">车间</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
jcqy/jcqy_common.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,7 +21,58 @@
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '3.5rem',
left: '9.2rem'
}, {
top: '4.7rem',
left: '10.25rem'
}, {
top: '5.17rem',
left: '11.25rem'
}, {
top: '5.83rem',
left: '9.86rem'
}, {
top: '6.15rem',
left: '9.57rem'
}, {
top: '6.1rem',
left: '3.2rem'
}, {
top: '7.1rem',
left: '3.2rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_ggqy.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
<body>
<div class="content">
......@@ -83,59 +135,5 @@
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '3.5rem',
left: '9.2rem'
}, {
top: '4.7rem',
left: '10.25rem'
}, {
top: '5.17rem',
left: '11.25rem'
}, {
top: '5.83rem',
left: '9.86rem'
}, {
top: '6.15rem',
left: '9.57rem'
}, {
top: '6.1rem',
left: '3.2rem'
}, {
top: '7.1rem',
left: '3.2rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_ggqy.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
</html>
\ No newline at end of file
jcqy/jcqy_dm1.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,7 +21,46 @@
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '3.15rem',
left: '3.2rem'
}, {
top: '2.35rem',
left: '7.85rem'
}, {
top: '4rem',
left: '7.85rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_dm1.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
<body>
<div class="content">
......@@ -83,47 +123,5 @@
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '3.15rem',
left: '3.2rem'
}, {
top: '2.35rem',
left: '7.85rem'
}, {
top: '4rem',
left: '7.85rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_dm1.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
</html>
\ No newline at end of file
jcqy/jcqy_dm2.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -21,6 +22,58 @@
}
</style>
<script type="text/javascript">
var arr = [{
top: '1.69rem',
left: '7.2rem'
}, {
top: '2.48rem',
left: '7.65rem'
}, {
top: '2.8rem',
left: '6.7rem'
}, {
top: '3.9rem',
left: '3.15rem'
}, {
top: '3.9rem',
left: '7.65rem'
}, {
top: '5rem',
left: '6.3rem'
}, {
top: '5.3rem',
left: '7.65rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_dm2.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
<body>
<div class="content">
......@@ -83,59 +136,5 @@
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '1.69rem',
left: '7.2rem'
}, {
top: '2.48rem',
left: '7.65rem'
}, {
top: '2.8rem',
left: '6.7rem'
}, {
top: '3.9rem',
left: '3.15rem'
}, {
top: '3.9rem',
left: '7.65rem'
}, {
top: '5rem',
left: '6.3rem'
}, {
top: '5.3rem',
left: '7.65rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_dm2.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
</html>
\ No newline at end of file
jcqy/jcqy_nwq.html
View file @ 200eae61
......@@ -22,67 +22,7 @@
</style>
<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">
<a class="flex-box" href="./jcqy_nwq.html">
<p class="tabName">内围墙</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm1.html">
<p class="tabName">一大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm2.html">
<p class="tabName">二大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_common.html">
<p class="tabName">公共区域</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_playground.html">
<p class="tabName">操场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_cc.html">
<p class="tabName">炊场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_operationRoom.html">
<p class="tabName">车间</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
......@@ -204,4 +144,66 @@
}
</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">
<a class="flex-box" href="./jcqy_nwq.html">
<p class="tabName">内围墙</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm1.html">
<p class="tabName">一大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_dm2.html">
<p class="tabName">二大门</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_common.html">
<p class="tabName">公共区域</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_playground.html">
<p class="tabName">操场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_cc.html">
<p class="tabName">炊场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./jcqy_operationRoom.html">
<p class="tabName">车间</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
jcqy/jcqy_operationRoom.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,7 +21,64 @@
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '1.53rem',
left: '2.12rem'
}, {
top: '2.3rem',
left: '4.13rem'
}, {
top: '2.3rem',
left: '7.45rem'
}, {
top: '3.89rem',
left: '2.05rem'
}, {
top: '3.89rem',
left: '9.95rem'
}, {
top: '4.9rem',
left: '0.9rem'
}, {
top: '5.4rem',
left: '4.13rem'
}, {
top: '5.4rem',
left: '7.45rem'
}, {
top: '5.94rem',
left: '9.95rem'
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_cj.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
<body>
<div class="content">
......@@ -83,65 +141,5 @@
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '1.53rem',
left: '2.12rem'
}, {
top: '2.3rem',
left: '4.13rem'
}, {
top: '2.3rem',
left: '7.45rem'
}, {
top: '3.89rem',
left: '2.05rem'
}, {
top: '3.89rem',
left: '9.95rem'
}, {
top: '4.9rem',
left: '0.9rem'
}, {
top: '5.4rem',
left: '4.13rem'
}, {
top: '5.4rem',
left: '7.45rem'
}, {
top: '5.94rem',
left: '9.95rem'
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_cj.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
</html>
\ No newline at end of file
jcqy/jcqy_playground.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,7 +21,43 @@
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.25rem',
left: '0.25rem'
}, {
top: '7.4rem',
left: '11.1rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_playground.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
<body>
<div class="content">
......@@ -83,44 +120,7 @@
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '0.25rem',
left: '0.25rem'
}, {
top: '7.4rem',
left: '11.1rem'
}]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/jcqy_playground.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</script>
</html>
\ No newline at end of file
southMonitor/firstFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.58rem',
left: '0.38rem'
}, {
top: '1.48rem',
left: '0.38rem'
}, {
top: '2.46rem',
left: '0.38rem'
}, {
top: '3.4rem',
left: '0.38rem'
}, {
top: '4.39rem',
left: '0.38rem'
}, {
top: '5.33rem',
left: '0.38rem'
}, {
top: '6.25rem',
left: '0.38rem'
}, {
top: '7.2rem',
left: '0.38rem'
}, {
top: '0.4rem',
left: '3.4rem'
}, {
top: '7.32rem',
left: '3.4rem'
}, {
top: '0.38rem',
left: '4.3rem'
}, {
top: '0.38rem',
left: '5.26rem'
}, {
top: '0.38rem',
left: '6.23rem',
}, {
top: '0.38rem',
left: '7.2rem',
}, {
top: '0.38rem',
left: '8.18rem',
}, {
top: '0.38rem',
left: '9.16rem',
}, {
top: '0.38rem',
left: '10.12rem',
}, {
top: '0.38rem',
left: '11.09rem',
}, {
top: '3.35rem',
left: '11.3rem',
}, {
top: '3.9rem',
left: '6.15rem',
}, {
top: '6.15rem',
left: '4.05rem',
}, {
top: '7rem',
left: '4.03rem',
}, {
top: '5.1rem',
left: '6.53rem',
}, {
top: '5.48rem',
left: '7.85rem',
}, {
top: '6.65rem',
left: '6.53rem',
}, {
top: '6.65rem',
left: '8.35rem',
}, {
top: '6.65rem',
left: '8.94rem',
}, {
top: '6.65rem',
left: '11.45rem',
}, {
top: '7.25rem',
left: '9.43rem',
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nj_01.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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">
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
southMonitor/secondFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.58rem',
left: '0.38rem'
}, {
top: '1.48rem',
left: '0.38rem'
}, {
top: '2.46rem',
left: '0.38rem'
}, {
top: '3.4rem',
left: '0.38rem'
}, {
top: '4.39rem',
left: '0.38rem'
}, {
top: '5.33rem',
left: '0.38rem'
}, {
top: '6.25rem',
left: '0.38rem'
}, {
top: '7.2rem',
left: '0.38rem'
}, {
top: '0.4rem',
left: '3.4rem'
}, {
top: '7.32rem',
left: '3.4rem'
}, {
top: '0.38rem',
left: '4.3rem'
}, {
top: '0.38rem',
left: '5.26rem'
}, {
top: '0.38rem',
left: '6.23rem',
}, {
top: '0.38rem',
left: '7.2rem',
}, {
top: '0.38rem',
left: '8.18rem',
}, {
top: '0.38rem',
left: '9.16rem',
}, {
top: '0.38rem',
left: '10.12rem',
}, {
top: '3.35rem',
left: '11.3rem',
}, {
top: '3.9rem',
left: '6.15rem',
}, {
top: '6.15rem',
left: '4.05rem',
}, {
top: '7rem',
left: '4.03rem',
}, {
top: '3.9rem',
left: '6.52rem',
}, {
top: '3.9rem',
left: '7.85rem',
}, {
top: '6.15rem',
left: '6.52rem',
}, {
top: '6.15rem',
left: '7.85rem',
}, {
top: '6.65rem',
left: '6.53rem',
}, {
top: '7.35rem',
left: '6.53rem',
}, {
top: '5.37rem',
left: '11.38rem',
}, {
top: '5.85rem',
left: '11.38rem',
}, {
top: '7.45rem',
left: '9.43rem',
}, ]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nj_02.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
southMonitor/thirdFloor.html 0 → 100644
View file @ 200eae61
<!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') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.58rem',
left: '0.38rem'
}, {
top: '1.48rem',
left: '0.38rem'
}, {
top: '2.46rem',
left: '0.38rem'
}, {
top: '3.4rem',
left: '0.38rem'
}, {
top: '4.39rem',
left: '0.38rem'
}, {
top: '5.33rem',
left: '0.38rem'
}, {
top: '6.25rem',
left: '0.38rem'
}, {
top: '7.2rem',
left: '0.38rem'
}, {
top: '0.4rem',
left: '3.4rem'
}, {
top: '7.32rem',
left: '3.4rem'
}, {
top: '0.38rem',
left: '4.3rem'
}, {
top: '0.38rem',
left: '5.26rem'
}, {
top: '0.38rem',
left: '6.23rem',
}, {
top: '0.38rem',
left: '7.2rem',
}, {
top: '0.38rem',
left: '8.18rem',
}, {
top: '0.38rem',
left: '9.16rem',
}, {
top: '0.38rem',
left: '10.12rem',
}, {
top: '0.38rem',
left: '11.09rem',
}, {
top: '3.35rem',
left: '11.3rem',
},
/* {
top: '3.9rem',
left: '6.15rem',
}, */
{
top: '6.15rem',
left: '4.05rem',
}, {
top: '7rem',
left: '4.03rem',
},
/* {
top: '3.9rem',
left: '6.52rem',
}, */
{
top: '3.9rem',
left: '7.85rem',
},
/* , {
top: '6.15rem',
left: '6.52rem',
}, {
top: '6.15rem',
left: '7.85rem',
}, */
{
top: '6.65rem',
left: '6.53rem',
}, {
top: '7.35rem',
left: '6.53rem',
}, {
top: '5.37rem',
left: '11.38rem',
}, {
top: '5.85rem',
left: '11.38rem',
}, {
top: '7.45rem',
left: '9.43rem',
},
]
$(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();
})
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/nj_03.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./thirdFloor.html">
<p class="tabName">三楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
southOpRoom/firstFloor.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,42 +21,6 @@
background-size: cover;
}
</style>
<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">
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '0.46rem',
......@@ -244,4 +209,37 @@
}
</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">
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
southOpRoom/secondFloor.html
View file @ 200eae61
......@@ -8,7 +8,8 @@
<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">
......@@ -20,68 +21,152 @@
background-size: cover;
}
</style>
<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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<script type="text/javascript">
var arr = [{
top: '0.2rem',
left: '3.2rem'
top: '0.3rem',
left: '0.45rem'
}, {
top: '0.33rem',
left: '10.4rem'
top: '0.3rem',
left: '3.18rem'
}, {
top: '0.78rem',
left: '0.3rem'
top: '2.3rem',
left: '0.45rem'
}, {
top: '4.39rem',
left: '0.3rem'
top: '2.3rem',
left: '1.85rem'
}, {
top: '5.35rem',
left: '0.3rem'
top: '2.3rem',
left: '3.15rem'
}, {
top: '3.78rem',
left: '0.45rem'
}, {
top: '3.78rem',
left: '3.18rem'
}, {
top: '5.25rem',
left: '0.45rem'
}, {
top: '6.68rem',
top: '5.25rem',
left: '1.85rem'
}, {
top: '5.25rem',
left: '3.15rem'
}, {
top: '6.68rem',
left: '10.4rem'
top: '6.7rem',
left: '0.45rem'
}, {
top: '6.7rem',
left: '3.18rem'
}, {
top: '1.16rem',
left: '3.62rem'
}, {
top: '1.55rem',
left: '3.62rem'
}, {
top: '1.55rem',
left: '5rem'
}, {
top: '3.95rem',
left: '4.3rem'
}, {
top: '5.65rem',
left: '3.62rem'
}, {
top: '5.65rem',
left: '5rem'
}, {
top: '6.05rem',
left: '3.62rem'
}, {
top: '6.65rem',
left: '5rem'
}, {
top: '7.3rem',
left: '3.08rem'
}, {
top: '7.3rem',
left: '5.82rem'
}, {
top: '7.3rem',
left: '9.18rem'
}, {
top: '0.54rem',
left: '11.13rem'
}, {
top: '2.65rem',
left: '11.13rem'
}, {
top: '6.73rem',
left: '11.13rem'
}, {
top: '4.37rem',
left: '11.15rem'
}]
top: '0.3rem',
left: '6.7rem'
}, {
top: '1.16rem',
left: '8rem'
}, {
top: '2.44rem',
left: '8rem'
}, {
top: '2.83rem',
left: '6.7rem'
}, {
top: '2.83rem',
left: '8rem'
}, {
top: '3.95rem',
left: '7.33rem'
}, {
top: '5.65rem',
left: '6.7rem'
}, {
top: '5.65rem',
left: '8rem'
}, {
top: '6.05rem',
left: '8rem'
}, {
top: '6.7rem',
left: '6.7rem'
}, {
top: '1.05rem',
left: '8.38rem'
}, {
top: '1.05rem',
left: '10.53rem'
}, {
top: '2.83rem',
left: '8.38rem'
}, {
top: '2.83rem',
left: '10.53rem'
}, {
top: '3.48rem',
left: '9.45rem'
}, {
top: '4.12rem',
left: '8.38rem'
}, {
top: '4.12rem',
left: '10.53rem'
}, {
top: '4.8rem',
left: '9.45rem'
}, {
top: '5.42rem',
left: '8.38rem'
}, {
top: '5.42rem',
left: '10.53rem'
}, {
top: '6.7rem',
left: '8.38rem'
}, {
top: '6.7rem',
left: '10.53rem'
}, ]
$(function() {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function() {
......@@ -96,7 +181,7 @@
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/south_01.jpg" alt="">'
let htmlTxt = '<img class="bg_img" src="../static/images/south_02.jpg" alt="">'
for (let i = 0; i < arr.length; i++) {
console.log(divElement)
htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
......@@ -112,4 +197,37 @@
}
</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>
<a class="flex-box" href="./firstFloor.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./secondFloor.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</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