From 5afd3c602a8be742d122b30f4eca3014b4eda744 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 7 Dec 2022 16:57:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/breadcrumb/index.vue | 34 ++++-------
 src/layouts/footer/index.vue        |  6 +-
 src/layouts/header/index.vue        | 18 +++++-
 src/layouts/navbar/index.vue        |  6 +-
 src/mixins/article/index.js         |  6 +-
 src/mixins/page/index.js            |  2 +-
 src/pages/about/index.vue           | 29 ++++++---
 src/pages/application/index.vue     | 15 +++--
 src/pages/article/activity.vue      | 65 +++++++++++++-------
 src/pages/article/index.vue         | 46 +++++++++-----
 src/pages/careers/index.vue         |  4 +-
 src/pages/column/index.vue          | 45 +++++++-------
 src/pages/edu/index.vue             | 14 ++++-
 src/pages/home/index.vue            |  9 +--
 src/pages/news/index.vue            | 11 +++-
 src/pages/newsPress/index.vue       | 93 ++++++++++++++++++++++-------
 src/pages/newsProcurement/index.vue | 93 ++++++++++++++++++++++-------
 src/pages/research/index.vue        | 17 ++++--
 src/styles/common.scss              |  8 +--
 src/styles/page/page.scss           |  8 ++-
 20 files changed, 358 insertions(+), 171 deletions(-)

diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
index d4e83aa..013bbb3 100644
--- a/src/components/breadcrumb/index.vue
+++ b/src/components/breadcrumb/index.vue
@@ -2,17 +2,17 @@
   <!-- 面包屑 -->
   <div class="breadcrumb">
     <el-breadcrumb separator=">">
-      <template v-for="(item, index) in pages">
+      <template v-for="(item, i) in data">
         <el-breadcrumb-item
-          v-if="index != pages.length - 1"
-          :key="index"
-          :to="{ path: route, query }">
-          {{item}}
+          v-if="i != data.length - 1"
+          :key="i"
+          :to="{ path: item.path || '/column', query: item.query }">
+          {{ item.name }}
         </el-breadcrumb-item>
         <el-breadcrumb-item
           v-else
-          :key="index">
-          {{item}}
+          :key="i">
+          {{ item.name }}
         </el-breadcrumb-item>
       </template>
     </el-breadcrumb>
@@ -21,28 +21,14 @@
 
 <script>
 export default {
-    props: {
-      data: {
-        type: String,
-        required: true
-      },
-      route: {
-        type: String,
-        default: 'column'
-      },
-      query: {
-        type: Object
-      }
-    },
+    props: ['data'],
     data() {
       return {
-        pages: this.data.split('/')
+        
       };
     },
     methods: {
-      update(data) {
-        this.pages = data.split('/')
-      }
+      
     }
 };
 </script>
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index b656498..ad3b571 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -26,7 +26,6 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      site: this.$store.state.content.site,
       columns: [],
       isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号
     };
@@ -44,7 +43,7 @@ export default {
         typeId	: '',
         isSort: 1
       }).then(({ data }) => {
-        this.columns = data.slice(0, 8)
+        this.columns = data.slice(0, 6)
       }).catch(err => {})
     },
   },
@@ -56,8 +55,9 @@ export default {
   color: #fff;
   background-color: #091733;
   .inner {
-    width: 1500px;
+    width: 80%;
     margin: 0 auto;
+    overflow: hidden;
   }
   .info {
     display: flex;
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index fe77c18..fa3511a 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -8,7 +8,7 @@
         深圳中能高重复自由电子激光 -->
       </template>
     </a>
-    <navbar ref="nav"></navbar>
+    <navbar ref="nav" :isHome.sync="isHome"></navbar>
     <div class="tools">
       <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click="showSearch = !showSearch">
       <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click="showSearch = !showSearch">
@@ -40,15 +40,27 @@ export default {
       this.isHome = this.$route.path === '/home'
     }
   },
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
   mounted() {
-    
+    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
   },
   methods: {
     toIndex() {
       this.$refs.nav.jump({
           index: '/index/list'
       })
-    }
+    },
+    // 获取页面滚动距离(home长页专用)
+    handleScroll () {
+      if (this.$route.path === '/home') {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        if (this.isHome == scrollTop > 907) {
+          this.isHome = !(scrollTop > 907)
+        }
+      }
+    },
   }
 };
 </script>
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 89017db..729f3fa 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -11,11 +11,10 @@ import Setting from '@/setting'
 import menuTree from '@/components/menuTree'
 import mixins from '@/mixins/article'
 export default {
+  props: ['isHome'],
   mixins: [mixins],
   data() {
     return {
-      site: this.$store.state.content.site,
-      isHome: this.$route.path === '/home',
       active: this.$route.query.id,
       menus: [],
       bgColor: '#fff',
@@ -33,6 +32,9 @@ export default {
     '$route'() {
       this.isHome = this.$route.path === '/home'
       this.handleColor()
+    },
+    isHome() {
+      this.handleColor()
     }
   },
   mounted() {
diff --git a/src/mixins/article/index.js b/src/mixins/article/index.js
index 29a1ecd..64e1263 100644
--- a/src/mixins/article/index.js
+++ b/src/mixins/article/index.js
@@ -4,7 +4,7 @@ export default {
   data() {
     return {
       site: this.$store.state.content.site,
-      id: this.$route.query.id
+      id: +this.$route.query.id
     }
   },
   mounted() {
@@ -43,5 +43,9 @@ export default {
         this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}`).catch(err => {})
       }
     },
+    // 跳转文章页面
+    toArtice(item) {
+      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`)
+    }
   }
 };
\ No newline at end of file
diff --git a/src/mixins/page/index.js b/src/mixins/page/index.js
index adc40a0..78709ba 100644
--- a/src/mixins/page/index.js
+++ b/src/mixins/page/index.js
@@ -56,7 +56,7 @@ export default {
     },
     // 跳转文章页面
     toArtice(item) {
-      this.$router.push(`/article?id=${item.id}&site=${this.$route.query.siteId || this.site}`)
+      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`)
     }
   }
 };
\ No newline at end of file
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index eca9cd0..a2da1f3 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -139,7 +139,7 @@
     </div>
 
     <div class="block">
-      <div class="inner" style="width: 1581px">
+      <div class="inner staff-inner">
         <h2 class="b-title">{{ modules[21].form.title }}</h2>
         <p class="intro">{{ modules[21].form.des }}</p>
         <div :class="['staff', {'cursor-pointer': modules[22].form.link.linkName !== '无'}]" @click="openLink(modules[22].form)">
@@ -226,7 +226,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   li {
-    width: 686px;
+    width: calc((100% - 28px) / 2);
     height: 277px;
     padding: 70px 67px 20px;
     margin-bottom: 28px;
@@ -265,12 +265,12 @@ export default {
     width: 1575px;
   }
   .pic {
-    width: 664px;
+    width: 42%;
     height: 488px;
     margin-bottom: -120px;
   }
   .texts {
-    width: 802px;
+    width: 51%;
     margin-top: 36px;
     color: #fff;
   }
@@ -292,11 +292,11 @@ export default {
     }
   }
   .pic {
-    width: 660px;
+    width: 47%;
     height: 465px;
   }
   .texts {
-    width: 680px;
+    width: 49%;
     padding-top: 90px;
   }
   h6 {
@@ -351,8 +351,11 @@ export default {
   display: flex;
   justify-content: space-between;
   background: #F8F8F8;
+  .staff-inner {
+    width: 1581px;
+  }
   .left {
-    width: 743px;
+    width: 50%;
     padding: 108px 43px 0 46px;
   }
   h6 {
@@ -367,7 +370,7 @@ export default {
     line-height: 34px;
   }
   .pic {
-    width: 838px;
+    width: 53%;
     height: 487px;
   }
 }
@@ -392,4 +395,14 @@ export default {
     font-size: 24px;
   }
 }
+@media (max-width: 1590px) {
+  .plan {
+    .inner {
+      width: 98%;
+    }
+  }
+  .staff .staff-inner {
+    width: 98%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/application/index.vue b/src/pages/application/index.vue
index b9b48d1..4bf55cd 100644
--- a/src/pages/application/index.vue
+++ b/src/pages/application/index.vue
@@ -27,7 +27,7 @@
     </div>
     
     <div class="block">
-      <div class="inner" style="width: 1558px">
+      <div class="inner app-inner">
         <h2 class="b-title">{{ modules[2].form.title }}</h2>
         <p class="intro">{{ modules[2].form.des }}</p>
         <ul class="app">
@@ -147,6 +147,9 @@ export default {
     margin: -122px 0 0 0;
   }
 }
+.app-inner {
+  width: 1558px;
+}
 .app {
   display: flex;
   flex-wrap: wrap;
@@ -194,7 +197,7 @@ export default {
   flex-wrap: wrap;
   li {
     position: relative;
-    width: 448px;
+    width: calc((100% - 56px) / 3);
     margin: 0 28px 39px 0;
     &:nth-child(3n) {
       margin-right: 0;
@@ -223,7 +226,7 @@ export default {
   flex-wrap: wrap;
   li {
     display: inline-flex;
-    width: 686px;
+    width: calc((100% - 56px) / 2);
     padding: 34px;
     margin-bottom: 28px;
     background-color: #fff;
@@ -244,7 +247,6 @@ export default {
     color: #0648A8;
   }
   .des {
-    // height: 80px;
     margin: 14px 0;
     font-size: 16px;
     color: #333;
@@ -255,4 +257,9 @@ export default {
     color: #999;
   }
 }
+@media (max-width: 1520px) {
+  .app-inner {
+    width: 1558px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/article/activity.vue b/src/pages/article/activity.vue
index 04cb7ee..7a12259 100644
--- a/src/pages/article/activity.vue
+++ b/src/pages/article/activity.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
-    <div class="content" style="width: 1400px;">
-      <Breadcrumb ref="breadcrumb" :data="'栏目/' + form.title" route="/column" :query.sync="query"/>
+    <div class="content">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
@@ -18,23 +18,15 @@
 
           <p class="l-title">热点内容</p>
           <ul class="list">
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
-            </li>
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
-            </li>
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
+            <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.createTime }}</span>
             </li>
           </ul>
 
           <p class="l-title">最新资讯</p>
           <ul class="list">
-            <li v-for="(item, i) in news" :key="i">
+            <li v-for="(item, i) in news" :key="i" @click="toArtice(item)">
               <p class="text">{{ item.title }}</p>
               <span class="date">{{ item.createTime }}</span>
             </li>
@@ -54,9 +46,9 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
+      id: this.$route.query.articleId,
       columnId: '',
-      query: {},
+      routes: {},
       form: {},
       columnBanner: '',
       columns: [],
@@ -65,6 +57,7 @@ export default {
         label: 'columnName'
       },
       news: [],
+      hots: []
     }
   },
   components: {
@@ -84,12 +77,20 @@ export default {
     // 获取文章详情
     getInfo() {
       this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        // 设置面包屑
+        this.routes = [
+          {
+            name: data.columnName,
+            query: {
+              id: data.columnId
+            }
+          },
+          {
+            name: data.title
+          }
+        ]
         this.form = data
         this.columnId = data.columnId
-        this.query = {
-          id: data.columnId
-        }
-        this.$refs.breadcrumb.update(data.columnName + '/' + data.title)
         data.bannerImg || this.getBanner(this.columns)
         if (this.columnBanner) this.form.bannerImg = this.columnBanner
       }).catch(err => {})
@@ -121,6 +122,10 @@ export default {
         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 = data
+      }).catch(err => {})
     },
     // 最新资讯
     getArticle() {
@@ -142,6 +147,9 @@ export default {
 
 <style lang="scss" scoped>
 @import "./editor.css";
+.content {
+  width: 1400px;
+}
 .banner {
   height: 280px;
   padding: 123px 0 0 243px;
@@ -153,7 +161,7 @@ export default {
   display: flex;
   justify-content: space-between;
   .left {
-    width: 920px;
+    width: 66%;
   }
   h2 {
     margin-bottom: 20px;
@@ -166,12 +174,20 @@ export default {
     font-weight: 600;
     color: #333;
   }
+  /deep/.des {
+    p {
+      margin: 1em 0;
+    }
+    img {
+      max-width: 100%;
+    }
+  }
   h6 {
     margin: 30px 0 10px;
     font-size: 18px;
   }
   .right {
-    width: 290px;
+    width: 20%;
   }
   .column {
     width: 100%;
@@ -206,4 +222,9 @@ export default {
     }
   }
 }
+@media (max-width: 1420px) {
+  .content {
+    width: 98%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 72a9531..1e5a211 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -3,8 +3,8 @@
     <div v-if="form.articleTemplate !== 23" class="banner" :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
       {{ form.columnName }}
     </div>
-    <div class="content" style="width: 1400px;">
-      <Breadcrumb ref="breadcrumb" :data="'栏目/' + form.title" route="/column" :query.sync="query"/>
+    <div class="content">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
@@ -55,10 +55,9 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      site: this.$store.state.content.site,
+      id: this.$route.query.articleId,
       loaded: false,
-      id: this.$route.query.id,
-      query: {},
+      routes: {},
       columnId: '',
       form: {},
       columnBanner: '',
@@ -88,16 +87,24 @@ export default {
     // 获取文章详情
     getInfo() {
       this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
-        this.$refs.breadcrumb.update(data.columnName + '/' + data.title)
+        // 设置面包屑
+        this.routes = [
+          {
+            name: data.columnName,
+            query: {
+              id: data.columnId
+            }
+          },
+          {
+            name: data.title
+          }
+        ]
         if (data.isDisable) {
           this.$router.back()
         } else {
           if (data.articleTemplate === 25) { // 会议活动
-            this.$router.replace(`/article/activity?id=${this.id}&siteId=${this.$route.query.siteId || this.site}`)
+            this.$router.replace(`/article/activity?articleId=${this.id}&id=${this.$route.query.columnId}`)
           } else {
-            this.query = {
-              id: data.columnId
-            }
             this.form = data
             this.columnId = data.columnId
             data.bannerImg || this.getBanner(this.columns)
@@ -153,16 +160,15 @@ export default {
     download(e) {
       Util.downloadFile(e.fileName, e.filePath)
     },
-    // 跳转文章页面
-    toArtice(item) {
-      this.$router.push(`/article?id=${item.id}&site=${this.$route.query.siteId || this.site}`)
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "./editor.css";
+.content {
+  width: 1400px;
+}
 .banner {
   height: 280px;
   padding: 123px 0 0 243px;
@@ -174,7 +180,7 @@ export default {
   display: flex;
   justify-content: space-between;
   .left {
-    width: 920px;
+    width: 66%;
   }
   h2 {
     font-size: 36px;
@@ -197,6 +203,9 @@ export default {
     p {
       margin: 1em 0;
     }
+    img {
+      max-width: 100%;
+    }
   }
   .annex {
     margin-top: 30px;
@@ -223,7 +232,7 @@ export default {
     }
   }
   .right {
-    width: 290px;
+    width: 20%;
   }
   .column {
     width: 100%;
@@ -258,4 +267,9 @@ export default {
     }
   }
 }
+@media (max-width: 1420px) {
+  .content {
+    width: 98%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index dbce2f2..e741933 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -203,7 +203,7 @@ export default {
     left: 57px;
   }
   .left {
-    width: 670px;
+    width: 51%;
   }
   h6 {
     font-size: 24px;
@@ -219,7 +219,7 @@ export default {
     position: absolute;
     top: -60px;
     right: 43px;
-    width: 600px;
+    width: 45%;
     height: 450px;
   }
 }
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 6686a4e..7a768aa 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -92,8 +92,6 @@
           </div>
         </div>
         <div class="right">
-          <el-tree class="column" ref="column" :data="infoColumns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="item => columnClick(item, 0)"></el-tree>
-
           <p class="l-title">热点内容</p>
           <ul class="list">
             <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
@@ -119,13 +117,13 @@
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import Breadcrumb from '@/components/breadcrumb'
+import mixins from '@/mixins/article'
 export default {
+  mixins: [mixins],
   data() {
     return {
       loaded: false,
-      id: +this.$route.query.id,
       fromColumn: this.$route.query.column,
-      site: this.$store.state.content.site,
       columnId: '',
       info: {},
       searchTimer: null,
@@ -200,11 +198,10 @@ export default {
     // 获取栏目详情
     getInfo() {
       this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
-
-        
+        this.columnTo(data)
+        if (data.typeId !== 3) this.loaded = true // 非长页，才展示页面
         if (!data.columnBanner) data.columnBanner = require('@/assets/images/column-banner.png')
         this.info = data
-        this.loaded = true
         this.showNav = this.showNavIds.includes(data.listStyleId)
         this.getClassification()
       }).catch(res => {})
@@ -241,7 +238,7 @@ export default {
     // 左边栏目
     getLeftColumn() {
       this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
-        const fromColumn = this.$route.query.column
+        const fromColumn = this.$route.query.column // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
         this.sameStyle = !fromColumn
         this.allColumnId = []
         fromColumn || data.length && this.handleColumn(data, data[0].listStyleId)
@@ -324,6 +321,7 @@ export default {
     // 查询文章列表
     getArticle(columnIds) {
       const labelName = []
+      // 获取标签名称
       this.labels.map(e => {
         if (this.lableId.includes(e.id)) labelName.push(e.labelName)
       })
@@ -337,6 +335,8 @@ export default {
       }).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
@@ -369,10 +369,6 @@ export default {
       }
       this.getArticle(id)
     },
-    // 跳转文章页面
-    toArtice(item) {
-      this.$router.push(`/article?id=${item.id}&site=${this.$route.query.siteId || this.site}`)
-    }
   }
 };
 </script>
@@ -399,11 +395,11 @@ export default {
   justify-content: center;
   margin: 0 auto;
   .left {
-    width: 1295px;
+    width: 66%;
     margin-right: 28px;
   }
   .article-wrap {
-    width: 1113px;
+    width: 78%;
   }
   .switch {
     display: inline-flex;
@@ -437,9 +433,10 @@ export default {
     .label {
       font-size: 16px;
       color: #333;
+      white-space: nowrap;
     }
     /deep/.el-input__inner {
-      width: 238px;
+      width: 100%;
       height: 48px;
       line-height: 48px;
       border: 0;
@@ -447,10 +444,11 @@ export default {
     }
     .search {
       display: inline-flex;
+      width: 34%;
       input {
-        width: 443px;
+        width: 100%;
         height: 48px;
-        padding: 0 10px;
+        padding: 0 15px;
         font-size: 14px;
         color: #333;
         background: #F7F7F7;
@@ -477,7 +475,7 @@ export default {
     display: flex;
   }
   /deep/.columns {
-    width: 210px;
+    width: 22%;
     margin-right: 12px;
     overflow: auto;
     &:after {
@@ -490,7 +488,6 @@ export default {
       background-color: #E1E6F2;
     }
     .el-tree-node__content {
-      // z-index: 1;
       position: relative;
       height: 48px;
       padding-left: 40px;
@@ -535,8 +532,7 @@ export default {
         height: 100%;
         background-color: #083A93;
       }
-      // border-right: 2px solid #083A93;
-      .el-tree-node__label {
+      .el-tree-node__label, .custom-tree-node {
         font-weight: 600;
         color: #1150AC;
       }
@@ -582,12 +578,15 @@ export default {
       @include mul-ellipsis(2);
     }
     .pic {
-      width: 417px;
+      width: 45%;
+      min-width: 380px;
       height: 244px;
     }
   }
   .right {
-    width: 290px;
+    width: 14%;
+    min-width: 240px;
+    overflow: hidden;
   }
   .column {
     width: 100%;
diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
index a001d12..6114978 100644
--- a/src/pages/edu/index.vue
+++ b/src/pages/edu/index.vue
@@ -94,14 +94,14 @@ export default {
     }
   }
   .pic {
-    width: 650px;
+    width: 47%;
     height: 730px;
   }
   .texts {
     position: absolute;
     top: 120px;
     left: 610px;
-    width: 850px;
+    width: 60%;
     height: 440px;
     padding: 60px 30px 30px 100px;
     background-color: #fff;
@@ -121,4 +121,14 @@ export default {
     line-height: 32px;
   }
 }
+@media (max-width: 1520px) {
+  .list {
+    .pic {
+      width: 45%;
+    }
+    .texts {
+      width: 50%;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 6eb01f5..8c99119 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -164,7 +164,7 @@ export default {
   display: flex;
   justify-content: space-between;
   li {
-    width: 660px;
+    width: 47%;
   }
   .pic {
     width: 100%;
@@ -195,11 +195,12 @@ export default {
   flex-wrap: wrap;
   li {
     display: inline-flex;
-    width: 686px;
+    width: calc((100% - 28px) / 2);
     padding: 34px;
     margin-bottom: 28px;
     background-color: #fff;
     cursor: pointer;
+    overflow: hidden;
     &:nth-child(odd) {
       margin-right: 28px;
     }
@@ -238,11 +239,11 @@ export default {
     }
   }
   .pic {
-    width: 660px;
+    width: 47%;
     height: 465px;
   }
   .texts {
-    width: 680px;
+    width: 48%;
     padding-top: 150px;
   }
   h6 {
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index 21e7c14..beea1d4 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -285,6 +285,9 @@ export default {
     }
   }
 }
+.lg {
+  width: 1505px;
+}
 /deep/.articles {
   .el-carousel__indicators--horizontal {
     bottom: 20px;
@@ -321,7 +324,7 @@ export default {
   flex-wrap: wrap;
   margin-top: 40px;
   li {
-    width: 438px;
+    width: calc((100% - 56px) / 3);
     margin-right: 28px;
     box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
     border-radius: 6px;
@@ -417,7 +420,6 @@ export default {
     li {
       display: inline-flex;
       align-items: center;
-      padding-right: 124px;
       margin-bottom: 38px;
       cursor: pointer;
       &:last-child {
@@ -524,4 +526,9 @@ export default {
     }
   }
 }
+@media (max-width: 1520px) {
+  .lg {
+    width: 98%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
index d72c495..9c6643f 100644
--- a/src/pages/newsPress/index.vue
+++ b/src/pages/newsPress/index.vue
@@ -11,22 +11,21 @@
       </template>
     </el-carousel>
 
-    <div class="block">
-      <div class="inner">
-        <ul class="list">
-          <template v-for="(item, i) in modules[1].list">
-            <li v-if="item.isEnable" :key="i">
-              <img class="pic" :src="item.pic" alt="">
-              <div class="texts">
-                <h6>{{ item.title }}</h6>
-                <p class="sub">{{ item.subTitle }}</p>
-                <div class="des">{{ item.des }}</div>
-                <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
-              </div>
-            </li>
-          </template>
-        </ul>
-      </div>
+    <div class="inner">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <ul class="list">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.isEnable" :key="i">
+            <img class="pic" :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
+            </div>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
 </template>
@@ -35,15 +34,19 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
 export default {
   mixins: [mixins],
   data() {
     return {
-
+      routes: []
     }
   },
+  components: {
+    Breadcrumb
+  },
   mounted() {
-    
+    this.getColumn()
   },
   methods: {
     // 获取文章详情
@@ -60,32 +63,65 @@ export default {
         }
       }).catch(err => {})
     },
+    // 获取父级所有栏目名称和id
+    getParent(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn() {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => {})
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/page/page.scss";
+.inner {
+  padding-top: 35px;
+}
 .list {
+  margin-top: 40px;
   li {
     position: relative;
     &:nth-child(even) {
       text-align: right;
       .texts {
         left: 0;
+        padding: 60px 120px 30px 30px;
         text-align: left;
       }
     }
   }
   .pic {
-    width: 650px;
+    width: 47%;
     height: 730px;
   }
   .texts {
     position: absolute;
     top: 120px;
-    left: 610px;
-    width: 850px;
+    right: -40px;
+    width: 61%;
     height: 440px;
     padding: 60px 30px 30px 100px;
     background: rgba(247, 247, 247, .72);
@@ -107,4 +143,19 @@ export default {
     line-height: 32px;
   }
 }
+@media (max-width: 1520px) {
+  .list {
+    li {
+      &:nth-child(even) {
+        .texts {
+          left: 25px;
+        }
+      }
+    }
+    .texts {
+      right: 25px;
+      width: 55%;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/newsProcurement/index.vue b/src/pages/newsProcurement/index.vue
index d72c495..9c6643f 100644
--- a/src/pages/newsProcurement/index.vue
+++ b/src/pages/newsProcurement/index.vue
@@ -11,22 +11,21 @@
       </template>
     </el-carousel>
 
-    <div class="block">
-      <div class="inner">
-        <ul class="list">
-          <template v-for="(item, i) in modules[1].list">
-            <li v-if="item.isEnable" :key="i">
-              <img class="pic" :src="item.pic" alt="">
-              <div class="texts">
-                <h6>{{ item.title }}</h6>
-                <p class="sub">{{ item.subTitle }}</p>
-                <div class="des">{{ item.des }}</div>
-                <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
-              </div>
-            </li>
-          </template>
-        </ul>
-      </div>
+    <div class="inner">
+      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <ul class="list">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.isEnable" :key="i">
+            <img class="pic" :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
+            </div>
+          </li>
+        </template>
+      </ul>
     </div>
   </div>
 </template>
@@ -35,15 +34,19 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
 export default {
   mixins: [mixins],
   data() {
     return {
-
+      routes: []
     }
   },
+  components: {
+    Breadcrumb
+  },
   mounted() {
-    
+    this.getColumn()
   },
   methods: {
     // 获取文章详情
@@ -60,32 +63,65 @@ export default {
         }
       }).catch(err => {})
     },
+    // 获取父级所有栏目名称和id
+    getParent(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn() {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => {})
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/page/page.scss";
+.inner {
+  padding-top: 35px;
+}
 .list {
+  margin-top: 40px;
   li {
     position: relative;
     &:nth-child(even) {
       text-align: right;
       .texts {
         left: 0;
+        padding: 60px 120px 30px 30px;
         text-align: left;
       }
     }
   }
   .pic {
-    width: 650px;
+    width: 47%;
     height: 730px;
   }
   .texts {
     position: absolute;
     top: 120px;
-    left: 610px;
-    width: 850px;
+    right: -40px;
+    width: 61%;
     height: 440px;
     padding: 60px 30px 30px 100px;
     background: rgba(247, 247, 247, .72);
@@ -107,4 +143,19 @@ export default {
     line-height: 32px;
   }
 }
+@media (max-width: 1520px) {
+  .list {
+    li {
+      &:nth-child(even) {
+        .texts {
+          left: 25px;
+        }
+      }
+    }
+    .texts {
+      right: 25px;
+      width: 55%;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/research/index.vue b/src/pages/research/index.vue
index cf825c5..4d12358 100644
--- a/src/pages/research/index.vue
+++ b/src/pages/research/index.vue
@@ -40,7 +40,7 @@
     </div>
     
     <div class="block">
-      <div class="inner" style="width: 1558px">
+      <div class="inner news-inner">
         <h2 class="b-title">{{ modules[5].form.title }}</h2>
         <p class="intro">{{ modules[5].form.des }}</p>
         <ul class="news">
@@ -134,6 +134,7 @@ export default {
     height: 210px;
     padding: 20px 40px;
     background: #08577B;
+    overflow: hidden;
   }
   h6 {
     font-size: 30px;
@@ -149,7 +150,7 @@ export default {
   flex-wrap: wrap;
   li {
     position: relative;
-    width: 448px;
+    width: calc((100% - 56px) / 3);
     margin: 0 28px 39px 0;
     &:nth-child(3n) {
       margin-right: 0;
@@ -169,13 +170,16 @@ export default {
     background-color: #F5F5F5;
   }
 }
+.news-inner {
+  width: 1558px;
+}
 .news {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   li {
     position: relative;
-    width: 448px;
+    width: calc((100% - 56px) / 3);
     padding: 11px;
     margin-right: 28px;
     color: #333;
@@ -191,7 +195,7 @@ export default {
     }
   }
   img {
-    width: 427px;
+    width: 100%;
     height: 481px;
   }
   .texts {
@@ -207,4 +211,9 @@ export default {
     line-height: 26px;
   }
 }
+@media (max-width: 1570px) {
+  .news-inner {
+    width: 98%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 8c44b3e..b713adc 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -95,13 +95,11 @@
     min-width: 0;
   }
   span {
-    font-size: 18px;
+    font-size: 13px;
     color: #333;
   }
-  .active > .el-submenu__title {
-    span {
-      color: #1583FF;
-    }
+  .active > .el-submenu__title span, .active > span {
+    color: #1583FF;
   }
 }
 .home-menu-popup {
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index 6391eb1..c80b4f6 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -34,9 +34,6 @@
 .inner {
   width: 1400px;
   margin: 0 auto;
-  &.lg {
-    width: 1505px;
-  }
 }
 .banner-item {
   position: relative;
@@ -66,4 +63,9 @@
 }
 .arrow {
   cursor: pointer;
+}
+@media (max-width: 1410px) {
+  .inner {
+    width: 98%;
+  }
 }
\ No newline at end of file