布局修改及页面制作

faa49674 · zhangyudan · 76bff8db · faa49674 · faa49674 · faa49674
Commit faa49674 authored Nov 09, 2023 by zhangyudan
6 changed files
--- a/jcqy_nwq.html
+++ b/jcqy_nwq.html
@@ -13,10 +13,11 @@
 </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">
@@ -30,11 +31,30 @@
                // 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,10 +76,12 @@
                </div>
            </div>
            <div class="content_box">
+                <div class="room_box">

                </div>
            </div>
        </div>
+    </div>
 </body>

 </html>
\ No newline at end of file
--- a/static/.DS_Store
+++ b/static/.DS_Store
--- a/static/css/commonArea.css
+++ b/static/css/commonArea.css
+.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;
 }
--- a/static/images/bg.jpg
+++ b/static/images/bg.jpg
--- a/static/images/jcqy_nwq.jpg
+++ b/static/images/jcqy_nwq.jpg
--- a/static/images/topBg.png
+++ b/static/images/topBg.png