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

pages/visual/PeakCoalView.vue

@@ -3,14 +3,29 @@
     <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>
 
 <script>
 export default {
   name: "PeakCoalView",
-  data(){
+  data() {
-    return{
+    return {
       autoStyle: {}
     }
   },
@@ -22,14 +37,14 @@ export default {
     }, false)
   },
   methods: {
-    getAutoStyle () {
+    getAutoStyle() {
-      const { scale, origin } = this.getScale()
+      const {scale, origin} = this.getScale()
-      this.autoStyle =  {
+      this.autoStyle = {
         transform: `scale(${scale})`,
         transformOrigin: origin
       }
     },
-    getScale () {
+    getScale() {
       let scale = 1
       let origin = 'top center'
       const baseWidth = 9450
@@ -38,7 +53,7 @@ export default {
       const innerHeight = window.innerHeight
       const widthScale = innerWidth / baseWidth
       const scaleHeight = baseHeight * widthScale
-      console.log('scaleHeight:',scaleHeight)
+      console.log('scaleHeight:', scaleHeight)
       if (scaleHeight <= innerHeight) {
         origin = 'left top'
         scale = widthScale
@@ -48,7 +63,7 @@ export default {
       } else {
         scale = innerHeight / baseHeight
       }
-      return { scale, origin }
+      return {scale, origin}
     },
   }
 }
@@ -60,26 +75,64 @@ 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);
 }
 </style>
 <style scoped lang="less">
-.peak-coal-content{
+.peak-coal-content {
   height: 3000px;
   width: 9450px;
   overflow: hidden;
   position: relative;
   user-select: none;
-  .header-content{
+
+  .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>