Skip to content

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

布局修改及页面制作

parent 76bff8db
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 10 deletions
jcqy_nwq.html
View file @ faa49674
......@@ -13,28 +13,48 @@
</head>
<style type="text/css">
.content {
background: url(static/images/workshop_bg.png);
background: url('static/images/bg.jpg') no-repeat;
width: 100%;
min-height: 100vh;
background-position-x: center;
/* 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();
})
// 链式编程 当前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: '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>
<body>
<div class="content">
<div class="content_top"></div>
<div class="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">北车间</div>
......@@ -56,7 +76,9 @@
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
......
static/.DS_Store
View file @ faa49674
No preview for this file type
static/css/commonArea.css
View file @ faa49674
.content_top {
height: 1.4rem;
background: url("../images/topBg.png") center center no-repeat;
}
.content_box {
width: 13rem;
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