11

psdc-ui/src/views/bigview/index.vue

@@ -6,15 +6,76 @@
     </div>
     <div class="main">
       <div class="left">
-        <div class="left_top">
+        <div class="left_top bgimg">
           <div class="title">电磁锅炉</div>
+          <div class="info_box">
+            <div class="dev_img">
+              <img src="../../assets/images/电磁锅炉.png" alt="">
+            </div>
+            <div class="dev_data"></div>
+          </div>
+          <div class="chart_box">
+            <div class="dev_chart"></div>
+          </div>
+        </div>
+        <div class="left_bottom bgimg">
+          <div class="title">蓄热锅炉</div>
+          <div class="info_box">
+            <div class="dev_img">
+              <img src="../../assets/images/蓄热锅炉.png" alt="">
+            </div>
+            <div class="dev_data"></div>
+          </div>
+          <div class="chart_box">
+            <div class="dev_chart"></div>
+          </div>
+        </div>
+      </div>
+      <div class="middle">
+        <div class="middle_top">
+          <div class="important_data"></div>
+          <div class="my3D_img"></div>
+          <div class="important_data"></div>
+        </div>
+        <div class="middle_bottom">
+          <div class="chart_box bgimg"></div>
+          <div class="wendu_box">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+          </div>
         </div>
-        <div class="left_bottom"></div>
       </div>
-      <div class="middle"></div>
       <div class="right">
-        <div class="right_top"></div>
+        <div class="right_top bgimg">
-        <div class="right_bottom"></div>
+          <div class="title">空气源热泵</div>
+          <div class="info_box">
+            <div class="dev_img">
+              <img src="../../assets/images/空气源热泵.png" alt="">
+            </div>
+            <div class="dev_data"></div>
+          </div>
+          <div class="chart_box">
+            <div class="dev_chart"></div>
+          </div>
+        </div>
+        <div class="right_bottom bgimg">
+          <div class="title">发热电缆</div>
+          <div class="info_box">
+            <div class="dev_img">
+              <img src="../../assets/images/发热电缆.png" alt="">
+            </div>
+            <div class="dev_data"></div>
+          </div>
+          <div class="chart_box">
+            <div class="dev_chart"></div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -58,7 +119,7 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
-    padding: 0 20px;
+    padding: 0 20px 20px 20px;
     width: 100%;
     height: calc(100% - 70px);
     .left{
@@ -67,33 +128,76 @@
       .left_top{
         width: 100%;
         height: 49%;
-        border: 1px solid red;
         margin-bottom: 4%;
       }
       .left_bottom{
         width: 100%;
         height: 49%;
-        border: 1px solid red;
       }
     }
     .middle{
+      display: flex;
+      flex-direction: column;
       width: 50.5%;
       height: 100%;
-      border: 1px solid red;
+      .middle_top{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+        flex: 2;
+        width: 100%;
+        padding-bottom: 20px;
+        .important_data{
+          width: 14%;
+          height: 100%;
+          border: 1px solid #fff;
+        }
+        .my3D_img{
+          width: 72%;
+          height: 100%;
+          border: 1px solid #fff;
+        }
+      }
+      .middle_bottom{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+        flex: 1;
+        width: 100%;
+        .chart_box{
+          width: 49.5%;
+          height: 100%;
+        }
+        .wendu_box{
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          width: 49%;
+          height: 100%;
+          .item{
+            width: 24%;
+            height: 48.5%;
+            background-color: #1ab394;
+            &:first-child{
+              margin-bottom: 8px;
+            }
+          }
+        }
+      }
     }
     .right{
       width: 24%;
       height: 100%;
       .right_top{
+        display: flex;
+        flex-direction: column;
         width: 100%;
         height: 49%;
-        border: 1px solid red;
         margin-bottom: 4%;
       }
       .right_bottom{
         width: 100%;
         height: 49%;
-        border: 1px solid red;
       }
     }
   }
@@ -101,7 +205,8 @@
 .title{
   width: 45%;
   height: 30px;
-  margin: 0 auto;
+  line-height: 30px;
+  margin: 0 auto 20px auto;
   color: #19C3F4;
   font-size: 18px;
   font-weight: bold;
@@ -109,5 +214,39 @@
   background-image: url("../../assets/images/wrappertitle.png");
   background-size: 100% 100%;
 }
+.info_box{
+  display: flex;
+  width: 100%;
+  height: 44%;
+  padding: 10px;
+  .dev_img{
+    width: 50%;
+    height: 100%;
+    border: 1px solid #fff;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .dev_data{
+    width: 50%;
+    height: 100%;
+    border: 1px solid #fff;
+  }
+}
+.chart_box{
+  width: 100%;
+  height: 44%;
+  padding: 0 10px 10px 10px;
+  .dev_chart{
+    width: 100%;
+    height: 100%;
+    border: 1px solid #fff;
+  }
+}
+.bgimg{
+  background-image: url("../../assets/images/wrapperbox.png");
+  background-size: 100% 100%;
+}
 </style>