Commit faa49674 authored by zhangyudan's avatar zhangyudan

布局修改及页面制作

parent 76bff8db
...@@ -13,10 +13,11 @@ ...@@ -13,10 +13,11 @@
</head> </head>
<style type="text/css"> <style type="text/css">
.content { .content {
background: url(static/images/workshop_bg.png); background: url('static/images/bg.jpg') no-repeat;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-position-x: center; /* background-position-x: center; */
background-size: cover;
} }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
...@@ -30,11 +31,30 @@ ...@@ -30,11 +31,30 @@
// 3、下面index对应的模块显示,其余的item隐藏 // 3、下面index对应的模块显示,其余的item隐藏
$(".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');
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()"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
}); });
</script> </script>
<body> <body>
<div class="content"> <div class="content">
<div class="content_top"></div>
<div class="flex-box padding_box"> <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>
...@@ -56,10 +76,12 @@ ...@@ -56,10 +76,12 @@
</div> </div>
</div> </div>
<div class="content_box"> <div class="content_box">
<div class="room_box">
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
No preview for this file type
.content_top {
height: 1.4rem;
background: url("../images/topBg.png") center center no-repeat;
}
.content_box { .content_box {
width: 13rem; width: 13rem;
height: 8.8rem; height: 8.8rem;
background: rgba(0, 0, 0, 0.5); margin: 0.2rem;
background: rgba(0, 0, 0, 0.6);
padding: 0.25rem 0.52rem;
border-radius: 0.1rem;
}
.padding_box {
padding: 0.12rem 0.7rem;
}
.room_box {
position: relative;
height: 100%;
}
.bg_img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.camera {
position: absolute;
} }
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