diff --git a/src/api/index.js b/src/api/index.js
index eb41f22..94051a0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -4,4 +4,5 @@ export default {
   findArticle: `iasf/sysContent/findById`,
   findPage: `iasf/sysColumnLongPage/getLongPageInformation`,
   queryArticle: `iasf/sysContent/pagingQuery`,
+  getRedisCache: `iasf/sysColumnLongPage/getRedisCache`,
 }
\ No newline at end of file
diff --git a/src/mixins/page/index.js b/src/mixins/page/index.js
new file mode 100644
index 0000000..0410a9f
--- /dev/null
+++ b/src/mixins/page/index.js
@@ -0,0 +1,30 @@
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      preview: this.$route.query.preview,
+      modules: [],
+      articles: []
+    }
+  },
+  mounted() {
+    this.getInfo()
+  },
+  methods: {
+    // banner打开链接
+    openLink(item) {
+      const { link } = item
+      let href = link.linkAddress
+      if (link.connectionType !== 2) {
+
+      }
+      if (link.isOpen) {
+        window.open(href)
+      } else {
+        location.href = href
+      }
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index 4a0ffdf..3821847 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -1,113 +1,111 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/about/1.png" alt="">
+    <el-carousel height="480px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">ABOUT</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
     
     <div class="block history gray">
-      <div class="inner">
-        <h2 style="margin-left: 57px">Our History</h2>
+      <div class="inner cursor-pointer" @click="openLink(modules[1].form)">
+        <h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2>
         <div class="texts">
           <div class="left">
-            <h2>Throughout the world, most of the top science and technology innovation centers are distributed</h2>
+            <h2>{{ modules[1].form.subTitle }}</h2>
             <div class="line"></div>
-            <div class="des">
-              Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
-
-              As one of the core cities in the bay area, with the convenient transportation infrastructure.
-            </div>
+            <div class="des">{{ modules[1].form.des }}</div>
           </div>
-          <img class="bg" width="562" height="506" src="@/assets/images/about/2.png" alt="">
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
         </div>
       </div>
     </div>
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">Our Values</h2>
-        <p class="intro">What makes a light chaser</p>
+        <h2 class="b-title">{{ modules[2].form.title }}</h2>
+        <p class="intro">{{ modules[2].form.des }}</p>
         <ul class="card">
-          <li class="item1">
-            <h6>Integrity</h6>
-            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          <li class="item1" @click="openLink(modules[3].form)">
+            <h6>{{ modules[3].form.title }}</h6>
+            <div class="des" v-html="modules[3].form.des"></div>
           </li>
-          <li class="item2">
-            <h6>Adventure </h6>
-            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          <li class="item2" @click="openLink(modules[4].form)">
+            <h6>{{ modules[4].form.title }}</h6>
+            <div class="des" v-html="modules[4].form.des"></div>
           </li>
-          <li class="item3">
-            <h6>Serve </h6>
-            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          <li class="item3" @click="openLink(modules[5].form)">
+            <h6>{{ modules[5].form.title }}</h6>
+            <div class="des" v-html="modules[5].form.des"></div>
           </li>
-          <li class="item4">
-            <h6>Focus on Future </h6>
-            <p class="des">We are open and creative, pursuing scientific management and decision-making</p>
+          <li class="item4" @click="openLink(modules[6].form)">
+            <h6>{{ modules[6].form.title }}</h6>
+            <div class="des" v-html="modules[6].form.des"></div>
           </li>
         </ul>
       </div>
     </div>
 
-    <div class="block" style="padding-bottom: 0">
+    <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">Facts</h2>
-        <p class="intro">Strength in numbers</p>
+        <h2 class="b-title">{{ modules[7].form.title }}</h2>
+        <p class="intro">{{ modules[7].form.des }}</p>
         <ul class="stat">
           <li>
-            <p class="num">2020</p>
-            <p class="text">The year IASF was founded</p>
+            <p class="num">{{ modules[8].form.title }}</p>
+            <p class="text">{{ modules[8].form.des }}</p>
           </li>
           <li>
-            <p class="num">2</p>
-            <p class="text">Facility projects</p>
+            <p class="num">{{ modules[9].form.title }}</p>
+            <p class="text">{{ modules[9].form.des }}</p>
           </li>
           <li>
-            <p class="num">240</p>
-            <p class="text">Employees</p>
+            <p class="num">{{ modules[10].form.title }}</p>
+            <p class="text">{{ modules[10].form.des }}</p>
           </li>
           <li>
-            <p class="num">10</p>
-            <p class="text">Academicians</p>
+            <p class="num">{{ modules[11].form.title }}</p>
+            <p class="text">{{ modules[11].form.des }}</p>
           </li>
           <li>
-            <p class="num">45%</p>
-            <p class="text">Hold doctorates or the highest degree in their field</p>
+            <p class="num">{{ modules[12].form.title }}</p>
+            <p class="text">{{ modules[12].form.des }}</p>
           </li>
           <li>
-            <p class="num">$32B+</p>
-            <p class="text">Facility construction need-based grant aid provided </p>
+            <p class="num">{{ modules[13].form.title }}</p>
+            <p class="text">{{ modules[13].form.des }}</p>
           </li>
         </ul>
       </div>
     </div>
 
+    <div class="plan">
+      <div class="inner cursor-pointer" @click="openLink(modules[14].form)">
+        <img class="pic" :src="modules[14].form.pic" alt="">
+        <div class="texts">
+          <h6>{{ modules[14].form.title }}</h6>
+          <div class="des">{{ modules[14].form.des }}</div>
+          <img src="@/assets/images/arrow-white.png" alt="">
+        </div>
+      </div>
+    </div>
+
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">Govening Board & Leadership</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <h2 class="b-title">{{ modules[15].form.title }}</h2>
+        <p class="intro">{{ modules[15].form.des }}</p>
         <ul class="people">
-          <li>
-            <img class="pic" src="@/assets/images/about/6.png" alt="">
+          <li v-for="(item, i) in modules[16].list" :key="i">
+            <img class="pic" :src="item.pic" alt="">
             <div class="texts">
-              <p class="sub">Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN</p>
-              <h6>Sun Dongbai</h6>
-              <p class="des">Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <div class="texts">
-              <p class="sub">Vice President of the Institute of Advanced Scienc, Shenzhen</p>
-              <h6>Yang Xueming</h6>
-              <p class="des">Dr. Yang is a world-recognized physical chemistry scientist, an Academician of the Chinese Academy of Science, an awardee of the National Science Fund for Distinguished Young Scholars</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-            <img class="pic" src="@/assets/images/about/7.png" alt="">
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/about/8.png" alt="">
-            <div class="texts">
-              <p class="sub">The Chairman of Science and Technology Advisory Committee</p>
-              <h6>Ulf KALSSON</h6>
-              <p class="des">Dr. Ulf Karlsson is a joint professor of Linköping University and KTH Royal Institute of Technology. He established the laboratory of material science and was the director of the materials science platform</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+              <p class="sub">{{ item.title }}</p>
+              <h6>{{ item.subTitle }}</h6>
+              <p class="des">{{ item.des }}</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
             </div>
           </li>
         </ul>
@@ -116,23 +114,23 @@
 
     <div class="block list-block gray">
       <div class="inner">
-        <h2 class="b-title">Committees</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <h2 class="b-title">{{ modules[17].form.title }}</h2>
+        <p class="intro">{{ modules[17].form.des }}</p>
         <ul class="list">
-          <li>
-            <img class="pic" src="@/assets/images/about/9.png" alt="">
-            <h6>Science and Technology</h6>
-            <p class="des">installation and nanostructuring</p>
+          <li @click="openLink(modules[18].form)">
+            <img class="pic" :src="modules[18].form.pic" alt="">
+            <h6>{{ modules[18].form.title }}</h6>
+            <p class="des">{{ modules[18].form.des }}</p>
           </li>
-          <li>
-            <img class="pic" src="@/assets/images/about/10.png" alt="">
-            <h6>User Committee</h6>
-            <p class="des"> installation and nanostructuring</p>
+          <li @click="openLink(modules[19].form)">
+            <img class="pic" :src="modules[19].form.pic" alt="">
+            <h6>{{ modules[19].form.title }}</h6>
+            <p class="des">{{ modules[19].form.des }}</p>
           </li>
-          <li>
-            <img class="pic" src="@/assets/images/about/11.png" alt="">
-            <h6>Industry Advancement Committee</h6>
-            <p class="des">installation and nanostructuring</p>
+          <li @click="openLink(modules[20].form)">
+            <img class="pic" :src="modules[20].form.pic" alt="">
+            <h6>{{ modules[20].form.title }}</h6>
+            <p class="des">{{ modules[20].form.des }}</p>
           </li>
         </ul>
       </div>
@@ -140,14 +138,14 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">Staff & Organization Chart</h2>
-        <p class="intro">Meet the light chaser</p>
-        <div class="staff">
+        <h2 class="b-title">{{ modules[21].form.title }}</h2>
+        <p class="intro">{{ modules[21].form.des }}</p>
+        <div class="staff" @click="openLink(modules[22].form)">
           <div class="left">
-            <h6>Throughout the world, most of the top science and technology innovation centers are distributed</h6>
-            <div class="des">The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.</div>
+            <h6>{{ modules[22].form.title }}</h6>
+            <div class="des">{{ modules[22].form.des }}</div>
           </div>
-          <img class="pic" src="@/assets/images/about/12.png" alt="">
+          <img class="pic" :src="modules[22].form.pic" alt="">
         </div>
       </div>
     </div>
@@ -155,20 +153,14 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      columnId: '',
-      form: {},
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+      
     }
   },
   mounted() {
@@ -177,9 +169,16 @@ export default {
   methods: {
     // 获取文章详情
     getInfo() {
-      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
-        this.form = data
-        this.columnId = data.columnId
+      // 预览/详情
+      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[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json[0])
+        }
       }).catch(err => {})
     },
   }
@@ -228,6 +227,7 @@ export default {
     padding: 70px 67px 20px;
     margin-bottom: 28px;
     color: #fff;
+    cursor: pointer;
     &:nth-child(odd) {
       margin-right: 28px;
     }
@@ -252,11 +252,40 @@ export default {
     font-size: 18px;
   }
 }
+.plan {
+  padding: 73px 0;
+  background: #072947;
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    width: 1575px;
+  }
+  .pic {
+    width: 664px;
+    height: 488px;
+    margin-bottom: -120px;
+  }
+  .texts {
+    width: 802px;
+    margin-top: 36px;
+    color: #fff;
+  }
+  h6 {
+    font-size: 36px;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 20px;
+  }
+}
 .people {
   li {
     display: flex;
     justify-content: space-between;
     margin-bottom: 126px;
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
   }
   .pic {
     width: 660px;
@@ -291,14 +320,20 @@ export default {
   display: flex;
   justify-content: center;
   li {
+    width: calc((100% - 100px) / 3);
     padding-bottom: 30px;
     margin-right: 28px;
     text-align: center;
     background-color: #F5F5F5;
+    cursor: pointer;
     &:last-child {
       margin-right: 0;
     }
   }
+  .pic {
+    width: 100%;
+    height: 353px;
+  }
   h6 {
     margin: 35px 0 5px;
     font-size: 24px;
@@ -313,6 +348,7 @@ export default {
   display: flex;
   justify-content: space-between;
   background: #F8F8F8;
+  cursor: pointer;
   .left {
     width: 658px;
     margin: 50px 0 0 46px;
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index 28f8f7c..6fd030d 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -1,36 +1,57 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/careers/1.png" alt="">
+    <el-carousel height="480px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">CAREERS</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
 
     <div class="block">
       <div class="inner">
         <ul class="card">
           <li>
-            <h6>Research </h6>
-            <p class="text">Positions</p>
+            <img class="pic" :src="modules[1].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[1].form.title }}</h6>
+              <p class="text">{{ modules[1].form.des }}</p>
+            </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="">
+              <img src="@/assets/images/arrow-white.png" alt="" @click="openLink(modules[1].form)">
             </div>
           </li>
           <li>
-            <h6>Engineering </h6>
-            <p class="text">Positions</p>
+            <img class="pic" :src="modules[2].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="text">{{ modules[2].form.des }}</p>
+            </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="">
+              <img src="@/assets/images/arrow-white.png" alt="" @click="openLink(modules[2].form)">
             </div>
           </li>
           <li>
-            <h6>Management Staff </h6>
-            <p class="text">Positions</p>
+            <img class="pic" :src="modules[3].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="text">{{ modules[3].form.des }}</p>
+            </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="">
+              <img src="@/assets/images/arrow-white.png" alt="" @click="openLink(modules[3].form)">
             </div>
           </li>
           <li>
-            <h6>Post-doc Programs </h6>
-            <p class="text">Positions</p>
+            <img class="pic" :src="modules[4].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[4].form.title }}</h6>
+              <p class="text">{{ modules[4].form.des }}</p>
+            </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="">
+              <img src="@/assets/images/arrow-white.png" alt="" @click="openLink(modules[4].form)">
             </div>
           </li>
         </ul>
@@ -39,63 +60,29 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">Profiles</h2>
-        <p class="intro">What makes a light chaser</p>
+        <h2 class="b-title">{{ modules[5].form.title }}</h2>
+        <p class="intro">{{ modules[5].form.des }}</p>
         <ul class="people">
-          <li>
-            <img class="comma" src="@/assets/images/comma.png" alt="">
-            <div class="left">
-              <h6>IASF started its journey to chase light, 
-  push the boundaries forward, and discover the unknown.</h6>
-              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
-            </div>
-            <img class="pic" src="@/assets/images/careers/6.png" alt="">
-          </li>
-          <li>
+          <li v-for="(item, i) in modules[6].list" :key="i">
             <img class="comma" src="@/assets/images/comma.png" alt="">
             <div class="left">
-              <h6>IASF started its journey to chase light, 
-  push the boundaries forward, and discover the unknown.</h6>
-              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
+              <h6>{{ item.title }}</h6>
+              <div class="des">{{ item.des }}</div>
             </div>
-            <img class="pic" src="@/assets/images/careers/7.png" alt="">
-          </li>
-          <li>
-            <img class="comma" src="@/assets/images/comma.png" alt="">
-            <div class="left">
-              <h6>IASF started its journey to chase light, 
-  push the boundaries forward, and discover the unknown.</h6>
-              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
-            </div>
-            <img class="pic" src="@/assets/images/careers/8.png" alt="">
+            <img class="pic" :src="item.pic" alt="">
           </li>
         </ul>
       </div>
     </div>
 
     <ul class="shows">
-      <li>
-        <div class="left">
-          <h6>Benefits</h6>
-          <div class="sub">YOU ARE IN GOOD HANDS</div>
-          <div class="des">We offer the most competitive package to assure the welfare of our people at IAST.</div>
-          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
-        </div>
-      </li>
-      <li>
+      <li v-for="(item, i) in modules[7].list" :key="i">
+        <img class="pic" :src="item.pic" alt="">
         <div class="left">
-          <h6>Traineeships</h6>
-          <div class="sub">YOUR FUTURE STARTS HERE</div>
-          <div class="des">IASF works with research institutions, universities, and others, to provide a pathway for future scientists, engineers, and industry leaders.</div>
-          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
-        </div>
-      </li>
-      <li>
-        <div class="left">
-          <h6>Programs</h6>
-          <div class="sub">YOUR INSPIRATION HAS GREAT SUPPORTS</div>
-          <div class="des">We collect various professional and funding resources to support your dream and ideas, your job is as simple as it looks, go for it!</div>
-          <img class="arrow" src="@/assets/images/arrow-white.png" alt="">
+          <h6>{{ item.title }}</h6>
+          <div class="sub">{{ item.subTitle }}</div>
+          <div class="des">{{ item.des }}</div>
+          <img class="arrow" src="@/assets/images/arrow-white.png" alt="" @click="openLink(item)">
         </div>
       </li>
     </ul>
@@ -103,20 +90,14 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      columnId: '',
-      form: {},
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+      
     }
   },
   mounted() {
@@ -125,9 +106,16 @@ export default {
   methods: {
     // 获取文章详情
     getInfo() {
-      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
-        this.form = data
-        this.columnId = data.columnId
+      // 预览/详情
+      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[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
       }).catch(err => {})
     },
   }
@@ -149,21 +137,20 @@ export default {
     height: 526px;
     margin-right: 14px;
     color: #fff;
-    background: url(../../assets/images/careers/2.png) 0 0/100% 100% no-repeat;
-    cursor: pointer;
     &:hover {
       .arrow {
         opacity: 1;
       }
     }
-    &:nth-child(2) {
-      background-image: url(../../assets/images/careers/3.png);
-    }
-    &:nth-child(3) {
-      background-image: url(../../assets/images/careers/4.png);
+    .pic {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
     }
-    &:nth-child(4) {
-      background-image: url(../../assets/images/careers/5.png);
+    .texts {
+      position: relative;
     }
     h6 {
       margin-bottom: 10px;
@@ -182,10 +169,12 @@ export default {
       background: #36404A;
       opacity: 0;
       transition: .3s;
+      cursor: pointer;
     }
   }
 }
 .people {
+  position: relative;
   li {
     position: relative;
     min-height: 450px;
@@ -231,23 +220,24 @@ export default {
   }
 }
 .shows {
+  position: relative;
   li {
-    
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 654px;
     margin-bottom: 40px;
     color: #fff;
-    background: url(../../assets/images/careers/9.png) 0 0/100% 100% no-repeat;
     &:nth-child(even) {
-      display: flex;
-      justify-content: flex-end;
+      flex-direction: row-reverse;
     }
     &:nth-child(2) {
-      background-image: url(../../assets/images/careers/10.png);
       .left {
         background-color: rgba(47, 79, 23, .65);
       }
     }
     &:nth-child(3) {
-      background-image: url(../../assets/images/careers/11.png);
       .left {
         background-color: rgba(91, 58, 35, .65);
       }
@@ -255,9 +245,14 @@ export default {
   }
   .left {
     width: 43.3%;
+    height: 100%;
     padding: 138px 30px 30px 103px;
     background-color: rgba(54, 54, 54, .65);
   }
+  .pic {
+    width: 56.9%;
+    height: 100%;
+  }
   h6 {
     font-size: 46px;
   }
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 95810cc..3f10e13 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -2,8 +2,8 @@
   <div class="wrap">
     <el-carousel height="959px" :interval="6000">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic" :key="i">
-          <img width="100%" height="959" :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <img class="cursor-pointer" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
         </el-carousel-item>
       </template>
     </el-carousel>
@@ -14,19 +14,19 @@
         <p class="intro">{{ modules[1].form.des }}</p>
         <ul class="card">
           <li>
-            <img width="100%" :src="modules[2].form.pic" alt="">
+            <img class="pic" :src="modules[2].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
               <p class="des">{{ modules[2].form.des }}</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="openLink(modules[2].form)">
             </div>
           </li>
           <li>
-            <img width="100%" :src="modules[3].form.pic" alt="">
+            <img class="pic" :src="modules[3].form.pic" alt="">
             <div class="texts">
               <h6>{{ modules[3].form.title }}</h6>
               <p class="des">{{ modules[3].form.des }}</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="openLink(modules[3].form)">
             </div>
           </li>
         </ul>
@@ -60,19 +60,19 @@
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <p class="des">{{ item.des }}</p>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+              <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
             </div>
           </li>
         </ul>
       </div>
     </div>
 
-    <div class="about">
+    <div class="about" @click="openLink(modules[8].form)">
       <div class="inner">
         <img src="@/assets/images/about.png" alt="">
         <div class="line"></div>
         <div class="text">{{ modules[8].form.title }}</div>
-        <div class="des">{{ modules[8].form.des }}</div>
+        <div class="des" v-html="modules[8].form.des"></div>
       </div>
     </div>
 
@@ -111,31 +111,29 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      modules: [],
-      articles: []
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+      
     }
   },
   mounted() {
-    this.getInfo()
+    
   },
   methods: {
     // 获取文章详情
     getInfo() {
-      this.$post(`${this.api.findPage}?columnId=${this.id}`).then(({ data }) => {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
-          const json = JSON.parse(data[0].jsonBeforeEditing)
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
 
           // 获取文章列表
@@ -166,6 +164,10 @@ export default {
   li {
     width: 660px;
   }
+  .pic {
+    width: 100%;
+    height: 400px;
+  }
   .texts {
     padding-left: 22px;
     margin-top: 60px;
@@ -181,9 +183,6 @@ export default {
     color: #222;
     line-height: 30px;
   }
-  .arrow {
-    cursor: pointer;
-  }
 }
 
 .news-block {
@@ -281,6 +280,7 @@ export default {
 .about {
   padding: 77px 0 198px;
   background: url(../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
+  cursor: pointer;
   .line {
     display: flex;
     align-items: center;
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
index fc5d38a..4eb9fec 100644
--- a/src/pages/newsPress/index.vue
+++ b/src/pages/newsPress/index.vue
@@ -1,35 +1,26 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/news/1.png" alt="">
+    <el-carousel height="480px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">NEWS & EVENTS</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
 
     <div class="block">
       <div class="inner">
         <ul class="list">
-          <li>
-            <img class="pic" src="@/assets/images/newsPress/1.png" alt="">
+          <li v-for="(item, i) in modules[1].list" :key="i">
+            <img class="pic" :src="item.pic" alt="">
             <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
-              <img src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/newsPress/2.png" alt="">
-            <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
-              <img src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/newsPress/3.png" alt="">
-            <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
-              <img src="@/assets/images/arrow.png" alt="">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
             </div>
           </li>
         </ul>
@@ -39,43 +30,34 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      active: 1,
-      tabs: [
-        {
-          id: 1,
-          name: 'General news'
-        },
-        {
-          id: 2,
-          name: 'Research news'
-        },
-        {
-          id: 3,
-          name: 'Journal covers'
-        },
-      ]
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+
     }
   },
   mounted() {
     
   },
   methods: {
-    // tab回调
-    tabChange(item) {
-      this.active = item.id
-    }
+    // 获取文章详情
+    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[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
   }
 };
 </script>
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index d79fc41..ae2cd23 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -33,6 +33,26 @@
     width: 1505px;
   }
 }
+.banner-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  .banner-name {
+    position: absolute;
+    bottom: 87px;
+    left: 213px;
+    font-size: 48px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
 .gray {
   background-color: #F2F6F8;
+}
+.arrow {
+  cursor: pointer;
 }
\ No newline at end of file