文章页右侧菜单抽离成组件，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,6 +46,7 @@
 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],
@@ -75,7 +67,8 @@ export default {
     }
   },
   components: {
-    Breadcrumb
+    Breadcrumb,
+    RightColumns
   },
   watch: {
     '$route' () {
@@ -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,7 +225,7 @@ export default {
     }
 }
 
-@media (min-width: 280px) and (max-width: 750px) {
+@media (max-width: 1200px) {
     .banner {
         height: 15rem;
     }
@@ -279,15 +237,6 @@ export default {
                 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,6 +40,7 @@
 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],
@@ -61,17 +52,11 @@ export default {
       columnId: '',
       form: {},
       columnBanner: '',
-      columns: [],
-      defaultProps: {
-        value: 'id',
-        label: 'columnName'
-      },
-      news: [],
-      hots: []
     }
   },
   components: {
-    Breadcrumb
+    Breadcrumb,
+    RightColumns
   },
   watch: {
     '$route' () {
@@ -80,8 +65,7 @@ export default {
     }
   },
   mounted () {
-    this.getColumn()
+
-    this.getArticle()
   },
   methods: {
     // 获取文章详情
@@ -115,7 +99,7 @@ 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
@@ -137,33 +121,6 @@ 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) {
       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;
         }
     }
 }
@@ -287,23 +206,6 @@ export default {
     }
 }
 @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 {
@@ -323,12 +225,6 @@ export default {
                 font-size: 1.5rem;
             }
         }
-    .right{
-      width: 100%;
-      .el-tree{
-        display: none;
-      }
-    }
     }
     .article {
         .des {
@@ -338,24 +234,8 @@ export default {
         }
     }
 }
-@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>
@@ -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,7 +933,7 @@ export default {
 
     /deep/.columns {
         width: 22%;
-    margin-right: .6rem;
+        margin-right: 0.6rem;
         overflow: auto;
         span {
             white-space: nowrap;
@@ -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 {
@@ -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/news/index.vue

@@ -1,93 +1,152 @@
 <template>
   <div class="wrap">
-    <el-carousel  :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+        <el-carousel-item v-if="item.pic && item.isEnable"
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+                          :key="i">
-            <img :src="item.pic" alt="">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
       </template>
     </el-carousel>
 
-    <div class="tabs">
+    <div class="newsTab">
-      <ul class="scollBox wow fadeInLeft" ref="tabs">
+      <ul class="scollBox wow fadeInLeft"
+          ref="newsTab">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
+          <li v-if="item.columnName"
+              :class="{active: i == curColumn}"
+              :key="i"
+              @click="tabChange($event,i)">{{ item.columnName }}</li>
         </template>
       </ul>
     </div>
 
     <div class="block">
-      <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
+      <div class="inner"
-        <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
+           v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
-          <img width="50%" height="410" class="titileImg" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
+        <div class="news-banner wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <img width="50%"
+               height="410"
+               class="titileImg"
+               :src="curArticle.titleImg"
+               alt=""
+               onerror="javascript:this.src='./images/3.png';">
           <div class="right">
             <h6>{{ curArticle.title }}</h6>
-            <div class="des" v-html="curArticle.mainBody"></div>
+            <div class="des"
+                 v-html="curArticle.mainBody"></div>
             <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
             <ul class="inds">
-              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length"
+                  :key="i"
+                  :class="{active: curInd == i - 1}"
+                  @click.stop="switchCarousel(i - 1)"></li>
             </ul>
           </div>
         </div>
 
         <ul class="card">
           <template v-for="(item, i) in modules[1].list[curColumn].articles">
-            <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+            <li v-if="i > 2"
-              <img class="pic" :src="item.titleImg" alt="">
+                :key="i"
+                class="wow fadeInDown"
+                :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+              <img class="pic"
+                   :src="item.titleImg"
+                   alt="">
               <div class="texts">
                 <p class="meta">{{ item.releaseTime }} {{ item.author && ' | ' + item.author }}</p>
                 <div class="des">{{ item.title }}</div>
-                <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
+                <img class="arrow"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="toArtice(item, modules[1].list[curColumn])">
               </div>
             </li>
           </template>
         </ul>
-        <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">More news ></div>
+        <div class="more wow fadeInDown"
+             data-wow-delay="0.5s"
+             @click="toMore">More news ></div>
       </div>
     </div>
 
     <div class="block gray">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <p class="intro wow fadeInUp"
-        <div class="shop-shows" v-if="articles.length">
+           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
-          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
+        <div class="shop-shows"
-            <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="" onerror="javascript:this.src='./images/2.png';">
+             v-if="articles.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles[0], modules[3].form)">
+            <img class="pic"
+                 width="100%"
+                 height="400"
+                 :src="articles[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/2.png';">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
-              <div class="des" v-html="articles[0].mainBody"></div>
+              <div class="des"
+                   v-html="articles[0].mainBody"></div>
             </div>
           </div>
-          <div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
+          <div v-if="articles.length > 1"
+               class="right wow fadeInRight"
+               data-wow-delay="0.5s">
             <ul class="show-card">
-              <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
+              <li v-if="articles[1]"
-                <img class="pic" :src="articles[1].titleImg" alt="">
+                  @click="toArtice(articles[1], modules[3].form)">
+                <img class="pic"
+                     :src="articles[1].titleImg"
+                     alt="">
                 <div class="text">{{ articles[1].title }}</div>
               </li>
-              <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
+              <li v-if="articles[2]"
-                <img class="pic" :src="articles[2].titleImg" alt="">
+                  @click="toArtice(articles[2], modules[3].form)">
+                <img class="pic"
+                     :src="articles[2].titleImg"
+                     alt="">
                 <div class="text">{{ articles[2].title }}</div>
               </li>
             </ul>
             <ul class="card-list">
               <template v-for="(item, i) in articles">
-                <li v-if="i > 2" :key="i">
+                <li v-if="i > 2"
-                  <img class="pic" :src="item.titleImg" alt="">
+                    :key="i">
+                  <img class="pic"
+                       :src="item.titleImg"
+                       alt="">
                   <div class="texts">
                     <h6>{{ item.title }}</h6>
-                    <div class="des" v-html="item.mainBody"></div>
+                    <div class="des"
+                         v-html="item.mainBody"></div>
                   </div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt=""
+                       @click="toArtice(item, modules[3].form)">
                 </li>
               </template>
             </ul>
           </div>
         </div>
-        <div class="all-link m-t-10" @click="toAll(modules[3].form)">
+        <div class="all-link m-t-10"
-          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+             @click="toAll(modules[3].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
         </div>
       </div>
     </div>
@@ -95,10 +154,19 @@
     <div class="block conference">
       <div class="inner lg">
         <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <p class="intro wow fadeInUp"
-        <div class="shows" v-if="articles1.length">
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
-          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
+        <div class="shows"
-            <img class="pic" width="100%" height="558" :src="articles1[0].titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
+             v-if="articles1.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles1[0], modules[5].form)">
+            <img class="pic"
+                 width="100%"
+                 height="558"
+                 :src="articles1[0].titleImg"
+                 alt=""
+                 onerror="javascript:this.src='./images/1.png';">
             <div class="texts">
               <div class="meta">
                 <p class="date">09</p>
@@ -106,30 +174,48 @@
               </div>
               <div>
                 <h6>{{ articles1[0].title }}</h6>
-                <div class="des" v-html="articles1[0].mainBody"></div>
+                <div class="des"
+                     v-html="articles1[0].mainBody"></div>
               </div>
             </div>
           </div>
-          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
+          <ul class="card-list wow fadeInRight"
+              data-wow-delay="0.5s">
             <template v-for="(item, i) in articles1">
-              <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
+              <li v-if="i"
-                <img class="pic" :src="item.titleImg" alt="">
+                  :key="i"
+                  @click="toArtice(item, modules[5].form)">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
-                  <p v-if="item.keynoteSpeaker" class="text">
+                  <p v-if="item.keynoteSpeaker"
-                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/mine.png"
+                         alt="">
                     {{ item.keynoteSpeaker }}
                   </p>
-                  <p v-if="item.activityStartTime" class="text">
+                  <p v-if="item.activityStartTime"
-                    <img class="icon" src="@/assets/images/time.png" alt="">
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/time.png"
+                         alt="">
                     Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                   </p>
-                  <p v-if="item.onlineLocation" class="text">
+                  <p v-if="item.onlineLocation"
-                    <img class="icon" src="@/assets/images/online.png" alt="">
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/online.png"
+                         alt="">
                     Onlone: {{ item.onlineLocation }}
                   </p>
-                  <p v-if="item.offlineLocation" class="text">
+                  <p v-if="item.offlineLocation"
-                    <img class="icon" src="@/assets/images/location.png" alt="">
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/location.png"
+                         alt="">
                     Address: {{ item.offlineLocation }}
                   </p>
                 </div>
@@ -137,8 +223,11 @@
             </template>
           </ul>
         </div>
-        <div class="all-link m-t-10" @click="toAll(modules[5].form)">
+        <div class="all-link m-t-10"
-          <span style="color: #fff">{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+             @click="toAll(modules[5].form)">
+          <span style="color: #fff">{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
         </div>
       </div>
     </div>
@@ -233,8 +322,8 @@ export default {
     },
     // tab回调
     tabChange (e, i) {
-      const tabs = this.$refs.tabs
+      const newsTab = this.$refs.newsTab
-      tabs.scrollLeft  = e.target.offsetLeft
+      newsTab.scrollLeft = e.target.offsetLeft
       // e.target.offsetLeft
       const { column } = this.modules[1].list[i]
       if (column && column.length) {
@@ -297,7 +386,7 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .wrap {
     /deep/ .el-carousel {
         height: 24rem;
@@ -317,7 +406,7 @@ export default {
 .block {
     padding: 3.85rem 0;
 }
-.tabs {
+.newsTab {
     box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
     .scollBox {
         width: 85.714rem;
@@ -328,7 +417,7 @@ export default {
     li {
         flex: 1;
         text-align: center;
-    padding: 1.25rem .95rem;
+        padding: 1.25rem 0.95rem;
         margin: 0 10px;
         font-size: 1.1rem;
         color: #333;
@@ -336,8 +425,8 @@ export default {
         text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
         cursor: pointer;
         &.active {
-      color: #1583FF;
+            color: #1583ff;
-      border-bottom-color: #1583FF;
+            border-bottom-color: #1583ff;
         }
     }
 }
@@ -370,11 +459,13 @@ export default {
         position: relative;
         width: 50%;
         padding: 2.5rem 2.5rem 1.5rem;
-    background: #1583FF;
+        background: #1583ff;
         color: #fff;
         &:hover {
             background: #465f85;
-      h6, .des, .meta {
+            h6,
+            .des,
+            .meta {
                 color: #fff;
                 transform: translateY(15px);
             }
@@ -386,12 +477,12 @@ export default {
         left: 3.75rem;
         display: flex;
         li {
-      width: .625rem;
+            width: 0.625rem;
-      height: .625rem;
+            height: 0.625rem;
-      margin-right: .75rem;
+            margin-right: 0.75rem;
-      background: #FFFFFF;
+            background: #ffffff;
             border-radius: 50%;
-      transition: .2s;
+            transition: 0.2s;
             &.active {
                 width: 1.875rem;
                 background: rgba(255, 255, 255, 0.3);
@@ -401,17 +492,17 @@ export default {
     }
     h6 {
         font-size: 1.2rem;
-    transition: .3s;
+        transition: 0.3s;
     }
     .des {
         margin: 1.5rem 0;
-    font-size: .88rem;
+        font-size: 0.88rem;
         line-height: 1.3714rem;
-    transition: .3s;
+        transition: 0.3s;
     }
     .meta {
-    font-size: .88rem;
+        font-size: 0.88rem;
-    transition: .3s;
+        transition: 0.3s;
     }
 }
 .card {
@@ -422,10 +513,10 @@ export default {
 
     li {
         flex: 1;
-    margin-right: .88rem;
+        margin-right: 0.88rem;
         box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
         border-radius: 6px;
-    transition: .3s;
+        transition: 0.3s;
         &:hover {
             transform: scale(1.05);
         }
@@ -441,7 +532,7 @@ export default {
         padding: 2rem 1.5rem;
     }
     .meta {
-    font-size: .88rem;
+        font-size: 0.88rem;
         color: #666;
     }
     .des {
@@ -464,9 +555,9 @@ export default {
     line-height: 64px;
     font-size: 1.875rem;
     text-align: center;
-  color: #1583FF;
+    color: #1583ff;
     border-radius: 35px;
-  border: 2px solid #2B6CEF;
+    border: 2px solid #2b6cef;
     cursor: pointer;
 }
 .shop-shows {
@@ -478,7 +569,7 @@ export default {
         cursor: pointer;
         overflow: hidden;
         .pic {
-      transition: .3s;
+            transition: 0.3s;
             height: auto;
             &:hover {
                 transform: scale(1.05);
@@ -493,7 +584,7 @@ export default {
         }
         .des {
             margin-top: 10px;
-      font-size: .88rem;
+            font-size: 0.88rem;
             color: #666;
             line-height: 1.714rem;
         }
@@ -518,7 +609,7 @@ export default {
         .pic {
             width: 25rem;
             height: 12.3125rem;
-      transition: .3s;
+            transition: 0.3s;
             &:hover {
                 transform: scale(1.05);
             }
@@ -528,7 +619,7 @@ export default {
             bottom: 0;
             left: 0;
             width: 100%;
-      font-size: .88rem;
+            font-size: 0.88rem;
             color: #fff;
             padding: 0 1rem;
             line-height: 48px;
@@ -544,8 +635,8 @@ export default {
         li {
             display: inline-flex;
             align-items: center;
-      margin-bottom: .9rem;
+            margin-bottom: 0.9rem;
-      transition: .3s;
+            transition: 0.3s;
             &:hover {
                 transform: scale(1.05);
             }
@@ -573,7 +664,7 @@ export default {
             overflow: hidden;
         }
         .des {
-      font-size: .7rem;
+            font-size: 0.7rem;
             color: #666;
             line-height: 1.3714rem;
             text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
@@ -586,7 +677,8 @@ export default {
 }
 .conference {
     background: #072947;
-  .b-title, .intro {
+    .b-title,
+    .intro {
         color: #fff;
     }
     .shows {
@@ -598,7 +690,7 @@ export default {
         overflow: hidden;
         cursor: pointer;
         .pic {
-      transition: .3s;
+            transition: 0.3s;
             height: auto;
             &:hover {
                 transform: scale(1.05);
@@ -610,7 +702,7 @@ export default {
             background-color: #fff;
         }
         .meta {
-      padding: .5714rem 1.314rem .5714rem 0;
+            padding: 0.5714rem 1.314rem 0.5714rem 0;
             margin-right: 1.828rem;
             text-align: center;
             border-right: 1px solid #ddd;
@@ -619,7 +711,7 @@ export default {
             font-size: 2.5714rem;
             font-family: DINAlternate-Bold, DINAlternate;
             font-weight: bold;
-      color: #1F1F1F;
+            color: #1f1f1f;
             line-height: 2.9714rem;
         }
         .year {
@@ -633,7 +725,7 @@ export default {
         }
         .des {
             margin-top: 10px;
-      font-size: .8rem;
+            font-size: 0.8rem;
             color: #666;
             line-height: 1.3714rem;
         }
@@ -647,7 +739,7 @@ export default {
             background-color: #fff;
             cursor: pointer;
             align-items: center;
-      transition: .3s;
+            transition: 0.3s;
             height: 9rem;
             &:last-child {
                 margin-bottom: 0;
@@ -684,10 +776,8 @@ export default {
     }
 }
 
-
-
 @media (max-width: 1200px) {
- .tabs {
+    .newsTab {
         overflow-x: scroll;
         display: -webkit-box;
     }
@@ -729,7 +819,8 @@ export default {
             .shop-shows {
                 flex-direction: column;
                 .left {
-        width: 95%;margin: 0 auto;
+                    width: 95%;
+                    margin: 0 auto;
                 }
                 .right {
                     width: 93%;
@@ -771,7 +862,7 @@ export default {
     .banner-item .banner-name {
         font-size: 1.5rem;
     }
-  .tabs  {
+    .newsTab {
         li {
             padding: 15px 10px;
             font-size: 15px;
@@ -804,7 +895,7 @@ export default {
                 .text {
                     font-size: 13px;
                     line-height: 20px;
-          white-space: inherit
+                    white-space: inherit;
                 }
             }
             .card-list {
@@ -853,7 +944,8 @@ export default {
                         }
                         .texts {
                             h6 {
-              font-size: 15px;font-weight: bold;
+                                font-size: 15px;
+                                font-weight: bold;
                                 display: -webkit-box;
                                 -webkit-box-orient: vertical;
                                 -webkit-line-clamp: 1;
@@ -899,7 +991,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -976,7 +1068,6 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
@@ -1005,7 +1096,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1082,7 +1173,6 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
@@ -1111,7 +1201,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1189,7 +1279,6 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
@@ -1218,7 +1307,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1296,7 +1385,6 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
@@ -1325,7 +1413,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1351,8 +1439,8 @@ export default {
                 flex-direction: row;
                 li {
                     width: 30% !important;
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
-          margin: 0 .5rem 0 0 !important;
+                    margin: 0 0.5rem 0 0 !important;
                     .pic {
                         height: auto;
                     }
@@ -1360,12 +1448,11 @@ export default {
                         margin-right: 0 !important;
                     }
                 }
-       
             }
             .shop-shows {
                 flex-direction: row;
                 .left {
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
                     .pic {
                         height: auto;
                     }
@@ -1384,7 +1471,7 @@ export default {
                                 font-size: 1rem;
                             }
                             &:nth-child(2) {
-                margin-top: .5rem;
+                                margin-top: 0.5rem;
                             }
                         }
                     }
@@ -1423,7 +1510,6 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
@@ -1452,7 +1538,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1478,8 +1564,8 @@ export default {
                 flex-direction: row;
                 li {
                     width: 30% !important;
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
-          margin: 0 .5rem 0 0 !important;
+                    margin: 0 0.5rem 0 0 !important;
                     .pic {
                         height: auto;
                     }
@@ -1487,12 +1573,11 @@ export default {
                         margin-right: 0 !important;
                     }
                 }
-       
             }
             .shop-shows {
                 flex-direction: row;
                 .left {
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
                     .pic {
                         height: auto;
                     }
@@ -1511,7 +1596,7 @@ export default {
                                 font-size: 1rem;
                             }
                             &:nth-child(2) {
-                margin-top: .5rem;
+                                margin-top: 0.5rem;
                             }
                         }
                     }
@@ -1550,12 +1635,10 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
     }
-  
 }
 @media (min-width: 980px) and (max-width: 1200px) {
     .wrap {
@@ -1580,7 +1663,7 @@ export default {
             bottom: 2rem;
         }
     }
-  .tabs {
+    .newsTab {
         .scollBox {
             width: auto;
             li {
@@ -1606,8 +1689,8 @@ export default {
                 flex-direction: row;
                 li {
                     width: 30% !important;
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
-          margin: 0 .5rem 0 0 !important;
+                    margin: 0 0.5rem 0 0 !important;
                     .pic {
                         height: auto;
                     }
@@ -1615,12 +1698,11 @@ export default {
                         margin-right: 0 !important;
                     }
                 }
-       
             }
             .shop-shows {
                 flex-direction: row;
                 .left {
-          margin-right: .5rem;
+                    margin-right: 0.5rem;
                     .pic {
                         height: auto;
                     }
@@ -1679,11 +1761,9 @@ export default {
                             height: auto !important;
                         }
                     }
-           
                 }
             }
         }
     }
-  
 }
 </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>
@@ -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;
 }
 .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,16 +187,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%;
         margin: auto;
@@ -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>
 
@@ -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,
         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 {
-    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>
@@ -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,
         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 {
-    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 {