diff --git a/assets/peakCoalImages/header/first-title-bg.png b/assets/peakCoalImages/header/first-title-bg.png
new file mode 100644
index 0000000..31e7017
Binary files /dev/null and b/assets/peakCoalImages/header/first-title-bg.png differ
diff --git a/nuxt.config.js b/nuxt.config.js
index af4a12d..76f1f4a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -5,7 +5,7 @@ export default {
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: '西乌旗第三小学智慧校园',
+    title: '峰煤智慧监控应用系统',
     htmlAttrs: {
       lang: 'zh-cn'
     },
diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue
new file mode 100644
index 0000000..5d0dec3
--- /dev/null
+++ b/pages/visual/PeakCoalView.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="peak-coal-content" :style="autoStyle">
+    <div class="header-content">
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PeakCoalView",
+  data(){
+    return{
+      autoStyle: {}
+    }
+  },
+  mounted() {
+    this.getAutoStyle()
+    window.addEventListener('resize', (e) => {
+      e.stopPropagation()
+      this.getAutoStyle()
+    }, false)
+  },
+  methods: {
+    getAutoStyle () {
+      const { scale, origin } = this.getScale()
+      this.autoStyle =  {
+        transform: `scale(${scale})`,
+        transformOrigin: origin
+      }
+    },
+    getScale () {
+      let scale = 1
+      let origin = 'top center'
+      const baseWidth = 9450
+      const baseHeight = 3000
+      const innerWidth = window.innerWidth
+      const innerHeight = window.innerHeight
+      const widthScale = innerWidth / baseWidth
+      const scaleHeight = baseHeight * widthScale
+      console.log('scaleHeight:',scaleHeight)
+      if (scaleHeight <= innerHeight) {
+        origin = 'left top'
+        scale = widthScale
+        if (scale > 1) {
+          origin = 'left top'
+        }
+      } else {
+        scale = innerHeight / baseHeight
+      }
+      return { scale, origin }
+    },
+  }
+}
+</script>
+<style>
+body, html, #__nuxt, #__layout {
+  width: 100%;
+  height: 100%;
+  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 */ {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
+<style scoped lang="less">
+.peak-coal-content{
+  height: 3000px;
+  width: 9450px;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  .header-content{
+    height: 507px;
+    background: url("assets/peakCoalImages/header/first-title-bg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>