From 24c64a4874da0d2ffef6f4ec74eb1d3a7dfe40ca Mon Sep 17 00:00:00 2001
From: wangchenguang <728837162@qq.com>
Date: Fri, 7 Apr 2023 17:38:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8B=B1=E6=96=87=E7=89=88=E9=80=82=E9=85=8D80?=
 =?UTF-8?q?%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |   1 -
 src/components/menuTree/tree.vue     |  36 --
 src/layouts/footer/index.vue         |  32 +-
 src/layouts/header/index.vue         |  73 +---
 src/pages/about/index.vue            | 126 +++++-
 src/pages/application/index.vue      | 104 ++++-
 src/pages/careers/index.vue          |  47 ++-
 src/pages/column/index.vue           | 601 +++++++++++++++++----------
 src/pages/edu/index.vue              |  32 ++
 src/pages/home/index.vue             | 132 +++++-
 src/pages/news/index.vue             | 188 ++++++++-
 src/pages/newsPress/index.vue        |  27 ++
 src/pages/newsProcurement/index.vue  |  56 +++
 src/pages/overviewLocation/index.vue |   3 +
 src/pages/research/index.vue         |  24 +-
 15 files changed, 1137 insertions(+), 345 deletions(-)
 delete mode 100644 src/components/menuTree/tree.vue

diff --git a/src/App.vue b/src/App.vue
index dc127de..bb6e4a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,6 @@ export default {
       return flagPc;
     }
     var flagZt = IsPC();
-    console.log(flagZt)
     this.$store.commit('updateModelType', flagZt)
   }
 };
diff --git a/src/components/menuTree/tree.vue b/src/components/menuTree/tree.vue
deleted file mode 100644
index d614e95..0000000
--- a/src/components/menuTree/tree.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <div class="menu-child">
-      <template v-for="item in this.menuList">
-        <el-submenu :popper-class="$route.path === '/home' || $route.path === '/sfel' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
-          <template slot="title">
-            <span slot="title" :id="item.id">{{item.columnName}}</span>
-          </template>
-          <!-- <menuTree :menuList="item.children"></menuTree> -->
-        </el-submenu>
-        <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" v-else>
-          <span slot="title" :id="item.id">{{item.columnName}}</span>
-        </el-menu-item>
-      </template>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'menuTree',
-    props: {
-      menuList: {
-        type: Array,
-        default: []
-      }
-    },
-    data () {
-      return {}
-    },
-    mounted () {},
-    methods: {}
-  }
-  </script>
-  <style lang="scss" scoped>
-    
-  </style>
-  
\ No newline at end of file
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index 6056247..1ea15f3 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-if="showDefaultPath.includes($route.path)" class="footer">
       <div class="info">
-        <div style="margin-right: 100px">
+        <div class="leftBox">
           <img class="m-b-20" src="@/assets/images/iasf.png" alt="">
           <p class="meta">Copyright ©2002- 2021</p>
           <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
@@ -92,6 +92,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.leftBox{
+  margin-right: 100px;
+}
 .footer{
   padding: 64px 10% 25px;
   color: #fff;
@@ -199,7 +202,7 @@ export default {
     }
   }
 }
-@media (max-width: 992px)  {
+@media (max-width: 1200px)  {
   body{
     width: 100% !important;
   }
@@ -217,6 +220,29 @@ export default {
       margin-top: 90px;
     }
   }
-  
 }
+@media (min-width: 280px) and (max-width: 750px) {
+  .footer {
+    .info{
+       flex-direction: column;
+       .column{
+        margin-top: 20px;
+        margin-left: 0;
+       }
+    }
+  }
+}
+
+@media (min-width: 751px) and (max-width: 1200px) {
+  .footer {
+    .info{
+       flex-direction: column;
+       .column{
+        margin-top: 20px;
+        margin-left: 0;
+       }
+    }
+  }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 29adb62..992663c 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -3,50 +3,16 @@
     <a class="logo" @click="toIndex">
       <img :src="require('@/assets/images/' + (isSfel ? 'logo2' : isHome ? 'logo' : 'logo-black') + '.png')" alt="">
     </a>
-    <!-- <template v-if="$store.getters.getModelType"> -->
-      <navbar ref="nav" :isHome.sync="isHome"></navbar>
-      <div class="tools">
-        <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
-        <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
-        <div v-if="showSearch" class="search-wrap" @click.stop="stop">
-          <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
-          <img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
-          <i class="el-icon-close close-icon" @click="showSearch = false"></i>
-        </div>
+    <navbar ref="nav" :isHome.sync="isHome"></navbar>
+    <div class="tools">
+      <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleSearch">
+      <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang">
+      <div v-if="showSearch" class="search-wrap" @click.stop="stop">
+        <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
+        <img class="search-icon" src="@/assets/images/search.png" alt="" @click="handleSearch">
+        <i class="el-icon-close close-icon" @click="showSearch = false"></i>
       </div>
-    <!-- </template> -->
-
-    <!-- <template v-else>
-      <i class="el-icon-s-fold rightNavBox"></i>
-    </template>
-    <div class="btnsBox">
-      <el-menu
-      default-active="2"
-      class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose">
-      <el-submenu index="1">
-        <template slot="title">
-          <span>导航一</span>
-        </template>
-        <el-menu-item index="1-1">选项1</el-menu-item>
-        <el-menu-item index="1-2">选项2</el-menu-item>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-menu-item index="2">
-        <span slot="title">导航二</span>
-      </el-menu-item>
-      <el-menu-item index="3">
-        <span slot="title">导航三</span>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <span slot="title">导航四</span>
-      </el-menu-item>
-    </el-menu>
-    </div> -->
+    </div>
   </div>
 </template>
 <script>
@@ -134,6 +100,7 @@ $height: 90px;
   top: 0;
   left: 0;
   width: 100%;
+  min-width: $min-width;
   height: $height;
   box-sizing: content-box;
   &:not(.channel) {
@@ -164,13 +131,6 @@ $height: 90px;
     margin-right: 43px;
   }
 }
-
-.rightNavBox{
-  font-size: 50px;
-  position: absolute;
-  right: 20px;
-  top: 20px;
-}
 .search-wrap {
   position: absolute;
   top: 67px;
@@ -215,17 +175,4 @@ $height: 90px;
     }
   }
 }
-
-
-.btnsBox{
-  width: 100%;
-  height: 300px;
-  overflow: hidden;
-  overflow-y: scroll;
-  position: absolute;
-  top: 90px;
-  left: 0;
-  background-color: white;
-  z-index: 99;;
-}
 </style>
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index bd298d1..640abe9 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
         <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
@@ -446,4 +446,128 @@ export default {
     width: 98%;
   }
 }
+
+@media (max-width: 1200px) {
+ .texts {
+  flex-direction: column;
+  .left{
+    width: 100%;
+    h2{
+      font-size: 20px;
+    }
+    
+  }
+  .bg{ 
+      margin: 0;
+      width: 100%;
+      height: 450px;
+    }
+ }
+ .block{
+  padding: 50px 0;
+  .intro{
+    margin-bottom: 50px;
+  }
+  .inner {
+    .card{
+      flex-direction: column;
+      li {
+        width: 100%;
+      }
+    }
+  }
+  
+ }
+ .gray {
+    .inner{
+      .stat{
+        flex-direction: column;
+        li{
+          width: 100%;
+          text-align: center;
+        }
+      } 
+    }
+    
+  }
+  .plan{
+    .inner{
+       flex-direction: column;
+       .pic{
+        width: 95%;margin: 0 auto;
+       }
+       .texts {
+        width: 100%;
+        text-align: center;
+       }
+    }
+  }
+  .block {
+    .inner {
+      .b-title {
+        font-size: 1.5rem;
+      }
+      .people{
+        .wow {
+          flex-direction: column;
+          .pic {
+            width: 95%;
+            margin: 0 auto;
+          }
+          .texts{
+            padding-top: 50px;
+            width: 100%;
+          }
+        }
+      }
+      .list{
+        flex-direction: column;
+        .wow {
+          width: 100%;
+        }
+      }
+      .staff {
+        flex-direction: column;
+        .left{
+          width: 100%;
+          h6 {
+            font-size: 20px;
+          }
+          .des{
+             font-size: 15px;
+          }
+        }
+        .pic {
+          width: 95%;margin: 0 auto;
+          height: 400px;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .inner{
+    .texts {
+      .bg {
+        height: 350px;
+      }
+    }
+    .card {
+      li {
+        h6 {
+          font-size: 2rem;
+        }
+      }
+    }
+    .people{
+      li {
+        margin-bottom: 30px;
+        .pic {
+          height: 350px;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/application/index.vue b/src/pages/application/index.vue
index 626c719..68c75a0 100644
--- a/src/pages/application/index.vue
+++ b/src/pages/application/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
         <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
@@ -288,4 +288,106 @@ export default {
     width: 1558px;
   }
 }
+
+
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 450px;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
+@media (max-width: 1200px) {
+ .block{ 
+  padding: 50px 0;
+  .inner{
+    width: 95%;
+    margin: 0 auto;
+    .texts{
+      flex-direction: column;
+      .left {
+        width: 100%;
+      }
+      .bg{
+        margin: 0;
+        width: 100%;
+        height: 450px;
+      }
+    }
+  }
+  .app{
+    li {
+      width: 100%;
+    }
+  }
+  .intro {
+    margin-bottom: 30px;
+  }
+  .group{
+     flex-direction: column;
+     li {
+      width: 100%;
+     }
+  }
+  .news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 0 auto;
+      flex-direction: column;
+      img{
+        width: 100%;
+        height: 200px;
+      }
+      .texts{
+        margin-left: 0;
+        margin-top: 20px;
+      }
+    }
+  }
+ }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index a048f13..ec6ba0a 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -195,7 +195,7 @@ export default {
       display: flex;
       justify-content: flex-end;
       .comma {
-        left: 660px;
+        left: 70%;
       }
       .pic {
         left: 0;
@@ -292,4 +292,49 @@ export default {
     transition: .3s;
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .card{
+      flex-direction: column;
+      li{
+        margin-top: 20px;
+        width: 100%;
+        height: 450px;
+      }
+    }
+    .people{
+      li {
+        padding: 200px 20px 30px;
+        .left {
+          width: 100%;
+        }
+        .pic{
+          top: -60px;
+          right: 13px;
+          width: 55%;
+          height: 230px;
+        }
+      }
+    }
+    
+  }
+ }
+ .shows{
+    li {
+      flex-direction: column;
+      align-items:flex-start;
+      height: 450px;
+      .left {
+        padding: 10px ;
+        h6{
+          font-size: 2rem;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 648c812..05c2f44 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -1,7 +1,7 @@
 <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>
@@ -13,56 +13,50 @@
           <!-- 文章：侧边栏+搜索+新闻列表 -->
           <div v-if="info.listStyleId === 10" class="forms">
             <div class="item">
-              <span class="label">{{$t('column.classification')}}：</span>
+              <span class="label">{{ $t('column.classification') }}：</span>
               <el-select v-model="form.classificationId" @change="filter">
                 <el-option :label="$t('column.all')" :value="null"></el-option>
-                <el-option
-                  v-for="item in classifications"
-                  :key="item.id"
-                  :label="item.classificationName"
+                <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>
+              <span class="label">{{ $t('column.label') }}：</span>
               <el-select ref="search" v-model="lableId" multiple @change="filter">
-                <el-option
-                  v-for="item in labels"
-                  :key="item.id"
-                  :label="item.labelName"
-                  :value="item.id">
-                </el-option>
+                <el-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="">
+                <img src="@/assets/images/search-white.png" alt="" />
               </i>
             </div>
           </div>
           <!-- 会议活动：筛选+会议活动列表 -->
           <div v-if="info.listStyleId === 15" class="forms">
             <ul class="switch">
-              <li v-for="(item, i) in convokeTypes" :key="i" :class="{active: item.id === form.convokeType}" @click="switchChange(item)">{{ item.name }}</li>
+              <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>
+              <span class="label">{{ $t('column.classification') }}：</span>
               <el-select v-model="form.classificationId" @change="filter">
                 <el-option :label="$t('column.all')" :value="null"></el-option>
-                <el-option
-                  v-for="item in classifications"
-                  :key="item.id"
-                  :label="item.classificationName"
+                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
                   :value="item.id">
                 </el-option>
               </el-select>
             </div>
           </div>
           <div class="contents">
-            <el-tree v-if="!isFilter && showNav && columns.length" class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" icon-class="el-icon-arrow-down" @node-click="item => columnClick(item, 1)">
-              <span class="custom-tree-node" slot-scope="{ node, data }">
+            <el-tree v-if="!isFilter && showNav && columns.length" class="columns" ref="leftColumn" :data="columns"
+              highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id"
+              icon-class="el-icon-arrow-down" @node-click="(item) => columnClick(item, 1)">
+              <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
                 <span :title="node.label">{{ node.label }}</span>
               </span>
             </el-tree>
@@ -71,31 +65,45 @@
               <ul class="articles">
                 <li v-for="(item, i) in articles" :key="i" @click="toArtice(item)">
                   <div class="texts">
-                    <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" class="type">{{ item.classificationName }}</p>
+                    <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                      class="type">
+                      {{ item.classificationName }}
+                    </p>
                     <h6>{{ item.title }}</h6>
                     <template v-if="item.listStyleId === 11">
                       <span class="meta">{{ item.releaseTime }}</span>
                       <div class="des" v-html="item.mainBody"></div>
                     </template>
-                    <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + item.labelName }}</span>
+                    <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+                      item.labelName }}</span>
                     <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                      <div v-if="item.keynoteSpeaker" class="meta m-b-10"><img class="icon" src="@/assets/images/mine.png" alt=""> {{ item.keynoteSpeaker }}</div>
-                      <div v-if="item.activityStartTime" class="meta m-b-10"><img class="icon" src="@/assets/images/time.png" alt=""> {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</div>
-                      <div v-if="item.offlineLocation" class="meta m-b-10"><img class="icon" src="@/assets/images/location.png" alt=""> {{ item.offlineLocation }}</div>
-                      <div v-if="item.onlineLocation" class="meta"><img class="icon" src="@/assets/images/online.png" alt=""> {{ item.onlineLocation }}</div>
+                      <div v-if="item.keynoteSpeaker" class="meta m-b-10">
+                        <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
+                      </div>
+                      <div v-if="item.activityStartTime" class="meta m-b-10">
+                        <img class="icon" src="@/assets/images/time.png" alt="" />
+                        {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                      </div>
+                      <div v-if="item.offlineLocation" class="meta m-b-10">
+                        <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation }}
+                      </div>
+                      <div v-if="item.onlineLocation" class="meta">
+                        <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
+                      </div>
                     </template>
                   </div>
-                  <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
+                  <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';" />
                 </li>
               </ul>
               <div v-if="articles.length" class="pagination">
-                <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+                <el-pagination background @current-change="currentChange" :current-page="page"
+                  layout="total, prev, pager, next" :total="total"></el-pagination>
               </div>
             </div>
           </div>
         </div>
         <div class="right">
-          <p class="l-title">{{$t('column.hot')}}</p>
+          <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>
@@ -103,7 +111,7 @@
             </li>
           </ul>
 
-          <p class="l-title">{{$t('column.latestNews')}}</p>
+          <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>
@@ -118,10 +126,10 @@
 </template>
 
 <script>
-import Setting from '@/setting'
-import Util from '@/libs/util'
-import Breadcrumb from '@/components/breadcrumb'
-import mixins from '@/mixins/article'
+import Setting from '@/setting';
+import Util from '@/libs/util';
+import Breadcrumb from '@/components/breadcrumb';
+import mixins from '@/mixins/article';
 export default {
   mixins: [mixins],
   data() {
@@ -159,22 +167,22 @@ export default {
       news: [],
       hots: [],
       deepestId: ''
-    }
+    };
   },
   components: {
     Breadcrumb
   },
   watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      this.init()
+    $route() {
+      this.id = this.$route.query.id;
+      this.init();
     },
-    'form.title': function(val) {
-      clearTimeout(this.searchTimer)
+    'form.title': function (val) {
+      clearTimeout(this.searchTimer);
       this.searchTimer = setTimeout(() => {
-        this.filter()
-      }, 500)
-    },
+        this.filter();
+      }, 500);
+    }
   },
   mounted() {
     this.convokeTypes = [
@@ -190,35 +198,38 @@ export default {
         id: 2,
         name: this.$t('column.alreadyHeld')
       }
-    ]
-    this.init()
+    ];
+    this.init();
   },
   methods: {
     init() {
-      this.getInfo()
-      this.getColumn()
-      this.getNews()
-      this.getLabel()
+      this.getInfo();
+      this.getColumn();
+      this.getNews();
+      this.getLabel();
     },
     // 获取栏目详情
     getInfo() {
-      this.id && this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
-        this.columnClick(data)
-        if (data.typeId !== 3) this.loaded = true // 非长页，才展示页面
-        this.info = data
-        this.showNav = this.showNavIds.includes(data.listStyleId)
-        this.getLeftColumn()
-        this.getClassification()
-      }).catch(res => {})
+      this.id &&
+        this.$post(`${this.api.findColumn}?id=${this.id}`)
+          .then(({ data }) => {
+            this.columnClick(data);
+            if (data.typeId !== 3) this.loaded = true; // 非长页，才展示页面
+            this.info = data;
+            this.showNav = this.showNavIds.includes(data.listStyleId);
+            this.getLeftColumn();
+            this.getClassification();
+          })
+          .catch((res) => { });
     },
     // 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的
     getBanner(data) {
       for (const e of data) {
-        if (e.columnBanner) this.columnBanner = e.columnBanner
+        if (e.columnBanner) this.columnBanner = e.columnBanner;
         if (e.id == this.info.id) {
-          break
+          break;
         } else if (e.children.length) {
-          this.getBanner(e.children)
+          this.getBanner(e.children);
         }
       }
     },
@@ -226,81 +237,92 @@ export default {
     getClassification() {
       // 会议分类
       if (this.info.templateId === 7) {
-        this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`).then(({ data }) => {
-          this.classifications = data
-        }).catch(err => {})
-      } else { // 其他类型的分类
-        this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`).then(({ data }) => {
-          this.classifications = data
-        }).catch(err => {})
+        this.$post(`${this.api.queryClassif}?siteId=${this.site}&templateId=${7}`)
+          .then(({ data }) => {
+            this.classifications = data;
+          })
+          .catch((err) => { });
+      } else {
+        // 其他类型的分类
+        this.$post(`${this.api.getTheFullArticleByColumn}?id=${this.id}`)
+          .then(({ data }) => {
+            this.classifications = data;
+          })
+          .catch((err) => { });
       }
     },
     // 获取标签
     getLabel() {
-      this.$post(`${this.api.queryLabel}?siteId=${this.$route.query.siteId || this.site}`).then(({ data }) => {
-        this.labels = data
-        // 修改placeholder
-        this.$nextTick(() => {
-          setTimeout(() => {
-            const el = this.$refs.search
-            if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder')
-          }, 500)
-          
+      this.$post(`${this.api.queryLabel}?siteId=${this.$route.query.siteId || this.site}`)
+        .then(({ data }) => {
+          this.labels = data;
+          // 修改placeholder
+          this.$nextTick(() => {
+            setTimeout(() => {
+              const el = this.$refs.search;
+              if (el) el.$el.querySelector('.el-input__inner').placeholder = this.$t('column.selectPlaceholder');
+            }, 500);
+          });
         })
-      }).catch(err => {})
+        .catch((err) => { });
     },
     // 递归查询是否每个层级的栏目都是同一列表样式，如果是，则查询全部栏目下的文章，否则查询当前栏目下的
     handleColumn(data, parent) {
       for (const e of data) {
-        if (this.info.typeId === 4) { // 子级优先
+        if (this.info.typeId === 4) {
+          // 子级优先
           if (e.children.length) {
-            this.handleColumn(e.children)
+            this.handleColumn(e.children);
           } else if (!this.deepestId) {
-            this.deepestId = e.id
+            this.deepestId = e.id;
           }
-        } else { // 常规栏目
+        } else {
+          // 常规栏目
           if (e.id == this.id) {
-            this.allColumnId.push(e.id)
-            e.children.length && this.handleColumn(e.children, 1)
+            this.allColumnId.push(e.id);
+            e.children.length && this.handleColumn(e.children, 1);
           } else if (parent) {
-            if (e.listStyleId !== this.info.listStyleId) { // 如果有不同的栏目样式
-              this.sameStyle = 0
-              break
+            if (e.listStyleId !== this.info.listStyleId) {
+              // 如果有不同的栏目样式
+              this.sameStyle = 0;
+              break;
             } else {
-              this.allColumnId.push(e.id) // 收集所有该栏目下相同栏目样式的id
-              e.children.length && this.handleColumn(e.children, parent)
+              this.allColumnId.push(e.id); // 收集所有该栏目下相同栏目样式的id
+              e.children.length && this.handleColumn(e.children, parent);
             }
           } else {
-            e.children.length && this.handleColumn(e.children, parent)
+            e.children.length && this.handleColumn(e.children, parent);
           }
         }
       }
     },
     // 左边栏目
     getLeftColumn() {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1`).then(({ data }) => {
-        const fromColumn = this.$route.query.column // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
-        const { typeId } = this.info
-        this.sameStyle = 1
-        this.allColumnId = []
-        this.deepestId = ''
-        data.length && this.handleColumn(data)
-        let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id]
-        if (typeId === 4 && !fromColumn) {
-          id = [this.deepestId]
-        }
-        this.getArticle(id)
-        this.columns = data
-        // 如果没上传banner
-        if (!this.info.columnBanner) {
-          this.getBanner(data)
-          this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png')
-        }
-        this.$nextTick(() => {
-          const el = this.$refs.leftColumn
-          el && el.setCurrentKey(this.id)
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1`)
+        .then(({ data }) => {
+          const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
+          const { typeId } = this.info;
+          this.sameStyle = 1;
+          this.allColumnId = [];
+          this.deepestId = '';
+          data.length && this.handleColumn(data);
+          let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id];
+          if (typeId === 4 && !fromColumn) {
+            id = [this.deepestId];
+          }
+          this.getArticle(id);
+          this.columns = data;
+          // 如果没上传banner
+          if (!this.info.columnBanner) {
+            this.getBanner(data);
+            this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png');
+          }
+          this.$nextTick(() => {
+            const el = this.$refs.leftColumn;
+            el && el.setCurrentKey(this.id);
+          });
         })
-      }).catch(err => {})
+        .catch((err) => { });
     },
     // 右边资讯
     getColumn() {
@@ -308,15 +330,19 @@ export default {
         siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnName: '',
         templateId: '',
-        typeId	: '',
+        typeId: '',
         isSort: 1
-      }).then(({ data }) => {
-        this.infoColumns = data
-      }).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 => {})
+      })
+        .then(({ data }) => {
+          this.infoColumns = data;
+        })
+        .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) => { });
     },
     // 最新资讯
     getNews() {
@@ -324,72 +350,75 @@ export default {
         pageNum: 1,
         pageSize: 5,
         siteId: this.$route.query.siteId || this.$store.state.content.site
-      }).then(({ data }) => {
-        this.news = Util.removeTag(data.records)
-      }).catch(res => {})
+      })
+        .then(({ data }) => {
+          this.news = Util.removeTag(data.records);
+        })
+        .catch((res) => { });
     },
     // 会议时间筛选回调
     switchChange(item) {
-      this.form.convokeType = item.id
-      this.filter()
+      this.form.convokeType = item.id;
+      this.filter();
     },
     // 点击栏目回调
     columnClick(to, left) {
-      const { typeId } = to
+      const { typeId } = to;
       // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
-      if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false
+      if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
       // 出版物则跳转到出版物列表
       if (to.templateId === 8) {
-        this.$router.replace(`/publish?id=${this.id}&siteId=${this.$route.query.siteId || this.site}`)
-        return
+        this.$router.replace(`/publish?id=${this.id}&siteId=${this.$route.query.siteId || this.site}`);
+        return;
       }
       // 跳转链接
       if (typeId === 2) {
-        let href = to.linkAddress
-        const cType = to.connectionType
-        if (cType !== 2) { // 非站外链接
-          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+        let href = to.linkAddress;
+        const cType = to.connectionType;
+        if (cType !== 2) {
+          // 非站外链接
+          const ids = href.split('-'); // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
           // 站点id：站内链接取当前站点，其他站点链接取siteSelection
-          const site = cType === 1 ?
-            (this.$route.query.siteId || this.site) :
-            to.siteSelection
-          if (ids[1]) { // 文章
-            href = '/article?id=' + ids[1]
-          } else { // 栏目
-            const columnIds = ids[0].split(',')
-            href = '/column?id=' + columnIds[columnIds.length - 1]
+          const site = cType === 1 ? this.$route.query.siteId || this.site : to.siteSelection;
+          if (ids[1]) {
+            // 文章
+            href = '/article?id=' + ids[1];
+          } else {
+            // 栏目
+            const columnIds = ids[0].split(',');
+            href = '/column?id=' + columnIds[columnIds.length - 1];
           }
-          href = this.$router.resolve(href + '&siteId=' + site).href
+          href = this.$router.resolve(href + '&siteId=' + site).href;
         }
         // 是否新窗口打开
         if (to.isOpen) {
-          window.open(href)
+          window.open(href);
         } else {
-          location.href = href
+          location.href = href;
         }
       } else if (typeId === 3) {
         // 长页栏目直接获取path
-        this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {})
+        this.$router.push(`/${to.path}?id=${to.id}`).catch((err) => { });
       } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
         // 常规栏目，或者没有子级的子级优先栏目，跳转到column页
-        this.$router.push(`/column?id=${to.id + ((to.level !== 1 || !this.sameStyle) ? '&column=1' : '')}`).catch(err => {})
+        this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}`).catch((err) => { });
       } else if (left && typeId === 4 && to.children.length) {
         // 子级优先栏目，并且有子级
-        const el = this.$refs.leftColumn
+        const el = this.$refs.leftColumn;
         if (el) {
-          const exp = el.store.nodesMap[to.id].expanded
-          el.store.nodesMap[to.id].expanded = !exp // 展开收缩子级
-          el.setCurrentKey(this.id)
+          const exp = el.store.nodesMap[to.id].expanded;
+          el.store.nodesMap[to.id].expanded = !exp; // 展开收缩子级
+          el.setCurrentKey(this.id);
         }
       }
     },
     // 查询文章列表
     getArticle(columnIds) {
-      const labelName = []
+      const labelName = [];
       // 获取标签名称
-      this.labels.map(e => {
-        if (this.lableId.includes(e.id)) labelName.push(e.labelName)
-      })
+      this.labels.map((e) => {
+        if (this.lableId.includes(e.id)) labelName.push(e.labelName);
+      });
       this.$post(this.api.newlyPublishedArticles, {
         siteId: this.$route.query.siteId || this.site,
         columnIds,
@@ -397,165 +426,198 @@ export default {
         pageSize: this.info.pageSize,
         labelName,
         ...this.form
-      }).then(({ data }) => {
-        this.articles = Util.removeTag(data.records)
-        this.total = +data.total
-        // 如果栏目那勾选了“只有一篇文章时，以详情方式展示”，并且只有一篇文章，则跳转到详情页
-        // this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
-      }).catch(res => {})
+      })
+        .then(({ data }) => {
+          this.articles = Util.removeTag(data.records);
+          this.total = +data.total;
+          // 如果栏目那勾选了“只有一篇文章时，以详情方式展示”，并且只有一篇文章，则跳转到详情页
+          // this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
+        })
+        .catch((res) => { });
     },
     // 递归获取栏目所有id
     getIds(data, ids) {
-      data.map(e => {
-        ids.push(e.id)
-        e.children && this.getIds(e.children, ids)
-      })
+      data.map((e) => {
+        ids.push(e.id);
+        e.children && this.getIds(e.children, ids);
+      });
     },
     // 筛选
     filter() {
-      this.page = 1
-      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length) // 是否在筛选
-      let id = []
+      this.page = 1;
+      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length); // 是否在筛选
+      let id = [];
       if (this.isFilter) {
-        this.getIds(this.columns, id)
+        this.getIds(this.columns, id);
       } else if (this.columns.length) {
-        id = [this.columns[0].id]
+        id = [this.columns[0].id];
       }
-      this.getArticle(id)
+      this.getArticle(id);
     },
     currentChange(val) {
-      this.page = val
-      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length)
-      let id = []
+      this.page = val;
+      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length);
+      let id = [];
       if (this.isFilter) {
-        this.getIds(this.columns, id)
+        this.getIds(this.columns, id);
       } else if (this.columns.length) {
-        id = [this.$refs.leftColumn.getCurrentKey()]
+        id = [this.$refs.leftColumn.getCurrentKey()];
       }
-      this.getArticle(id)
-    },
+      this.getArticle(id);
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.el-tree-node__content{
+  padding-left: 10px !important;
+}
 .l-title {
   font-weight: 600;
 }
+
 .banner {
   position: relative;
   height: 280px;
-  
+
   color: #fff;
+
   .texts {
     position: absolute;
     top: 123px;
     left: 243px;
   }
+
   .text {
     font-size: 48px;
     font-weight: 600;
     @include ellipsis;
   }
+
   .sub {
     margin-top: 10px;
     font-size: 28px;
   }
 }
+
 .column-wrap {
   padding: 40px 0;
-  background: url(../../assets/images/column-bg.png) 0 0/auto no-repeat,
-              url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
-  background-color: #F9FAFA;
+  background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
+    url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
+  background-color: #f9fafa;
 }
+
+
 .article {
   display: flex;
   justify-content: center;
   margin: 0 auto;
+
   .left {
     width: 66%;
     margin-right: 28px;
   }
+
   .article-wrap {
     width: 78%;
   }
+
   .switch {
     display: inline-flex;
     align-items: center;
     margin-right: 50px;
+
     li {
       padding: 0 15px;
       margin-right: 10px;
       line-height: 36px;
       font-size: 14px;
       color: #333;
-      background: #F7F7F7;
+      background: #f7f7f7;
       cursor: pointer;
     }
+
     .active {
       color: #fff;
-      background: linear-gradient(126deg, #1150AC 0%, #17BEFF 100%);
+      background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
     }
   }
+
   .forms {
     display: flex;
     align-items: center;
     padding: 30px;
     margin-bottom: 20px;
     background-color: #fff;
+
     .item {
       display: inline-flex;
       align-items: center;
       margin-right: 30px;
     }
+
     .label {
       font-size: 16px;
       color: #333;
       white-space: nowrap;
     }
+
     /deep/.el-input__inner {
       width: 100%;
       height: 48px;
       line-height: 48px;
       border: 0;
-      background: #F7F7F7;
+      background: #f7f7f7;
     }
+
     .search {
       display: inline-flex;
       width: 34%;
+
       input {
         width: 100%;
         height: 48px;
         padding: 0 15px;
         font-size: 14px;
         color: #333;
-        background: #F7F7F7;
+        background: #f7f7f7;
         border: 0;
         border-top-left-radius: 6px;
         border-bottom-left-radius: 6px;
+
         &:focus {
           outline: none;
         }
       }
     }
+
     .icon {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 62px;
       height: 48px;
-      background: #1583FF;
+      background: #1583ff;
       border-radius: 0px 6px 6px 0px;
       cursor: pointer;
     }
   }
+
   .contents {
     display: flex;
   }
+
   /deep/.columns {
     width: 22%;
     margin-right: 12px;
     overflow: auto;
+    span{
+      white-space: nowrap; 
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     &:after {
       content: '';
       position: absolute;
@@ -563,8 +625,9 @@ export default {
       right: 0;
       width: 2px;
       height: 100%;
-      background-color: #E1E6F2;
+      background-color: #e1e6f2;
     }
+
     .el-tree-node__content {
       position: relative;
       height: 48px;
@@ -573,35 +636,42 @@ export default {
       font-size: 18px;
       color: #666;
       background-color: #fff;
-      border-top: 1px solid #F8F9F9;
+      border-top: 1px solid #f8f9f9;
       cursor: pointer;
-      &:before {
-        content: '';
-        width: 2px;
-        height: 2px;
-        margin: 0 10px 0 20px;
-        background-color: #666;
-        border-radius: 50%;
-      }
+
+      // &:before {
+      //   content: '';
+      //   width: 2px;
+      //   height: 2px;
+      //   margin: 0 10px 0 20px;
+      //   background-color: #666;
+      //   border-radius: 50%;
+      // }
+
       &:hover {
         color: #0c84eb;
       }
     }
+
     .el-tree-node__label {
       font-size: 18px;
       color: #666;
       line-height: 22px;
     }
+
     .el-tree-node__expand-icon.expanded {
       transform: rotate(180deg);
     }
+
     .el-tree-node__expand-icon {
       position: absolute;
       right: 10px;
     }
-    .is-current > .el-tree-node__content {
-      background-color: #E5EDF8;
+
+    .is-current>.el-tree-node__content {
+      background-color: #e5edf8;
       border-top: 0;
+
       &:after {
         content: '';
         z-index: 2;
@@ -610,14 +680,18 @@ export default {
         right: 0;
         width: 2px;
         height: 100%;
-        background-color: #083A93;
+        background-color: #083a93;
       }
-      .el-tree-node__label, .custom-tree-node {
+
+      .el-tree-node__label,
+      .custom-tree-node {
         font-weight: 600;
-        color: #1150AC;
+        color: #1150ac;
+        
       }
     }
   }
+
   .articles {
     li {
       display: flex;
@@ -627,15 +701,18 @@ export default {
       background-color: #fff;
       cursor: pointer;
     }
+
     .texts {
       width: 52%;
       padding-left: 30px;
     }
+
     .type {
       margin-bottom: 15px;
       font-size: 18px;
       color: #333;
     }
+
     h6 {
       margin-bottom: 15px;
       font-size: 24px;
@@ -643,6 +720,7 @@ export default {
       line-height: 38px;
       @include mul-ellipsis(2);
     }
+
     .meta {
       display: flex;
       align-items: center;
@@ -650,74 +728,92 @@ export default {
       font-family: PingFangSC-Medium;
       color: #333;
     }
+
     .icon {
       margin-right: 10px;
     }
+
     .des {
       margin-top: 15px;
       @include mul-ellipsis(2);
     }
+
     .pic {
       width: 46%;
       height: 244px;
     }
   }
+
   .right {
     width: 14%;
     min-width: 240px;
     overflow: hidden;
   }
+
   .column {
     width: 100%;
     margin-bottom: 25px;
+
     /deep/.el-tree-node__content {
       height: 44px;
-      background-color: #E5EDF8;
+      background-color: #e5edf8;
       border-bottom: 2px solid #fff;
     }
-    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+
+    /deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
       color: #fff;
       background-color: #0f5698;
     }
   }
+
   .list {
     margin-bottom: 20px;
+
     li {
       padding: 16px 0;
-      border-bottom: 1px solid #D8D8D8;
+      border-bottom: 1px solid #d8d8d8;
     }
+
     .text {
       margin-bottom: 5px;
       font-size: 14px;
       cursor: pointer;
       @include ellipsis;
+
       &:hover {
         color: $main-color;
       }
     }
+
     .date {
       font-size: 12px;
       color: #999;
     }
   }
 }
+
 .activity {
   .column-wrap {
     padding: 0;
     background: none;
   }
+
   .article-wrap {
     width: 100%;
   }
+
   .article {
     justify-content: center;
+
     .left {
       width: 1136px;
       margin-right: 36px;
     }
+
     .forms {
       padding: 30px 0;
     }
+
     .articles li {
       flex-direction: row-reverse;
       justify-content: flex-end;
@@ -725,6 +821,7 @@ export default {
       margin-bottom: 38px;
       border-bottom: 1px solid #ddd;
     }
+
     .right {
       padding-top: 30px;
     }
@@ -732,68 +829,90 @@ export default {
 }
 
 @media (max-width: 1200px) {
-  .article{ 
+  .article {
     flex-direction: column;
-    .left{
+
+    .left {
       width: 100%;
-      .forms{
+
+      .forms {
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        
-        .item, .search{
-          margin: 20px 0 0 0 ;
+
+        .item,
+        .search {
+          margin: 20px 0 0 0;
         }
-        .item:first-child{
+
+        .item:first-child {
           margin: 0;
         }
-        div{
+
+        div {
           width: 100%;
         }
       }
     }
-    .article-wrap{
+
+    .article-wrap {
       width: 90%;
       margin: 0 auto;
-      .articles{
-        li{
-          .pic{
+
+      .articles {
+        li {
+          .pic {
             margin-top: 20px;
           }
         }
       }
     }
-    .right{
+
+    .right {
       width: 95%;
       margin: 20px auto;
     }
   }
-  .column-wrap{
-    .article{
+
+  .banner {
+    .texts {
+      left: 50px;
+      top: 110px;
+    }
+  }
+
+  .column-wrap {
+    .article {
       flex-direction: column;
-      .left{
+
+      .left {
         width: 100%;
-        .item{
+
+        .item {
           width: 80%;
           margin: 20px auto;
         }
-        .search{
+
+        .search {
           width: 80%;
           margin: 20px auto;
           margin-top: 0;
         }
 
-        .contents{
-          .articles{
+        .contents {
+          .articles {
             li {
               flex-direction: column;
-              .texts{
+
+              .texts {
                 width: 100%;
+
                 .meta {
-                  font-size: .5rem;
+                  font-size: 0.5rem;
                 }
               }
-              .pic{
+
+              .pic {
                 width: 100%;
               }
             }
@@ -803,4 +922,24 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+
+@media (min-width: 280px) and (max-width: 750px) {
+
+  .article {
+    .columns {
+      width: 40%;
+      .el-tree-node__content {
+        padding: 0 !important;
+       
+      }
+      span {
+        font-size: 0.8rem;
+        white-space: nowrap; 
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
index a659134..c8906df 100644
--- a/src/pages/edu/index.vue
+++ b/src/pages/edu/index.vue
@@ -150,4 +150,36 @@ export default {
     }
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .inner {
+    width: 95%;margin: 0 auto;
+    .b-title{
+      margin-bottom: 30px;
+    }
+    .intro {
+      margin-bottom: 30px;
+    }
+    .block-pic{
+      height: 450px;
+    }
+  }
+  .list{
+    li {
+      margin-top: 20px;
+      .pic{
+        width: 100%;height: 450px;
+      }
+      .texts{
+        padding: 10px;
+        width: 70%;
+        top: 80px;
+        height: auto;
+        left: 24%;
+      }
+    }
+  }
+ }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index ab73e43..7b0b641 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="wrap">
-    <el-carousel height="959px" :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'">
+  <div class="wrap" v-if="modules.length>=1">
+    <el-carousel class="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">
-          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
+          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" :src="item.pic" alt="" @click="openLink(item)">
         </el-carousel-item>
       </template>
     </el-carousel>
@@ -146,7 +146,7 @@ export default {
           const json = JSON.parse(this.preview ?
             data :
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
+            this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
 
           // 获取文章列表
@@ -176,6 +176,16 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import "../../styles/page/page.scss";
+.carousel{
+  height: 959px;
+  img{
+    height: 100%;
+  }
+  /deep/.el-carousel__container{
+    height: 959px ;
+  }
+}
+
 .card {
   display: flex;
   justify-content: space-between;
@@ -363,4 +373,118 @@ export default {
     }
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .carousel{
+    height: 350px;
+    img{
+      height: 100%;
+    }
+    /deep/.el-carousel__container{
+      height: 350px ;
+    }
+  }
+  .el-carousel__item{
+     height: 350px;
+     img {
+      height: 350px;
+     }
+  }
+  .block{
+    padding: 50px 0;
+    .inner{
+      width: 95%;
+      margin: 0 auto;
+      .b-title{
+        font-size: 2rem;
+        margin-bottom: 20px;
+      }
+      .wow {
+        font-size: 1.5rem;
+      }
+      .intro {
+        margin-bottom: 20px;
+      }
+      .card {
+        flex-direction: column;
+        li{
+          margin-top: 20px;
+          width: 100%;
+        }
+      }
+      .news {
+        flex-direction: column;
+        li {
+          width: 100%;
+          margin-bottom: 15px;
+          img{
+             width: 10rem;
+          }
+          .texts {
+            width: calc(100% - 10rem);
+          }
+        }
+      }
+      .people{
+       li{
+        flex-direction: column;
+        margin-bottom: 20px;
+        .pic {
+          width: 100%;
+          height: 350px;
+        }
+        .texts{
+          padding-top: 20px;
+          width: 100%;
+        }
+       }
+
+      }
+      
+    }
+  }
+  .about {
+    width: 100%;
+    padding: 20px 0 30px;
+    .inner {
+      width: 95%;
+      margin: 0 auto;
+      .line{
+        margin: 20px 0 20px;
+      }
+      .des {
+        margin-top: 20px;
+        padding: 10px 20px;
+      }
+    }
+  }
+  .glance {
+    padding-bottom: 20px;
+  }
+  .stat{
+      flex-direction: column;
+      li {
+        width: 100%;
+        text-align: center;
+      }
+  }
+ 
+}
+
+
+@media (min-width: 751px) and (max-width: 920px) {
+  .news {
+    flex-direction: column;
+    li {
+      width: 100%;
+      margin-bottom: 15px;
+      img{
+          width: 10rem;
+      }
+      .texts {
+        width: calc(100% - 10rem);
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index 15e3ed0..7fc1b15 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -11,9 +11,9 @@
       </template>
     </el-carousel>
 
-    <ul class="tabs wow fadeInLeft">
+    <ul class="tabs wow fadeInLeft" ref="tabs">
       <template v-for="(item, i) in modules[1].list">
-        <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
+        <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange($event,i)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -208,6 +208,7 @@ export default {
           }
 
           this.modules = json
+          console.log(this.modules)
           this.carouselInterval()
         }
       }).catch(err => {})
@@ -229,7 +230,10 @@ export default {
       }
     },
     // tab回调
-    tabChange(i) {
+    tabChange(e,i) {
+      const tabs = this.$refs.tabs
+      tabs.scrollLeft  = e.target.offsetLeft
+      // e.target.offsetLeft
       const { column } = this.modules[1].list[i]
       if (column && column.length) {
         const id = column[column.length - 1]
@@ -626,4 +630,182 @@ export default {
     width: 98%;
   }
 }
+
+
+@media (max-width: 1200px) {
+ .tabs {
+  overflow-x: scroll;
+  display: -webkit-box;
+ } 
+ .block {
+  padding: 50px 0 ;
+  .inner{
+    .more {
+      width: 100%;
+      margin: 20px auto 0;
+    }
+    .news-banner{
+      flex-direction: column;
+      img{
+        width: 100%;
+      }
+      .right {
+        margin-top: 10px;
+        width: 100%;
+        .inds{
+          left: 50%;
+          margin-left: -43px;
+        }
+      }
+    }
+    .card{
+      flex-direction: column;
+      .wow {
+        width: 95%;
+        margin: 20px auto;
+      }
+    }
+    .b-title{
+      font-size: 20px;
+    }
+    .intro {
+      font-size: 15px;
+      margin-bottom: 50px;
+    }
+    .shop-shows{
+       flex-direction: column;
+       .left {
+        width: 95%;margin: 0 auto;
+       }
+       .right {
+        width: 93%;
+        margin: 20px auto;
+        .show-card{
+          flex-direction: column;
+          li {
+            width: 100%;
+            .pic{
+              width: 100%;
+            }
+          }
+        }
+        .card-list{
+          li {
+            .texts{
+              margin-right: 30px;
+            }
+          }
+        }
+       }
+    }
+  }
+ }
+}
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .tabs  {
+    li {
+      padding: 15px 10px;
+      font-size: 15px;
+      margin: 0;
+    }
+  }
+  .block{
+    padding: 20px 0;
+    .inner {
+      width: 90%;
+      .news-banner{
+        img{
+          height: 350px;
+        }
+      }
+      .b-title{
+        margin-bottom: 20px;
+      }
+      .intro {
+        margin-bottom: 20px;
+      }
+      .shop-shows{
+        .left {
+          img{
+            height: 350px;
+          }
+        }
+      }
+      .show-card{
+        .text{
+          font-size: 13px;
+          line-height: 20px;
+          white-space: inherit
+        }
+      }
+      .card-list{
+        padding: 20px 10px ;
+        li {
+          width: 100%;
+          img{
+            margin-right: 10px;
+          }
+          .texts{
+            margin-right: 10px;
+            h6{
+              font-size: 15px;
+              font-weight: bold;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              margin-bottom: 5px;
+            }
+          }
+          .des {
+            line-height: 15px;
+          }
+          .arrow{
+              margin-right: 0;
+            }
+        }
+      }
+      .shows{
+        flex-direction: column;
+        .left {
+          width: 100%;
+          .pic {
+            height: 450px;
+          }
+        }
+        .card-list{
+          width: 100%;
+          padding: 20px 0;
+          li {
+            .pic {
+              width: 100px;
+              height: 120px;
+            }
+            .texts{
+             h6{
+              font-size: 15px;font-weight: bold;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+              text-overflow: ellipsis;
+              overflow: hidden;
+             }
+             .text{
+              margin: 2px 0;
+              font-size: 12px;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+              text-overflow: ellipsis;
+              overflow: hidden;
+             }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
index 17266b0..73bc87d 100644
--- a/src/pages/newsPress/index.vue
+++ b/src/pages/newsPress/index.vue
@@ -169,4 +169,31 @@ export default {
     }
   }
 }
+@media (min-width: 280px) and (max-width: 750px) {
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 500px;
+        }
+        .texts {
+          padding: 20px 10px 10px ;
+          top: 30px;
+          h6{
+            font-size: 2rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/newsProcurement/index.vue b/src/pages/newsProcurement/index.vue
index 100e33f..fdddae6 100644
--- a/src/pages/newsProcurement/index.vue
+++ b/src/pages/newsProcurement/index.vue
@@ -165,4 +165,60 @@ export default {
     }
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 500px;
+        }
+        .texts {
+          padding: 20px 10px 10px ;
+          top: 30px;
+          h6{
+            font-size: 2rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .inner{
+    width: 95%;
+    .list{
+      li {
+        margin-top: 20px;
+        .pic {
+          width: 100%;
+          height: 500px;
+        }
+        .texts {
+          padding: 20px 10px 10px ;
+          top: 30px;
+          h6{
+            font-size: 2rem;
+          }
+          .sub{
+            margin: 10px 0;
+          }
+          .des{
+            margin-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue
index 90d2890..d465642 100644
--- a/src/pages/overviewLocation/index.vue
+++ b/src/pages/overviewLocation/index.vue
@@ -107,6 +107,9 @@ export default {
       white-space: normal;
     }
   }
+  .tab-content{
+    width: 90%;
+  }
  
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/research/index.vue b/src/pages/research/index.vue
index c426ab3..79d7446 100644
--- a/src/pages/research/index.vue
+++ b/src/pages/research/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap" v-if="modules.length>=1">
     <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
         <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
@@ -238,4 +238,26 @@ export default {
     line-height: 26px;
   }
 }
+
+@media (min-width: 280px) and (max-width: 750px) {
+ .block{ 
+  padding: 50px 0;
+  .intro {
+    margin-bottom: 30px;
+  }
+  .area{
+    flex-direction: column;
+    li{
+      width: 95%;margin: 0 auto;
+    }
+  }
+  .group,.news{
+    flex-direction: column;
+    li {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+ }
+}
 </style>
\ No newline at end of file