Skip to content

J
jianchayuan
Commit 88c78463 authored by liuqing's avatar liuqing
Browse files
Options

1

parent a80e5753
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 312 deletions
index.html
View file @ 88c78463
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="./static/js/flexible.js"></script>
<link rel="stylesheet" href="./static/css/common.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="./static/js/flexible.js"></script>
<link rel="stylesheet" href="./static/css/common.css">
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="./static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="loupan_map_box">
<ul>
<li class="index">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_01">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_02">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_03">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_04">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_05">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_06">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_07">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_08">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_09">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_10">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_11">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_12">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_13">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_14">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_15">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="./static/images/logo_mc.png" />
</div>
<div class="area-content">
<div class="bue-yewu">
<div class="map">
<a href="./index_01.html"> <img src="./static/images/监控业务数据展示跳转图.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<style>
.bue-yewu {
background: url(./static/images/wuye.png) no-repeat;
background-size: 100% 100%;
height: 80vh;
text-align: center;
}
.bue-yewu .map img {
width: 32%;
}
</style>
</body>
</html>
\ No newline at end of file
index_01.html
View file @ 88c78463
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="./static/js/flexible.js"></script>
<link rel="stylesheet" href="./static/css/common.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="./static/js/flexible.js"></script>
<script src="./static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<link rel="stylesheet" href="./static/css/common.css">
<script>
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find("img").css("transform", "scale(1.2)"); /* 鼠标进入时将图片放大为1.2倍 */
}).mouseleave(function() {
$(this).find("img").css("transform", "scale(1)"); /* 鼠标离开时恢复图片原始大小 */
});
});
</script>
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="./static/images/logo_mc.png" />
</div>
<div class="area-content">
<div class="bue-yewu">
<div class="map">
<a href="#"> <img src="./static/images/监控业务数据展示跳转图.png" alt=""></a>
</div>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="./static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="loupan_map_box">
<ul>
<li class="index">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_01">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_02">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_03">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_04">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_05">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_06">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_07">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_08">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_09">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_10">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_11">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_12">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_13">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_14">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_15">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.bue-yewu {
background: url(./static/images/wuye.png) no-repeat;
background-size: 100% 100%;
height: 80vh;
text-align: center;
}
.bue-yewu .map img {
width: 32%;
}
</style>
</body>
</html>
\ No newline at end of file
plandirectory/floorPlan_dialog.html deleted 100644 → 0
View file @ a80e5753
<!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">A栋</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>
<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>
<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
plandirectory/yewuceng.html deleted 100644 → 0
View file @ a80e5753
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css">
</head>
<body>
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="../static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="business">
<img src="../static/images/yewuceng.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
static/css/common.css
View file @ 88c78463
......@@ -130,7 +130,7 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
background-size: 100% 100%;
}
.area-content .area-left .title{
font-size: 22px;
font-size: 0.6rem;
text-align: center;
letter-spacing: 2px;
font-family: 'AlibabaPuHuiTi_2_85_Bold';
......@@ -149,6 +149,9 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
line-height: 1.5rem;
padding: 0 20px;
}
.left-menu ul li span{
font-size: 0.5rem;
}
.left-menu .menu-num span:nth-child(2){
vertical-align: middle;
padding:3px 20px;
......@@ -276,3 +279,10 @@ a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
margin-top: 2rem;
background-size: 100% 100%;
}
.bue-yewu .map img {
transition: transform 0.3s ease-in-out; /* 添加过渡效果，过渡时间为0.3秒 */
}
.bue-yewu .map img:hover {
transform: scale(1.05); /* 鼠标悬停时图标放大为原来的1.2倍 */
}
\ 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