diff --git a/src/assets/images/device/13.png b/src/assets/images/device/13.png
new file mode 100644
index 0000000..f3d5bc5
Binary files /dev/null and b/src/assets/images/device/13.png differ
diff --git a/src/assets/images/device/14.png b/src/assets/images/device/14.png
new file mode 100644
index 0000000..4754bad
Binary files /dev/null and b/src/assets/images/device/14.png differ
diff --git a/src/assets/images/device/15.png b/src/assets/images/device/15.png
new file mode 100644
index 0000000..2c88e28
Binary files /dev/null and b/src/assets/images/device/15.png differ
diff --git a/src/assets/images/device/4.png b/src/assets/images/device/4.png
index 7de7688..83220c8 100644
Binary files a/src/assets/images/device/4.png and b/src/assets/images/device/4.png differ
diff --git a/src/const/column.js b/src/const/column.js
index 92c85b4..e5bc11e 100644
--- a/src/const/column.js
+++ b/src/const/column.js
@@ -22,52 +22,43 @@
       name: '子级优先栏目'
     }
   ],
-  // 长页样式
-  pageStyle: [
+  // 出版物类型
+  publicationTypes: [
     {
       id: 1,
-      path: 'home',
-      name: 'HOME'
+      name: '科技图书'
     },
     {
       id: 2,
-      path: 'about',
-      name: 'ABOUT'
+      name: '科技期刊'
     },
     {
       id: 3,
-      path: 'careers',
-      name: 'CAREERS'
+      name: '专利文献'
     },
     {
       id: 4,
-      path: 'edu',
-      name: 'EDUCATION & COLLABORATION'
+      name: '会议文献'
     },
     {
       id: 5,
-      path: 'news',
-      name: 'NEWS&EVENTS'
+      name: '科技报告'
     },
     {
       id: 6,
-      path: 'newsPress',
-      name: 'NEWS&EVENTS-PRESS ROOM'
+      name: '政府出版物'
     },
     {
       id: 7,
-      path: 'newsProcurement',
-      name: 'NEWS&EVENTS-PROCUREMENT'
+      name: '学位论文'
     },
     {
       id: 8,
-      path: 'research',
-      name: 'RESEARCH'
+      name: '标准文献'
     },
     {
       id: 9,
-      path: 'application',
-      name: 'APPLICATION'
+      name: '产品资料和其它'
     }
   ],
 }
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 0b3b88e..7cc9d23 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -101,11 +101,14 @@ export default {
             name: data.title
           }
         ]
+        // 文章被禁用了就直接返回
         if (data.isDisable) {
           this.$router.back()
         } else {
-          if (data.articleTemplate === 25) { // 会议活动
-            this.$router.replace(`/article/activity?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`)
+          const temId = data.articleTemplate
+          let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
+          if (temId === 25 || temId === 26) { // 会议活动/期刊详情
+            this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
           } else {
             this.form = data
             this.columnId = data.columnId
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index d6565ce..d904352 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -338,6 +338,11 @@ export default {
       const { typeId } = to
       // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
       if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false
+      // 出版物则跳转到出版物列表
+      if (to.templateId === 8) {
+        this.$router.replace(`/publish?id=${this.id}&siteId=${this.$route.query.siteId || this.site}`)
+        return
+      }
       // 跳转链接
       if (typeId === 2) {
         let href = to.linkAddress
@@ -434,6 +439,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.l-title {
+  font-weight: 600;
+}
 .banner {
   position: relative;
   height: 280px;
diff --git a/src/pages/device/beam.vue b/src/pages/device/beam.vue
index 7ec9283..07aafc6 100644
--- a/src/pages/device/beam.vue
+++ b/src/pages/device/beam.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
-      <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
-            <p class="banner-name">{{ item.title }}</p>
-          </div>
-        </el-carousel-item>
-      </template>
-    </el-carousel>
+    <div class="banner">装置介绍</div>
 
     <div class="block share">
       <div class="inner">
@@ -18,8 +9,7 @@
         <div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div>
         <div class="flex">
           <div class="left">
-            <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。
-  </div>
+            <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
           </div>
           <img class="pic" src="@/assets/images/device/1.png" alt="">
         </div>
@@ -40,67 +30,19 @@
 
 <script>
 import mixins from '@/mixins/page'
-import Setting from '@/setting'
-import Util from '@/libs/util'
-import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
     return {
-      routes: []
+      
     }
   },
-  components: {
-    Breadcrumb
-  },
   mounted() {
     new WOW().init()
-    this.getColumn()
   },
   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 => {})
-    },
-    // 获取父级所有栏目名称和id
-    getParent(data, id) {
-      for (const e of data) {
-        if (e.id == id) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          break
-        } else if (e.children.length) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          this.getParent(e.children, id)
-        }
-      }
-    },
-    // 获取上级面包屑
-    getColumn() {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
-        this.getParent(data, this.id)
-      }).catch(err => {})
-    },
+    
   }
 };
 </script>
@@ -109,7 +51,10 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
 .wrap {
-  background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
+  background: url(../../assets/images/device/4.png) (100% 1363px)/auto no-repeat;
+}
+.banner {
+  background: url(../../assets/images/device/13.png) 0 0/100% 100% no-repeat;
 }
 .share {
   position: relative;
diff --git a/src/pages/device/layout.vue b/src/pages/device/layout.vue
index 64e9037..5560704 100644
--- a/src/pages/device/layout.vue
+++ b/src/pages/device/layout.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
-      <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
-            <p class="banner-name">{{ item.title }}</p>
-          </div>
-        </el-carousel-item>
-      </template>
-    </el-carousel>
+    <div class="banner">装置介绍</div>
 
     <div class="block share">
       <div class="inner">
@@ -110,10 +101,14 @@ export default {
 .wrap {
   background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
 }
+.banner {
+  background: url(../../assets/images/device/14.png) 0 0/100% 100% no-repeat;
+}
 .share {
   position: relative;
   .inner {
-    width: 1323px;
+    width: 90%;
+    max-width: 1323px;
   }
   .left {
     width: 547px;
@@ -138,8 +133,7 @@ export default {
     left: 0;
     max-width: 1671px;
     width: 90%;
-    height: 171px;
-    padding-left: 20%;
+    padding: 32px 52px 25px 16%;
     font-size: 24px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
@@ -173,6 +167,7 @@ export default {
     position: absolute;
     top: 67px;
     left: 15%;
+    width: 74%;
   }
 }
 .unit {
diff --git a/src/pages/device/super.vue b/src/pages/device/super.vue
index 80e805a..801246e 100644
--- a/src/pages/device/super.vue
+++ b/src/pages/device/super.vue
@@ -1,27 +1,18 @@
 <template>
   <div class="wrap">
-    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
-      <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
-            <p class="banner-name">{{ item.title }}</p>
-          </div>
-        </el-carousel-item>
-      </template>
-    </el-carousel>
+    <div class="banner">装置介绍</div>
 
     <div class="block history gray">
       <div class="inner">
-        <h2 class="wow fadeInLeft">{{ modules[1].form.title }}</h2>
+        <h2 class="wow fadeInLeft">超导直线加速器-1</h2>
         <p class="en">Superconducting linac -1</p>
         <div class="texts wow fadeInDown" data-wow-delay="0.5s">
           <div class="left">
-            <h6>{{ modules[1].form.subTitle }}</h6>
+            <h6>S³FEL的光阴极注入器/电子枪利用光电效应产生高亮度电子束团，并将其加速到90 MeV。</h6>
             <div class="line"></div>
-            <div class="des">{{ modules[1].form.des }}</div>
+            <div class="des">主加速器基于超导连续波工作模式，采用三级加速、两级压缩的结构，将电子束团能量提高到2.5 GeV；同时在保持横向发射度不变的情况下，将电子束长度从几皮秒压缩到几十飞秒，峰值流强提升到800 A以上。相比基于常温加速技术的高增益FEL，超导直线加速器技术可以有效提高电子束流的重复频率，实现最高每秒106脉冲输出（常温加速技术为~102脉冲/秒），进而大幅度提高FEL激光的平均功率。</div>
           </div>
-          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+          <img class="bg" src="@/assets/images/device/10.png" alt="">
         </div>
       </div>
     </div>
@@ -43,67 +34,19 @@
 
 <script>
 import mixins from '@/mixins/page'
-import Setting from '@/setting'
-import Util from '@/libs/util'
-import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
   data() {
     return {
-      routes: []
+      
     }
   },
-  components: {
-    Breadcrumb
-  },
   mounted() {
     new WOW().init()
-    this.getColumn()
   },
   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 => {})
-    },
-    // 获取父级所有栏目名称和id
-    getParent(data, id) {
-      for (const e of data) {
-        if (e.id == id) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          break
-        } else if (e.children.length) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          this.getParent(e.children, id)
-        }
-      }
-    },
-    // 获取上级面包屑
-    getColumn() {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
-        this.getParent(data, this.id)
-      }).catch(err => {})
-    },
+    
   }
 };
 </script>
@@ -111,7 +54,14 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
+.banner {
+  background: url(../../assets/images/device/15.png) 0 0/100% 100% no-repeat;
+}
 .history {
+  .inner {
+    width: 90%;
+    max-width: 1504px;
+  }
   h2 {
     position: relative;
     font-size: 48px;
@@ -139,7 +89,7 @@ export default {
     }
   }
   .left {
-    width: 695px;
+    width: 50%;
   }
   h6 {
     font-size: 28px;
@@ -147,23 +97,32 @@ export default {
     font-weight: 500;
     color: #FFFFFF;
   }
+  .line {
+    width: 214px;
+    height: 5px;
+    margin: 54px 0 44px;
+    background: #FFFFFF;
+    opacity: 0.52;
+  }
   .des {
-    margin: 20px 0;
     font-size: 22px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #FFFFFF;
     line-height: 44px;
+    overflow: visible;
   }
   .bg {
-    margin: -122px -30px 0 0;
+    width: 50%;
+    margin: -142px -50px 0 0;
     border-top-left-radius: 30px;
   }
 }
 .intro {
   .inner {
     display: flex;
-    width: 1506px;
+    width: 90%;
+    max-width: 1504px;
   }
   .left {
     width: 30%;
@@ -190,6 +149,7 @@ export default {
   }
   img {
     width: 100%;
+    height: 85%;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index 430bc1a..07803fa 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -19,7 +19,7 @@
 
     <div class="block">
       <div class="inner" v-if="modules[1].list[curColumn].articles.length">
-        <div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
+        <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
           <img width="50%" height="410" :src="curArticle.titleImg" alt="">
           <div class="right">
             <h6>{{ curArticle.title }}</h6>
@@ -53,7 +53,7 @@
         <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <div class="shop-shows" v-if="articles.length">
           <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
-            <img width="100%" height="400" :src="articles[0].titleImg" alt="">
+            <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
               <div class="des" v-html="articles[0].mainBody"></div>
@@ -301,7 +301,7 @@ export default {
     left: 804px;
   }
 }
-.banner {
+.news-banner {
   display: flex;
   cursor: pointer;
   .pic {
@@ -414,6 +414,12 @@ export default {
     margin-right: 20px;
     background-color: #fff;
     cursor: pointer;
+    .pic {
+      transition: .3s;
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
     .texts {
       padding: 40px 30px;
     }
@@ -444,6 +450,10 @@ export default {
     .pic {
       width: 401px;
       height: 197px;
+      transition: .3s;
+      &:hover {
+        transform: scale(1.05);
+      }
     }
     .des {
       position: absolute;
diff --git a/src/pages/publish/index.vue b/src/pages/publish/index.vue
index 40204cd..19c6f63 100644
--- a/src/pages/publish/index.vue
+++ b/src/pages/publish/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <div class="banner">
+    <div v-if="info.columnBanner" class="banner">
       <img width="100%" height="280" :src="info.columnBanner" alt="">
       <div class="texts">
         <p class="text">{{ info.columnName }}</p>
@@ -10,22 +10,15 @@
 
     <div class="inner">
       <ul class="tabs">
-        <li v-for="(item, i) in tabs" :key="i" :class="{active: active === i}">{{ item }}</li>
+        <li v-for="(item, i) in tabs" :key="i" :class="{active: active === i}" @click="tabChange(i)">{{ item }}</li>
       </ul>
 
       <ul class="list">
-        <li>
-          <img class="pic" src="@/assets/images/about-bg.png" alt="">
+        <li v-for="(item, i) in list" :key="i">
+          <img class="pic" :src="item.titleImg" alt="">
           <div class="texts">
-            <h6>研究院与深大签约共建产学研专用线基本站建设</h6>
-            <div class="des">智能电网被设想为适应分布式光伏 ( PV ) 发电的高渗透率，这可能会在电压违规方面造成不利的电网影响。因此，PV Hosting 容量被用作规划工具，以确定导致第一次电压违规及以上需要基础设施升级的最大光伏安装容量。传统的托管容量分析方法基于场景且计算复杂，因为它们依赖迭代潮流算法，需要调查…</div>
-          </div>
-        </li>
-        <li>
-          <img class="pic" src="@/assets/images/about-bg.png" alt="">
-          <div class="texts">
-            <h6>研究院与深大签约共建产学研专用线基本站建设</h6>
-            <div class="des">智能电网被设想为适应分布式光伏 ( PV ) 发电的高渗透率，这可能会在电压违规方面造成不利的电网影响。因此，PV Hosting 容量被用作规划工具，以确定导致第一次电压违规及以上需要基础设施升级的最大光伏安装容量。传统的托管容量分析方法基于场景且计算复杂，因为它们依赖迭代潮流算法，需要调查…</div>
+            <h6>{{ item.title }}</h6>
+            <div v-html="item.quote" class="des"></div>
           </div>
         </li>
       </ul>
@@ -34,7 +27,7 @@
 </template>
 
 <script>
-import mixins from '@/mixins/page'
+import mixins from '@/mixins/article'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
@@ -43,20 +36,39 @@ export default {
     return {
       info: {},
       active: 0,
-      tabs: ['发表论文', '申请专利']
+      tabs: ['发表论文', '申请专利'],
+      list: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
     }
   },
   mounted() {
     this.getInfo()
+    this.getArticle()
   },
   methods: {
     // 获取栏目详情
     getInfo() {
       this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
-        if (!data.columnBanner) data.columnBanner = require('@/assets/images/publish-bg.png')
         this.info = data
       }).catch(res => {})
     },
+    // 查询文章列表
+    getArticle() {
+      this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.site,
+        columnIds: [this.id],
+        pageNum: this.page,
+        pageSize: this.pageSize,
+      }).then(({ data }) => {
+        this.list = Util.removeTag(data.records)
+        this.total = +data.total
+      }).catch(res => {})
+    },
+    tabChange(i) {
+      this.active = i
+    }
   }
 };
 </script>
@@ -68,11 +80,10 @@ export default {
 .banner {
   position: relative;
   height: 280px;
-  
   color: #fff;
   .texts {
     position: absolute;
-    top: 123px;
+    top: 80px;
     left: 243px;
   }
   .text {
diff --git a/src/pages/publish/show.vue b/src/pages/publish/show.vue
index 34c5f4d..11d9368 100644
--- a/src/pages/publish/show.vue
+++ b/src/pages/publish/show.vue
@@ -8,19 +8,19 @@
           <p class="name">作者</p>
           <p class="val">{{ form.author }}</p>
           <p class="name">引用</p>
-          <p class="val">{{ form.author }}</p>
+          <p class="val">{{ form.quote }}</p>
           <p class="name">摘要</p>
-          <div class="des" v-html="form.summary"></div>
+          <div class="des" v-html="form.mainBody"></div>
         </div>
         <div class="right">
           <img class="pic" src="@/assets/images/publish3.png" alt="">
           <div class="texts">
             <p class="name">出版年份</p>
-            <p class="val">2022年</p>
+            <p class="val">{{ form.publicationYear }}年</p>
             <p class="name">出版物类型</p>
-            <p class="val">2022年</p>
+            <p class="val">{{ form.publicationTypeId && publicationTypes.find(e => e.id == form.publicationTypeId).name }}</p>
             <p class="name">DOI</p>
-            <p class="val">2022年</p>
+            <p class="val">{{ form.doi }}</p>
             <p class="name">其他字段</p>
             <p class="val">2022年</p>
           </div>
@@ -35,11 +35,13 @@ import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
 import mixins from '@/mixins/article'
+import ColumnConst from '@/const/column'
 export default {
   mixins: [mixins],
   data() {
     return {
       id: this.$route.query.articleId,
+      publicationTypes: ColumnConst.publicationTypes,
       routes: [],
       columnId: '',
       form: {},
diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue
index 9a092ee..a48843b 100644
--- a/src/pages/sfel/index.vue
+++ b/src/pages/sfel/index.vue
@@ -257,6 +257,15 @@
         </ul>
       </div>
     </div>
+
+    <div class="tools">
+      <div class="logo">
+        <img src="@/assets/images/logo.png" alt="">
+      </div>
+      <ul class="nav">
+        <li v-for="(item, i) in columns" :key="i" class="column">{{ item.columnName }}</li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -269,6 +278,7 @@ export default {
   mixins: [mixins],
   data() {
     return {
+      columns: [],
       curColumn: 0,
       articles: [],
       articles1: [],
@@ -279,6 +289,7 @@ export default {
   },
   mounted() {
     new WOW().init()
+    this.getColumn()
   },
   methods: {
     // 获取文章详情
@@ -388,11 +399,18 @@ export default {
         this.curColumn = i
       }
     },
-    // 跳转more
-    toMore() {
-      const { column } = this.modules[1].list[this.curColumn]
-      column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
-    }
+    // 资讯
+    getColumn() {
+      this.$post(this.api.listWithTreeMenuVisible, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnName: '',
+        templateId: '',
+        typeId	: '',
+        isSort: 1
+      }).then(({ data }) => {
+        this.columns = data
+      }).catch(err => {})
+    },
   }
 };
 </script>
@@ -918,6 +936,32 @@ export default {
     }
   }
 }
+.tools {
+  position: absolute;
+  top: 600px;
+  left: 0;
+  width: 226px;
+  text-align: center;
+  .logo {
+    padding: 44px 0;
+    background: #0C60BE;
+    box-shadow: 0px 0px 20px 0px rgba(184,191,200,0.3);
+  }
+  .nav {
+    li {
+      padding: 0 10px;
+      font-size: 24px;
+      line-height: 83px;
+      color: #fff;
+      background-color: #1D1D1D;
+      cursor: pointer;
+      @include ellipsis;
+      &.active {
+        background-color: #1583FF;
+      }
+    }
+  }
+}
 @media (max-width: 1520px) {
   .lg {
     width: 98%;
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index 7102671..de3c740 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -35,6 +35,12 @@
   width: 1400px;
   margin: 0 auto;
 }
+.banner {
+  height: 280px;
+  padding: 123px 0 0 243px;
+  font-size: 48px;
+  color: #fff;
+}
 .banner-item {
   position: relative;
   width: 100%;