Commit 1be10e7b authored by zhangpux's avatar zhangpux

页面制作

parent 33046301
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script> <script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></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/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop1.css" /> <link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" /> <link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title> <title>上海市人民检察院</title>
</head> </head>
<style type="text/css"> <style type="text/css">
...@@ -498,26 +498,26 @@ ...@@ -498,26 +498,26 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div>
<div class="flex-box padding_box"> <div class="padding_box2 clearfix">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">北监</div> <div class="menu_title_box">北监</div>
<div class="tab_list"> <div class="tab_list">
<ul> <ul>
<li class="current"> <li class="current">
<div class="flex-box"> <div class="flex-box">
<p>一楼</p> <p class="tabName">一楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
<li> <li>
<div class="flex-box"> <div class="flex-box">
<p>二楼</p> <p class="tabName">二楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
<li> <li>
<div class="flex-box"> <div class="flex-box">
<p>三楼</p> <p class="tabName">三楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
......
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div>
<div class="flex-box padding_box"> <div class="padding_box2 clearfix">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">炊场</div> <div class="menu_title_box">炊场</div>
<div class="tab_list"> <div class="tab_list">
......
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script> <script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></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/common.css" />
<link rel="stylesheet" type="text/css" href="../static/css/workshop1.css" /> <link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" /> <link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
<title>上海市人民检察院</title> <title>上海市人民检察院</title>
</head> </head>
<style type="text/css"> <style type="text/css">
...@@ -292,26 +292,26 @@ ...@@ -292,26 +292,26 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div>
<div class="flex-box padding_box"> <div class="padding_box2 clearfix">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">教育楼</div> <div class="menu_title_box">教育楼</div>
<div class="tab_list"> <div class="tab_list">
<ul> <ul>
<li class="current"> <li class="current">
<div class="flex-box"> <div class="flex-box">
<p>一楼</p> <p class="tabName">一楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
<li> <li>
<div class="flex-box"> <div class="flex-box">
<p>二楼</p> <p class="tabName">二楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
<li> <li>
<div class="flex-box"> <div class="flex-box">
<p>三楼</p> <p class="tabName">三楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
......
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div>
<div class="flex-box padding_box"> <div class="padding_box2 clearfix">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">老会见楼</div> <div class="menu_title_box">老会见楼</div>
<div class="tab_list"> <div class="tab_list">
......
...@@ -62,8 +62,7 @@ ...@@ -62,8 +62,7 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div><div class=" padding_box2 clearfix">
<div class="flex-box padding_box">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">操场</div> <div class="menu_title_box">操场</div>
<div class="tab_list"> <div class="tab_list">
......
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="../static/js/rem.js"></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/workshop1.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea1.css" />
<title>上海市人民检察院</title> <title>上海市人民检察院</title>
</head> </head>
<style type="text/css"> <style type="text/css">
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
min-height: 100vh; min-height: 100vh;
background-size: cover; background-size: cover;
} }
.padding_box { /* .padding_box {
align-items: normal; align-items: normal;
} } */
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(function () { $(function () {
...@@ -35,137 +35,41 @@ ...@@ -35,137 +35,41 @@
updateData(index + 1); updateData(index + 1);
}) })
updateData(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) { function updateData(index) {
let dataList = { let dataList = {
'arr1': [{ 'arr1': [{
top: '1.7rem', top: '20%',
left: '0.15rem' left: '1.5%'
}, { }, {
top: '1.2rem', top: '13%',
left: '1rem' left: '9%'
}, { }, {
top: '2.5rem', top: '28%',
left: '1rem' left: '9%'
}, { }, {
top: '3.8rem', top: '3.8rem',
left: '1rem' left: '9%'
}, { }, {
top: '5rem', top: '43%',
left: '1rem' left: '9%'
}, { }, {
top: '6.3rem', top: '6.3rem',
left: '1rem' left: '9%'
}, { }, {
top: '7.6rem', top: '7.6rem',
left: '1rem' left: '9%'
}, { }, {
top: '1.2rem', top: '1.2rem',
left: '4.8rem' left: '4.8rem'
}, { }, {
top: '1rem', top: '9%',
left: '5.6rem' left: '5.6rem'
}, { }, {
top: '1rem', top: '9%',
left: '6.9rem' left: '6.9rem'
}, { }, {
top: '1rem', top: '9%',
left: '10.3rem' left: '10.3rem'
}, { }, {
top: '1rem', top: '1rem',
...@@ -307,18 +211,18 @@ ...@@ -307,18 +211,18 @@
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="content_top"></div>
<div class="flex-box padding_box"> <div class=" padding_box2 clearfix">
<div class="menu_box"> <div class="menu_box">
<div class="menu_title_box">北车间</div> <div class="menu_title_box">北车间</div>
<div class="tab_list"> <div class="tab_list">
<ul> <ul>
<li> <li class="current">
<div class="flex-box"> <div class="flex-box">
<p>一楼</p> <p>一楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
</div> </div>
</li> </li>
<li class="current"> <li>
<div class="flex-box"> <div class="flex-box">
<p>二楼</p> <p>二楼</p>
<p class="monitor">监控点<span>28</span></p> <p class="monitor">监控点<span>28</span></p>
......
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