Skip to content

J
jianchayuan
Commit f68fb1ad authored by zhangpux's avatar zhangpux
Browse files
Options

页面制作

parent 8ac49da4
Hide whitespace changes
Inline Side-by-side
Showing with 398 additions and 0 deletions
wgs/beijian.html
View file @ f68fb1ad
......@@ -18,6 +18,9 @@
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(function () {
......
wgs/canteen.html 0 → 100644
View file @ f68fb1ad
<!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;
}
.padding_box {
padding: 0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.5rem',
left: '2.3rem'
}, {
top: '0.5rem',
left: '10rem',
}, {
top: '1.7rem',
left: '0.1rem',
}, {
top: '1.7rem',
left: '3.1rem',
}, {
top: '1.7rem',
left: '10rem',
}, {
top: '2.7rem',
left: '0.1rem',
}, {
top: '2.7rem',
left: '3.1rem',
}, {
top: '2.7rem',
left: '10rem',
}, {
top: '3.7rem',
left: '0.1rem',
}, {
top: '3.7rem',
left: '3.1rem',
}, {
top: '3.7rem',
left: '10rem',
}, {
top: '4.55rem',
left: '0.1rem',
}, {
top: '4.55rem',
left: '3.1rem',
}, {
top: '4.55rem',
left: '6.6rem',
}, {
top: '4.55rem',
left: '9.45rem',
}, {
top: '6.45rem',
left: '0.1rem',
}, {
top: '6.45rem',
left: '3.1rem',
}, {
top: '6.45rem',
left: '6.6rem',
}, {
top: '6.45rem',
left: '9.45rem',
}, {
top: '5.5rem',
left: '0.1rem',
}, {
top: '5.5rem',
left: '2.1rem',
}, {
top: '5.5rem',
left: '4.1rem',
}, {
top: '5.5rem',
left: '6.6rem',
}, {
top: '5.5rem',
left: '9.45rem',
}, {
top: '7.4rem',
left: '0.1rem',
}, {
top: '7.4rem',
left: '3.1rem',
}, {
top: '7.4rem',
left: '6.6rem',
}, {
top: '7.40rem',
left: '9.45rem',
}, {
top: '4rem',
left: '5.85rem',
}, {
top: '7.6rem',
left: '6.1rem',
}]
$(function () {
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/canteen.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 handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>30</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
View file @ f68fb1ad
......@@ -18,6 +18,9 @@
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(function () {
......
wgs/meeting.html 0 → 100644
View file @ f68fb1ad
<!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;
}
.padding_box {
padding: 0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '0.3rem',
left: '2.5rem'
}, {
top: '0.32rem',
left: '8.1rem',
}, {
top: '2rem',
left: '1.2rem',
}, {
top: '2rem',
left: '3.5rem',
}, {
top: '2rem',
left: '5.75rem',
}, {
top: '2rem',
left: '8rem',
}, {
top: '2rem',
left: '10.5rem',
}, {
top: '4.5rem',
left: '1.2rem',
}, {
top: '4.5rem',
left: '3.5rem',
}, {
top: '4.5rem',
left: '5.75rem',
}, {
top: '4.5rem',
left: '8rem',
}, {
top: '4.5rem',
left: '10.5rem',
}, {
top: '7.2rem',
left: '1rem',
}, {
top: '7.2rem',
left: '2.9rem',
}, {
top: '7.2rem',
left: '4.8rem',
}, {
top: '7.2rem',
left: '6.7rem',
}, {
top: '7.2rem',
left: '8.9rem',
}, {
top: '7.2rem',
left: '10.8rem',
}, {
top: '7.6rem',
left: '6.2rem',
}]
$(function () {
//循环数组 打摄像头位置
var divElement = document.querySelector('.room_box');
console.log(divElement)
let htmlTxt = '<img class="bg_img" src="../static/images/meeting.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 handleClick(areaNumber) {
alert("点击了区域 " + arr[areaNumber].top);
}
</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>19</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/playground.html 0 → 100644
View file @ f68fb1ad
<!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;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
var arr = [{
top: '1rem',
left: '1.6rem'
}, {
top: '1rem',
left: '10.46rem',
}]
$(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/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">
<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>
</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
View file @ f68fb1ad
......@@ -18,6 +18,9 @@
min-height: 100vh;
background-size: cover;
}
.padding_box {
padding:0.12rem 1rem 0;
}
</style>
<script type="text/javascript">
$(function () {
......
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