diff --git a/src/mixins/overview/index.js b/src/mixins/overview/index.js
new file mode 100644
index 0000000..b256d1f
--- /dev/null
+++ b/src/mixins/overview/index.js
@@ -0,0 +1,34 @@
+export default {
+  data() {
+    return {
+      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置'],
+    }
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+    // tab回调
+    tabChange(i) {
+      this.active = i
+      // 跳转到固定的长页，这里的id不能变
+      let path = '/overviewIntro?id=220'
+      if (i == 1) path = '/overviewDevHistory?id=214'
+      if (i == 2) path = '/overviewTrailer?id=215'
+      if (i == 3) path = '/overviewLocation?id=216'
+      if (i == 4) path = '/overviewSetup?id=217'
+      this.$router.push(path + '&siteId=3')
+    },
+  }
+};
\ No newline at end of file
diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue
index 6129898..1800c14 100644
--- a/src/pages/overviewDevHistory/index.vue
+++ b/src/pages/overviewDevHistory/index.vue
@@ -46,13 +46,13 @@
 
 <script>
 import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
-  mixins: [mixins],
+  mixins: [mixins, overview],
   data() {
     return {
       active: 1,
-      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置'],
       curYear: 0
     }
   },
@@ -60,25 +60,6 @@ export default {
     new WOW().init()
   },
   methods: {
-    // 获取文章详情
-    getInfo() {
-      // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
-    },
-    // tab回调
-    tabChange(i) {
-      this.active = i
-      if (i == 2) this.$router.push('/overviewTrailer?id=165&siteId=3')
-    },
     // 年份点击回调
     yearClick(i) {
       this.curYear = i
diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue
new file mode 100644
index 0000000..f8d6a46
--- /dev/null
+++ b/src/pages/overviewIntro/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
+      </template>
+    </ul>
+
+    <div class="tab-content">
+      <div class="intro">
+        <img class="pic" src="http://10.10.11.7/images/overviewIntro/1.png" alt="">
+        <div class="right">
+          <h6>
+            {{ modules[1].form.title }}
+            <img class="title-bg" src="http://10.10.11.7/images/overviewIntro/2.png" alt="">
+          </h6>
+          <div class="text" v-html="modules[1].form.des"></div>
+        </div>
+      </div>
+      <div class="intro-bg">
+        <div class="mask"></div>
+        <div class="texts">
+          <h6>henzhen Superconducting Soft X-Ray Fre Electron Laser</h6>
+          <div class="des">探索认知微观世界和物质结构的”高速摄像机”</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, overview],
+  data() {
+    return {
+      active: 0,
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap {
+  background: url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+}
+.tabs {
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
+  li {
+    padding: 25px 19px;
+    margin: 0 10px;
+    font-size: 1.1rem;
+    color: #333;
+    border-bottom: 4px solid transparent;
+    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
+    cursor: pointer;
+    &.active {
+      color: #1583FF;
+      border-bottom-color: #1583FF;
+    }
+  }
+}
+.tab-content {
+  padding-top: 150px;
+  .intro {
+    display: flex;
+    margin-bottom: 110px;
+    .pic {
+      width: 40%;
+      margin-right: 50px;
+    }
+    .right {
+      width: 40%;
+    }
+    h6 {
+      position: relative;
+      font-size: 1.2rem;
+      color: #333;
+    }
+    .title-bg {
+      position: absolute;
+      top: -40px;
+      left: -20px;
+    }
+    .text {
+      margin-top: 40px;
+      font-size: 1rem;
+      color: #020202;
+      line-height: 2;
+    }
+  }
+  .intro-bg {
+    position: relative;
+    height: 275px;
+    padding-top: 90px;
+    color: #fff;
+    text-align: center;
+    background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
+    .mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      background-color: rgba(0, 0, 0, .3);
+    }
+    .texts {
+      position: relative;
+    }
+    h6 {
+      margin-bottom: 30px;
+      font-size: 2rem;
+      font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+      font-weight: 800;
+    }
+    .des {
+      font-size: 1.5rem;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .tabs {
+    overflow: hidden;;
+    overflow-x: auto;
+    white-space: normal;
+    justify-content: normal;
+    display: -webkit-box;
+    li {
+      white-space: normal;
+    }
+  }
+  .tab-content{
+    width: 90%;
+    span {
+      font-size: 1.35rem;
+    }
+  }
+ 
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue
index 9fea22b..b736817 100644
--- a/src/pages/overviewLocation/index.vue
+++ b/src/pages/overviewLocation/index.vue
@@ -21,38 +21,20 @@
 
 <script>
 import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
-  mixins: [mixins],
+  mixins: [mixins, overview],
   data() {
     return {
-      active: 3,
-      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
+      active: 3
     }
   },
   mounted() {
     new WOW().init()
   },
   methods: {
-    // 获取文章详情
-    getInfo() {
-      // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
-    },
-    // tab回调
-    tabChange(i) {
-      this.active = i
-      if (i == 2) this.$router.push('/overviewTrailer?id=165&siteId=3')
-    },
+    
   }
 };
 </script>
diff --git a/src/pages/overviewSetup/index.vue b/src/pages/overviewSetup/index.vue
index 21b94e5..2098ca9 100644
--- a/src/pages/overviewSetup/index.vue
+++ b/src/pages/overviewSetup/index.vue
@@ -31,38 +31,20 @@
 
 <script>
 import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
-  mixins: [mixins],
+  mixins: [mixins, overview],
   data() {
     return {
-      active: 4,
-      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
+      active: 4
     }
   },
   mounted() {
     new WOW().init()
   },
   methods: {
-    // 获取文章详情
-    getInfo() {
-      // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
-    },
-    // tab回调
-    tabChange(i) {
-      this.active = i
-      if (i == 2) this.$router.push('/overviewTrailer?id=165&siteId=3')
-    },
+    
   }
 };
 </script>
diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue
index 3c9d081..188fbbe 100644
--- a/src/pages/overviewTrailer/index.vue
+++ b/src/pages/overviewTrailer/index.vue
@@ -27,38 +27,20 @@
 
 <script>
 import mixins from '@/mixins/page'
+import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
-  mixins: [mixins],
+  mixins: [mixins, overview],
   data() {
     return {
-      active: 2,
-      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
+      active: 2
     }
   },
   mounted() {
     new WOW().init()
   },
   methods: {
-    // 获取文章详情
-    getInfo() {
-      // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
-        if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-        }
-      }).catch(err => {})
-    },
-    // tab回调
-    tabChange(i) {
-      this.active = i
-      i == 3 && this.$router.push('/overviewLocation?id=166&siteId=3')
-    },
+    
   }
 };
 </script>
diff --git a/src/router/modules/overviewIntro.js b/src/router/modules/overviewIntro.js
new file mode 100644
index 0000000..5c075d4
--- /dev/null
+++ b/src/router/modules/overviewIntro.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overviewIntro'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};