From 640f4602951d3e1fef283b44f79677d09dddb716 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 25 May 2023 16:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E9=A1=B5=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8A=BD=E7=A6=BB=E6=88=90=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8Cmedia=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rightColumns/index.vue  |  133 ++
 src/pages/article/activity.vue         |  259 +--
 src/pages/article/index.vue            |  396 ++--
 src/pages/column/index.vue             | 2050 +++++++++---------
 src/pages/contactUs/index.vue          |  183 ++
 src/pages/estate/orgSetup/index.vue    |    6 +-
 src/pages/lightSources/index.vue       |  116 +
 src/pages/news/index.vue               | 2684 ++++++++++++------------
 src/pages/overviewDevHistory/index.vue |   34 -
 src/pages/overviewIntro/index.vue      |  447 ++--
 src/pages/overviewLocation/index.vue   |  266 +--
 src/pages/overviewSetup/index.vue      |   34 -
 src/pages/overviewTrailer/index.vue    |  304 +--
 src/pages/speech/index.vue             |  121 ++
 src/pages/talentCentre/index.vue       |  300 +++
 src/router/modules/contactUs.js        |   14 +
 src/router/modules/lightSources.js     |   14 +
 src/router/modules/speech.js           |   14 +
 src/router/modules/talentCentre.js     |   14 +
 src/styles/page/page.scss              |   31 +-
 20 files changed, 3867 insertions(+), 3553 deletions(-)
 create mode 100644 src/components/rightColumns/index.vue
 create mode 100644 src/pages/contactUs/index.vue
 create mode 100644 src/pages/lightSources/index.vue
 create mode 100644 src/pages/speech/index.vue
 create mode 100644 src/pages/talentCentre/index.vue
 create mode 100644 src/router/modules/contactUs.js
 create mode 100644 src/router/modules/lightSources.js
 create mode 100644 src/router/modules/speech.js
 create mode 100644 src/router/modules/talentCentre.js

diff --git a/src/components/rightColumns/index.vue b/src/components/rightColumns/index.vue
new file mode 100644
index 0000000..d25eb7e
--- /dev/null
+++ b/src/components/rightColumns/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="right">
+    <el-tree class="column"
+             ref="column"
+             :data="columns"
+             highlight-current
+             :expand-on-click-node="false"
+             :props="defaultProps"
+             node-key="id"
+             @node-click="columnTo"></el-tree>
+
+    <p class="l-title">{{$t('column.hot')}}</p>
+    <ul class="list">
+      <li v-for="(item, i) in hots"
+          :key="i"
+          :title="item.title"
+          @click="toArtice(item)">
+        <p class="text">{{ item.title }}</p>
+        <span class="date">{{ item.releaseTime }}</span>
+      </li>
+    </ul>
+
+    <p class="l-title">{{$t('column.latestNews')}}</p>
+    <ul class="list">
+      <li v-for="(item, i) in news"
+          :key="i"
+          :title="item.title"
+          @click="toArtice(item)">
+        <p class="text">{{ item.title }}</p>
+        <span class="date">{{ item.releaseTime }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util'
+import mixins from '@/mixins/article'
+export default {
+  props: {},
+  mixins: [mixins],
+  data () {
+    return {
+      columns: [],
+      defaultProps: {
+        value: 'id',
+        label: 'columnName'
+      },
+      news: [],
+      hots: []
+    }
+  },
+  mounted () {
+    this.getColumn()
+  },
+  methods: {
+    // 资讯
+    getColumn () {
+      this.$post(this.api.listWithTreeMenuVisible, {
+        siteId: this.site,
+        columnName: '',
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      }).then(({ data }) => {
+        this.columns = data
+        this.$parent.getInfo && this.$parent.getInfo()
+      }).catch(err => { })
+
+      this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => { })
+
+      this.$post(this.api.newlyPublishedArticles, {
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => { })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.right {
+    width: 20%;
+    /deep/ .el-tree-node__label {
+        font-size: 0.78rem;
+    }
+}
+.column {
+    width: 100%;
+    margin-bottom: 1.56rem;
+
+    .el-tree-node:focus > .el-tree-node__content {
+        background-color: #e5edf8;
+    }
+    /deep/.el-tree-node__content {
+        height: 2.75rem;
+        background-color: #e5edf8;
+        border-bottom: 2px solid #fff;
+    }
+    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        color: #fff;
+        background-color: #0f5698;
+    }
+}
+.list {
+    margin-bottom: 20px;
+    li {
+        padding: 16px 0;
+        border-bottom: 1px solid #d8d8d8;
+    }
+    .text {
+        margin-bottom: 5px;
+        font-size: 14px;
+        cursor: pointer;
+        &:hover {
+            color: $main-color;
+        }
+    }
+    .date {
+        font-size: 12px;
+        color: #999;
+    }
+}
+@media (max-width: 1200px) {
+    .right {
+        width: 100%;
+    }
+}
+</style>
diff --git a/src/pages/article/activity.vue b/src/pages/article/activity.vue
index 8e7c389..8979602 100644
--- a/src/pages/article/activity.vue
+++ b/src/pages/article/activity.vue
@@ -1,51 +1,42 @@
 <template>
   <div class="wrap">
     <div class="content">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
           <div class="meta">{{$t('column.time')}}：{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
-          <div v-if="form.offlineLocation" class="meta">{{$t('column.address')}}：{{ form.offlineLocation }}</div>
-          <div v-if="form.onlineLocation" class="meta">{{$t('column.online')}}：{{ form.onlineLocation }}</div>
-          <div v-if="form.offlineLocation" class="meta">{{$t('column.offline')}}：{{ form.offlineLocation }}</div>
-          <div v-if="form.keynoteSpeaker" class="meta">{{$t('column.speaker')}}：{{ form.keynoteSpeaker }}</div>
-          <div v-if="form.lectureSeries" class="meta">{{$t('column.series')}}：{{ form.lectureSeries }}</div>
+          <div v-if="form.offlineLocation"
+               class="meta">{{$t('column.address')}}：{{ form.offlineLocation }}</div>
+          <div v-if="form.onlineLocation"
+               class="meta">{{$t('column.online')}}：{{ form.onlineLocation }}</div>
+          <div v-if="form.offlineLocation"
+               class="meta">{{$t('column.offline')}}：{{ form.offlineLocation }}</div>
+          <div v-if="form.keynoteSpeaker"
+               class="meta">{{$t('column.speaker')}}：{{ form.keynoteSpeaker }}</div>
+          <div v-if="form.lectureSeries"
+               class="meta">{{$t('column.series')}}：{{ form.lectureSeries }}</div>
 
           <h6>{{$t('column.ActivityIntroduction')}}</h6>
           <div> {{ form.eventProfile }}</div>
 
           <h6>{{$t('column.content')}}</h6>
           <div v-html="form.mainBody"></div>
-          <div v-if="form.fileList && form.fileList.length" class="annex">
+          <div v-if="form.fileList && form.fileList.length"
+               class="annex">
             <h6>{{$t('column.attachmentDownload')}}</h6>
             <ul class="files">
-              <li v-for="(file, i) in form.fileList" :key="i">
+              <li v-for="(file, i) in form.fileList"
+                  :key="i">
                 <span class="name">{{ file.fileName }}</span>
-                <span class="download" @click="download(file)">{{$t('column.download')}}</span>
+                <span class="download"
+                      @click="download(file)">{{$t('column.download')}}</span>
               </li>
             </ul>
           </div>
         </div>
-        <div class="right">
-          <el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
-
-          <p class="l-title">{{$t('column.hot')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <p class="l-title">{{$t('column.latestNews')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in news" :key="i" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-        </div>
+        <RightColumns ref="right" />
       </div>
     </div>
   </div>
@@ -55,10 +46,11 @@
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
+import RightColumns from '@/components/rightColumns'
 import mixins from '@/mixins/article'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       id: this.$route.query.articleId,
       columnId: '',
@@ -75,21 +67,22 @@ export default {
     }
   },
   components: {
-    Breadcrumb
+    Breadcrumb,
+    RightColumns
   },
   watch: {
-    '$route'() {
+    '$route' () {
       this.id = this.$route.query.articleId
       this.getInfo()
     }
   },
-  mounted() {
+  mounted () {
     this.getColumn()
     this.getArticle()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
         // 设置面包屑
         const { columnName, path, id } = this.$route.query
@@ -109,13 +102,13 @@ export default {
         this.columnId = data.columnId
         data.bannerImg || this.getBanner(this.columns)
         if (this.columnBanner) this.form.bannerImg = this.columnBanner
-      }).catch(err => {})
-      
+      }).catch(err => { })
+
       // 浏览量+1
-      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
+      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
     },
     // 获取banner 规则：当前文章有上传的，用上传的，没有上传的栏目有图片，读取上级栏目的（上级没有读上上级，以此类推）都没有的读取默认的
-    getBanner(data) {
+    getBanner (data) {
       this.columnBanner = ''
       for (const e of data) {
         if (e.columnBanner) this.columnBanner = e.columnBanner
@@ -127,34 +120,34 @@ export default {
       }
     },
     // 资讯
-    getColumn() {
+    getColumn () {
       this.$post(this.api.listWithTreeMenuVisible, {
         siteId: this.site,
         columnName: '',
         templateId: '',
-        typeId	: '',
+        typeId: '',
         isSort: 1
       }).then(({ data }) => {
         this.columns = data
         this.getInfo()
-      }).catch(err => {})
-      
+      }).catch(err => { })
+
       this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
         this.hots = Util.removeTag(data)
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 最新资讯
-    getArticle() {
+    getArticle () {
       this.$post(this.api.newlyPublishedArticles, {
         pageNum: 1,
         pageSize: 5,
         siteId: this.site
       }).then(({ data }) => {
         this.news = Util.removeTag(data.records)
-      }).catch(res => {})
+      }).catch(res => { })
     },
     // 下载附件
-    download(e) {
+    download (e) {
       Util.downloadFile(e.fileName, e.filePath)
     }
   }
@@ -162,132 +155,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./editor.css";
+@import './editor.css';
 .content {
-  width: 1400px;
+    width: 1400px;
 }
 .banner {
-  height: 280px;
-  padding: 123px 0 0 243px;
-  font-size: 48px;
-  color: #fff;
-  background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
+    height: 280px;
+    padding: 123px 0 0 243px;
+    font-size: 48px;
+    color: #fff;
+    background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
 }
 .article {
-  display: flex;
-  justify-content: space-between;
-  .left {
-    width: 66%;
-  }
-  h2 {
-    margin-bottom: 20px;
-    font-size: 36px;
-    color: #1C1C1C;
-  }
-  .meta {
-    margin: 10px 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-  }
-  /deep/.des {
-    img {
-      max-width: 100%;
-    }
-  }
-  .annex {
-    margin-top: 30px;
-    h6 {
-      padding-left: 8px;
-      margin-bottom: 20px;
-      font-size: 16px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      line-height: 1;
-      color: #333;
-      border-left: 4px solid #1583FF;
-    }
-    li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 66%;
     }
-    .name {
-      margin-right: 8px;
-      font-size: 14px;
+    h2 {
+        margin-bottom: 20px;
+        font-size: 36px;
+        color: #1c1c1c;
     }
-    .download {
-      color: #1583FF;
-      cursor: pointer;
+    .meta {
+        margin: 10px 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
     }
-  }
-  h6 {
-    margin: 30px 0 10px;
-    font-size: 18px;
-  }
-  .right {
-    width: 20%;
-  }
-  .column {
-    width: 100%;
-    margin-bottom: 25px;
-  }
-  /deep/.el-tree-node__content {
-    height: 44px;
-    background-color: #E5EDF8;
-    border-bottom: 2px solid #fff;
-  }
-  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    color: #fff;
-    background-color: #0f5698;
-  }
-  .list {
-    margin-bottom: 20px;
-    li {
-      padding: 16px 0;
-      border-bottom: 1px solid #D8D8D8;
+    /deep/.des {
+        img {
+            max-width: 100%;
+        }
     }
-    .text {
-      margin-bottom: 5px;
-      font-size: 14px;
-      cursor: pointer;
-      &:hover {
-        color: $main-color;
-      }
+    .annex {
+        margin-top: 30px;
+        h6 {
+            padding-left: 8px;
+            margin-bottom: 20px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            line-height: 1;
+            color: #333;
+            border-left: 4px solid #1583ff;
+        }
+        li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .name {
+            margin-right: 8px;
+            font-size: 14px;
+        }
+        .download {
+            color: #1583ff;
+            cursor: pointer;
+        }
     }
-    .date {
-      font-size: 12px;
-      color: #999;
+    h6 {
+        margin: 30px 0 10px;
+        font-size: 18px;
     }
-  }
 }
 @media (max-width: 1420px) {
-  .content {
-    width: 98%;
-  }
+    .content {
+        width: 98%;
+    }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
-  .banner {
-    height: 15rem;
-  }
-  .article{
-    flex-direction: column;
-    .left{
-      width: 100%;
-      h2 {
-        font-size: 1.5rem;
-      }
+@media (max-width: 1200px) {
+    .banner {
+        height: 15rem;
     }
-    .right{
-      width: 100%;
-      .el-tree{
-        display: none;
-      }
+    .article {
+        flex-direction: column;
+        .left {
+            width: 100%;
+            h2 {
+                font-size: 1.5rem;
+            }
+        }
     }
-  }
 }
-
-
-
 </style>
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 07f78af..ebe1c4f 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -1,46 +1,36 @@
 <template>
-  <div v-show="loaded" class="wrap">
-    <div v-if="form.articleTemplate !== 23" class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
+  <div v-show="loaded"
+       class="wrap">
+    <div v-if="form.articleTemplate !== 23"
+         class="banner"
+         :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
       {{ form.columnName }}
     </div>
     <div class="content">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
           <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} {{$t('column.views')}} | {{ form.releaseTime }}</div>
           <div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label }}</div>
           <p class="brief">{{ form.summary }}</p>
-          <div class="des" v-html="form.mainBody"></div>
-          <div v-if="form.fileList && form.fileList.length" class="annex">
+          <div class="des"
+               v-html="form.mainBody"></div>
+          <div v-if="form.fileList && form.fileList.length"
+               class="annex">
             <h6>{{$t('column.attachmentDownload')}}</h6>
             <ul class="files">
-              <li v-for="(file, i) in form.fileList" :key="i">
+              <li v-for="(file, i) in form.fileList"
+                  :key="i">
                 <span class="name">{{ file.fileName }}</span>
-                <span class="download" @click="download(file)">{{$t('column.download')}}</span>
+                <span class="download"
+                      @click="download(file)">{{$t('column.download')}}</span>
               </li>
             </ul>
           </div>
         </div>
-        <div class="right">
-          <el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
-
-          <p class="l-title">{{$t('column.hot')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <p class="l-title">{{$t('column.latestNews')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-        </div>
+        <RightColumns ref="right" />
       </div>
     </div>
   </div>
@@ -50,10 +40,11 @@
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
+import RightColumns from '@/components/rightColumns'
 import mixins from '@/mixins/article'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       id: this.$route.query.articleId,
       loaded: false,
@@ -61,31 +52,24 @@ export default {
       columnId: '',
       form: {},
       columnBanner: '',
-      columns: [],
-      defaultProps: {
-        value: 'id',
-        label: 'columnName'
-      },
-      news: [],
-      hots: []
     }
   },
   components: {
-    Breadcrumb
+    Breadcrumb,
+    RightColumns
   },
   watch: {
-    '$route'() {
+    '$route' () {
       this.id = this.$route.query.articleId
       this.getInfo()
     }
   },
-  mounted() {
-    this.getColumn()
-    this.getArticle()
+  mounted () {
+
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
         // 设置面包屑
         const { columnName, path, id } = this.$route.query
@@ -115,19 +99,19 @@ export default {
             this.columnId = data.columnId
             // 如果没上传banner
             if (!data.bannerImg) {
-              this.getBanner(this.columns)
+              this.getBanner(this.$refs.right.columns)
               this.form.bannerImg = this.columnBanner || require('@/assets/images/article-banner.png')
             }
             this.loaded = true
           }
         }
-      }).catch(err => {})
+      }).catch(err => { })
 
       // 浏览量+1
-      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => {}).catch(err => {})
+      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
     },
     // 获取banner 规则：当前文章有上传的，用上传的，没有上传的话，如果栏目有图片，读取栏目的（上级没有读上上级，以此类推）都没有的读取默认的
-    getBanner(data) {
+    getBanner (data) {
       for (const e of data) {
         if (e.columnBanner) this.columnBanner = e.columnBanner
         if (e.id == this.columnId) {
@@ -137,35 +121,8 @@ export default {
         }
       }
     },
-    // 资讯
-    getColumn() {
-      this.$post(this.api.listWithTreeMenuVisible, {
-        siteId: this.site,
-        columnName: '',
-        templateId: '',
-        typeId	: '',
-        isSort: 1
-      }).then(({ data }) => {
-        this.columns = data
-        this.getInfo()
-      }).catch(err => {})
-      
-      this.$post(`${this.api.hotContent}?siteId=${this.site}`).then(({ data }) => {
-        this.hots = Util.removeTag(data)
-      }).catch(err => {})
-    },
-    // 最新资讯
-    getArticle() {
-      this.$post(this.api.newlyPublishedArticles, {
-        pageNum: 1,
-        pageSize: 5,
-        siteId: this.site
-      }).then(({ data }) => {
-        this.news = Util.removeTag(data.records)
-      }).catch(res => {})
-    },
     // 下载附件
-    download(e) {
+    download (e) {
       Util.downloadFile(e.fileName, e.filePath)
     },
   }
@@ -173,226 +130,149 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./editor.css";
+@import './editor.css';
 .content {
-  width: 1200px;
-  /deep/ .el-breadcrumb {
-    font-size: .98rem;
-  }
+    width: 1200px;
+    /deep/ .el-breadcrumb {
+        font-size: 0.98rem;
+    }
 }
 .banner {
-  height: 21.6rem;
-  padding: 14.68rem 0 0 22.1875rem;
-  font-size: 2.16rem;
-  font-weight: 600;
-  color: #fff;
-  background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
+    height: 21.6rem;
+    padding: 14.68rem 0 0 22.1875rem;
+    font-size: 2.16rem;
+    font-weight: 600;
+    color: #fff;
+    background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
 }
 .article {
-  display: flex;
-  justify-content: space-between;
-  .left {
-    width: 70%;
-  }
-  h2 {
-    font-size: 1.9rem;
-    color: #1C1C1C;
-  }
-  .meta {
-    margin: 1rem 0;
-    font-size: .88rem;
-    color: #9B9B9B;
-  }
-  .brief {
-    padding-bottom: 1.5rem;
-    margin-bottom: 1rem;
-    font-size: 1.2rem;
-    line-height: 1.33;
-    color: #606060;
-    border-bottom: 1px solid #D8D8D8;
-  }
-  /deep/.des {
-    img {
-      max-width: 100%;
-    }
-  }
-  .annex {
-    margin-top: 30px;
-    h6 {
-      padding-left: 8px;
-      margin-bottom: 20px;
-      font-size: 16px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      line-height: 1;
-      color: #333;
-      border-left: 4px solid #1583FF;
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 70%;
     }
-    li {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
+    h2 {
+        font-size: 1.9rem;
+        color: #1c1c1c;
     }
-    .name {
-      margin-right: 8px;
-      font-size: 14px;
+    .meta {
+        margin: 1rem 0;
+        font-size: 0.88rem;
+        color: #9b9b9b;
     }
-    .download {
-      color: #1583FF;
-      cursor: pointer;
-    }
-  }
-  .right {
-    width: 20%;
-    /deep/ .el-tree-node__label{
-      font-size: .78rem;
-    }
-  }
-  .column {
-    width: 100%;
-    margin-bottom: 1.56rem;
-  }
-  /deep/.el-tree-node__content {
-    height: 2.75rem;
-    background-color: #E5EDF8;
-    border-bottom: 2px solid #fff;
-  }
-  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    color: #fff;
-    background-color: #0f5698;
-  }
-  .list {
-    margin-bottom: 20px;
-    li {
-      padding: 16px 0;
-      border-bottom: 1px solid #D8D8D8;
+    .brief {
+        padding-bottom: 1.5rem;
+        margin-bottom: 1rem;
+        font-size: 1.2rem;
+        line-height: 1.33;
+        color: #606060;
+        border-bottom: 1px solid #d8d8d8;
     }
-    .text {
-      margin-bottom: 5px;
-      font-size: 14px;
-      cursor: pointer;
-      &:hover {
-        color: $main-color;
-      }
+    /deep/.des {
+        img {
+            max-width: 100%;
+        }
     }
-    .date {
-      font-size: 12px;
-      color: #999;
+    .annex {
+        margin-top: 30px;
+        h6 {
+            padding-left: 8px;
+            margin-bottom: 20px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            line-height: 1;
+            color: #333;
+            border-left: 4px solid #1583ff;
+        }
+        li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .name {
+            margin-right: 8px;
+            font-size: 14px;
+        }
+        .download {
+            color: #1583ff;
+            cursor: pointer;
+        }
     }
-  }
 }
 @media (max-width: 1420px) {
-  .content {
-    width: 98%;
-  }
-}
-@media (max-width: 1200px ) {
-  .article {
-    flex-direction: column;
-    .left, .right{
-      width: 95%;
-      margin: 0 auto;
-      .el-tree{
-        position: fixed;
-        right: 10px;
-        top: 160px;
-        z-index: 9;;
-        width: 180px;
-      }
+    .content {
+        width: 98%;
     }
-  }
 }
-@media (min-width: 280px) and (max-width: 1200px) {
-
-  .article {
-    /deep/.des {
-      img {
-        max-width: 100%;
-        height: 15rem;
-      }
+@media (max-width: 1200px) {
+    .article {
+        /deep/.des {
+            img {
+                max-width: 100%;
+                height: 15rem;
+            }
+        }
     }
-  }
-  .banner {
-    font-size: 1.5rem;
-  }
-  .article{
-    flex-direction: column;
-    .left{
-      width: 100%;
-      h2 {
+    .banner {
         font-size: 1.5rem;
-      }
-    }
-    .right{
-      width: 100%;
-      .el-tree{
-        display: none;
-      }
     }
-  }
-  .article {
-    .des {
-      img{
-    height: 15rem !important;
-  }
+    .article {
+        flex-direction: column;
+        .left {
+            width: 100%;
+            h2 {
+                font-size: 1.5rem;
+            }
+        }
     }
-  }
-}
-@media (max-width: 320px) {
-  .wrap  {
-    .banner {
-      padding: 8rem 0 0  10rem;
-      height: 13rem;
+    .article {
+        .des {
+            img {
+                height: 15rem !important;
+            }
+        }
     }
-  }
 }
 
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    .banner {
-      padding: 8rem 0 0  10rem;
-      height: 15rem;
+@media (max-width: 480px) {
+    .wrap {
+        .banner {
+            padding: 8rem 0 0 10rem;
+            height: 17rem;
+        }
     }
-  }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    .banner {
-      padding: 8rem 0 0  10rem;
-      height: 17rem;
-    }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    .banner {
-      padding: 12rem 0 0  10rem;
-      height: 20rem;
+    .wrap {
+        .banner {
+            padding: 12rem 0 0 10rem;
+            height: 20rem;
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    .banner {
-      padding: 14rem 0 0  10rem;
-      height: 22rem;
+    .wrap {
+        .banner {
+            padding: 14rem 0 0 10rem;
+            height: 22rem;
+        }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    .banner {
-      padding: 16rem 0 0  10rem;
-      height: 26rem;
+    .wrap {
+        .banner {
+            padding: 16rem 0 0 10rem;
+            height: 26rem;
+        }
     }
-  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    .banner {
-      padding: 18rem 0 0  10rem;
-      height: 30rem;
+    .wrap {
+        .banner {
+            padding: 18rem 0 0 10rem;
+            height: 30rem;
+        }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index fca3ab7..505b741 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -1,7 +1,11 @@
 <template>
-  <div v-show="loaded" :class="['wrap', { activity: info.listStyleId === 15 }]">
+  <div v-show="loaded"
+       :class="['wrap', { activity: info.listStyleId === 15 }]">
     <div class="banner">
-      <img width="100%" height="280" :src="info.columnBanner" alt="" />
+      <img width="100%"
+           height="280"
+           :src="info.columnBanner"
+           alt="" />
       <div class="texts">
         <p class="text">{{ info.columnName }}</p>
         <p class="sub">{{ info.subtitle }}</p>
@@ -11,252 +15,375 @@
       <div class="article">
         <div class="left">
           <!-- 文章：侧边栏+搜索+新闻列表 -->
-          <div v-if="info.listStyleId === 10" class="forms">
+          <div v-if="info.listStyleId === 10"
+               class="forms">
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId" @change="filter">
-                <el-option :label="$t('column.all')" :value="null"></el-option>
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
-                  :value="item.id">
+              <el-select v-model="form.classificationId"
+                         @change="filter">
+                <el-option :label="$t('column.all')"
+                           :value="null"></el-option>
+                <el-option v-for="item in classifications"
+                           :key="item.id"
+                           :label="item.classificationName"
+                           :value="item.id">
                 </el-option>
               </el-select>
             </div>
             <div class="item">
               <span class="label">{{ $t('column.label') }}：</span>
-              <el-select ref="search" v-model="lableId" multiple @change="filter">
-                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
+              <el-select ref="search"
+                         v-model="lableId"
+                         multiple
+                         @change="filter">
+                <el-option v-for="item in labels"
+                           :key="item.id"
+                           :label="item.labelName"
+                           :value="item.id"> </el-option>
               </el-select>
             </div>
             <div class="search">
-              <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
+              <input type="text"
+                     :placeholder="$t('column.titlePlaceholder')"
+                     v-model="form.title" />
 
               <!-- <i class="icon">
                 <img src="@/assets/images/search-white.png" alt="" />
               </i> -->
             </div>
           </div>
-          <div v-if="info.listStyleId === 12" class="forms">
+          <div v-if="info.listStyleId === 12"
+               class="forms">
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId" @change="filter">
-                <el-option :label="$t('column.all')" :value="null"></el-option>
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
-                  :value="item.id">
+              <el-select v-model="form.classificationId"
+                         @change="filter">
+                <el-option :label="$t('column.all')"
+                           :value="null"></el-option>
+                <el-option v-for="item in classifications"
+                           :key="item.id"
+                           :label="item.classificationName"
+                           :value="item.id">
                 </el-option>
               </el-select>
             </div>
             <div class="item">
               <span class="label">{{ $t('column.label') }}：</span>
-              <el-select ref="search" v-model="lableId" multiple @change="filter">
-                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
+              <el-select ref="search"
+                         v-model="lableId"
+                         multiple
+                         @change="filter">
+                <el-option v-for="item in labels"
+                           :key="item.id"
+                           :label="item.labelName"
+                           :value="item.id"> </el-option>
               </el-select>
             </div>
             <div class="search">
-              <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
+              <input type="text"
+                     :placeholder="$t('column.titlePlaceholder')"
+                     v-model="form.title" />
               <!-- <i class="icon">
                 <img src="@/assets/images/search-white.png" alt="" />
               </i> -->
             </div>
           </div>
           <!-- 会议活动：筛选+会议活动列表 -->
-          <div v-if="info.listStyleId === 15" class="forms">
+          <div v-if="info.listStyleId === 15"
+               class="forms">
             <ul class="switch">
-              <li v-for="(item, i) in convokeTypes" :key="i" :class="{ active: item.id === form.convokeType }"
-                @click="switchChange(item)">
+              <li v-for="(item, i) in convokeTypes"
+                  :key="i"
+                  :class="{ active: item.id === form.convokeType }"
+                  @click="switchChange(item)">
                 {{ item.name }}
               </li>
             </ul>
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId" @change="filter">
-                <el-option :label="$t('column.all')" :value="null"></el-option>
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
-                  :value="item.id">
+              <el-select v-model="form.classificationId"
+                         @change="filter">
+                <el-option :label="$t('column.all')"
+                           :value="null"></el-option>
+                <el-option v-for="item in classifications"
+                           :key="item.id"
+                           :label="item.classificationName"
+                           :value="item.id">
                 </el-option>
               </el-select>
             </div>
           </div>
-         
+
           <div class="contents">
             <template v-if="!isFilter && showNav && columns.length && !columns.find(i=>i.children.length) && info.listStyleId !==55">
-             </template>
-             <template v-if="!columns.find(i=>i.children.length) && info.listStyleId ===55">
-             </template>
-             <template v-else-if="!columns.find(i=>i.children.length) && info.listStyleId ===15 || info.listStyleId ===10 || info.listStyleId ===16">
-             </template>
-            <el-tree v-else class="columns" ref="leftColumn" :data="columns"
-              highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id"
-              icon-class="el-icon-arrow-down" @node-click="(item) => columnClick(item, 1)">
-              <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
+            </template>
+            <template v-if="!columns.find(i=>i.children.length) && info.listStyleId ===55">
+            </template>
+            <template v-else-if="!columns.find(i=>i.children.length) && info.listStyleId ===15 || info.listStyleId ===10 || info.listStyleId ===16">
+            </template>
+            <el-tree v-else
+                     class="columns"
+                     ref="leftColumn"
+                     :data="columns"
+                     highlight-current
+                     :expand-on-click-node="false"
+                     default-expand-all
+                     :props="defaultProps"
+                     node-key="id"
+                     icon-class="el-icon-arrow-down"
+                     @node-click="(item) => columnClick(item, 1)">
+              <span class="custom-tree-node"
+                    slot-scope="{ node, data }"
+                    style="padding-left: 10px;">
                 <span :title="node.label">{{ node.label }}</span>
               </span>
             </el-tree>
             <template v-if="info.listStyleId === 12">
               <div class="article-wrap">
-              <ul class="articles">
-                <li v-for="(item, i) in articles" :key="i" :class="{'news-notice': info.listStyleId === 55}" class="readDetail" @click="toArtice(item)">
-                  <template v-if="info.listStyleId === 55">
-                    <div class="releaseTime">
-                      <p class="d">{{ item.date }}</p>
-                      <p class="m">{{ item.month }}</p>
-                    </div>
-                    <div class="news-title">{{ item.title }}</div>
-                  </template>
-                  <template v-else>
-                    <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';" />
-                    <div class="texts">
-                      <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                        class="type">
-                        {{ item.classificationName }}
-                      </p>
-                      <h6 class="titleDes">{{ item.title }}</h6>
-                      <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                        <span class="meta">{{ item.releaseTime }}</span>
-                        <div class="des" v-html="item.mainBody"></div>
-                      </template>
-                      <span v-if="item.listStyleId === 10 " class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+                <ul class="articles">
+                  <li v-for="(item, i) in articles"
+                      :key="i"
+                      :class="{'news-notice': info.listStyleId === 55}"
+                      class="readDetail"
+                      @click="toArtice(item)">
+                    <template v-if="info.listStyleId === 55">
+                      <div class="releaseTime">
+                        <p class="d">{{ item.date }}</p>
+                        <p class="m">{{ item.month }}</p>
+                      </div>
+                      <div class="news-title">{{ item.title }}</div>
+                    </template>
+                    <template v-else>
+                      <img class="pic"
+                           :src="item.titleImg"
+                           alt=""
+                           onerror="javascript:this.src='./images/1.png';" />
+                      <div class="texts">
+                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                           class="type">
+                          {{ item.classificationName }}
+                        </p>
+                        <h6 class="titleDes">{{ item.title }}</h6>
+                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                          <span class="meta">{{ item.releaseTime }}</span>
+                          <div class="des"
+                               v-html="item.mainBody"></div>
+                        </template>
+                        <span v-if="item.listStyleId === 10 "
+                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                      <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                        <div v-if="item.keynoteSpeaker" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
-                        </div>
-                        <div v-if="item.activityStartTime" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
-                          {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                        </div>
-                        <div v-if="item.offlineLocation" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation }}
-                        </div>
-                        <div v-if="item.onlineLocation" class="meta">
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
-                        </div>
-                      </template>
-                      <el-button type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
-                    </div>
-                    
-                  </template>
-                </li>
-              </ul>
-              <div v-if="articles.length" class="pagination">
-                <el-pagination background @current-change="currentChange" :current-page="page"
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                          <div v-if="item.keynoteSpeaker"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/mine.png"
+                                 alt="" /> {{ item.keynoteSpeaker }}
+                          </div>
+                          <div v-if="item.activityStartTime"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/time.png"
+                                 alt="" />
+                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                          </div>
+                          <div v-if="item.offlineLocation"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/location.png"
+                                 alt="" /> {{ item.offlineLocation }}
+                          </div>
+                          <div v-if="item.onlineLocation"
+                               class="meta">
+                            <img class="icon"
+                                 src="@/assets/images/online.png"
+                                 alt="" /> {{ item.onlineLocation }}
+                          </div>
+                        </template>
+                        <el-button type="primary"
+                                   class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+                      </div>
+
+                    </template>
+                  </li>
+                </ul>
+                <div v-if="articles.length"
+                     class="pagination">
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
+                </div>
               </div>
-            </div>
             </template>
 
             <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
               <div class="article-wrap">
-              <ul class="articles">
-                <li v-for="(item, i) in articles" :key="i" :class="{'news-notice': info.listStyleId === 55}" class="otherData" @click="toArtice(item)">
-                  <template v-if="info.listStyleId === 55">
-                    <div class="releaseTime">
-                      <p class="d">{{ item.date }}</p>
-                      <p class="m">{{ item.month }}</p>
-                    </div>
-                    <div class="news-title">{{ item.title }}</div>
-                  </template>
-                  <template v-else>
-                    
-                    <div class="texts leftBox">
-                      <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
-                        class="type">
-                        {{ item.classificationName }}
-                      </p>
-                      <h6 class="titleDes">{{ item.title }}</h6>
-                      <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                        <span class="meta">{{ item.releaseTime }} 
-                        <template v-if="item.labelName != ''">
-                          | {{ item.labelName }}
+                <ul class="articles">
+                  <li v-for="(item, i) in articles"
+                      :key="i"
+                      :class="{'news-notice': info.listStyleId === 55}"
+                      class="otherData"
+                      @click="toArtice(item)">
+                    <template v-if="info.listStyleId === 55">
+                      <div class="releaseTime">
+                        <p class="d">{{ item.date }}</p>
+                        <p class="m">{{ item.month }}</p>
+                      </div>
+                      <div class="news-title">{{ item.title }}</div>
+                    </template>
+                    <template v-else>
+
+                      <div class="texts leftBox">
+                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
+                           class="type">
+                          {{ item.classificationName }}
+                        </p>
+                        <h6 class="titleDes">{{ item.title }}</h6>
+                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                          <span class="meta">{{ item.releaseTime }}
+                            <template v-if="item.labelName != ''">
+                              | {{ item.labelName }}
+                            </template>
+                          </span>
                         </template>
-                        </span>
-                      </template>
-                      <span v-if="item.listStyleId === 10 " class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+                        <span v-if="item.listStyleId === 10 "
+                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                      <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                        <div v-if="item.keynoteSpeaker" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
-                        </div>
-                        <div v-if="item.activityStartTime" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
-                          {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                        </div>
-                        <div v-if="item.offlineLocation" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation }}
-                        </div>
-                        <div v-if="item.onlineLocation" class="meta">
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
-                        </div>
-                      </template>
-                    </div>
-                    <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';" />
-                  </template>
-                </li>
-              </ul>
-              <div v-if="articles.length" class="pagination">
-                <el-pagination background @current-change="currentChange" :current-page="page"
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                          <div v-if="item.keynoteSpeaker"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/mine.png"
+                                 alt="" /> {{ item.keynoteSpeaker }}
+                          </div>
+                          <div v-if="item.activityStartTime"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/time.png"
+                                 alt="" />
+                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                          </div>
+                          <div v-if="item.offlineLocation"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/location.png"
+                                 alt="" /> {{ item.offlineLocation }}
+                          </div>
+                          <div v-if="item.onlineLocation"
+                               class="meta">
+                            <img class="icon"
+                                 src="@/assets/images/online.png"
+                                 alt="" /> {{ item.onlineLocation }}
+                          </div>
+                        </template>
+                      </div>
+                      <img class="pic"
+                           :src="item.titleImg"
+                           alt=""
+                           onerror="javascript:this.src='./images/1.png';" />
+                    </template>
+                  </li>
+                </ul>
+                <div v-if="articles.length"
+                     class="pagination">
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
+                </div>
               </div>
-            </div>
             </template>
             <template v-else>
               <div class="article-wrap">
-              <ul class="articles">
-                <li v-for="(item, i) in articles" :key="i" :class="{'news-notice': info.listStyleId === 55}" class="overDetail" @click="toArtice(item)">
-                  <template v-if="info.listStyleId === 55">
-                    <div class="releaseTime">
-                      <p class="d">{{ item.date }}</p>
-                      <p class="m">{{ item.month }}</p>
-                    </div>
-                    <div class="news-title">{{ item.title }}</div>
-                  </template>
-                  <template v-else>
-                    <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';" />
-                    <div class="texts">
-                      <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                        class="type">
-                        {{ item.classificationName }}
-                      </p>
-                      <h6 class="titleDes">{{ item.title }}</h6>
-                      <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                        <span class="meta">{{ item.releaseTime }}</span>
-                        <div class="des" v-html="item.mainBody"></div>
-                      </template>
-                      <span v-if="item.listStyleId === 10 " class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+                <ul class="articles">
+                  <li v-for="(item, i) in articles"
+                      :key="i"
+                      :class="{'news-notice': info.listStyleId === 55}"
+                      class="overDetail"
+                      @click="toArtice(item)">
+                    <template v-if="info.listStyleId === 55">
+                      <div class="releaseTime">
+                        <p class="d">{{ item.date }}</p>
+                        <p class="m">{{ item.month }}</p>
+                      </div>
+                      <div class="news-title">{{ item.title }}</div>
+                    </template>
+                    <template v-else>
+                      <img class="pic"
+                           :src="item.titleImg"
+                           alt=""
+                           onerror="javascript:this.src='./images/1.png';" />
+                      <div class="texts">
+                        <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                           class="type">
+                          {{ item.classificationName }}
+                        </p>
+                        <h6 class="titleDes">{{ item.title }}</h6>
+                        <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                          <span class="meta">{{ item.releaseTime }}</span>
+                          <div class="des"
+                               v-html="item.mainBody"></div>
+                        </template>
+                        <span v-if="item.listStyleId === 10 "
+                              class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
                         item.labelName }}</span>
-                      <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                        <div v-if="item.keynoteSpeaker" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
-                        </div>
-                        <div v-if="item.activityStartTime" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
-                          {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                        </div>
-                        <div v-if="item.offlineLocation" class="meta m-b-10">
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation }}
-                        </div>
-                        <div v-if="item.onlineLocation" class="meta">
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
-                        </div>
-                      </template>
-                      <el-button v-if="item.listStyleId === 15" type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
-                      
-                    </div>
-                    
-                  </template>
-                </li>
-              </ul>
-              <div v-if="articles.length" class="pagination">
-                <el-pagination background @current-change="currentChange" :current-page="page"
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                        <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
+                          <div v-if="item.keynoteSpeaker"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/mine.png"
+                                 alt="" /> {{ item.keynoteSpeaker }}
+                          </div>
+                          <div v-if="item.activityStartTime"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/time.png"
+                                 alt="" />
+                            {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                          </div>
+                          <div v-if="item.offlineLocation"
+                               class="meta m-b-10">
+                            <img class="icon"
+                                 src="@/assets/images/location.png"
+                                 alt="" /> {{ item.offlineLocation }}
+                          </div>
+                          <div v-if="item.onlineLocation"
+                               class="meta">
+                            <img class="icon"
+                                 src="@/assets/images/online.png"
+                                 alt="" /> {{ item.onlineLocation }}
+                          </div>
+                        </template>
+                        <el-button v-if="item.listStyleId === 15"
+                                   type="primary"
+                                   class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+
+                      </div>
+
+                    </template>
+                  </li>
+                </ul>
+                <div v-if="articles.length"
+                     class="pagination">
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
+                </div>
               </div>
-            </div>
             </template>
           </div>
         </div>
         <div class="right">
           <p class="l-title">{{ $t('column.hot') }}</p>
           <ul class="list">
-            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
+            <li v-for="(item, i) in hots"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
               <p class="text">{{ item.title }}</p>
               <span class="date">{{ item.releaseTime }}</span>
             </li>
@@ -264,12 +391,14 @@
 
           <p class="l-title">{{ $t('column.latestNews') }}</p>
           <ul class="list">
-            <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
+            <li v-for="(item, i) in news"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
               <p class="text">{{ item.title }}</p>
               <span class="date">{{ item.releaseTime }}</span>
             </li>
           </ul>
-          <div class="shadow"></div>
         </div>
       </div>
     </div>
@@ -283,7 +412,7 @@ import Breadcrumb from '@/components/breadcrumb';
 import mixins from '@/mixins/article';
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       loaded: false,
       fromColumn: this.$route.query.column,
@@ -325,7 +454,7 @@ export default {
     Breadcrumb
   },
   watch: {
-    $route() {
+    $route () {
       this.id = this.$route.query.id;
       this.init();
     },
@@ -336,7 +465,7 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
     this.convokeTypes = [
       {
         id: null,
@@ -354,14 +483,14 @@ export default {
     this.init();
   },
   methods: {
-    init() {
+    init () {
       this.getInfo();
       this.getColumn();
       this.getNews();
       this.getLabel();
     },
     // 获取栏目详情
-    getInfo() {
+    getInfo () {
       this.id &&
         this.$post(`${this.api.findColumn}?id=${this.id}`)
           .then(({ data }) => {
@@ -376,17 +505,17 @@ export default {
           .catch((res) => { });
     },
     // 判断是否是出版物模板，如果是则跳转
-    handlePublication() {
+    handlePublication () {
       if (this.info.templateId === 11) { // 出版社直接跳转到单个的出版社页面（/publication/single），否则就查询子级是否是出版社模板（templateId = 11），是的话就跳转到/publication/index，必须是每个子级都是出版社才跳转，后者是前者的集合（专利、专著、论文）
         this.$router.push(`/publication/single?siteId=${this.site}&id=${this.id}&type=${this.info.listStyleId}`)
       } else {
         this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
           data.length && data.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.id}`) // 如果子级每个栏目都是出版物类型
-        }).catch(err => {})
+        }).catch(err => { })
       }
     },
     // 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的
-    getBanner(data) {
+    getBanner (data) {
       for (const e of data) {
         if (e.columnBanner) this.columnBanner = e.columnBanner;
         if (e.id == this.info.id) {
@@ -397,7 +526,7 @@ export default {
       }
     },
     // 获取所属分类
-    getClassification() {
+    getClassification () {
       // 会议分类
       if (this.info.templateId === 7) {
         this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`)
@@ -415,7 +544,7 @@ export default {
       }
     },
     // 获取标签
-    getLabel() {
+    getLabel () {
       this.$post(`${this.api.queryLabel}?siteId=${this.site}`)
         .then(({ data }) => {
           this.labels = data;
@@ -430,7 +559,7 @@ export default {
         .catch((err) => { });
     },
     // 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的
-    handleColumn(data, parent) {
+    handleColumn (data, parent) {
       for (const e of data) {
         if (this.info.typeId === 4) {
           // 子级优先
@@ -460,7 +589,7 @@ export default {
       }
     },
     // 左边栏目
-    getLeftColumn() {
+    getLeftColumn () {
       this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`)
         .then(({ data }) => {
           const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
@@ -489,7 +618,7 @@ export default {
         .catch((err) => { });
     },
     // 右边资讯
-    getColumn() {
+    getColumn () {
       this.$post(this.api.listWithTreeMenuVisible, {
         siteId: this.site,
         columnName: '',
@@ -509,7 +638,7 @@ export default {
         .catch((err) => { });
     },
     // 最新资讯
-    getNews() {
+    getNews () {
       this.$post(this.api.newlyPublishedArticles, {
         pageNum: 1,
         pageSize: 5,
@@ -521,12 +650,12 @@ export default {
         .catch((res) => { });
     },
     // 会议时间筛选回调
-    switchChange(item) {
+    switchChange (item) {
       this.form.convokeType = item.id;
       this.filter();
     },
     // 点击栏目回调
-    columnClick(to, left) {
+    columnClick (to, left) {
       const { typeId } = to;
       // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
       if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
@@ -558,9 +687,9 @@ export default {
         if (to.isOpen) {
           var userAgent = navigator.userAgent;
           var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
-          if(isSafari) {
+          if (isSafari) {
             window.location.href = href
-          }else {
+          } else {
             window.open(href)
           }
         } else {
@@ -583,7 +712,7 @@ export default {
       }
     },
     // 查询文章列表
-    getArticle(columnIds) {
+    getArticle (columnIds) {
       const labelName = [];
       // 获取标签名称
       this.labels.map((e) => {
@@ -615,14 +744,14 @@ export default {
         .catch((res) => { });
     },
     // 递归获取栏目所有id
-    getIds(data, ids) {
+    getIds (data, ids) {
       data.map((e) => {
         ids.push(e.id);
         e.children && this.getIds(e.children, ids);
       });
     },
     // 筛选
-    filter() {
+    filter () {
       this.page = 1;
       this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); // 是否在筛选
       let id = [];
@@ -633,7 +762,7 @@ export default {
       }
       this.getArticle(id);
     },
-    currentChange(val) {
+    currentChange (val) {
       this.page = val;
       this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length);
       let id = [];
@@ -650,934 +779,927 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-  .banner {
-    height: 24rem;
-    position: relative;
-    img {
-      height: 24rem;
-    }
-    .texts {
-      position: absolute;
-      bottom: 87px;
-      top: auto;
-      left: 213px;
+    .banner {
+        height: 24rem;
+        position: relative;
+        img {
+            height: 24rem;
+        }
+        .texts {
+            position: absolute;
+            bottom: 87px;
+            top: auto;
+            left: 213px;
+        }
     }
-  }
 }
-.el-tree-node__content{
-  padding-left: 10px !important;
+.el-tree-node__content {
+    padding-left: 10px !important;
 }
 .l-title {
-  font-weight: 600;
-  font-size: 1.024rem;
+    font-weight: 600;
+    font-size: 1.024rem;
 }
 
 .banner {
-  position: relative;
-  height: 14rem;
+    position: relative;
+    height: 14rem;
 
-  color: #fff;
+    color: #fff;
 
-  .texts {
-    position: absolute;
-    top: 6.15rem;
-    left: 12.15rem;
-  }
+    .texts {
+        position: absolute;
+        top: 6.15rem;
+        left: 12.15rem;
+    }
 
-  .text {
-    font-size: 2.16rem;
-    font-weight: 600;
-    @include ellipsis;
-  }
+    .text {
+        font-size: 2.16rem;
+        font-weight: 600;
+        @include ellipsis;
+    }
 
-  .sub {
-    margin-top: .5rem;
-    font-size: 1.6rem;
-  }
+    .sub {
+        margin-top: 0.5rem;
+        font-size: 1.6rem;
+    }
 }
 
 .column-wrap {
-  padding: 2rem 0;
-  background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
-    url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
-  background-color: #f9fafa;
+    padding: 2rem 0;
+    background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
+        url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
+    background-color: #f9fafa;
 }
 
-
 .article {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-
-  .left {
-    width: 66%;
-    margin-right: 1.4rem;
-  }
-
-  .article-wrap {
-    width: 100%;
-  }
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
 
-  .switch {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 2.5rem;
-
-    li {
-      padding: 0 .75rem;
-      margin-right: .5rem;
-      line-height: 1.8rem;
-      font-size: 1rem;
-      color: #333;
-      background: #f7f7f7;
-      cursor: pointer;
+    .left {
+        width: 66%;
+        margin-right: 1.4rem;
     }
 
-    .active {
-      color: #fff;
-      background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
+    .article-wrap {
+        width: 100%;
     }
-  }
 
-  .forms {
-    display: flex;
-    align-items: center;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
-    background-color: #fff;
-
-    .item {
-      display: inline-flex;
-      align-items: center;
-      margin-right: 1.5rem;
-    }
+    .switch {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 2.5rem;
 
-    .label {
-      font-size: .912rem;
-      color: #333;
-      white-space: nowrap;
-    }
+        li {
+            padding: 0 0.75rem;
+            margin-right: 0.5rem;
+            line-height: 1.8rem;
+            font-size: 1rem;
+            color: #333;
+            background: #f7f7f7;
+            cursor: pointer;
+        }
 
-    /deep/.el-input__inner {
-      width: 100%;
-      height: 2.4rem;
-      line-height: 2.4rem;
-      border: 0;
-      background: #f7f7f7;
+        .active {
+            color: #fff;
+            background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
+        }
     }
 
-    .search {
-      display: inline-flex;
-      width: 34%;
-      margin-top: .1rem;
+    .forms {
+        display: flex;
+        align-items: center;
+        padding: 1.5rem;
+        margin-bottom: 1rem;
+        background-color: #fff;
+
+        .item {
+            display: inline-flex;
+            align-items: center;
+            margin-right: 1.5rem;
+        }
 
-      input {
-        width: 100%;
-        height: 2.4rem;
-        padding: 0 .75rem;
-        font-size: 1rem;
-        color: #333;
-        background: #f7f7f7;
-        border: 0;
-        border-radius: 6px;
+        .label {
+            font-size: 0.912rem;
+            color: #333;
+            white-space: nowrap;
+        }
 
-        &:focus {
-          outline: none;
+        /deep/.el-input__inner {
+            width: 100%;
+            height: 2.4rem;
+            line-height: 2.4rem;
+            border: 0;
+            background: #f7f7f7;
         }
-      }
-    }
 
-    .icon {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 3.1rem;
-      height: 2.4rem;
-      background: #1583ff;
-      border-radius: 0px 6px 6px 0px;
-      cursor: pointer;
-    }
-  }
+        .search {
+            display: inline-flex;
+            width: 34%;
+            margin-top: 0.1rem;
 
-  .contents {
-    display: flex;
-  }
+            input {
+                width: 100%;
+                height: 2.4rem;
+                padding: 0 0.75rem;
+                font-size: 1rem;
+                color: #333;
+                background: #f7f7f7;
+                border: 0;
+                border-radius: 6px;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
 
-  /deep/.columns {
-    width: 22%;
-    margin-right: .6rem;
-    overflow: auto;
-    span{
-      white-space: nowrap; 
-        overflow: hidden;
-        text-overflow: ellipsis;
+        .icon {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: 3.1rem;
+            height: 2.4rem;
+            background: #1583ff;
+            border-radius: 0px 6px 6px 0px;
+            cursor: pointer;
+        }
     }
 
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 2px;
-      height: 100%;
-      background-color: #e1e6f2;
+    .contents {
+        display: flex;
     }
 
-    .el-tree-node__content {
-      position: relative;
-      height: 2.4rem;
-      padding-left: 2rem;
-      margin-bottom: 1px;
-      font-size: 1.04rem;
-      color: #666;
-      background-color: #fff;
-      border-top: 1px solid #f8f9f9;
-      cursor: pointer;
-
-      // &:before {
-      //   content: '';
-      //   width: 2px;
-      //   height: 2px;
-      //   margin: 0 10px 0 20px;
-      //   background-color: #666;
-      //   border-radius: 50%;
-      // }
-
-      &:hover {
-        color: #0c84eb;
-      }
-    }
+    /deep/.columns {
+        width: 22%;
+        margin-right: 0.6rem;
+        overflow: auto;
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
-    .el-tree-node__label {
-      font-size: 1.28rem;
-      color: #666;
-      line-height: 22px;
-    }
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            background-color: #e1e6f2;
+        }
 
-    .el-tree-node__expand-icon.expanded {
-      transform: rotate(180deg);
-    }
+        .el-tree-node__content {
+            position: relative;
+            height: 2.4rem;
+            padding-left: 2rem;
+            margin-bottom: 1px;
+            font-size: 1.04rem;
+            color: #666;
+            background-color: #fff;
+            border-top: 1px solid #f8f9f9;
+            cursor: pointer;
+
+            // &:before {
+            //   content: '';
+            //   width: 2px;
+            //   height: 2px;
+            //   margin: 0 10px 0 20px;
+            //   background-color: #666;
+            //   border-radius: 50%;
+            // }
+
+            &:hover {
+                color: #0c84eb;
+            }
+        }
 
-    .el-tree-node__expand-icon {
-      position: absolute;
-      right: 10px;
-    }
+        .el-tree-node__label {
+            font-size: 1.28rem;
+            color: #666;
+            line-height: 22px;
+        }
 
-    .is-current>.el-tree-node__content {
-      background-color: #e5edf8;
-      border-top: 0;
+        .el-tree-node__expand-icon.expanded {
+            transform: rotate(180deg);
+        }
 
-      &:after {
-        content: '';
-        z-index: 2;
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 2px;
-        height: 100%;
-        background-color: #083a93;
-      }
+        .el-tree-node__expand-icon {
+            position: absolute;
+            right: 10px;
+        }
 
-      .el-tree-node__label,
-      .custom-tree-node {
-        font-weight: 600;
-        color: #1150ac;
-        
-      }
-    }
-  }
+        .is-current > .el-tree-node__content {
+            background-color: #e5edf8;
+            border-top: 0;
+
+            &:after {
+                content: '';
+                z-index: 2;
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 2px;
+                height: 100%;
+                background-color: #083a93;
+            }
 
-  .articles {
-    .readDetail {
-      padding: 1.3rem 1.5rem;
-      justify-content: flex-start;
-      align-items: flex-start;
-      .leftBox {
-        p {
-          margin-top: 1.25rem;
+            .el-tree-node__label,
+            .custom-tree-node {
+                font-weight: 600;
+                color: #1150ac;
+            }
         }
-      }
-      .texts {
-        padding-left: 1.5rem;
-        .titleDes {
-          margin-bottom: 1.3rem;
-          font-size: 1.2rem;
-          margin-top: 0;
+    }
+
+    .articles {
+        .readDetail {
+            padding: 1.3rem 1.5rem;
+            justify-content: flex-start;
+            align-items: flex-start;
+            .leftBox {
+                p {
+                    margin-top: 1.25rem;
+                }
+            }
+            .texts {
+                padding-left: 1.5rem;
+                .titleDes {
+                    margin-bottom: 1.3rem;
+                    font-size: 1.2rem;
+                    margin-top: 0;
+                }
+                .des {
+                    margin-top: 1.3rem;
+                }
+            }
+            .titleDes {
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 1;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                margin-top: 0.8rem;
+            }
+            .readDetailBtn {
+                margin-top: 1.3rem;
+            }
+            .texts {
+                flex-grow: 1;
+            }
         }
-        .des {
-          margin-top: 1.3rem;
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            background-color: #fff;
+            cursor: pointer;
         }
-      }
-      .titleDes {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        margin-top: .8rem;
-      }
-      .readDetailBtn {
-        margin-top: 1.3rem;
-      }
-      .texts {
-        flex-grow: 1;
-      }
-    }
-    li {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      background-color: #fff;
-      cursor: pointer;
-    }
 
-    .texts {
-      width: 60%;
-      padding-left: 30px;
-    }
+        .texts {
+            width: 60%;
+            padding-left: 30px;
+        }
 
-    .type {
-      margin-bottom: 15px;
-      font-size: 1.024rem;
-      color: #333;
-    }
+        .type {
+            margin-bottom: 15px;
+            font-size: 1.024rem;
+            color: #333;
+        }
 
-    h6 {
-      margin-bottom: 15px;
-      font-size: 1.368rem;
-      color: #000;
-      line-height: 38px;
-      @include mul-ellipsis(2);
-    }
+        h6 {
+            margin-bottom: 15px;
+            font-size: 1.368rem;
+            color: #000;
+            line-height: 38px;
+            @include mul-ellipsis(2);
+        }
 
-    .meta {
-      display: flex;
-      align-items: center;
-      font-size: .88rem;
-      font-family: PingFangSC-Medium;
-      color: #333;
-    }
+        .meta {
+            display: flex;
+            align-items: center;
+            font-size: 0.88rem;
+            font-family: PingFangSC-Medium;
+            color: #333;
+        }
 
-    .icon {
-      margin-right: 10px;
-    }
+        .icon {
+            margin-right: 10px;
+        }
 
-    .des {
-      margin-top: 15px;
-      @include mul-ellipsis(2);
-    }
+        .des {
+            margin-top: 15px;
+            @include mul-ellipsis(2);
+        }
 
-    .pic {
-      width: 30%;
-      height: auto;
-    }
-  }
-  .news-notice {
-    .releaseTime {
-      width: 88px;
-      height: 88px;
-      padding: 10px 0 16px;
-      margin-right: 24px;
-      color: #fff;
-      text-align: center;
-      background: #0B5086;
-    }
-    .d {
-      font-size: 2rem;
-      font-family: DINCondensed-Bold, DINCondensed;
-      font-weight: bold;
-      line-height: 43px;
+        .pic {
+            width: 30%;
+            height: auto;
+        }
     }
-    .m {
-      font-size: .9rem;
-      line-height: 20px;
+    .news-notice {
+        .releaseTime {
+            width: 88px;
+            height: 88px;
+            padding: 10px 0 16px;
+            margin-right: 24px;
+            color: #fff;
+            text-align: center;
+            background: #0b5086;
+        }
+        .d {
+            font-size: 2rem;
+            font-family: DINCondensed-Bold, DINCondensed;
+            font-weight: bold;
+            line-height: 43px;
+        }
+        .m {
+            font-size: 0.9rem;
+            line-height: 20px;
+        }
+        .news-title {
+            width: calc(100% - 110px);
+            font-size: 1.1rem;
+            color: #333;
+            line-height: 1.6;
+            @include mul-ellipsis(2);
+        }
     }
-    .news-title {
-      width: calc(100% - 110px);
-      font-size: 1.1rem;
-      color: #333;
-      line-height: 1.6;
-      @include mul-ellipsis(2);
+    .right {
+        width: 14%;
+        min-width: 15rem;
+        overflow: hidden;
     }
-  }
-  .right {
-    width: 14%;
-    min-width: 15rem;
-    overflow: hidden;
-  }
 
-  .column {
-    width: 100%;
-    margin-bottom: 1.25rem;
+    .column {
+        width: 100%;
+        margin-bottom: 1.25rem;
 
-    /deep/.el-tree-node__content {
-      height: 44px;
-      background-color: #e5edf8;
-      border-bottom: 2px solid #fff;
-    }
+        /deep/.el-tree-node__content {
+            height: 44px;
+            background-color: #e5edf8;
+            border-bottom: 2px solid #fff;
+        }
 
-    /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-      color: #fff;
-      background-color: #0f5698;
+        /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+            color: #fff;
+            background-color: #0f5698;
+        }
     }
-  }
 
-  .list {
-    margin-bottom: 1rem;
+    .list {
+        margin-bottom: 1rem;
 
-    li {
-      padding: .8rem 0;
-      border-bottom: 1px solid #d8d8d8;
-    }
+        li {
+            padding: 0.8rem 0;
+            border-bottom: 1px solid #d8d8d8;
+        }
 
-    .text {
-      margin-bottom: 5px;
-      font-size: .98rem;
-      cursor: pointer;
-      @include ellipsis;
+        .text {
+            margin-bottom: 5px;
+            font-size: 0.98rem;
+            cursor: pointer;
+            @include ellipsis;
 
-      &:hover {
-        color: $main-color;
-      }
-    }
+            &:hover {
+                color: $main-color;
+            }
+        }
 
-    .date {
-      font-size: .78rem;
-      color: #999;
+        .date {
+            font-size: 0.78rem;
+            color: #999;
+        }
     }
-  }
 }
 
 .activity {
-  .column-wrap {
-    padding: 0;
-    background: none;
-  }
-
-  .article-wrap {
-    width: 100%;
-  }
-
-  .article {
-    justify-content: center;
-
-    .left {
-      width: 1136px;
-      margin-right: 36px;
+    .column-wrap {
+        padding: 0;
+        background: none;
     }
 
-    .forms {
-      padding: 30px 0;
+    .article-wrap {
+        width: 100%;
     }
 
-    .articles li {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-      padding-bottom: 38px;
-      margin-bottom: 38px;
-      border-bottom: 1px solid #ddd;
-    }
+    .article {
+        justify-content: center;
 
+        .left {
+            width: 1136px;
+            margin-right: 36px;
+        }
 
-    .right {
-      padding-top: 30px;
+        .forms {
+            padding: 30px 0;
+        }
+
+        .articles li {
+            flex-direction: row-reverse;
+            justify-content: flex-end;
+            padding-bottom: 38px;
+            margin-bottom: 38px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .right {
+            padding-top: 30px;
+        }
     }
-  }
 }
 
 @media (max-width: 1200px) {
-  .article {
-    flex-direction: column;
+    .article {
+        flex-direction: column;
 
-    .left {
-      width: 100%;
+        .left {
+            width: 100%;
 
-      .forms {
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
+            .forms {
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
 
-        .item,
-        .search {
-          margin: 20px 0 0 0;
-        }
+                .item,
+                .search {
+                    margin: 20px 0 0 0;
+                }
 
-        .item:first-child {
-          margin: 0;
-        }
+                .item:first-child {
+                    margin: 0;
+                }
 
-        div {
-          width: 100%;
+                div {
+                    width: 100%;
+                }
+            }
         }
-      }
-    }
 
-    .article-wrap {
-      width: 90%;
-      margin: 0 auto;
+        .article-wrap {
+            width: 90%;
+            margin: 0 auto;
 
-      .articles {
-        li {
-          .pic {
-            margin-top: 20px;
-          }
+            .articles {
+                li {
+                    .pic {
+                        margin-top: 20px;
+                    }
+                }
+            }
         }
-      }
-    }
-
-    .right {
-      width: 95%;
-      margin: 20px auto;
-    }
-  }
 
-  .banner {
-    .texts {
-      left: 50px;
-      top: 110px;
+        .right {
+            width: 95%;
+            margin: 20px auto;
+        }
     }
-  }
 
-  .column-wrap {
-    .article {
-      flex-direction: column;
-
-      .left {
-        width: 100%;
-
-        .item {
-          width: 80%;
-          margin: 20px auto;
-        }
-
-        .search {
-          width: 80%;
-          margin: 20px auto;
-          margin-top: 0;
+    .banner {
+        .texts {
+            left: 50px;
+            top: 110px;
         }
+    }
 
-        .contents {
-          .articles {
-            li:not(.news-notice) {
-              flex-direction: column;
+    .column-wrap {
+        .article {
+            flex-direction: column;
 
-              .texts {
+            .left {
                 width: 100%;
 
-                .meta {
-                  font-size: 0.5rem;
+                .item {
+                    width: 80%;
+                    margin: 20px auto;
                 }
-              }
 
-              .pic {
-                width: 95%;
-                margin: 0 auto;
-              }
+                .search {
+                    width: 80%;
+                    margin: 20px auto;
+                    margin-top: 0;
+                }
+
+                .contents {
+                    .articles {
+                        li:not(.news-notice) {
+                            flex-direction: column;
+
+                            .texts {
+                                width: 100%;
+
+                                .meta {
+                                    font-size: 0.5rem;
+                                }
+                            }
+
+                            .pic {
+                                width: 95%;
+                                margin: 0 auto;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 
 @media (min-width: 280px) and (max-width: 1200px) {
-  
-  .banner {
-    height: 15rem !important;
-    img {
-      height: 15rem !important;
-    }
-    .texts {
-      top: 6rem;
-      left: 3rem;
-    }
-  }
-  .article {
-    .columns {
-      width: 40%;
-      .el-tree-node__content {
-        padding: 0 !important;
-       
-      }
-      span {
-        font-size: 0.8rem;
-        white-space: nowrap; 
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+    .banner {
+        height: 15rem !important;
+        img {
+            height: 15rem !important;
+        }
+        .texts {
+            top: 6rem;
+            left: 3rem;
+        }
     }
-  }
-
-  .column-wrap {
     .article {
-      flex-direction: column;
-
-      .left {
-        width: 100%;
+        .columns {
+            width: 40%;
+            .el-tree-node__content {
+                padding: 0 !important;
+            }
+            span {
+                font-size: 0.8rem;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
 
-        .contents {
-          .articles {
-            li:not(.news-notice) {
-              flex-direction: column;
+    .column-wrap {
+        .article {
+            flex-direction: column;
 
+            .left {
+                width: 100%;
 
-              .pic {
-                width: 95%;
-                margin: 0 auto;
-                height: 15rem;
-              }
+                .contents {
+                    .articles {
+                        li:not(.news-notice) {
+                            flex-direction: column;
+
+                            .pic {
+                                width: 95%;
+                                margin: 0 auto;
+                                height: 15rem;
+                            }
+                        }
+                    }
+                }
             }
-          }
         }
-       
-      }
     }
-  }
 }
 
 @media (max-width: 320px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .banner {
-    height: 12rem !important;
-    img {
-      height: 12rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 12rem !important;
+        img {
+            height: 12rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .article {
-    .articles {
-     .pic {
-        width: 40%;
-        height: auto;
-      }
-    }
-  }
-  .banner {
-    height: 14rem !important;
-    img {
-      height: 14rem !important;
-    }
-    .texts {
-      left: 2rem;
-      bottom: 2rem;
-      .text {
-        font-size: 1.5rem;
-      }
+    .article {
+        .articles {
+            .pic {
+                width: 40%;
+                height: auto;
+            }
+        }
     }
-  }
-  .contents {
-    .article-wrap {
-      .articles {
-        .pic {
-          height: auto !important;
+    .banner {
+        height: 14rem !important;
+        img {
+            height: 14rem !important;
         }
-        .otherData {
-          margin-top: 1rem;
-          .leftBox {
-            padding-left: 0;
-            .titleDes {
-              line-height: 1.368rem;
+        .texts {
+            left: 2rem;
+            bottom: 2rem;
+            .text {
+                font-size: 1.5rem;
             }
-          }
         }
-      }
     }
-  }
-  .forms {
-    .switch {
-      width: 100%;
-      flex-direction: column;
-      margin-right: 0;
-      li {
-        width: 90%;
-        margin: 0 auto;
-        margin-top: 10px;
-      }
+    .contents {
+        .article-wrap {
+            .articles {
+                .pic {
+                    height: auto !important;
+                }
+                .otherData {
+                    margin-top: 1rem;
+                    .leftBox {
+                        padding-left: 0;
+                        .titleDes {
+                            line-height: 1.368rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .forms {
+        .switch {
+            width: 100%;
+            flex-direction: column;
+            margin-right: 0;
+            li {
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 10px;
+            }
+        }
     }
-  }
 }
 @media (min-width: 1200px) and (max-width: 1300px) {
-  .article {
-    .articles {
-     .pic {
-        width: 40%;
-        height: auto;
-      }
+    .article {
+        .articles {
+            .pic {
+                width: 40%;
+                height: auto;
+            }
+        }
     }
-  }
 }
-@media (min-width: 1300px)  {
-  .article {
-    .articles {
-     .pic {
-        width: 40%;
-        height: auto;
-      }
+@media (min-width: 1300px) {
+    .article {
+        .articles {
+            .pic {
+                width: 40%;
+                height: auto;
+            }
+        }
     }
-  }
 }
 </style>
diff --git a/src/pages/contactUs/index.vue b/src/pages/contactUs/index.vue
new file mode 100644
index 0000000..34328b3
--- /dev/null
+++ b/src/pages/contactUs/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <Breadcrumb ref="breadcrumb"
+                    :data.sync="routes" />
+        <div class="contact">
+          <div class="fields">
+            <h6>Contact us</h6>
+            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
+            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
+            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
+          </div>
+          <img src="http://10.10.11.7/images/contactUs/2.png"
+               alt=""
+               class="pic">
+          <el-table :data="list"
+                    class="patent-table"
+                    ref="table"
+                    stripe
+                    header-align="center">
+            <el-table-column prop="title"
+                             label="部门"
+                             align="center"
+                             min-width="250"></el-table-column>
+            <el-table-column prop="publishingHouse"
+                             label="联系人"
+                             align="center"
+                             min-width="100"></el-table-column>
+            <el-table-column prop="writersAndEditors"
+                             label="电话"
+                             align="center"
+                             min-width="150"></el-table-column>
+            <el-table-column prop="publicationYear"
+                             label="邮箱"
+                             align="center"
+                             min-width="150"></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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: [],
+      list: []
+    };
+  },
+  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}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => { })
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+
+.single-banner {
+    .banner-img {
+        height: 21.6rem;
+    }
+    .texts {
+        h6 {
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
+        }
+        .banner-des {
+            font-size: 0.96rem;
+        }
+    }
+}
+.block {
+    padding: 2rem 0;
+    background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
+        url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
+    background-color: #f7f8fa;
+}
+.inner {
+    .contact {
+        padding: 3rem 6rem;
+        background-color: #fff;
+    }
+    .fields {
+        position: relative;
+        padding: 2rem;
+        border: 4px solid #f9f9f9;
+        h6 {
+            position: absolute;
+            top: -16px;
+            left: 60px;
+            font-size: 1.1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+            background-color: #fff;
+        }
+        .text {
+            font-size: 1rem;
+            color: #333;
+            line-height: 1.6;
+        }
+    }
+    .pic {
+        width: 100%;
+        margin: 2rem 0 1.5rem;
+    }
+}
+</style>
diff --git a/src/pages/estate/orgSetup/index.vue b/src/pages/estate/orgSetup/index.vue
index a136e92..2f440c6 100644
--- a/src/pages/estate/orgSetup/index.vue
+++ b/src/pages/estate/orgSetup/index.vue
@@ -30,8 +30,7 @@
              alt="">
       </div>
       <div class="lg-bg">
-        <img width="100%"
-             :src="modules[2].form.pic"
+        <img :src="modules[2].form.pic"
              alt="">
       </div>
     </div>
@@ -112,8 +111,9 @@ export default {
     }
 }
 .lg-bg {
-    width: 85%;
+    max-width: 85%;
     margin: 0 auto;
+    text-align: center;
 }
 @media (max-width: 1200px) {
     .tabs {
diff --git a/src/pages/lightSources/index.vue b/src/pages/lightSources/index.vue
new file mode 100644
index 0000000..251ec9b
--- /dev/null
+++ b/src/pages/lightSources/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <!-- <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <img class="block-pic br wow fadeInLeft"
+             data-wow-delay="0.8s"
+             :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+             width="100%"
+             height="536"
+             :src="modules[1].form.pic"
+             alt=""
+             @click="openLink(modules[1].form)">
+      </div>
+    </div> -->
+
+    <div class="block sources">
+      <div class="inner">
+
+        <ul class="tabs wow fadeInLeft">
+          <template v-for="(item, i) in tabs">
+            <li :class="{active: item.id == active}"
+                :key="i"
+                @click="tabChange(item)">{{ item.name }}</li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      active: 0,
+      tabs: [
+        {
+          id: 0,
+          name: '同步辐射光源'
+        },
+        {
+          id: 1,
+          name: '自由电子激光'
+        },
+      ]
+    }
+  },
+  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 => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
+        }
+        .intro {
+            margin-bottom: 2.25rem;
+        }
+    }
+}
+.block-pic {
+    transition: 0.3s;
+    height: auto;
+    &.br {
+        border-radius: 270px;
+    }
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+.tabs {
+    justify-content: flex-start;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index 0e52b1e..b8d914c 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -1,93 +1,152 @@
 <template>
   <div class="wrap">
-    <el-carousel  :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'">
+    <el-carousel :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': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(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="tabs">
-      <ul class="scollBox wow fadeInLeft" ref="tabs">
+    <div class="newsTab">
+      <ul class="scollBox wow fadeInLeft"
+          ref="newsTab">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
+          <li v-if="item.columnName"
+              :class="{active: i == curColumn}"
+              :key="i"
+              @click="tabChange($event,i)">{{ item.columnName }}</li>
         </template>
       </ul>
     </div>
 
     <div class="block">
-      <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
-        <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
-          <img width="50%" height="410" class="titileImg" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
+      <div class="inner"
+           v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
+        <div class="news-banner wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <img width="50%"
+               height="410"
+               class="titileImg"
+               :src="curArticle.titleImg"
+               alt=""
+               onerror="javascript:this.src='./images/3.png';">
           <div class="right">
             <h6>{{ curArticle.title }}</h6>
-            <div class="des" v-html="curArticle.mainBody"></div>
+            <div class="des"
+                 v-html="curArticle.mainBody"></div>
             <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
             <ul class="inds">
-              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
+                  :key="i"
+                  :class="{active: curInd == i - 1}"
+                  @click.stop="switchCarousel(i - 1)"></li>
             </ul>
           </div>
         </div>
-        
+
         <ul class="card">
           <template v-for="(item, i) in modules[1].list[curColumn].articles">
-            <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
-              <img class="pic" :src="item.titleImg" alt="">
+            <li v-if="i > 2"
+                :key="i"
+                class="wow fadeInDown"
+                :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+              <img class="pic"
+                   :src="item.titleImg"
+                   alt="">
               <div class="texts">
                 <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
                 <div class="des">{{ item.title }}</div>
-                <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
+                <img class="arrow"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="toArtice(item, modules[1].list[curColumn])">
               </div>
             </li>
           </template>
         </ul>
-        <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">More news ></div>
+        <div class="more wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toMore">More news ></div>
       </div>
     </div>
 
     <div class="block gray">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <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 class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="" onerror="javascript:this.src='./images/2.png';">
+        <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 class="pic"
+                 width="100%"
+                 height="400"
+                 :src="articles[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/2.png';">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
-              <div class="des" v-html="articles[0].mainBody"></div>
+              <div class="des"
+                   v-html="articles[0].mainBody"></div>
             </div>
           </div>
-          <div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
+          <div v-if="articles.length > 1"
+               class="right wow fadeInRight"
+               data-wow-delay="0.5s">
             <ul class="show-card">
-              <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
-                <img class="pic" :src="articles[1].titleImg" alt="">
+              <li v-if="articles[1]"
+                  @click="toArtice(articles[1], modules[3].form)">
+                <img class="pic"
+                     :src="articles[1].titleImg"
+                     alt="">
                 <div class="text">{{ articles[1].title }}</div>
               </li>
-              <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
-                <img class="pic" :src="articles[2].titleImg" alt="">
+              <li v-if="articles[2]"
+                  @click="toArtice(articles[2], modules[3].form)">
+                <img class="pic"
+                     :src="articles[2].titleImg"
+                     alt="">
                 <div class="text">{{ articles[2].title }}</div>
               </li>
             </ul>
             <ul class="card-list">
               <template v-for="(item, i) in articles">
-                <li v-if="i > 2" :key="i">
-                  <img class="pic" :src="item.titleImg" alt="">
+                <li v-if="i > 2"
+                    :key="i">
+                  <img class="pic"
+                       :src="item.titleImg"
+                       alt="">
                   <div class="texts">
                     <h6>{{ item.title }}</h6>
-                    <div class="des" v-html="item.mainBody"></div>
+                    <div class="des"
+                         v-html="item.mainBody"></div>
                   </div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt=""
+                       @click="toArtice(item, modules[3].form)">
                 </li>
               </template>
             </ul>
           </div>
         </div>
-        <div class="all-link m-t-10" @click="toAll(modules[3].form)">
-          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        <div class="all-link m-t-10"
+             @click="toAll(modules[3].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
         </div>
       </div>
     </div>
@@ -95,10 +154,19 @@
     <div class="block conference">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
-        <div class="shows" v-if="articles1.length">
-          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
-            <img class="pic" width="100%" height="558" :src="articles1[0].titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <div class="shows"
+             v-if="articles1.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles1[0], modules[5].form)">
+            <img class="pic"
+                 width="100%"
+                 height="558"
+                 :src="articles1[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/1.png';">
             <div class="texts">
               <div class="meta">
                 <p class="date">09</p>
@@ -106,30 +174,48 @@
               </div>
               <div>
                 <h6>{{ articles1[0].title }}</h6>
-                <div class="des" v-html="articles1[0].mainBody"></div>
+                <div class="des"
+                     v-html="articles1[0].mainBody"></div>
               </div>
             </div>
           </div>
-          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
+          <ul class="card-list wow fadeInRight"
+              data-wow-delay="0.5s">
             <template v-for="(item, i) in articles1">
-              <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
-                <img class="pic" :src="item.titleImg" alt="">
+              <li v-if="i"
+                  :key="i"
+                  @click="toArtice(item, modules[5].form)">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
-                  <p v-if="item.keynoteSpeaker" class="text">
-                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                  <p v-if="item.keynoteSpeaker"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/mine.png"
+                         alt="">
                     {{ item.keynoteSpeaker }}
                   </p>
-                  <p v-if="item.activityStartTime" class="text">
-                    <img class="icon" src="@/assets/images/time.png" alt="">
+                  <p v-if="item.activityStartTime"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/time.png"
+                         alt="">
                     Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                   </p>
-                  <p v-if="item.onlineLocation" class="text">
-                    <img class="icon" src="@/assets/images/online.png" alt="">
+                  <p v-if="item.onlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/online.png"
+                         alt="">
                     Onlone: {{ item.onlineLocation }}
                   </p>
-                  <p v-if="item.offlineLocation" class="text">
-                    <img class="icon" src="@/assets/images/location.png" alt="">
+                  <p v-if="item.offlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/location.png"
+                         alt="">
                     Address: {{ item.offlineLocation }}
                   </p>
                 </div>
@@ -137,8 +223,11 @@
             </template>
           </ul>
         </div>
-        <div class="all-link m-t-10" @click="toAll(modules[5].form)">
-          <span style="color: #fff">{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        <div class="all-link m-t-10"
+             @click="toAll(modules[5].form)">
+          <span style="color: #fff">{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
         </div>
       </div>
     </div>
@@ -152,7 +241,7 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       curColumn: 0,
       articles: [],
@@ -162,12 +251,12 @@ export default {
       timer: null
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -189,34 +278,34 @@ export default {
                   const list = Util.removeTag(data.slice(0, e.articleNum || 6))
                   this.$set(e, 'articles', list)
                   if (list.length && !i) this.curArticle = list[0]
-                }).catch(err => {})
+                }).catch(err => { })
               } else {
                 this.$set(e, 'articles', [])
               }
             })
           }
-          
+
           if (json[3].form.column.length) {
             const { column, site, articleNum } = json[3].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles = Util.removeTag(data.slice(0, articleNum || 6))
-            }).catch(err => {})
+            }).catch(err => { })
           }
           if (json[5].form.column.length) {
             const { column, site, articleNum } = json[5].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles1 = Util.removeTag(data.slice(0, articleNum || 5))
-            }).catch(err => {})
+            }).catch(err => { })
           }
 
           this.modules = json
           console.log(this.modules)
           this.carouselInterval()
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 自动轮播
-    carouselInterval() {
+    carouselInterval () {
       clearInterval(this.timer)
       this.timer = setInterval(() => {
         this.curInd++
@@ -225,16 +314,16 @@ export default {
       }, 5000)
     },
     // 手动轮播切换
-    switchCarousel(i) {
+    switchCarousel (i) {
       if (this.curInd !== i) {
         this.curInd = i
         this.curArticle = this.modules[1].list[this.curColumn].articles[i] || {}
       }
     },
     // tab回调
-    tabChange(e,i) {
-      const tabs = this.$refs.tabs
-      tabs.scrollLeft  = e.target.offsetLeft
+    tabChange (e, i) {
+      const newsTab = this.$refs.newsTab
+      newsTab.scrollLeft = e.target.offsetLeft
       // e.target.offsetLeft
       const { column } = this.modules[1].list[i]
       if (column && column.length) {
@@ -264,9 +353,9 @@ export default {
             if (data.isOpen) {
               var userAgent = navigator.userAgent;
               var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
-              if(isSafari) {
+              if (isSafari) {
                 window.location.href = href
-              }else {
+              } else {
                 window.open(href)
               }
             } else {
@@ -274,20 +363,20 @@ export default {
             }
           } else if (typeId === 3) {
             // 长页栏目直接获取path
-            this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
+            this.$router.push(`/${data.path}?id=${id}`).catch(err => { })
           } else {
             this.curInd = 0
             this.curColumn = i
             this.curArticle = this.modules[1].list[i].articles[0] || {}
             this.carouselInterval()
           }
-        }).catch(err => {})
+        }).catch(err => { })
       } else {
         this.curColumn = i
       }
     },
     // 跳转more
-    toMore() {
+    toMore () {
       const { column } = this.modules[1].list[this.curColumn]
       column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
     }
@@ -297,1393 +386,1384 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 24rem;
-    .el-carousel__container{
-      height: 24rem;
-    }
-    img{
-      height: 24rem;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 24rem;
+        .el-carousel__container {
+            height: 24rem;
+        }
+        img {
+            height: 24rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
+    .banner-name {
+        font-size: 2.16rem;
+    }
 }
-.block  {
-  padding: 3.85rem 0;
+.block {
+    padding: 3.85rem 0;
 }
-.tabs {
-  box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26);
-  .scollBox {
-    width: 85.714rem;
-    margin: auto;
-    display: flex;
-    justify-content: center;
-  }
-  li {
-    flex: 1;
-    text-align: center;
-    padding: 1.25rem .95rem;
-    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;
+.newsTab {
+    box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
+    .scollBox {
+        width: 85.714rem;
+        margin: auto;
+        display: flex;
+        justify-content: center;
+    }
+    li {
+        flex: 1;
+        text-align: center;
+        padding: 1.25rem 0.95rem;
+        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;
+        }
     }
-  }
 }
 .lg {
-  width: 85.714rem;
+    width: 85.714rem;
 }
 /deep/.articles {
-  width: 50%;
-  .el-carousel__indicators--horizontal {
-    bottom: 1.25rem;
-    left: 50.25rem;
-  }
-}
-.lg {
-  .intro  {
-    margin-bottom: 4.57rem;
-  }
-}
-.news-banner {
-  display: flex;
-  cursor: pointer;
-  .titileImg {
-    height: auto;
-  }
-  .pic {
-    width: 43.75rem;
-    height: 23.75rem;
-  }
-  .right {
-    position: relative;
     width: 50%;
-    padding: 2.5rem 2.5rem 1.5rem;
-    background: #1583FF;
-    color: #fff;
-    &:hover {
-      background: #465f85;
-      h6, .des, .meta {
-        color: #fff;
-        transform: translateY(15px);
-      }
-    }
-  }
-  .inds {
-    position: absolute;
-    bottom: 2.5rem;
-    left: 3.75rem;
-    display: flex;
-    li {
-      width: .625rem;
-      height: .625rem;
-      margin-right: .75rem;
-      background: #FFFFFF;
-      border-radius: 50%;
-      transition: .2s;
-      &.active {
-        width: 1.875rem;
-        background: rgba(255,255,255,0.3);
-        border-radius: 5px;
-      }
+    .el-carousel__indicators--horizontal {
+        bottom: 1.25rem;
+        left: 50.25rem;
     }
-  }
-  h6 {
-    font-size: 1.2rem;
-    transition: .3s;
-  }
-  .des {
-    margin: 1.5rem 0;
-    font-size: .88rem;
-    line-height: 1.3714rem;
-    transition: .3s;
-  }
-  .meta {
-    font-size: .88rem;
-    transition: .3s;
-  }
 }
-.card {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 2rem;
-  width: 100%;
-
-  li {
-    flex: 1;
-    margin-right: .88rem;
-    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
-    border-radius: 6px;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-    &:last-child {
-      margin-right: 0;
+.lg {
+    .intro {
+        margin-bottom: 4.57rem;
     }
-  }
-  .pic {
-    width: 100%;
-    height: auto;
-  }
-  .texts {
-    padding: 2rem 1.5rem;
-  }
-  .meta {
-    font-size: .88rem;
-    color: #666;
-  }
-  .des {
-    height: 3.75rem;
-    margin: 10px 0;
-    font-size: 1.25rem;
-    font-family: SFProDisplay;
-    font-weight: 500;
-    color: #333;
-    line-height: 1.7rem;
-    -webkit-line-clamp: 2;
-  }
-  .arrow {
-    width: 2.25rem;
-  }
-}
-.more {
-  width: 23.375rem;
-  margin: 3.625rem auto 0;
-  line-height: 64px;
-  font-size: 1.875rem;
-  text-align: center;
-  color: #1583FF;
-  border-radius: 35px;
-  border: 2px solid #2B6CEF;
-  cursor: pointer;
 }
-.shop-shows {
-  display: flex;
-  .left {
-    width: 41.25rem;
-    margin-right: 1.25rem;
-    background-color: #fff;
+.news-banner {
+    display: flex;
     cursor: pointer;
-    overflow: hidden;
+    .titileImg {
+        height: auto;
+    }
     .pic {
-      transition: .3s;
-      height: auto;
-      &:hover {
-        transform: scale(1.05);
-      }
+        width: 43.75rem;
+        height: 23.75rem;
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 2.5rem 2.5rem 1.5rem;
+        background: #1583ff;
+        color: #fff;
+        &:hover {
+            background: #465f85;
+            h6,
+            .des,
+            .meta {
+                color: #fff;
+                transform: translateY(15px);
+            }
+        }
     }
-    .texts {
-      padding: 2rem 1.5rem;
+    .inds {
+        position: absolute;
+        bottom: 2.5rem;
+        left: 3.75rem;
+        display: flex;
+        li {
+            width: 0.625rem;
+            height: 0.625rem;
+            margin-right: 0.75rem;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: 0.2s;
+            &.active {
+                width: 1.875rem;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 5px;
+            }
+        }
     }
     h6 {
-      font-size: 1.2rem;
-      color: #272727;
+        font-size: 1.2rem;
+        transition: 0.3s;
     }
     .des {
-      margin-top: 10px;
-      font-size: .88rem;
-      color: #666;
-      line-height: 1.714rem;
-    }
-  }
-  .right {
-    width: 60%;
-    overflow: hidden;
-  }
-  .show-card {
-    display: flex;
-    margin-bottom: 1.25rem;
-    li {
-      position: relative;
-      height: auto;
-      overflow: hidden;
-      cursor: pointer;
-      
-      &:first-child {
-        margin-right: 1.375rem;
-      }
-    }
-    .pic {
-      width: 25rem;
-      height: 12.3125rem;
-      transition: .3s;
-      &:hover {
-        transform: scale(1.05);
-      }
+        margin: 1.5rem 0;
+        font-size: 0.88rem;
+        line-height: 1.3714rem;
+        transition: 0.3s;
     }
-    .text {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      font-size: .88rem;
-      color: #fff;
-      padding: 0 1rem;
-      line-height: 48px;
-      text-align: center;
-      @include ellipsis;
-      background: rgba(0,0,0,0.49);
-      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+    .meta {
+        font-size: 0.88rem;
+        transition: 0.3s;
     }
-  }
-  .card-list {
-    padding: 1.5rem 1.3rem;
-    background-color: #fff;
+}
+.card {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+    width: 100%;
+
     li {
-      display: inline-flex;
-      align-items: center;
-      margin-bottom: .9rem;
-      transition: .3s;
-      &:hover {
-        transform: scale(1.05);
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
+        flex: 1;
+        margin-right: 0.88rem;
+        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+        border-radius: 6px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
     }
     .pic {
-      width: 8.25rem;
-      height: auto;
-      margin-right: 1.75rem;
+        width: 100%;
+        height: auto;
     }
     .texts {
-      width: 24.5rem;
-      margin-right: 3.75rem;
+        padding: 2rem 1.5rem;
     }
-    h6 {
-      margin-bottom: 10px;
-      font-size: 1rem;
-      color: #272727;
-      display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    .meta {
+        font-size: 0.88rem;
+        color: #666;
     }
     .des {
-      font-size: .7rem;
-      color: #666;
-      line-height: 1.3714rem;
-      text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
-      -webkit-line-clamp: 2;
+        height: 3.75rem;
+        margin: 10px 0;
+        font-size: 1.25rem;
+        font-family: SFProDisplay;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.7rem;
+        -webkit-line-clamp: 2;
     }
     .arrow {
-      width: 2.25rem;
+        width: 2.25rem;
     }
-  }
 }
-.conference {
-  background: #072947;
-  .b-title, .intro {
-    color: #fff;
-  }
-  .shows {
-    display: flex;
-  }
-  .left {
-    width: 44.875rem;
-    margin-right: 20px;
-    overflow: hidden;
+.more {
+    width: 23.375rem;
+    margin: 3.625rem auto 0;
+    line-height: 64px;
+    font-size: 1.875rem;
+    text-align: center;
+    color: #1583ff;
+    border-radius: 35px;
+    border: 2px solid #2b6cef;
     cursor: pointer;
-    .pic {
-      transition: .3s;
-      height: auto;
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-    .texts {
-      display: flex;
-      padding: 3.78rem 1.5rem;
-      background-color: #fff;
-    }
-    .meta {
-      padding: .5714rem 1.314rem .5714rem 0;
-      margin-right: 1.828rem;
-      text-align: center;
-      border-right: 1px solid #ddd;
-    }
-    .date {
-      font-size: 2.5714rem;
-      font-family: DINAlternate-Bold, DINAlternate;
-      font-weight: bold;
-      color: #1F1F1F;
-      line-height: 2.9714rem;
-    }
-    .year {
-      font-size: 0.9142rem;
-      white-space: nowrap;
-      color: #666;
-    }
-    h6 {
-      font-size: 1.1428rem;
-      color: #272727;
-    }
-    .des {
-      margin-top: 10px;
-      font-size: .8rem;
-      color: #666;
-      line-height: 1.3714rem;
-    }
-  }
-  .card-list {
-    width: 50%;
-    li {
-      display: flex;
-      padding: 0.8571rem;
-      margin-bottom: 0.7428rem;
-      background-color: #fff;
-      cursor: pointer;
-      align-items: center;
-      transition: .3s;
-      height: 9rem;
-      &:last-child {
-        margin-bottom: 0;
-      }
-      &:hover {
-        transform: translateX(20px);
-      }
-    }
-    .pic {
-      width: 10.7428rem;
-      height: auto;
-      margin-right: 1.6rem;
-    }
-    h6 {
-      margin-bottom: 0.2714rem;
-      font-size: 1.1428rem;
-      color: #333;              
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-    .text {
-      display: flex;
-      align-items: center;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    .icon {
-      margin-right: 5px;
-    }
-  }
 }
-
-
-
-@media (max-width: 1200px) {
- .tabs {
-  overflow-x: scroll;
-  display: -webkit-box;
- } 
- .block {
-  padding: 50px 0 ;
-  .inner{
-    .more {
-      width: 100%;
-      margin: 20px auto 0;
-    }
-    .news-banner{
-      flex-direction: column;
-      img{
-        width: 100%;
-      }
-      .right {
-        margin-top: 10px;
-        width: 100%;
-        .inds{
-          left: 50%;
-          margin-left: -43px;
+.shop-shows {
+    display: flex;
+    .left {
+        width: 41.25rem;
+        margin-right: 1.25rem;
+        background-color: #fff;
+        cursor: pointer;
+        overflow: hidden;
+        .pic {
+            transition: 0.3s;
+            height: auto;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .texts {
+            padding: 2rem 1.5rem;
+        }
+        h6 {
+            font-size: 1.2rem;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 0.88rem;
+            color: #666;
+            line-height: 1.714rem;
         }
-      }
-    }
-    .card{
-      flex-direction: column;
-      .wow {
-        width: 95%;
-        margin: 20px auto;
-      }
     }
-    .b-title{
-      font-size: 20px;
+    .right {
+        width: 60%;
+        overflow: hidden;
     }
-    .intro {
-      font-size: 15px;
-      margin-bottom: 50px;
-    }
-    .shop-shows{
-       flex-direction: column;
-       .left {
-        width: 95%;margin: 0 auto;
-       }
-       .right {
-        width: 93%;
-        margin: 20px auto;
-        .show-card{
-          flex-direction: column;
-          li {
-            width: 100%;
-            .pic{
-              width: 100%;
+    .show-card {
+        display: flex;
+        margin-bottom: 1.25rem;
+        li {
+            position: relative;
+            height: auto;
+            overflow: hidden;
+            cursor: pointer;
+
+            &:first-child {
+                margin-right: 1.375rem;
             }
-          }
         }
-        .card-list{
-          li {
-            .texts{
-              margin-right: 30px;
+        .pic {
+            width: 25rem;
+            height: 12.3125rem;
+            transition: 0.3s;
+            &:hover {
+                transform: scale(1.05);
             }
-          }
         }
-       }
-    }
-  }
- }
-}
-
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 15rem;
-    .el-carousel__container{
-      height: 15rem;
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            font-size: 0.88rem;
+            color: #fff;
+            padding: 0 1rem;
+            line-height: 48px;
+            text-align: center;
+            @include ellipsis;
+            background: rgba(0, 0, 0, 0.49);
+            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+        }
     }
-    img{
-      height: 15rem;
+    .card-list {
+        padding: 1.5rem 1.3rem;
+        background-color: #fff;
+        li {
+            display: inline-flex;
+            align-items: center;
+            margin-bottom: 0.9rem;
+            transition: 0.3s;
+            &:hover {
+                transform: scale(1.05);
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+        .pic {
+            width: 8.25rem;
+            height: auto;
+            margin-right: 1.75rem;
+        }
+        .texts {
+            width: 24.5rem;
+            margin-right: 3.75rem;
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 1rem;
+            color: #272727;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        .des {
+            font-size: 0.7rem;
+            color: #666;
+            line-height: 1.3714rem;
+            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+            -webkit-line-clamp: 2;
+        }
+        .arrow {
+            width: 2.25rem;
+        }
     }
-  }
-}
-.banner-item .banner-name {
-  font-size: 1.5rem;
 }
-  .tabs  {
-    li {
-      padding: 15px 10px;
-      font-size: 15px;
-      margin: 0;
+.conference {
+    background: #072947;
+    .b-title,
+    .intro {
+        color: #fff;
     }
-  }
-  .block{
-    padding: 20px 0;
-    .inner {
-      width: 90%;
-      .news-banner{
-        img{
-          height: 20rem;
+    .shows {
+        display: flex;
+    }
+    .left {
+        width: 44.875rem;
+        margin-right: 20px;
+        overflow: hidden;
+        cursor: pointer;
+        .pic {
+            transition: 0.3s;
+            height: auto;
+            &:hover {
+                transform: scale(1.05);
+            }
         }
-      }
-      .b-title{
-        margin-bottom: 20px;
-      }
-      .intro {
-        margin-bottom: 20px;
-      }
-      .shop-shows{
-        .left {
-          img{
-            height: 20rem;
-          }
+        .texts {
+            display: flex;
+            padding: 3.78rem 1.5rem;
+            background-color: #fff;
         }
-      }
-      .show-card{
-        .text{
-          font-size: 13px;
-          line-height: 20px;
-          white-space: inherit
+        .meta {
+            padding: 0.5714rem 1.314rem 0.5714rem 0;
+            margin-right: 1.828rem;
+            text-align: center;
+            border-right: 1px solid #ddd;
         }
-      }
-      .card-list{
-        padding: 20px 10px ;
+        .date {
+            font-size: 2.5714rem;
+            font-family: DINAlternate-Bold, DINAlternate;
+            font-weight: bold;
+            color: #1f1f1f;
+            line-height: 2.9714rem;
+        }
+        .year {
+            font-size: 0.9142rem;
+            white-space: nowrap;
+            color: #666;
+        }
+        h6 {
+            font-size: 1.1428rem;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 0.8rem;
+            color: #666;
+            line-height: 1.3714rem;
+        }
+    }
+    .card-list {
+        width: 50%;
         li {
-          width: 100%;
-          img{
-            margin-right: 10px;
-          }
-          .texts{
-            margin-right: 10px;
-            h6{
-              font-size: 15px;
-              font-weight: bold;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 3;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              margin-bottom: 5px;
+            display: flex;
+            padding: 0.8571rem;
+            margin-bottom: 0.7428rem;
+            background-color: #fff;
+            cursor: pointer;
+            align-items: center;
+            transition: 0.3s;
+            height: 9rem;
+            &:last-child {
+                margin-bottom: 0;
             }
-          }
-          .des {
-            line-height: 15px;
-          }
-          .arrow{
-              margin-right: 0;
+            &:hover {
+                transform: translateX(20px);
             }
         }
-      }
-      .shows{
-        flex-direction: column;
-        .left {
-          width: 100%;
-          .pic {
-            height: 20rem;
-          }
+        .pic {
+            width: 10.7428rem;
+            height: auto;
+            margin-right: 1.6rem;
+        }
+        h6 {
+            margin-bottom: 0.2714rem;
+            font-size: 1.1428rem;
+            color: #333;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
-        .card-list{
-          width: 100%;
-          padding: 20px 0;
-          li {
-            .pic {
-              width: 100px;
-              height: 7.5rem;
-            }
-            .texts{
-             h6{
-              font-size: 15px;font-weight: bold;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
-              text-overflow: ellipsis;
-              overflow: hidden;
-             }
-             .text{
-              margin: 2px 0;
-              font-size: 12px;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 1;
-              text-overflow: ellipsis;
-              overflow: hidden;
-             }
+        .text {
+            display: flex;
+            align-items: center;
+            &:last-child {
+                margin-bottom: 0;
             }
-          }
         }
-      }
+        .icon {
+            margin-right: 5px;
+        }
     }
-  }
 }
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
+
+@media (max-width: 1200px) {
+    .newsTab {
+        overflow-x: scroll;
+        display: -webkit-box;
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            .more {
+                width: 100%;
+                margin: 20px auto 0;
+            }
+            .news-banner {
+                flex-direction: column;
+                img {
+                    width: 100%;
+                }
+                .right {
+                    margin-top: 10px;
+                    width: 100%;
+                    .inds {
+                        left: 50%;
+                        margin-left: -43px;
+                    }
+                }
+            }
+            .card {
+                flex-direction: column;
+                .wow {
+                    width: 95%;
+                    margin: 20px auto;
+                }
+            }
+            .b-title {
+                font-size: 20px;
+            }
+            .intro {
+                font-size: 15px;
+                margin-bottom: 50px;
+            }
+            .shop-shows {
+                flex-direction: column;
+                .left {
+                    width: 95%;
+                    margin: 0 auto;
+                }
+                .right {
+                    width: 93%;
+                    margin: 20px auto;
+                    .show-card {
+                        flex-direction: column;
+                        li {
+                            width: 100%;
+                            .pic {
+                                width: 100%;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .texts {
+                                margin-right: 30px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem;
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+            .el-carousel__container {
+                height: 15rem;
+            }
+            img {
+                height: 15rem;
+            }
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .banner-item .banner-name {
+        font-size: 1.5rem;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .newsTab {
+        li {
+            padding: 15px 10px;
+            font-size: 15px;
+            margin: 0;
+        }
     }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
+    .block {
+        padding: 20px 0;
+        .inner {
+            width: 90%;
+            .news-banner {
+                img {
+                    height: 20rem;
+                }
+            }
+            .b-title {
+                margin-bottom: 20px;
+            }
+            .intro {
+                margin-bottom: 20px;
+            }
+            .shop-shows {
+                .left {
+                    img {
+                        height: 20rem;
+                    }
+                }
+            }
+            .show-card {
+                .text {
+                    font-size: 13px;
+                    line-height: 20px;
+                    white-space: inherit;
+                }
+            }
+            .card-list {
+                padding: 20px 10px;
+                li {
+                    width: 100%;
+                    img {
+                        margin-right: 10px;
+                    }
+                    .texts {
+                        margin-right: 10px;
+                        h6 {
+                            font-size: 15px;
+                            font-weight: bold;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 3;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                            margin-bottom: 5px;
+                        }
+                    }
+                    .des {
+                        line-height: 15px;
+                    }
+                    .arrow {
+                        margin-right: 0;
+                    }
+                }
+            }
+            .shows {
+                flex-direction: column;
+                .left {
+                    width: 100%;
+                    .pic {
+                        height: 20rem;
+                    }
+                }
+                .card-list {
+                    width: 100%;
+                    padding: 20px 0;
+                    li {
+                        .pic {
+                            width: 100px;
+                            height: 7.5rem;
+                        }
+                        .texts {
+                            h6 {
+                                font-size: 15px;
+                                font-weight: bold;
+                                display: -webkit-box;
+                                -webkit-box-orient: vertical;
+                                -webkit-line-clamp: 1;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                            }
+                            .text {
+                                margin: 2px 0;
+                                font-size: 12px;
+                                display: -webkit-box;
+                                -webkit-box-orient: vertical;
+                                -webkit-line-clamp: 1;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        img {
-          height: auto;
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        li {
-          .pic {
-            height: auto;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-      }
-      .shop-shows {
-        .left {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          .show-card {
-            li {
-              margin-top: 1.25rem;
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 6rem;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
-        }
-      }
-      .shows {
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-              height: auto !important;
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
             }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
             }
-           
-          }
-      }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 6rem;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        img {
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        li {
-          .pic {
-            height: auto;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-      }
-      .shop-shows {
-        .left {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          .show-card {
-            li {
-              margin-top: 1.25rem;
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 6rem;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
         }
-      }
-      .shows {
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-        }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-              height: auto !important;
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
             }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
             }
-           
-          }
-      }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 6rem;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+        }
+    }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        img {
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        li {
-          .pic {
-            height: auto;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-      }
-      .shop-shows {
-        .left {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          .show-card {
-            li {
-              margin-top: 1.25rem;
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 30%;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
         }
-      }
-      .shows {
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-                width: 35%;
-                height: auto !important;
-              }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
             }
-           
-          }
-      }
+        }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        img {
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        li {
-          .pic {
-            height: auto;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-      }
-      .shop-shows {
-        .left {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          .show-card {
-            li {
-              margin-top: 1.25rem;
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 30%;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
         }
-      }
-      .shows {
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .block {
+        .inner {
+            .news-banner {
+                img {
+                    height: auto;
+                }
+                .right {
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    .show-card {
+                        li {
+                            margin-top: 1.25rem;
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-                width: 35%;
-                height: auto !important;
-              }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
             }
-           
-          }
-      }
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        flex-direction: row;
-        img {
-          width: 50%;
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          margin-top: 0;
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          width: 30% !important;
-          margin-right: .5rem;
-          margin: 0 .5rem 0 0 !important;
-          .pic {
-            height: auto;
-          }
-          &:last-child() {
-            margin-right: 0 !important;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-       
-      }
-      .shop-shows {
-        flex-direction: row;
-        .left {
-          margin-right: .5rem;
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          margin-top: 0;
-          .show-card {
-            li {
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-              &:nth-child(2) {
-                margin-top: .5rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 30%;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
         }
-      }
-      .shows {
-        flex-direction: row;
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-        }
-        .card-list {
-          padding: 0;
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0.5rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-                width: 35%;
-                height: auto !important;
-              }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
             }
-           
-          }
-      }
+        }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        flex-direction: row;
-        img {
-          width: 50%;
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-        .right {
-          margin-top: 0;
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 12rem;
         }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          width: 30% !important;
-          margin-right: .5rem;
-          margin: 0 .5rem 0 0 !important;
-          .pic {
-            height: auto;
-          }
-          &:last-child() {
-            margin-right: 0 !important;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
         }
-       
-      }
-      .shop-shows {
-        flex-direction: row;
-        .left {
-          margin-right: .5rem;
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-        .right {
-          margin-top: 0;
-          .show-card {
-            li {
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-              &:nth-child(2) {
-                margin-top: .5rem;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 30%;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
         }
-      }
-      .shows {
-        flex-direction: row;
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-        }
-        .card-list {
-          padding: 0;
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0.5rem;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-                width: 35%;
-                height: auto !important;
-              }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
             }
-           
-          }
-      }
+        }
     }
-  }
-  
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 21.6rem;
-    }
-    /deep/ .el-carousel__container{
-      height: 21.6rem;
-    }
-    /deep/  .el-carousel__item {
-      height: 21.6rem;
-    }
-  }
-  .banner-item{
-    img {
-      height: 21.6rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .tabs {
-    .scollBox  {
-      width: auto;
-      li {
-        padding: 1rem;
-        white-space: nowrap;
-      }
-    }
-  }
-  .block {
-    .inner {
-      .news-banner  {
-        flex-direction: row;
-        img {
-          width: 50%;
-          height: auto;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 21.6rem;
         }
-        .right {
-          margin-top: 0;
-          padding: 1.25rem 1.25rem 5rem;
+        /deep/ .el-carousel__container {
+            height: 21.6rem;
         }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          width: 30% !important;
-          margin-right: .5rem;
-          margin: 0 .5rem 0 0 !important;
-          .pic {
-            height: auto;
-          }
-          &:last-child() {
-            margin-right: 0 !important;
-          }
+        /deep/ .el-carousel__item {
+            height: 21.6rem;
         }
-       
-      }
-      .shop-shows {
-        flex-direction: row;
-        .left {
-          margin-right: .5rem;
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
+    }
+    .banner-item {
+        img {
+            height: 21.6rem !important;
         }
-        .right {
-          margin-top: 0;
-          .show-card {
-            flex-direction: row;
-            li {
-              .pic {
-                height: auto;
-              }
-              .text {
-                font-size: 1rem;
-              }
-              &:nth-child(2) {
-                margin-top: 0;
-              }
-            }
-          }
-          .card-list {
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .newsTab {
+        .scollBox {
+            width: auto;
             li {
-              .pic {
-                width: 30%;
-              }
+                padding: 1rem;
+                white-space: nowrap;
             }
-          }
-        }
-      }
-      .shows {
-        flex-direction: row;
-        .left{
-          .pic {
-            height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
         }
-        .card-list {
-          padding: 0;
+    }
+    .block {
+        .inner {
+            .news-banner {
+                flex-direction: row;
+                img {
+                    width: 50%;
+                    height: auto;
+                }
+                .right {
+                    margin-top: 0;
+                    padding: 1.25rem 1.25rem 5rem;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    width: 30% !important;
+                    margin-right: 0.5rem;
+                    margin: 0 0.5rem 0 0 !important;
+                    .pic {
+                        height: auto;
+                    }
+                    &:last-child() {
+                        margin-right: 0 !important;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    margin-right: 0.5rem;
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .right {
+                    margin-top: 0;
+                    .show-card {
+                        flex-direction: row;
+                        li {
+                            .pic {
+                                height: auto;
+                            }
+                            .text {
+                                font-size: 1rem;
+                            }
+                            &:nth-child(2) {
+                                margin-top: 0;
+                            }
+                        }
+                    }
+                    .card-list {
+                        li {
+                            .pic {
+                                width: 30%;
+                            }
+                        }
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+                .card-list {
+                    padding: 0;
+                }
+            }
         }
-      }
     }
-  }
-  .conference {
-    .inner  {
-      .shows {
-        .card-list {
-            li {
-              .pic {
-                width: 35%;
-                height: auto !important;
-              }
+    .conference {
+        .inner {
+            .shows {
+                .card-list {
+                    li {
+                        .pic {
+                            width: 35%;
+                            height: auto !important;
+                        }
+                    }
+                }
             }
-           
-          }
-      }
+        }
     }
-  }
-  
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue
index 5b97e0f..90754a9 100644
--- a/src/pages/overviewDevHistory/index.vue
+++ b/src/pages/overviewDevHistory/index.vue
@@ -89,33 +89,9 @@ export default {
         url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
 }
 .single-banner {
-    .banner-img {
-        height: 24rem;
-    }
     .texts {
         top: auto !important;
         bottom: 2rem;
-        h6 {
-            font-size: 2.16rem;
-        }
-    }
-}
-.tabs {
-    display: flex;
-    justify-content: center;
-    box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
-    li {
-        padding: 1.25rem 0.95rem;
-        margin: 0 0.5rem;
-        font-size: 1.05rem;
-        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;
-        }
     }
 }
 .history {
@@ -228,16 +204,6 @@ export default {
     }
 }
 @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 {
diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue
index f8cf0c7..f5f4445 100644
--- a/src/pages/overviewIntro/index.vue
+++ b/src/pages/overviewIntro/index.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="wrap" v-if="modules.length>=1">
+  <div class="wrap"
+       v-if="modules.length>=1">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img" :src="modules[0].form.pic" alt="">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -9,26 +12,35 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="tab-content">
       <div class="intro">
-        <img class="pic" src="http://10.10.11.7/images/overviewIntro/1.png" alt="">
+        <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="">
+            <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 class="text"
+               v-html="modules[1].form.des"></div>
         </div>
       </div>
-      <div class="intro-bg" v-if="modules[2]">
+      <div class="intro-bg"
+           v-if="modules[2]">
         <div class="mask"></div>
         <div class="texts">
           <h6>{{ modules[2].form.title }}</h6>
-          <div class="des" v-html="modules[2].form.des"></div>
+          <div class="des"
+               v-html="modules[2].form.des"></div>
         </div>
       </div>
     </div>
@@ -50,336 +62,159 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
-    
+
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .wrap {
-  background: url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+    background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
 }
 .single-banner {
-  .banner-img {
-    height: 24rem;
-  }
-  .texts {
-    top: auto !important;
-    bottom: 2rem;
-    h6 {
-      font-size: 2.16rem
-    }
-  }
-}
-.tabs {
-  display: flex;
-  justify-content: center;
-  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
-  li {
-    padding: 1.25rem .95rem;
-    margin: 0 .5rem;
-    font-size: 1.05rem;
-    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: 3.85rem;
-  .intro {
-    display: flex;
-    margin-bottom: 5.5rem;
-    .pic {
-      width: 40%;
-      margin-right: 2.5rem;
-    }
-    .right {
-      width: 40%;
-    }
-    h6 {
-      position: relative;
-      font-size: 1.36rem;
-      color: #333;
-    }
-    .title-bg {
-      position: absolute;
-      top: -2rem;
-      left: -1rem;
-    }
-    .text {
-      margin-top: 2rem;
-      font-size: .99rem;
-      color: #020202;
-      line-height: 2;
-    }
-  }
-  .intro-bg {
-    position: relative;
-    height: auto;
-    padding-top: 4.5rem;
-    padding-bottom: 2rem;
-    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: 1.5rem;
-      font-size: 1.6rem;
-      font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
-      font-weight: 800;
+        top: auto !important;
+        bottom: 2rem;
     }
-    .des {
-      font-size: 1.2rem;
-    }
-  }
-}
-.ads {
-  position: fixed;
-  top: 30%;
-  right: 1%;
-  padding: 20px;
-  animation: move 20s linear infinite alternate;
-  li {
-    display: flex;
-    align-items: center;
-    padding-left: 20px;
-    line-height: 26px;
-    font-weight: 600;
-    font-size: 16px;
-    color: #1583FF;
-    &:before {
-      content: '';
-      width: 4px;
-      height: 4px;
-      margin-right: 8px;
-      border-radius: 50%;
-      background-color: #1583FF;
-    }
-  }
-}
-@keyframes move {
-  0% {
-    top: 30%;
-    right: 1%;
-  }
-  50% {
-    top: 40%;
-    right: 40%;
-  }
-  100% {
-    top: 90%;
-    right: 90%;
-  }
 }
-@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%;
-    margin: auto;
-    padding-top: 1.25rem;
+.tab-content {
+    padding-top: 3.85rem;
     .intro {
-      flex-direction: column;
-      .pic {
-        width: 100%;
-      }
+        display: flex;
+        margin-bottom: 5.5rem;
+        .pic {
+            width: 40%;
+            margin-right: 2.5rem;
+        }
+        .right {
+            width: 40%;
+        }
+        h6 {
+            position: relative;
+            font-size: 1.36rem;
+            color: #333;
+        }
+        .title-bg {
+            position: absolute;
+            top: -2rem;
+            left: -1rem;
+        }
+        .text {
+            margin-top: 2rem;
+            font-size: 0.99rem;
+            color: #020202;
+            line-height: 2;
+        }
     }
     .intro-bg {
-      padding-top: 3rem;
-      .texts {
+        position: relative;
+        height: auto;
+        padding-top: 4.5rem;
+        padding-bottom: 2rem;
+        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, 0.3);
+        }
+        .texts {
+            position: relative;
+        }
         h6 {
-          font-size: 1.6rem;
+            margin-bottom: 1.5rem;
+            font-size: 1.6rem;
+            font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+            font-weight: 800;
+        }
+        .des {
+            font-size: 1.2rem;
         }
-      }
-    }
-    .right {
-      width: 100% !important;
-      margin-top: 1.25rem;
-      .text {
-        margin-top: 1.25rem;
-      }
-    }
-    span {
-      font-size: 1.35rem;
-    }
-  }
- 
-}
-
-@media (max-width: 320px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-
-@media (min-width: 375px) and (max-width: 480px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
     }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
+.ads {
+    position: fixed;
+    top: 30%;
+    right: 1%;
+    padding: 20px;
+    animation: move 20s linear infinite alternate;
     li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        line-height: 26px;
+        font-weight: 600;
+        font-size: 16px;
+        color: #1583ff;
+        &:before {
+            content: '';
+            width: 4px;
+            height: 4px;
+            margin-right: 8px;
+            border-radius: 50%;
+            background-color: #1583ff;
+        }
     }
-  }
 }
-@media (min-width: 768px) and (max-width: 980px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
+@keyframes move {
+    0% {
+        top: 30%;
+        right: 1%;
     }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
+    50% {
+        top: 40%;
+        right: 40%;
     }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
+    100% {
+        top: 90%;
+        right: 90%;
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px) {
-  .single-banner {
-    .banner-img {
-      height: 12rem;
-    }
-    .texts {
-      bottom: 2rem !important;
-      left: 2rem !important;
-      .banner-title {
-        font-size: 1.5rem;
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        margin: auto;
+        padding-top: 1.25rem;
+        .intro {
+            flex-direction: column;
+            .pic {
+                width: 100%;
+            }
+        }
+        .intro-bg {
+            padding-top: 3rem;
+            .texts {
+                h6 {
+                    font-size: 1.6rem;
+                }
+            }
+        }
+        .right {
+            width: 100% !important;
+            margin-top: 1.25rem;
+            .text {
+                margin-top: 1.25rem;
+            }
+        }
+        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 ca95c45..6cffa3a 100644
--- a/src/pages/overviewLocation/index.vue
+++ b/src/pages/overviewLocation/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img" :src="modules[0].form.pic" alt="">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -9,7 +11,9 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -25,261 +29,59 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
-    
+
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .wrap {
-  background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
-              url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
+        url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
 }
 .single-banner {
-  .banner-img {
-    height: 24rem;
-  }
-  .texts {
-    top: auto !important;
-    bottom: 2rem;
-    h6 {
-      font-size: 2.16rem
-    }
-  }
-}
-.tabs {
-  display: flex;
-  justify-content: center;
-  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
-  li {
-    padding: 1.25rem .95rem;
-    margin: 0 .5rem;
-    font-size: 1.05rem;
-    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;
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
     }
-  }
 }
 .tab-content {
-  width: 50rem;
-  padding: 3.85rem 0;
-  margin: 0 auto;
-  span {
-    font-size: 1.35rem;
-  }
-  /deep/ img {
-    width: 100% !important;
-  }
-}
-.video {
-  width: 100%;
-  margin-bottom: 2.75rem;
-}
-.text {
-  font-size: .9rem;
-  color: #020202;
-  line-height: 1.6rem;
-}
-@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%;
+    width: 50rem;
+    padding: 3.85rem 0;
+    margin: 0 auto;
     span {
-      font-size: 1.35rem;
-    }
-  }
- 
-}
-@media (min-width: 280px) and (max-width: 120px) {
-  .single-banner {
-    .banner-img {
-      height: 15rem;
-    }
-    .texts {
-      top: 9rem !important;
-     left: 22rem !important;
-    }
-    
-  }
-}
-@media (max-width: 320px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-
-@media (min-width: 375px) and (max-width: 480px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
+        font-size: 1.35rem;
     }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-@media (min-width: 480px) and (max-width: 640px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
+    /deep/ img {
+        width: 100% !important;
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
+.video {
+    width: 100%;
+    margin-bottom: 2.75rem;
 }
-@media (min-width: 768px) and (max-width: 980px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
+.text {
+    font-size: 0.9rem;
+    color: #020202;
+    line-height: 1.6rem;
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        span {
+            font-size: 1.35rem;
         }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/overviewSetup/index.vue b/src/pages/overviewSetup/index.vue
index 2afaf2f..a6b410a 100644
--- a/src/pages/overviewSetup/index.vue
+++ b/src/pages/overviewSetup/index.vue
@@ -62,33 +62,9 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 .single-banner {
-    .banner-img {
-        height: 24rem;
-    }
     .texts {
         top: auto !important;
         bottom: 2rem;
-        h6 {
-            font-size: 2.16rem;
-        }
-    }
-}
-.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 {
@@ -128,16 +104,6 @@ export default {
     margin: 0 auto;
 }
 @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 {
         padding: 20px 0;
         .org {
diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue
index 3e5cbfe..56d6b66 100644
--- a/src/pages/overviewTrailer/index.vue
+++ b/src/pages/overviewTrailer/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img" :src="modules[0].form.pic" alt="">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -9,13 +11,21 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
+        <li :class="{active: item.id == active}"
+            :key="i"
+            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="tab-content">
-      <video v-if="modules[1].form.video" class="video" ref="video" autoplay controls loop>
-        <source :src="modules[1].form.video" type="video/mp4">
+      <video v-if="modules[1].form.video"
+             class="video"
+             ref="video"
+             autoplay
+             controls
+             loop>
+        <source :src="modules[1].form.video"
+                type="video/mp4">
         您的浏览器不支持 video 标签。
       </video>
       <div v-html="modules[1].form.des"></div>
@@ -29,292 +39,58 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
-    
+
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .wrap {
-  background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
-              url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
+        url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
 }
 
 .single-banner {
-  .banner-img {
-    height: 24rem;
-  }
-  .texts {
-    top: auto !important;
-    bottom: 2rem;
-    h6 {
-      font-size: 2.16rem
-    }
-  }
-}
-.tabs {
-  display: flex;
-  justify-content: center;
-  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
-  li {
-    padding: 1.25rem .95rem;
-    margin: 0 .5rem;
-    font-size: 1.05rem;
-    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;
+    .texts {
+        top: auto !important;
+        bottom: 2rem;
     }
-  }
 }
 .tab-content {
-  width: 50rem;
-  padding: 3.85rem 0;
-  margin: 0 auto;
-  span {
-    font-size: 1.08rem;
-  }
+    width: 50rem;
+    padding: 3.85rem 0;
+    margin: 0 auto;
+    span {
+        font-size: 1.08rem;
+    }
 }
 .video {
-  width: 100%;
-  margin-bottom: 2.75rem;
+    width: 100%;
+    margin-bottom: 2.75rem;
 }
 .text {
-  font-size: .9rem;
-  color: #020202;
-  line-height: 1.6rem;
+    font-size: 0.9rem;
+    color: #020202;
+    line-height: 1.6rem;
 }
 @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: 95%;
-     margin: 0 auto;
-  }
- 
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .single-banner {
-    .banner-img {
-      height: 15rem;
-    }
-    .texts {
-      top: 9rem !important;
-      left: 22rem !important;
-    }
-    
-  }
-}
-@media (max-width: 320px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
+    .tab-content {
+        width: 95%;
+        margin: 0 auto;
+        .video {
+            max-height: 18rem;
         }
-      }
     }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap {
-    .banner-img {
-        height: 12rem;
-      }
-    .single-banner {
-      .texts {
-        bottom: 2rem !important;
-        left: 2rem !important;
-        .banner-title {
-          font-size: 1.5rem;
-        }
-      }
-    }
-  }
-  .tabs {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-  .tab-content {
-    .video {
-      height: 18rem;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/speech/index.vue b/src/pages/speech/index.vue
new file mode 100644
index 0000000..bccc1f7
--- /dev/null
+++ b/src/pages/speech/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <img src="http://10.10.11.7/images/speech/3.png"
+             alt=""
+             class="pic">
+        <div class="texts">
+          <h6>院长致辞</h6>
+          <p class="en">President Speech</p>
+          <div class="text">各位朋友：
+            加快实现高水平科技自立自强，是推动高质量发展的必由之路。当前，粤港澳大湾区正朝着建成具有全球影响力的科技和产业创新高地这一宏伟蓝图奋力前进。而在大科学时代，我们实现科学技术的前沿突破，在产业发展上取得颠覆式创新和持续性创新，从根本上解决气候变暖、重大疾病挑等人类可持续发展问题上，越来越离不开大科学装置的支持。
+            建设综合粒子设施，是深圳推进粤港澳大湾区、深圳先行示范区建设重大战略落地实施，以主阵地作为推进大湾区综合性国家科学中心建设的重要决策部署。项目的建成，不仅将成为支撑大湾区集成电路、生物医药、先进制造、新材料、新能源等众多产业领域创新发展的先进工具和强大平台，也将是面向国家重大需求和国际科学前沿，突破产业技术瓶颈、解决其相关根源性科学问题的大国重器。
+            综合粒子设施一期项目包括深圳产业光源和深圳自由电子激光，自2021年初深圳综合粒子设施研究院筹备建立以来，我们的首要任务便是全力推进两个项目的设计、立项、关键技术突破、核心设备研制等前期准备工作，为接下来工程建设及建成运行打下坚实基础。
+            面对重重挑战，我们坚信没有一座高山不可逾越。我们将牢记深圳市委市政府设立研究院的初心和期望，传承改革开放杀出一条血路的魄力，万众一心，迎难而上，不负众望建设好综合粒子设施，为全体深圳人民及合作伙伴交上一份优质答卷；我们将秉持开放合作的建设理念，面向国内外创新资源敞开共建、共享、共赢的合作大门，携手大湾区创新资源共同建设世界一流大科学装置；我们将坚持需求牵引的宗旨，探索在地方政府主导下，研究机构、高校、企业、金融机构共建重大科技基础设施的新途径，为粤港澳大湾区建设国际科技创新中心提供坚实支撑；我们还将进一步加强与港澳的创新融合，让科学进步之光，照亮大湾区高质量发展之路，点亮东方之珠璀璨的明天。</div>
+          <div class="sign">
+            签名：
+            <img src="http://10.10.11.7/images/speech/3.png"
+                 alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+
+    };
+  },
+  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) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.block {
+    background: url(http://10.10.11.7/images/speech/2.png) no-repeat;
+}
+.inner {
+    display: flex;
+    align-items: flex-start;
+    .pic {
+        max-width: 480px;
+        margin-top: 2rem;
+    }
+    .texts {
+        margin-left: 113px;
+    }
+    h6 {
+        position: relative;
+        font-size: 2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 600;
+        color: #333;
+    }
+    .en {
+        margin: -25px 0 40px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: rgba(216, 216, 216, 0.34);
+    }
+    .text {
+        font-size: 1rem;
+        color: #333;
+        line-height: 1.6;
+    }
+    .sign {
+        margin-top: 20px;
+        text-align: right;
+        img {
+            max-width: 150px;
+        }
+    }
+}
+</style>
diff --git a/src/pages/talentCentre/index.vue b/src/pages/talentCentre/index.vue
new file mode 100644
index 0000000..b58cf34
--- /dev/null
+++ b/src/pages/talentCentre/index.vue
@@ -0,0 +1,300 @@
+<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>
+    <div class="content">
+      <div class="article">
+        <div class="left">
+          <h6 class="talent-title">{{ modules[1].form.title }}</h6>
+          <div class="talent-text"
+               v-html="modules[1].form.des"></div>
+          <ul class="people">
+            <li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
+                @click="openLink(modules[8].form)">
+              <img class="pic"
+                   :src="modules[8].form.pic"
+                   alt="">
+              <div class="texts">
+                <h6>{{ modules[8].form.title }}</h6>
+                <div class="line"></div>
+                <div class="text">提供文字不超过两行，提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div>
+                <img src="@/assets/images/arrow.png"
+                     alt="">
+              </div>
+            </li>
+            <li :class="{ 'cursor-pointer': isLink(modules[8].form.link.linkName) }"
+                @click="openLink(modules[8].form)">
+              <img class="pic"
+                   :src="modules[8].form.pic"
+                   alt="">
+              <div class="texts">
+                <h6>{{ modules[8].form.title }}</h6>
+                <div class="line"></div>
+                <div class="text">提供文字不超过两行，提供文字不超过两行提供文字不超过两行提供文字不超过两行提供文字不文字不超过两</div>
+                <img src="@/assets/images/arrow.png"
+                     alt="">
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="right">
+          <el-tree class="column"
+                   ref="column"
+                   :data="columns"
+                   highlight-current
+                   :expand-on-click-node="false"
+                   :props="defaultProps"
+                   node-key="id"
+                   @node-click="columnTo"></el-tree>
+
+          <p class="l-title">{{$t('column.hot')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in hots"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+
+          <p class="l-title">{{$t('column.latestNews')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in news"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, articleMixins],
+  data () {
+    return {
+      columnId: '',
+      form: {},
+      columns: [],
+      defaultProps: {
+        value: 'id',
+        label: 'columnName'
+      },
+      news: [],
+      hots: []
+    }
+  },
+  mounted () {
+    this.getColumn()
+    this.getArticle()
+  },
+  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 => { })
+    },
+    // 资讯
+    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
+        this.getInfo()
+      }).catch(err => { })
+
+      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => { })
+    },
+    // 最新资讯
+    getArticle () {
+      this.$post(this.api.newlyPublishedArticles, {
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.$route.query.siteId || this.$store.state.content.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+.wrap {
+    background-color: #fff;
+}
+.content {
+    width: 1400px;
+}
+.article {
+    display: flex;
+    justify-content: space-between;
+    .left {
+        width: 66%;
+        .talent-title {
+            padding-bottom: 10px;
+            font-size: 1.2rem;
+            color: #666;
+            border-bottom: 1px solid #eaeef2;
+        }
+        .talent-text {
+            margin: 20px 0;
+            font-size: 1.1rem;
+            color: #333;
+            line-height: 28px;
+            p {
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .people {
+        margin-top: 4rem;
+        li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 2rem;
+            &:nth-child(even) {
+                flex-direction: row-reverse;
+                .texts {
+                    padding: 75px 83px 75px 40px;
+                    margin: 0 -50px 0 0;
+                }
+            }
+        }
+        .pic {
+            width: 430px;
+            height: 430px;
+        }
+        .texts {
+            position: relative;
+            width: 530px;
+            height: 330px;
+            padding: 75px 41px 75px 83px;
+            margin-left: -50px;
+            background-color: rgba(247, 247, 247, 0.72);
+        }
+        h6 {
+            font-size: 1.2rem;
+
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #333;
+        }
+        .line {
+            width: 93px;
+            height: 1px;
+            margin: 1rem 0;
+            background: #d8d8d8;
+        }
+        .text {
+            font-size: 1rem;
+
+            font-family: PingFangSC-Regular, PingFang SC;
+            color: #666;
+            line-height: 1.6;
+        }
+    }
+    .right {
+        width: 20%;
+    }
+    .column {
+        width: 100%;
+        margin-bottom: 25px;
+    }
+    /deep/.el-tree-node__content {
+        height: 44px;
+        background-color: #e5edf8;
+        border-bottom: 2px solid #fff;
+    }
+    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+        color: #fff;
+        background-color: #0f5698;
+    }
+    .list {
+        margin-bottom: 20px;
+        li {
+            padding: 16px 0;
+            border-bottom: 1px solid #d8d8d8;
+        }
+        .text {
+            margin-bottom: 5px;
+            font-size: 14px;
+            cursor: pointer;
+            &:hover {
+                color: $main-color;
+            }
+        }
+        .date {
+            font-size: 12px;
+            color: #999;
+        }
+    }
+}
+@media (max-width: 1200px) {
+    .content {
+        .article {
+            flex-direction: column;
+            .left {
+                width: 100%;
+                .recruit {
+                    li {
+                        flex-direction: column;
+                        .pic {
+                            width: 100%;
+                        }
+                        .texts {
+                            margin-top: 0.8rem;
+                        }
+                    }
+                }
+                .notice {
+                    flex-direction: column;
+                    li {
+                        width: 100%;
+                    }
+                }
+            }
+            .right {
+                width: 100%;
+                .el-tree {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/contactUs.js b/src/router/modules/contactUs.js
new file mode 100644
index 0000000..1d4860d
--- /dev/null
+++ b/src/router/modules/contactUs.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'contactUs'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '应用产业-联系我们' }
+    }
+  ]
+};
diff --git a/src/router/modules/lightSources.js b/src/router/modules/lightSources.js
new file mode 100644
index 0000000..00e7b36
--- /dev/null
+++ b/src/router/modules/lightSources.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'lightSources'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '全球先进光源' }
+    }
+  ]
+};
diff --git a/src/router/modules/speech.js b/src/router/modules/speech.js
new file mode 100644
index 0000000..5cf6ddd
--- /dev/null
+++ b/src/router/modules/speech.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'speech'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/talentCentre.js b/src/router/modules/talentCentre.js
new file mode 100644
index 0000000..9f0e59c
--- /dev/null
+++ b/src/router/modules/talentCentre.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'talentCentre'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index 4166640..6d299c2 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -66,7 +66,7 @@
     color: #fff;
     .banner-img {
         width: 100%;
-        height: 480px;
+        height: 24rem;
     }
     .texts {
         position: absolute;
@@ -111,6 +111,25 @@
         margin-left: 8px;
     }
 }
+
+.tabs {
+    display: flex;
+    justify-content: center;
+    box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
+    li {
+        padding: 1.25rem 0.95rem;
+        margin: 0 0.5rem;
+        font-size: 1.05rem;
+        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;
+        }
+    }
+}
 @media (max-width: 1410px) {
     .inner {
         width: 80%;
@@ -129,6 +148,16 @@
             }
         }
     }
+    .tabs {
+        overflow: hidden;
+        overflow-x: auto;
+        white-space: normal;
+        justify-content: normal;
+        display: -webkit-box;
+        li {
+            white-space: normal;
+        }
+    }
 }
 @media (max-width: 980px) {
     .wrap {