1、新增主页两侧看板和中间看板布局

assets/styles/mixin.less

@@ -77,4 +77,8 @@
   align-items: center;
   flex-direction: @type;
 }
-
+.flex-row{
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}

pages/visual/PeakCoalView.vue

@@ -5,18 +5,29 @@
     </div>
 
     <div class="body-content">
+      <!--      左侧内容-->
+      <div class="left-content">
+        <div class="left-icon"></div>
+        <div class="left-data-panel">
 
+        </div>
+      </div>
+
+      <!--      中间内容-->
+      <div class="center-content">
+
+      </div>
+      <!--      右侧内容-->
+      <div class="right-content">
+        <div class="right-data-panel">
+
+        </div>
+        <div class="right-icon"></div>
+      </div>
     </div>
 
     <div class="footer-content">
 
-    </div>
-    <div class="left-icon">
-
-    </div>
-
-    <div class="right-icon">
-
     </div>
   </div>
 </template>
@@ -88,6 +99,8 @@ body, html, #__nuxt, #__layout {
 }
 </style>
 <style scoped lang="less">
+@import "assets/styles/mixin";
+
 .peak-coal-content {
   height: 3000px;
   width: 9450px;
@@ -103,28 +116,63 @@ body, html, #__nuxt, #__layout {
     background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat center center;
   }
 
-  .left-icon {
-    position: absolute;
-    left: 0px;
-    width: 531px;
-    height: 100%;
-    background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
-    background-size: 100% 100%;
-  }
-
-  .right-icon {
-    position: absolute;
-    right: 0px;
-    width: 531px;
-    height: 100%;
-    background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
-    background-size: 100% 100%;
-  }
-
   .body-content {
     position: absolute;
     height: 100%;
     width: 100%;
+
+    .left-content {
+      position: absolute;
+      left: 0px;
+      height: 100%;
+      .flex-row;
+
+      .left-icon {
+        width: 531px;
+        height: 100%;
+        background: url("assets/peakCoalImages/left/left-icon.png") no-repeat center center;
+        background-size: 100% 100%;
+      }
+
+      .left-data-panel {
+        width: 2451px;
+        height: 2721px;
+        background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
+        background-size: 100% 100%;
+      }
+    }
+
+    .right-content {
+      position: absolute;
+      right: 0px;
+      height: 100%;
+      .flex-row;
+
+      .right-icon {
+        width: 531px;
+        height: 100%;
+        background: url("assets/peakCoalImages/right/right-icon.png") no-repeat center center;
+        background-size: 100% 100%;
+      }
+
+      .right-data-panel {
+        width: 2451px;
+        height: 2721px;
+        background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px;
+        background-size: 100% 100%;
+      }
+    }
+
+    .center-content {
+      position: absolute;
+      left: 50%;
+      top: 411px;
+      transform: translateX(-50%);
+      width: 4251px;
+      height: 2628px;
+      background: url("assets/peakCoalImages/center/center-content-bg.png") no-repeat center center;
+      background-size: 100% 100%;
+    }
   }
 
   .footer-content {