Skip to content

J
jianchayuan
Commit 424a3015 authored by liuqing's avatar liuqing
Browse files
Options

大小

parent 0f0c6a39
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 111 deletions
static/css/floorcommon.css
View file @ 424a3015
...@@ -13,8 +13,7 @@ ...@@ -13,8 +13,7 @@
padding: 0; padding: 0;
} }
.menu_title_box{ .menu_title_box{
/* font-size: 0.24rem; */ font-size: 0.24rem;
font-size: 16px;
} }
.bg_img{ .bg_img{
margin: -0.5rem 0 0 -4rem; margin: -0.5rem 0 0 -4rem;
......
wjc/dongxiyilou.html
View file @ 424a3015
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<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/workshop.css" />
<link rel="stylesheet" type="text/css" href="../static/css/commonArea.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>
...@@ -13,7 +12,7 @@ ...@@ -13,7 +12,7 @@
</head> </head>
<style type="text/css"> <style type="text/css">
.content { .content {
background: url('../static/images/bg.jpg') no-repeat; background: url('../static/images/dalou/beijing.png') no-repeat;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-size: cover; background-size: cover;
...@@ -39,145 +38,141 @@ ...@@ -39,145 +38,141 @@
function updateData(index) { function updateData(index) {
let dataList = { let dataList = {
'arr1': [{ 'arr1': [{
top: '2.3rem', top: '1rem',
left: '1.6rem' left: '0.9rem',
}, { width:'2.8rem',
top: '2.3rem', height:'1rem',
left: '10.2rem' text:'四监区',
}, { href:'四监区.html'
top: '2.3rem',
left: '5.85rem'
},{ },{
top: '2.1rem', top: '2rem',
left: '3.2rem' left: '0.7rem',
height:'1rem',
width:'3rem',
text:'一监区',
href:'一监区.html'
},{ },{
top: '0.3rem', top: '3.1rem',
left: '3.2rem' left: '0.2rem',
text:'西大楼',
href:'西大楼.html',
height:'0.8rem',
width:'3.9rem',
},{ },{
top: '3.5rem', top: '3.8rem',
left: '8.5rem' left: '0.2rem',
text:'综合楼',
href:'综合楼.html',
width:'1.3rem',
height:'1.5rem',
},{ },{
top: '2.1rem', width:'2.8rem',
left: '8.5rem' height:'1rem',
top: '0.8rem',
left: '4.6rem',
href:'三监区.html',
text:'三监区',
},{ },{
top: '0.3rem', width:'3rem',
left: '8.5rem' height:'1rem',
top: '1.8rem',
left: '5.1rem',
href:'二监区.html',
text:'二监区',
},{ },{
top: '3.5rem', width:'3.5rem',
left: '3.2rem' height:'0.8rem',
top: '3rem',
left: '5.1rem',
href:'东大楼.html',
text:'东大楼',
},{ },{
top: '5.1rem', width:'4rem',
left: '9.37rem' height:'1.3rem',
},{ top: '4rem',
top: '5.1rem', left: '5.5rem',
left: '2.35rem' href:'物流中心.html',
},{ text:'物流中心',
top: '6.4rem', },]
left: '5.85rem'
},{
top: '7.7rem',
left: '5.85rem'
},{
top: '7.5rem',
left: '11.3rem'
},{
top: '5.1rem',
left: '2.35rem'
},{
top: '4.1rem',
left: '0.35rem'
},{
top: '4.1rem',
left: '6rem'
},{
top: '4.1rem',
left: '11.55rem'
}],
'arr2': [{
top: '2.3rem',
left: '1rem'
}, {
top: '2.3rem',
left: '6.75rem'
},{
top: '2.1rem',
left: '2.1rem'
},{
top: '0.3rem',
left: '2.1rem'
},{
top: '3.5rem',
left: '11.4rem'
},{
top: '2.1rem',
left: '11.4rem'
},{
top: '0.3rem',
left: '11.4rem'
},{
top: '3.5rem',
left: '2.1rem'
},{
top: '5.1rem',
left: '9.37rem'
},{
top: '5.1rem',
left: '2.35rem'
},{
top: '7.5rem',
left: '11.4rem'
},{
top: '5.1rem',
left: '2.35rem'
},{
top: '4.1rem',
left: '6rem'
},{
top: '4.4rem',
left: '9.4rem'
},{
top: '6.05rem',
left: '7.35rem'
},{
top: '6.7rem',
left: '1.9rem'
}]
}; };
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/xiyilou' + index + '.png" alt="">' let htmlTxt = '<img class="bg_img" src="../static/images/dalou/baoshang.png" alt="">'
let _this = this; let _this = this;
for (let i = 0; i < dataList[`arr${index}`].length; i++) { for (let i = 0; i < dataList[`arr${index}`].length; i++) {
console.log(divElement) 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>' // 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>'
htmlTxt = htmlTxt + '<div style= position:absolute;cursor:pointer;width:' +
dataList[`arr${index}`][i].width + ";height:" + dataList[`arr${index}`][i].height
+ ';top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left
+ ' ' + ' onclick="handleClick(\''+dataList[`arr${index}`][i].href+'\')"><div class="icon_text"><div class="text_ms" style=top:' + dataList[`arr${index}`][i].top + ";left:" + dataList[`arr${index}`][i].left + '><a href=' + dataList[`arr${index}`][i].href +
'>'+dataList[`arr${index}`][i].text+'</a></div></div></div>'
// 使用 innerHTML 添加元素 // 使用 innerHTML 添加元素
} }
divElement.innerHTML = htmlTxt; divElement.innerHTML = htmlTxt;
} }
function handleClick(areaNumber) { function handleClick(areaNumber) {
console.log('areaNumber==', areaNumber);
alert(`点击了区域 ${areaNumber}`); alert(`点击了区域 ${areaNumber}`);
} }
</script> </script>
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div> <div class="header-area">
<!-- <img src="../static/images/logo_mc.png"/> -->
<div class="content_top"></div>
</div>
<div class=" padding_box2 clearfix"> <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 class="tabName">一楼</p> <p class="tabName">综合楼</p>
<p class="monitor">监控点<span>17</span></p> <p class="monitor">监控点<span style="background-color: #ff6363;">35</span></p>
</div> </div>
</li> </li>
<li> <li>
<div class="flex-box"> <div class="flex-box">
<p class="tabName">二楼</p> <p class="tabName">西大楼</p>
<p class="monitor">监控点<span>15</span></p> <p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">东大楼</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">物流中心</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">一监区</p>
<p class="monitor">监控点 <span style="background-color: #ff8a00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">二监区</p>
<p class="monitor">监控点 <span style="background-color: #ffba00;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">三监区</p>
<p class="monitor">监控点 <span style="background-color: #43e04e;">35</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p class="tabName">四监区</p>
<p class="monitor">监控点 <span style="background-color: #ff6363;">35</span></p>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -192,4 +187,80 @@ ...@@ -192,4 +187,80 @@
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
<style>
.content_box {
float: right;
width: 13rem;
height: 8.54rem;
background: rgb(52 0 0 / 0%);
padding: 0.25rem 0.52rem;
border-radius: 0.1rem;
}
.tab_list ul li.current{
background: rgb(0 35 105 / 70%);
}
.content_box{
padding: 0;
}
.menu_title_box{
font-size: 0.24rem;
}
.bg_img{
margin: -0.5rem 0 0 -4rem;
width: 17rem;
}
.padding_box2{
width: 19rem;
}
.header-area{
text-align: center;
}
.header-area img {
width: 4rem;
height: auto;
padding-top: 0.5rem;
margin-bottom: 1rem;
}
li{
list-style: none;
}
.tab_list {
z-index: 9;
position: sticky;
}
.icon_text{
position: absolute;
width: 1.8rem;
height: 0.5rem;
line-height: 0.5rem;
background-image:url('../static/images/dalou/icon_text.png');
background-repeat: no-repeat;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.text_ms a{
color: #fff;
font-size: 0.2rem;
text-decoration: none;
margin-left: 10px;
}
.menu_box{
margin-left: 1rem;
}
.content_top {
font-size: 0.16rem;
height: 1.4rem;
background: url(../static/images/topBg.png) center center no-repeat;
background-size: contain;
}
.menu_box {
float: left;
width: 3.8rem;
}
</style>
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