Skip to content

J
jianchayuan
Commit 009eea58 authored by daisy's avatar daisy
Browse files
Options

Merge branch 'master' into 'master'

页面制作 See merge request !7
parents e9948bd3 424a1552
Hide whitespace changes
Inline Side-by-side
Showing with 1211 additions and 145 deletions
wgs/beijian.html 0 → 100644
View file @ 009eea58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<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" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
</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);
//循环数组 打摄像头位置
// var arr = [{
// top: '1.0rem',
// left: '2.25rem'
// }, {
// top: '1rem',
// left: '6rem'
// }, {
// top: '2.3rem',
// left: '0.4rem'
// }, {
// top: '2.3rem',
// left: '1.7rem'
// }, {
// top: '2.3rem',
// left: '3rem'
// }, {
// top: '2.3rem',
// left: '4.25rem'
// }, {
// top: '2.3rem',
// left: '5.5rem'
// }, {
// top: '2.3rem',
// left: '6.8rem'
// }, {
// top: '2.3rem',
// left: '8.05rem'
// }, {
// top: '3.8rem',
// left: '0.2rem'
// }, {
// top: '4rem',
// left: '1.3rem'
// }, {
// top: '3.8rem',
// left: '6.6rem'
// }, {
// top: '4.6rem',
// left: '6.6rem'
// }, {
// top: '5.9rem',
// left: '2.2rem'
// }, {
// top: '5.9rem',
// left: '6.0rem'
// }, {
// top: '7.2rem',
// left: '0.4rem'
// }, {
// top: '7.2rem',
// left: '1.7rem'
// }, {
// top: '7.2rem',
// left: '3rem'
// }, {
// top: '7.2rem',
// left: '4.3rem'
// }, {
// top: '7.2rem',
// left: '5.5rem'
// }, {
// top: '7.2rem',
// left: '6.8rem'
// }, {
// top: '7.2rem',
// left: '8.1rem'
// }, {
// top: '8.2rem',
// left: '1.9rem'
// }, {
// top: "2.1rem",
// left: "10.8rem"
// }, {
// top: "2.95rem",
// left: "10.4rem"
// }, {
// top: "3.95rem",
// left: "10.4rem"
// }, {
// top: "3.95rem",
// left: "11.4rem"
// }, {
// top: "8.0rem",
// left: "10.8rem"
// }]
// var divElement = document.querySelector('.room_box');
// console.log(divElement)
// let htmlTxt = '<img class="bg_img" src="../static/images/beijian1.png" 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 updateData(index) {
let dataList = {
'arr1': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '3.8rem',
left: '0.2rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: '8.2rem',
left: '1.9rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}],
'arr2': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "0.1rem",
left: "11.2rem"
}, {
top: "0.1rem",
left: "11.2rem"
}, {
top: "1.4rem",
left: "10.0rem"
}, {
top: "1.4rem",
left: "10.8rem"
}, {
top: "1.4rem",
left: "11.5rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "5.7rem",
left: "10.0rem"
}, {
top: "5.7rem",
left: "10.8rem"
}, {
top: "5.7rem",
left: "11.5rem"
}, {
top: "8.25rem",
left: "10.8rem"
}],
'arr3': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}],
'arr4': [{
top: '1.0rem',
left: '2.25rem'
}, {
top: '1rem',
left: '6rem'
}, {
top: '2.3rem',
left: '0.4rem'
}, {
top: '2.3rem',
left: '1.7rem'
}, {
top: '2.3rem',
left: '3rem'
}, {
top: '2.3rem',
left: '4.25rem'
}, {
top: '2.3rem',
left: '5.5rem'
}, {
top: '2.3rem',
left: '6.8rem'
}, {
top: '2.3rem',
left: '8.05rem'
}, {
top: '4rem',
left: '0.2rem'
}, {
top: '4rem',
left: '1.3rem'
}, {
top: '3.8rem',
left: '6.6rem'
}, {
top: '4.6rem',
left: '6.6rem'
}, {
top: '5.9rem',
left: '2.2rem'
}, {
top: '5.9rem',
left: '6.0rem'
}, {
top: '7.2rem',
left: '0.4rem'
}, {
top: '7.2rem',
left: '1.7rem'
}, {
top: '7.2rem',
left: '3rem'
}, {
top: '7.2rem',
left: '4.3rem'
}, {
top: '7.2rem',
left: '5.5rem'
}, {
top: '7.2rem',
left: '6.8rem'
}, {
top: '7.2rem',
left: '8.1rem'
}, {
top: "2.1rem",
left: "10.8rem"
}, {
top: "2.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "10.4rem"
}, {
top: "3.95rem",
left: "11.4rem"
}, {
top: "8.0rem",
left: "10.8rem"
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/beijian' + 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="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">北监</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>三楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>四楼</p>
<p class="monitor">监控点<span>28</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
wgs/jiaoyu.html 0 → 100644
View file @ 009eea58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<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" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
</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.9rem',
left: '0.1rem'
}, {
top: '6.35rem',
left: '0.1rem'
}, {
top: '5.5rem',
left: '0.5rem'
},
{
top: '0.1rem',
left: '3.95rem'
}, {
top: '0.1rem',
left: '6.35rem'
}, {
top: '0.1rem',
left: '9.1rem'
}, {
top: '0.75rem',
left: '2rem'
}, {
top: '0.75rem',
left: '4.2rem'
}, {
top: '0.75rem',
left: '6.25rem'
}, {
top: '0.75rem',
left: '9rem'
}, {
top: '2.2rem',
left: '1.6rem'
}, {
top: '2.2rem',
left: '2.3rem'
}, {
top: '2.2rem',
left: '3.0rem'
}, {
top: '2.2rem',
left: '3.7rem'
}, {
top: '2.2rem',
left: '4.4rem'
}, {
top: '2.2rem',
left: '5.1rem'
}, {
top: '2.2rem',
left: '6.75rem'
}, {
top: '2.2rem',
left: '7.6rem'
}, {
top: '2.2rem',
left: '8.45rem'
}, {
top: '2.2rem',
left: '9.3rem'
}, {
top: '2.2rem',
left: '10.1rem'
}, {
top: '3.8rem',
left: '4.3rem'
}, {
top: '3.65rem',
left: '5.9rem'
}, {
top: "3.8rem",
left: "9.6rem"
}, {
top: "5.1rem",
left: "4.1rem"
}, {
top: "5.1rem",
left: "6.7rem"
}, {
top: "5.1rem",
left: "9.6rem"
}, {
top: "5.6rem",
left: "11.3rem"
}, {
top: "6.4rem",
left: "4.1rem"
}, {
top: "6.4rem",
left: "6.7rem"
}, {
top: "6.4rem",
left: "9.6rem"
}, {
top: "7.3rem",
left: "5.4rem"
}, {
top: "7.8rem",
left: "2.8rem"
}, {
top: "7.8rem",
left: "7.7rem"
}, {
top: "8.3rem",
left: "2.9rem"
}, {
top: "8.2rem",
left: "5.5rem"
}, {
top: "8.2rem",
left: "7.75rem"
}],
'arr2': [{
top: '0.6rem',
left: '0.5rem'
}, {
top: '0.6rem',
left: '4.3rem'
}, {
top: '0.6rem',
left: '10rem'
},
{
top: '0.6rem',
left: '11.2rem'
}, {
top: '2.8rem',
left: '0.5rem'
}, {
top: '2.4rem',
left: '5.9rem'
}, {
top: '2rem',
left: '11.2rem'
}, {
top: '7.7rem',
left: '0.5rem'
}, {
top: '7.7rem',
left: '1.85rem'
}, {
top: '7.8rem',
left: '5.1rem'
}, {
top: '7.7rem',
left: '11.2rem'
}],
'arr3': [{
top: '0.6rem',
left: '0.5rem'
}, {
top: '0.6rem',
left: '2.7rem'
}, {
top: '0.6rem',
left: '5.9rem'
}, {
top: '0.6rem',
left: '8.5rem'
}, {
top: '0.6rem',
left: '10rem'
},
{
top: '0.6rem',
left: '11.2rem'
}, {
top: '2rem',
left: '0.5rem'
}, {
top: '3.8rem',
left: '0.5rem'
}, {
top: '2.3rem',
left: '1.8rem'
}, {
top: '3.5rem',
left: '1.8rem'
}, {
top: '4.8rem',
left: '1.8rem'
}, {
top: '6.2rem',
left: '1.8rem'
}, {
top: '2.3rem',
left: '10rem'
}, {
top: '3.5rem',
left: '10rem'
}, {
top: '4.8rem',
left: '10rem'
}, {
top: '6.2rem',
left: '10rem'
}, {
top: '3.8rem',
left: '11.2rem'
}, {
top: '2.4rem',
left: '5.2rem'
}, {
top: '2.4rem',
left: '5.9rem'
}, {
top: '2.4rem',
left: '6.6rem'
}, {
top: '2rem',
left: '11.2rem'
}, {
top: '7.7rem',
left: '0.5rem'
}, {
top: '7.7rem',
left: '1.85rem'
}, {
top: '7.7rem',
left: '3.3rem'
}, {
top: '7.7rem',
left: '6rem'
}, {
top: '7.7rem',
left: '8.7rem'
}, {
top: '7.7rem',
left: '10rem'
}, {
top: '7.7rem',
left: '11.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="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">教育楼</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>三楼</p>
<p class="monitor">监控点<span>28</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
wgs/workshop.html 0 → 100644
View file @ 009eea58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></script>
<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" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('../static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-size: cover;
}
</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);
//循环数组 打摄像头位置
// var arr = [{
// top: '1.7rem',
// left: '0.15rem'
// }, {
// top: '1.2rem',
// left: '1rem'
// }, {
// top: '2.5rem',
// left: '1rem'
// }, {
// top: '3.8rem',
// left: '1rem'
// }, {
// top: '5rem',
// left: '1rem'
// }, {
// top: '6.3rem',
// left: '1rem'
// }, {
// top: '7.6rem',
// left: '1rem'
// }, {
// top: '1.2rem',
// left: '4.8rem'
// }, {
// top: '1rem',
// left: '5.6rem'
// }, {
// top: '1rem',
// left: '6.9rem'
// }, {
// top: '1rem',
// left: '10.3rem'
// }, {
// top: '1rem',
// left: '11.5rem'
// }, {
// top: '4.1rem',
// left: '3.5rem'
// }, {
// top: '4.1rem',
// left: '5rem'
// }, {
// top: '4.1rem',
// left: '6.45rem'
// }, {
// top: '4.1rem',
// left: '7.9rem'
// }, {
// top: '4.1rem',
// left: '9.5rem'
// }, {
// top: '4.1rem',
// left: '10.95rem'
// }, {
// top: '6rem',
// left: '3.5rem'
// }, {
// top: '6rem',
// left: '5rem'
// }, {
// top: '6rem',
// left: '6.45rem'
// }, {
// top: '6rem',
// left: '7.9rem'
// }, {
// top: "6rem",
// left: "9.5rem"
// }, {
// top: "6rem",
// left: "10.95rem"
// }, {
// top: "8rem",
// left: "5rem"
// }, {
// top: "8rem",
// left: "6.45rem"
// }, {
// top: "8rem",
// left: "7.9rem"
// }, {
// top: "8rem",
// left: "9.5rem"
// }]
// var divElement = document.querySelector('.room_box');
// console.log(divElement)
// let htmlTxt = '<img class="bg_img" src="../static/images/north_workshop_1nd_floor.png" 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 updateData(index) {
let dataList = {
'arr1': [{
top: '1.7rem',
left: '0.15rem'
}, {
top: '1.2rem',
left: '1rem'
}, {
top: '2.5rem',
left: '1rem'
}, {
top: '3.8rem',
left: '1rem'
}, {
top: '5rem',
left: '1rem'
}, {
top: '6.3rem',
left: '1rem'
}, {
top: '7.6rem',
left: '1rem'
}, {
top: '1.2rem',
left: '4.8rem'
}, {
top: '1rem',
left: '5.6rem'
}, {
top: '1rem',
left: '6.9rem'
}, {
top: '1rem',
left: '10.3rem'
}, {
top: '1rem',
left: '11.5rem'
}, {
top: '4.1rem',
left: '3.5rem'
}, {
top: '4.1rem',
left: '5rem'
}, {
top: '4.1rem',
left: '6.45rem'
}, {
top: '4.1rem',
left: '7.9rem'
}, {
top: '4.1rem',
left: '9.5rem'
}, {
top: '4.1rem',
left: '10.95rem'
}, {
top: '6rem',
left: '3.5rem'
}, {
top: '6rem',
left: '5rem'
}, {
top: '6rem',
left: '6.45rem'
}, {
top: '6rem',
left: '7.9rem'
}, {
top: "6rem",
left: "9.5rem"
}, {
top: "6rem",
left: "10.95rem"
}, {
top: "8rem",
left: "5rem"
}, {
top: "8rem",
left: "6.45rem"
}, {
top: "8rem",
left: "7.9rem"
}, {
top: "8rem",
left: "9.5rem"
}],
'arr2': [{
top: '1.4rem',
left: '0.15rem'
}, {
top: '2.3rem',
left: '1.4rem'
}, {
top: '2.3rem',
left: '3.4rem'
}, {
top: '4.3rem',
left: '1.4rem'
}, {
top: '4.3rem',
left: '3.4rem'
}, {
top: '8.2rem',
left: '1.4rem'
}, {
top: '8.2rem',
left: '3.4rem'
}, {
top: '6.3rem',
left: '1.4rem'
}, {
top: '6.3rem',
left: '3.4rem'
}, {
top: '3.3rem',
left: '5.3rem'
}, {
top: '5.0rem',
left: '6.6rem'
}, {
top: '5.0rem',
left: '5.3rem'
}, {
top: '3.3rem',
left: '6.6rem'
}, {
top: '2.3rem',
left: '8.5rem'
}, {
top: '2.3rem',
left: '10.5rem'
}, {
top: '4.3rem',
left: '8.5rem'
}, {
top: '4.3rem',
left: '10.5rem'
}, {
top: '6.3rem',
left: '8.5rem'
}, {
top: '6.3rem',
left: '10.5rem'
}, {
top: '8.2rem',
left: '8.5rem'
}, {
top: '8.2rem',
left: '10.5rem'
}, {
top: "7rem",
left: "11.65rem"
}]
};
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/workshop' + 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="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">北车间</div>
<div class="tab_list">
<ul>
<li>
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li class="current">
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</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
workshop.html deleted 100644 → 0
View file @ e9948bd3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="static/js/rem.js"></script>
<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" />
<title>上海市人民检察院</title>
</head>
<style type="text/css">
.content {
background: url('static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
/* background-position-x: center; */
background-size: cover;
}
</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();
})
//循环数组 打摄像头位置
var arr = [{
top: '1.4rem',
left: '0.15rem'
}, {
top: '2.3rem',
left: '1.4rem'
}, {
top: '2.3rem',
left: '3.4rem'
}, {
top: '4.3rem',
left: '1.4rem'
}, {
top: '4.3rem',
left: '3.4rem'
}, {
top: '8.2rem',
left: '1.4rem'
}, {
top: '8.2rem',
left: '3.4rem'
}, {
top: '6.3rem',
left: '1.4rem'
}, {
top: '6.3rem',
left: '3.4rem'
}, {
top: '3.3rem',
left: '5.3rem'
}, {
top: '5.0rem',
left: '6.6rem'
}, {
top: '5.0rem',
left: '5.3rem'
}, {
top: '3.3rem',
left: '6.6rem'
}, {
top: '2.3rem',
left: '8.5rem'
}, {
top: '2.3rem',
left: '10.5rem'
}, {
top: '4.3rem',
left: '8.5rem'
}, {
top: '4.3rem',
left: '10.5rem'
}, {
top: '6.3rem',
left: '8.5rem'
}, {
top: '6.3rem',
left: '10.5rem'
}, {
top: '8.2rem',
left: '8.5rem'
}, {
top: '8.2rem',
left: '10.5rem'
}]
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="./static/images/north_workshop_2nd_floor.png" 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()"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
</script>
<body>
<div class="content">
<div class="content_top"></div>
<div class="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">北车间</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</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