diff --git a/components/Map.vue b/components/Map.vue
index eb92fe4..189a387 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mars3dContainer" ref="mapRef" id="mars3dContainer"></div>
+  <div class="map-container" ref="mapRef" id="mars3dContainer"></div>
 </template>
 
 <script>
diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue
index f5ef07a..26cdf21 100644
--- a/pages/visual/PeakCoalView.vue
+++ b/pages/visual/PeakCoalView.vue
@@ -27,8 +27,9 @@
         </div>
 
         <!--      中间内容-->
-        <div class="center-content point-none">
-
+        <div class="center-content">
+          <Map />
+          <img class="center-bg" :src="centerBg" />
         </div>
         <!--      右侧内容-->
         <div class="right-content point">
@@ -69,12 +70,14 @@
 </template>
 
 <script>
+const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
 export default {
   name: "PeakCoalView",
   components: {},
   data() {
     return {
-      autoStyle: {}
+      autoStyle: {},
+      centerBg
     }
   },
   mounted() {
@@ -221,8 +224,17 @@ body, html, #__nuxt, #__layout {
       transform: translateX(-50%);
       width: 4383px;
       height: 2628px;
-      .bg("~/assets/peakCoalImages/center/center-content-bg.png");
-      pointer-events: none;
+      .center-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
     }
   }