1、新增主页布局新增主页布局

pages/visual/PeakCoalView.vue

@@ -3,6 +3,21 @@
     <div class="header-content">
 
     </div>
+
+    <div class="body-content">
+
+    </div>
+
+    <div class="footer-content">
+
+    </div>
+    <div class="left-icon">
+
+    </div>
+
+    <div class="right-icon">
+
+    </div>
   </div>
 </template>
 
@@ -60,11 +75,14 @@ body, html, #__nuxt, #__layout {
   background-color: #000;
   overflow: hidden;
 }
+
 .list-enter-active, .list-leave-active {
   transition: all 0.5s;
 }
+
 .list-enter, .list-leave-to
-  /* .list-leave-active for below version 2.1.8 */ {
+  /* .list-leave-active for below version 2.1.8 */
+{
   opacity: 0;
   transform: translateY(30px);
 }
@@ -76,10 +94,45 @@ body, html, #__nuxt, #__layout {
   overflow: hidden;
   position: relative;
   user-select: none;
+
   .header-content {
+    position: absolute;
+    top: 0px;
     height: 507px;
-    background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat;
+    width: 100%;
+    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%;
+  }
+
+  .footer-content {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 220px;
+    background: url("assets/peakCoalImages/footer/footer-bg.png") no-repeat center center;
+  }
 }
 </style>