添加看板

2 years ago · 22594c92cd
parent 740bd189ea
commit 22594c92cd
3 changed files with 49 additions and 4 deletions
--- a/haiwei-admin/src/main/resources/static/board/board.css
+++ b/haiwei-admin/src/main/resources/static/board/board.css
@ -207,3 +207,29 @@ body {
    width: 20px;
    height: 20px;
 }
+
+.eqModal{
+    display: none;
+}
+
+.shade{
+    position: absolute;
+    top: 0%;
+    left:0%;
+    width: 100vw;
+    height:  100vh;
+    background-color: #00000066;
+    z-index: 100;
+}
+.centerModal{
+    background-image: url("../../board/img/bigBg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left:50%;
+    width: 35vw;
+    height: 21.85vw;
+    z-index: 101;
+}
--- a/haiwei-admin/src/main/resources/static/board/board.js
+++ b/haiwei-admin/src/main/resources/static/board/board.js
@ -0,0 +1,3 @@
+$(()=>{
+})
+
--- a/haiwei-admin/src/main/resources/templates/board/board1.html
+++ b/haiwei-admin/src/main/resources/templates/board/board1.html
@ -5,6 +5,16 @@
 </head>
 <body class="white-bg">
 <link href="../../board/board.css" rel="stylesheet">
+<script>
+
+  const showModal = () =>{
+    $("#eqModal").show()
+  }
+
+  const hideModal = () =>{
+    $("#eqModal").hide()
+  }
+</script>
 <div>
  <div class="topBtn" style="left: 4vw;">首页</div>
  <div class="topBtn topBtnClick" style="left: 14.5vw;">60型脱水量</div>
@ -18,7 +28,7 @@

  <div class="centerImg">
    <div>
-      <div class="centerInfo" style="top: 1%;left:15%">
+      <div class="centerInfo" style="top: 1%;left:15%" onclick="showModal()">
        <div class="win">
          <div class="title">位置1</div>
          <div class="span1">转速: 50n/s</div>
@ -27,7 +37,7 @@
        <div class="icon"></div>
      </div>

-      <div class="centerInfo" style="top: 35%;left:40%">
+      <div class="centerInfo" style="top: 35%;left:40%" onclick="showModal()">
        <div class="win">
          <div class="title">位置1</div>
          <div class="span1">转速: 50n/s</div>
@ -36,7 +46,7 @@
        <div class="icon"></div>
      </div>

-      <div class="centerInfo" style="top: 45%;left:71%">
+      <div class="centerInfo" style="top: 45%;left:71%" onclick="showModal()">
        <div class="win">
          <div class="title">位置1</div>
          <div class="span1">转速: 50n/s</div>
@ -44,7 +54,8 @@
        </div>
        <div class="icon"></div>
      </div>
-    </div></div>
+    </div>
+  </div>

  <div class="winDiv">
    <div class="title">基本信息</div>
@ -66,6 +77,11 @@
    <div class="icon"></div>
    <span>运行正常</span>
  </div>
+
+  <div class="eqModal" id="eqModal">
+    <div class="shade"  onclick="hideModal()"></div>
+    <div class="centerModal"></div>
+  </div>
 </div>
 <th:block th:include="include :: footer"/>
 <script src="../../board/board.js"></script>