文章页右侧菜单抽离成组件，media修复

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>

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.offlineLocation"
-          <div v-if="form.onlineLocation" class="meta">{{$t('column.online')}}：{{ form.onlineLocation }}</div>
+               class="meta">{{$t('column.address')}}：{{ form.offlineLocation }}</div>
-          <div v-if="form.offlineLocation" class="meta">{{$t('column.offline')}}：{{ form.offlineLocation }}</div>
+          <div v-if="form.onlineLocation"
-          <div v-if="form.keynoteSpeaker" class="meta">{{$t('column.speaker')}}：{{ form.keynoteSpeaker }}</div>
+               class="meta">{{$t('column.online')}}：{{ form.onlineLocation }}</div>
-          <div v-if="form.lectureSeries" class="meta">{{$t('column.series')}}：{{ form.lectureSeries }}</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">
+        <RightColumns ref="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>
       </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,7 +155,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./editor.css";
+@import './editor.css';
 .content {
     width: 1400px;
 }
@@ -182,7 +175,7 @@ export default {
     h2 {
         margin-bottom: 20px;
         font-size: 36px;
-    color: #1C1C1C;
+        color: #1c1c1c;
     }
     .meta {
         margin: 10px 0;
@@ -205,7 +198,7 @@ export default {
             font-weight: 500;
             line-height: 1;
             color: #333;
-      border-left: 4px solid #1583FF;
+            border-left: 4px solid #1583ff;
         }
         li {
             display: flex;
@@ -217,7 +210,7 @@ export default {
             font-size: 14px;
         }
         .download {
-      color: #1583FF;
+            color: #1583ff;
             cursor: pointer;
         }
     }
@@ -225,41 +218,6 @@ export default {
         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;
-    }
-    .text {
-      margin-bottom: 5px;
-      font-size: 14px;
-      cursor: pointer;
-      &:hover {
-        color: $main-color;
-      }
-    }
-    .date {
-      font-size: 12px;
-      color: #999;
-    }
-  }
 }
 @media (max-width: 1420px) {
     .content {
@@ -267,27 +225,18 @@ export default {
     }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
+@media (max-width: 1200px) {
     .banner {
         height: 15rem;
     }
-  .article{
+    .article {
         flex-direction: column;
-    .left{
+        .left {
             width: 100%;
             h2 {
                 font-size: 1.5rem;
             }
         }
-    .right{
-      width: 100%;
-      .el-tree{
-        display: none;
-      }
-    }
     }
 }
-
-
-
 </style>

src/pages/article/index.vue

@@ -1,46 +1,36 @@
 <template>
-  <div v-show="loaded" class="wrap">
+  <div v-show="loaded"
-    <div v-if="form.articleTemplate !== 23" class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
+       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 class="des"
-          <div v-if="form.fileList && form.fileList.length" class="annex">
+               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">
+        <RightColumns ref="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>
@@ -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() {
+  mounted () {
-    this.getColumn()
+
-    this.getArticle()
   },
   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,11 +130,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./editor.css";
+@import './editor.css';
 .content {
     width: 1200px;
     /deep/ .el-breadcrumb {
-    font-size: .98rem;
+        font-size: 0.98rem;
     }
 }
 .banner {
@@ -196,12 +153,12 @@ export default {
     }
     h2 {
         font-size: 1.9rem;
-    color: #1C1C1C;
+        color: #1c1c1c;
     }
     .meta {
         margin: 1rem 0;
-    font-size: .88rem;
+        font-size: 0.88rem;
-    color: #9B9B9B;
+        color: #9b9b9b;
     }
     .brief {
         padding-bottom: 1.5rem;
@@ -209,7 +166,7 @@ export default {
         font-size: 1.2rem;
         line-height: 1.33;
         color: #606060;
-    border-bottom: 1px solid #D8D8D8;
+        border-bottom: 1px solid #d8d8d8;
     }
     /deep/.des {
         img {
@@ -226,7 +183,7 @@ export default {
             font-weight: 500;
             line-height: 1;
             color: #333;
-      border-left: 4px solid #1583FF;
+            border-left: 4px solid #1583ff;
         }
         li {
             display: flex;
@@ -238,46 +195,8 @@ export default {
             font-size: 14px;
         }
         .download {
-      color: #1583FF;
+            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;
-    }
-    .text {
-      margin-bottom: 5px;
-      font-size: 14px;
             cursor: pointer;
-      &:hover {
-        color: $main-color;
-      }
-    }
-    .date {
-      font-size: 12px;
-      color: #999;
         }
     }
 }
@@ -286,24 +205,7 @@ export default {
         width: 98%;
     }
 }
-@media (max-width: 1200px ) {
+@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;
-      }
-    }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-
     .article {
         /deep/.des {
             img {
@@ -315,47 +217,25 @@ export default {
     .banner {
         font-size: 1.5rem;
     }
-  .article{
+    .article {
         flex-direction: column;
-    .left{
+        .left {
             width: 100%;
             h2 {
                 font-size: 1.5rem;
             }
         }
-    .right{
-      width: 100%;
-      .el-tree{
-        display: none;
-      }
-    }
     }
     .article {
         .des {
-      img{
+            img {
                 height: 15rem !important;
             }
         }
     }
 }
-@media (max-width: 320px) {
-  .wrap  {
-    .banner {
-      padding: 8rem 0 0  10rem;
-      height: 13rem;
-    }
-  }
-}
 
-@media (min-width: 320px) and (max-width: 375px) {
+@media (max-width: 480px) {
-  .wrap  {
-    .banner {
-      padding: 8rem 0 0  10rem;
-      height: 15rem;
-    }
-  }
-}
-@media (min-width: 375px) and (max-width: 480px) {
     .wrap {
         .banner {
             padding: 8rem 0 0 10rem;

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,66 +15,99 @@
       <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-select v-model="form.classificationId"
-                <el-option :label="$t('column.all')" :value="null"></el-option>
+                         @change="filter">
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                <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-select ref="search"
-                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
+                         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-select v-model="form.classificationId"
-                <el-option :label="$t('column.all')" :value="null"></el-option>
+                         @change="filter">
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                <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-select ref="search"
-                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
+                         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 }"
+              <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-select v-model="form.classificationId"
-                <el-option :label="$t('column.all')" :value="null"></el-option>
+                         @change="filter">
-                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                <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>
@@ -84,17 +121,31 @@
             </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"
+            <el-tree v-else
-              highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id"
+                     class="columns"
-              icon-class="el-icon-arrow-down" @node-click="(item) => columnClick(item, 1)">
+                     ref="leftColumn"
-              <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
+                     :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)">
+                  <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>
@@ -103,7 +154,10 @@
                       <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';" />
+                      <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">
@@ -112,34 +166,53 @@
                         <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>
+                          <div class="des"
+                               v-html="item.mainBody"></div>
                         </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">
+                          <div v-if="item.keynoteSpeaker"
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ 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">
+                          <div v-if="item.activityStartTime"
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
+                               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">
+                          <div v-if="item.offlineLocation"
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ 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">
+                          <div v-if="item.onlineLocation"
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ 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>
+                        <el-button type="primary"
+                                   class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
                       </div>
 
                     </template>
                   </li>
                 </ul>
-              <div v-if="articles.length" class="pagination">
+                <div v-if="articles.length"
-                <el-pagination background @current-change="currentChange" :current-page="page"
+                     class="pagination">
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
                 </div>
               </div>
             </template>
@@ -147,7 +220,11 @@
             <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)">
+                  <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>
@@ -170,38 +247,62 @@
                             </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">
+                          <div v-if="item.keynoteSpeaker"
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ 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">
+                          <div v-if="item.activityStartTime"
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
+                               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">
+                          <div v-if="item.offlineLocation"
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ 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">
+                          <div v-if="item.onlineLocation"
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ 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';" />
+                      <img class="pic"
+                           :src="item.titleImg"
+                           alt=""
+                           onerror="javascript:this.src='./images/1.png';" />
                     </template>
                   </li>
                 </ul>
-              <div v-if="articles.length" class="pagination">
+                <div v-if="articles.length"
-                <el-pagination background @current-change="currentChange" :current-page="page"
+                     class="pagination">
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
                 </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)">
+                  <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>
@@ -210,7 +311,10 @@
                       <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';" />
+                      <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">
@@ -219,35 +323,55 @@
                         <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>
+                          <div class="des"
+                               v-html="item.mainBody"></div>
                         </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">
+                          <div v-if="item.keynoteSpeaker"
-                          <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ 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">
+                          <div v-if="item.activityStartTime"
-                          <img class="icon" src="@/assets/images/time.png" alt="" />
+                               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">
+                          <div v-if="item.offlineLocation"
-                          <img class="icon" src="@/assets/images/location.png" alt="" /> {{ 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">
+                          <div v-if="item.onlineLocation"
-                          <img class="icon" src="@/assets/images/online.png" alt="" /> {{ 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>
+                        <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">
+                <div v-if="articles.length"
-                <el-pagination background @current-change="currentChange" :current-page="page"
+                     class="pagination">
-                  layout="total, prev, pager, next" :total="total"></el-pagination>
+                  <el-pagination background
+                                 @current-change="currentChange"
+                                 :current-page="page"
+                                 layout="total, prev, pager, next"
+                                 :total="total"></el-pagination>
                 </div>
               </div>
             </template>
@@ -256,7 +380,10 @@
         <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 = [];
@@ -664,7 +793,7 @@ export default {
         }
     }
 }
-.el-tree-node__content{
+.el-tree-node__content {
     padding-left: 10px !important;
 }
 .l-title {
@@ -691,7 +820,7 @@ export default {
     }
 
     .sub {
-    margin-top: .5rem;
+        margin-top: 0.5rem;
         font-size: 1.6rem;
     }
 }
@@ -703,7 +832,6 @@ export default {
     background-color: #f9fafa;
 }
 
-
 .article {
     display: flex;
     justify-content: center;
@@ -724,8 +852,8 @@ export default {
         margin-right: 2.5rem;
 
         li {
-      padding: 0 .75rem;
+            padding: 0 0.75rem;
-      margin-right: .5rem;
+            margin-right: 0.5rem;
             line-height: 1.8rem;
             font-size: 1rem;
             color: #333;
@@ -753,7 +881,7 @@ export default {
         }
 
         .label {
-      font-size: .912rem;
+            font-size: 0.912rem;
             color: #333;
             white-space: nowrap;
         }
@@ -769,12 +897,12 @@ export default {
         .search {
             display: inline-flex;
             width: 34%;
-      margin-top: .1rem;
+            margin-top: 0.1rem;
 
             input {
                 width: 100%;
                 height: 2.4rem;
-        padding: 0 .75rem;
+                padding: 0 0.75rem;
                 font-size: 1rem;
                 color: #333;
                 background: #f7f7f7;
@@ -805,9 +933,9 @@ export default {
 
     /deep/.columns {
         width: 22%;
-    margin-right: .6rem;
+        margin-right: 0.6rem;
         overflow: auto;
-    span{
+        span {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -863,7 +991,7 @@ export default {
             right: 10px;
         }
 
-    .is-current>.el-tree-node__content {
+        .is-current > .el-tree-node__content {
             background-color: #e5edf8;
             border-top: 0;
 
@@ -882,7 +1010,6 @@ export default {
             .custom-tree-node {
                 font-weight: 600;
                 color: #1150ac;
-        
             }
         }
     }
@@ -914,7 +1041,7 @@ export default {
                 -webkit-line-clamp: 1;
                 text-overflow: ellipsis;
                 overflow: hidden;
-        margin-top: .8rem;
+                margin-top: 0.8rem;
             }
             .readDetailBtn {
                 margin-top: 1.3rem;
@@ -954,7 +1081,7 @@ export default {
         .meta {
             display: flex;
             align-items: center;
-      font-size: .88rem;
+            font-size: 0.88rem;
             font-family: PingFangSC-Medium;
             color: #333;
         }
@@ -981,7 +1108,7 @@ export default {
             margin-right: 24px;
             color: #fff;
             text-align: center;
-      background: #0B5086;
+            background: #0b5086;
         }
         .d {
             font-size: 2rem;
@@ -990,7 +1117,7 @@ export default {
             line-height: 43px;
         }
         .m {
-      font-size: .9rem;
+            font-size: 0.9rem;
             line-height: 20px;
         }
         .news-title {
@@ -1017,7 +1144,7 @@ export default {
             border-bottom: 2px solid #fff;
         }
 
-    /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+        /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
             color: #fff;
             background-color: #0f5698;
         }
@@ -1027,13 +1154,13 @@ export default {
         margin-bottom: 1rem;
 
         li {
-      padding: .8rem 0;
+            padding: 0.8rem 0;
             border-bottom: 1px solid #d8d8d8;
         }
 
         .text {
             margin-bottom: 5px;
-      font-size: .98rem;
+            font-size: 0.98rem;
             cursor: pointer;
             @include ellipsis;
 
@@ -1043,7 +1170,7 @@ export default {
         }
 
         .date {
-      font-size: .78rem;
+            font-size: 0.78rem;
             color: #999;
         }
     }
@@ -1079,7 +1206,6 @@ export default {
             border-bottom: 1px solid #ddd;
         }
 
-
         .right {
             padding-top: 30px;
         }
@@ -1183,7 +1309,6 @@ export default {
 }
 
 @media (min-width: 280px) and (max-width: 1200px) {
-  
     .banner {
         height: 15rem !important;
         img {
@@ -1199,7 +1324,6 @@ export default {
             width: 40%;
             .el-tree-node__content {
                 padding: 0 !important;
-       
             }
             span {
                 font-size: 0.8rem;
@@ -1222,7 +1346,6 @@ export default {
                         li:not(.news-notice) {
                             flex-direction: column;
 
-
                             .pic {
                                 width: 95%;
                                 margin: 0 auto;
@@ -1231,7 +1354,6 @@ export default {
                         }
                     }
                 }
-       
             }
         }
     }

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>

src/pages/estate/orgSetup/index.vue

@@ -30,8 +30,7 @@
              alt="">
       </div>
       <div class="lg-bg">
-        <img width="100%"
+        <img :src="modules[2].form.pic"
-             :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 {

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>

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 {

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,12 +62,12 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
 
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
@@ -66,38 +78,14 @@ export default {
 
 <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 {
@@ -124,7 +112,7 @@ export default {
         }
         .text {
             margin-top: 2rem;
-      font-size: .99rem;
+            font-size: 0.99rem;
             color: #020202;
             line-height: 2;
         }
@@ -144,7 +132,7 @@ export default {
             bottom: 0;
             left: 0;
             content: '';
-      background-color: rgba(0, 0, 0, .3);
+            background-color: rgba(0, 0, 0, 0.3);
         }
         .texts {
             position: relative;
@@ -173,14 +161,14 @@ export default {
         line-height: 26px;
         font-weight: 600;
         font-size: 16px;
-    color: #1583FF;
+        color: #1583ff;
         &:before {
             content: '';
             width: 4px;
             height: 4px;
             margin-right: 8px;
             border-radius: 50%;
-      background-color: #1583FF;
+            background-color: #1583ff;
         }
     }
 }
@@ -199,17 +187,7 @@ export default {
     }
 }
 @media (max-width: 1200px) {
-  .tabs {
+    .tab-content {
-    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;
@@ -238,148 +216,5 @@ export default {
             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 {
-    li {
-      padding: 1rem .5rem;
-      font-size: .85rem;
-    }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .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: 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;
-    }
-  }
 }
 </style>

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,12 +29,12 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
 
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
@@ -41,39 +45,15 @@ export default {
 
 <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,
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
-              url(../../assets/images/survey2.png) (bottom right)/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;
-    }
     }
 }
 .tab-content {
@@ -92,194 +72,16 @@ export default {
     margin-bottom: 2.75rem;
 }
 .text {
-  font-size: .9rem;
+    font-size: 0.9rem;
     color: #020202;
     line-height: 1.6rem;
 }
 @media (max-width: 1200px) {
-  .tabs {
+    .tab-content {
-    overflow: hidden;;
-    overflow-x: auto;
-    white-space: normal;
-    justify-content: normal;
-    display: -webkit-box;
-    li {
-      white-space: normal;
-    }
-  }
-  .tab-content{
         width: 90%;
         span {
             font-size: 1.35rem;
         }
     }
- 
-}
-@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;
-        }
-      }
-    }
-  }
-  .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;
-    }
-  }
-}
-@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;
-    }
-  }
-}
-@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;
-    }
-  }
-}
-@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;
-    }
-  }
 }
 </style>

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 {

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>
+      <video v-if="modules[1].form.video"
-        <source :src="modules[1].form.video" type="video/mp4">
+             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,12 +39,12 @@ import overview from '@/mixins/overview'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins, overview],
-  data() {
+  data () {
     return {
 
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
@@ -45,40 +55,16 @@ export default {
 
 <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,
+    background: url(../../assets/images/survey1.png) (0 559px) / auto no-repeat,
-              url(../../assets/images/survey2.png) (bottom right)/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;
-    }
     }
 }
 .tab-content {
@@ -94,226 +80,16 @@ export default {
     margin-bottom: 2.75rem;
 }
 .text {
-  font-size: .9rem;
+    font-size: 0.9rem;
     color: #020202;
     line-height: 1.6rem;
 }
 @media (max-width: 1200px) {
-  .tabs {
+    .tab-content {
-    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;
-        }
-      }
-    }
-  }
-  .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;
+            max-height: 18rem;
         }
     }
 }

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>

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>

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: '应用产业-联系我们' }
+    }
+  ]
+};

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: '全球先进光源' }
+    }
+  ]
+};

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: '' }
+    }
+  ]
+};

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: '' }
+    }
+  ]
+};

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 {