Skip to content

J
jianchayuan
Commit 8bfa83d7 authored by zhangyudan's avatar zhangyudan
Browse files
Options

页面制作

parent faa49674
Show whitespace changes
Inline Side-by-side
Showing with 1779 additions and 146 deletions
jcqy_nwq.html → hall/hall.html
View file @ 8bfa83d7
...@@ -4,23 +4,78 @@ ...@@ -4,23 +4,78 @@
<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">
<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/common.css" /> <link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
<link rel="stylesheet" type="text/css" href="static/css/workshop.css" /> <link rel="stylesheet" type="text/css" href="../static/css/commonArea.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">
.content { .content {
background: url('static/images/bg.jpg') no-repeat; background: url('../static/images/bg.jpg') center center no-repeat;
width: 100%; width: 100%;
min-height: 100vh; height: 100%;
/* background-position-x: center; */ /* background-position-x: center; */
background-size: cover; background-size: cover;
} }
</style> </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"> <script type="text/javascript">
var arr = [{
top: '0.2rem',
left: '3.2rem'
}, {
top: '0.33rem',
left: '10.4rem'
}, {
top: '0.78rem',
left: '0.3rem'
}, {
top: '4.39rem',
left: '0.3rem'
}, {
top: '5.35rem',
left: '0.3rem'
}, {
top: '6.68rem',
left: '3.15rem'
}, {
top: '6.68rem',
left: '10.4rem'
}, {
top: '4.37rem',
left: '11.15rem'
}]
$(function() { $(function() {
// 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类 // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
$(".tab_list li").click(function() { $(".tab_list li").click(function() {
...@@ -32,56 +87,23 @@ ...@@ -32,56 +87,23 @@
$(".tab_con .item").eq(index).show().siblings().hide(); $(".tab_con .item").eq(index).show().siblings().hide();
}) })
//循环数组 打摄像头位置 //循环数组 打摄像头位置
var arr = [{
top: '1rem',
left: '1rem'
}, {
top: '2rem',
left: '2rem'
}]
var divElement = document.querySelector('.room_box'); var divElement = document.querySelector('.room_box');
console.log(divElement) console.log(divElement)
let htmlTxt = '<img class="bg_img" src="./static/images/jcqy_nwq.jpg" alt="">' let htmlTxt = '<img class="bg_img" src="../static/images/hall.jpg" alt="">'
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
console.log(divElement) 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>' htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
// 使用 innerHTML 添加元素 // 使用 innerHTML 添加元素
} }
divElement.innerHTML = htmlTxt; divElement.innerHTML = htmlTxt;
}); });
</script>
<body> function handleClick(areaNumber) {
<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> alert("点击了区域 " + arr[areaNumber].top);
</div> }
</div> </script>
</div>
</body>
</html> </html>
\ No newline at end of file
jcqy/jcqy_cc.html 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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',
left: '0.33rem'
}, {
top: '0.33rem',
left: '1.99rem'
}, {
top: '0.33rem',
left: '3.44rem'
}, {
top: '0.33rem',
left: '4.85rem'
}, {
top: '0.33rem',
left: '6.14rem'
}, {
top: '0.33rem',
left: '6.55rem'
}, {
top: '0.33rem',
left: '8.4rem'
}, {
top: '0.33rem',
left: '9.68rem'
}, {
top: '0.33rem',
left: '10.05rem'
}, {
top: '1.84rem',
left: '1.62rem'
}, {
top: '1.84rem',
left: '4.45rem'
}, {
top: '1.84rem',
left: '6.18rem'
}, {
top: '1.84rem',
left: '9.68rem'
}, {
top: '1.84rem',
left: '11.4rem'
}, {
top: '2.95rem',
left: '0.33rem'
}, {
top: '4.85rem',
left: '1.72rem'
}, {
top: '3.9rem',
left: '2.39rem'
}, {
top: '3.9rem',
left: '6.55rem'
}, {
top: '3.9rem',
left: '11.2rem'
}, {
top: '6rem',
left: '4.27rem'
}, {
top: '6rem',
left: '5.8rem'
}, {
top: '6rem',
left: '11.4rem'
}, {
top: '7.48rem',
left: '0.33rem'
}, {
top: '7.48rem',
left: '1.75rem'
}, {
top: '7.48rem',
left: '3.34rem'
}, {
top: '7.48rem',
left: '4.65rem'
}, {
top: '7.48rem',
left: '6.2rem'
}, {
top: '7.48rem',
left: '7.2rem'
}, {
top: '7.48rem',
left: '8.7rem'
}, {
top: '7.48rem',
left: '10.35rem'
}]
$(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_cc.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_common.html 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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 class="current">
<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">
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 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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 class="current">
<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">
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 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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 class="current">
<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">
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 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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">
var arr = [{
top: '0.4rem',
left: '0.8rem'
}, {
top: '0.8rem',
left: '0.4rem'
}, {
top: '2.1rem',
left: '0.4rem'
}, {
top: '3.4rem',
left: '0.4rem'
}, {
top: '4.6rem',
left: '0.4rem'
}, {
top: '5.8rem',
left: '0.4rem' //
}, {
top: '7.05rem',
left: '0.4rem'
}, {
top: '7.43rem',
left: '0.8rem'
}, {
top: '7.43rem',
left: '2.15rem'
}, {
top: '7.43rem',
left: '3.65rem'
}, {
top: '7.43rem',
left: '5.15rem'
}, {
top: '7.43rem',
left: '6.65rem'
}, {
top: '7.43rem',
left: '8.15rem'
}, {
top: '7.43rem',
left: '9.65rem'
}, {
top: '7.43rem',
left: '10.95rem'
}, {
top: '7.05rem',
left: '11.35rem'
}, {
top: '5.8rem',
left: '11.35rem'
}, {
top: '4.6rem',
left: '11.35rem'
}, {
top: '3.4rem',
left: '11.35rem'
}, {
top: '2.1rem',
left: '11.35rem'
}, {
top: '0.8rem',
left: '11.35rem'
}, {
top: '0.4rem',
left: '10.95rem'
}, {
top: '0.4rem',
left: '9.58rem'
}, {
top: '0.4rem',
left: '8.35rem'
}, {
top: '0.4rem',
left: '7.12rem'
}, {
top: '0.4rem',
left: '5.82rem'
}, {
top: '0.4rem',
left: '4.56rem'
}, {
top: '0.4rem',
left: '3.3rem'
}, {
top: '0.4rem',
left: '2.05rem'
}, ]
$(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_nwq.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_operationRoom.html 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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>
<a class="flex-box" href="./jcqy_cc.html">
<p class="tabName">炊场</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<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: '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 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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 class="current">
<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">
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
jcqy_nwqqq.html deleted 100644 → 0
View file @ faa49674
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上海市人民检察院</title>
<link rel="stylesheet" href="static/css/common.css">
</head>
<style type="text/css">
/* 鼠标悬停时显示的tooltip样式 */
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
display: none;
/* 初始时隐藏 */
}
</style>
<body>
<header class="header"></header>
<div class="content">
</div>
</body>
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<!-- <script src="static/js/flexible.js"></script> -->
<script src="static/js/rem.js"></script>
<script type="text/javascript">
$(function() {
//
var arr = [{
top: '1rem',
left: '1rem'
}, {
top: '2rem',
left: '2rem'
}]
var divElement = document.querySelector('.content');
console.log(divElement)
let htmlTxt = ''
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;
});
function handleClick(areaNumber) {
alert("点击了区域 1");
}
function showTooltip(event, content) {
// 获取tooltip元素
var tooltip = document.getElementById("tooltip");
// 设置tooltip的内容
tooltip.innerHTML = content;
// 设置tooltip的位置
tooltip.style.left = event.pageX + "px";
tooltip.style.top = event.pageY + "px";
// 显示tooltip
tooltip.style.display = "block";
}
function hideTooltip() {
// 隐藏tooltip
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
</script>
</html>
\ No newline at end of file
southOpRoom/firstFloor.html 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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',
left: '1.84rem'
}, {
top: '1.09rem',
left: '0.46rem',
}, {
top: '2.7rem',
left: '0.46rem',
}, {
top: '2.2rem',
left: '1.85rem',
}, {
top: '1.09rem',
left: '3.2rem',
}, {
top: '2.7rem',
left: '3.2rem',
}, {
top: '1.1rem',
left: '3.62rem',
}, {
top: '1.68rem',
left: '5rem',
}, {
top: '2.7rem',
left: '5rem',
}, {
top: '3.1rem',
left: '0.46rem',
}, {
top: '3.15rem',
left: '1.85rem',
}, {
top: '3.15rem',
left: '3.5rem',
}, {
top: '3.15rem',
left: '5rem',
}, {
top: '4.85rem',
left: '0.46rem',
}, {
top: '4.85rem',
left: '1.85rem',
}, {
top: '4.85rem',
left: '3.5rem',
}, {
top: '4.85rem',
left: '5rem',
}, {
top: '6.26rem',
left: '0.46rem',
}, {
top: '6.26rem',
left: '2.6rem',
}, {
top: '6.7rem',
left: '2.9rem',
}, {
top: '6.7rem',
left: '5rem',
}, {
top: '2.62rem',
left: '5.54rem',
}, {
top: '2.62rem',
left: '6.17rem',
}, {
top: '4.55rem',
left: '5.54rem',
}, {
top: '4.55rem',
left: '6.17rem',
}, {
top: '7.25rem',
left: '5.85rem',
}, {
top: '7.25rem',
left: '9.59rem',
}, {
top: '2.62rem',
left: '11.15rem',
}, {
top: '3.87rem',
left: '11.15rem',
}, {
top: '5.35rem',
left: '11.15rem',
}, {
top: '0.3rem',
left: '8rem',
}, {
top: '1.15rem',
left: '6.7rem',
}, {
top: '2.44rem',
left: '6.7rem',
}, {
top: '2.8rem',
left: '6.7rem',
}, {
top: '2.8rem',
left: '8rem',
}, {
top: '4.6rem',
left: '7.35rem',
}, {
top: '5.67rem',
left: '6.7rem',
}, {
top: '5.67rem',
left: '8rem',
}, {
top: '6.05rem',
left: '8rem',
}, {
top: '6.7rem',
left: '6.7rem',
}, {
top: '1.56rem',
left: '8.38rem',
}, {
top: '1.56rem',
left: '10.5rem',
}, {
top: '2rem',
left: '9.44rem',
}, {
top: '3.47rem',
left: '8.38rem',
}, {
top: '3.47rem',
left: '9.44rem',
}, {
top: '3.47rem',
left: '10.5rem',
}, {
top: '5.06rem',
left: '8.38rem',
}, {
top: '5.06rem',
left: '9.44rem',
}, {
top: '5.06rem',
left: '10.5rem',
}, {
top: '6.7rem',
left: '8.38rem',
}, {
top: '6.7rem',
left: '9.44rem',
}, {
top: '6.7rem',
left: '10.5rem',
}, ]
$(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/south_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>
</html>
\ No newline at end of file
southOpRoom/secondFloor.html 0 → 100644
View file @ 8bfa83d7
<!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" />
<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>
<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.33rem',
left: '10.4rem'
}, {
top: '0.78rem',
left: '0.3rem'
}, {
top: '4.39rem',
left: '0.3rem'
}, {
top: '5.35rem',
left: '0.3rem'
}, {
top: '6.68rem',
left: '3.15rem'
}, {
top: '6.68rem',
left: '10.4rem'
}, {
top: '4.37rem',
left: '11.15rem'
}]
$(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/south_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>
</html>
\ No newline at end of file
static/css/commonArea copy.css 0 → 100644
View file @ 8bfa83d7
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 0.14rem;
}
/* 清格式 */
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
@font-face {
font-family: "led";
src: url(@/assets/fonts/FX-LED.TTF);
}
.clearfix {
zoom: 1;
}
.clear {
clear: both;
}
.content_top {
font-size: 0.16rem;
height: 1.4rem;
background: url("../images/topBg.png") center center no-repeat;
background-size: contain;
}
.padding_box2 {
margin: 0 auto;
width: 15.85rem;
height: 8.7rem;
}
.menu_box {
float: left;
width: 2.65rem;
}
.content_box {
float: right;
width: 13rem;
height: 8.54rem;
background: rgba(0, 0, 0, 0.6);
padding: 0.25rem 0.52rem;
border-radius: 0.1rem;
}
.room_box {
position: relative;
height: 100%;
/* width: 11.82rem;
height: 8.18rem; */
width: 100%;
height: 100%;
}
.bg_img {
position: absolute;
top: 0;
left: 0;
/* height: 100%; */
/* width: 11.82rem;
height: 8.18rem; */
width: 100%;
height: 100%;
}
.camera {
position: absolute;
width: 0.25rem;
height: 0.25rem;
}
static/css/commonArea.css
View file @ 8bfa83d7
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 0.14rem;
}
body {
background-color: #001a4c;
}
/* 清格式 */
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
@font-face {
font-family: "led";
src: url(@/assets/fonts/FX-LED.TTF);
}
.clearfix {
zoom: 1;
}
.clear {
clear: both;
}
.content_top { .content_top {
font-size: 0.16rem;
height: 1.4rem; height: 1.4rem;
background: url("../images/topBg.png") center center no-repeat; background: url("../images/topBg.png") center center no-repeat;
background-size: contain;
}
.padding_box2 {
margin: 0 auto;
/* width: 15.85rem; */
width: 17.5rem;
height: 8.54rem;
}
.menu_box {
float: left;
width: 4rem;
}
.tab_list ul li {
border-radius: 0.1rem;
}
.tab_list ul li a {
font-size: 0.24rem;
justify-content: space-around;
}
.tab_list ul li a:hover {
text-decoration: none;
}
.tabName {
font-size: 0.19rem;
}
.monitor2 {
font-size: 0.15rem;
} }
.content_box { .content_box {
float: right;
width: 13rem; width: 13rem;
height: 8.8rem; height: 8.54rem;
margin: 0.2rem; background: rgba(0, 11, 52, 0.6);
background: rgba(0, 0, 0, 0.6);
padding: 0.25rem 0.52rem; padding: 0.25rem 0.52rem;
border-radius: 0.1rem; border-radius: 0.1rem;
} }
.padding_box {
padding: 0.12rem 0.7rem;
}
.room_box { .room_box {
position: relative; position: relative;
height: 100%; height: 100%;
/* width: 11.82rem;
height: 8.18rem; */
width: 100%;
height: 100%;
} }
.bg_img { .bg_img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
height: 100%; /* height: 100%; */
/* width: 11.82rem;
height: 8.18rem; */
width: 100%; width: 100%;
height: 100%;
} }
.camera { .camera {
position: absolute; position: absolute;
width: 0.25rem;
height: 0.25rem;
} }
static/css/workshop copy.css 0 → 100644
View file @ 8bfa83d7
.padding_box {
padding: 3.5rem 2rem 0;
}
.flex-box {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.menu_box {
width: 10rem;
}
.menu_title_box {
width: 100%;
text-align: center;
font-size: 32px;
color: #fff;
}
.tab_list ul {
display: block;
width: 100%;
}
.tab_list ul li {
color: #fff;
font-weight: normal;
font-size: 16px;
background: rgb(0 35 105 / 70%);
margin: 0.4rem 0;
border-radius: 0.2rem;
line-height: 2rem;
}
.tab_list ul li div {
font-size: 0.6rem;
justify-content: space-around;
}
.monitor {
font-size: 0.5rem;
}
.monitor span {
background: #006aec;
padding: 0.1rem 0.4rem;
border-radius: 2rem;
margin-left: 0.1rem;
}
.tab_list ul li a {
color: #a84c47;
}
.tab_list ul li.current {
line-height: 2rem;
border: none;
background: #006aec;
font-weight: normal;
}
.tab_list ul li.current .monitor span {
background: #0055bd;
}
.content_box {
flex: 1;
}
static/images/jcqy_nwq.jpg
View replaced file @ faa49674 View file @ 8bfa83d7
static/images/jcqy_nwq.jpg

48.6 KB | W: | H:

static/images/jcqy_nwq.jpg

48.1 KB | W: | H:

static/images/jcqy_nwq.jpg
static/images/jcqy_nwq.jpg
static/images/jcqy_nwq.jpg
static/images/jcqy_nwq.jpg
  • 2-up
  • Swipe
  • Onion skin
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