From e47272f8ae5be69b6374910159ab683cce1ad550 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Sun, 23 Apr 2023 10:55:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=95=BF=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/governance/index.vue     |  36 ++
 src/pages/industrial/index.vue     | 197 ++++++++++
 src/pages/mission/index.vue        |  43 +--
 src/pages/overview/index.vue       |  35 ++
 src/pages/researchTeam/index.vue   | 578 +++++++++++++++++++++++++++++
 src/pages/scientific/index.vue     | 342 +++++++++++++++++
 src/pages/talentCenter/index.vue   |   3 +-
 src/router/modules/industrial.js   |  14 +
 src/router/modules/researchTeam.js |  14 +
 src/router/modules/scientific.js   |  14 +
 10 files changed, 1244 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/industrial/index.vue
 create mode 100644 src/pages/researchTeam/index.vue
 create mode 100644 src/pages/scientific/index.vue
 create mode 100644 src/router/modules/industrial.js
 create mode 100644 src/router/modules/researchTeam.js
 create mode 100644 src/router/modules/scientific.js

diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
index 5439489..e8e0938 100644
--- a/src/pages/governance/index.vue
+++ b/src/pages/governance/index.vue
@@ -188,4 +188,40 @@ export default {
     height: 300px;
   }
 }
+@media (max-width: 1200px) {
+  .history {
+    .texts {
+      flex-direction: column;
+    }
+    .left {
+      width: 90%;
+    }
+    .bg {
+      width: 100%;
+      margin-top: 2rem;
+    }
+  }
+  .cards {
+    ul {
+      width: 100%;
+    }
+    li {
+      width: 30%;
+    }
+  }
+}
+@media (max-width: 640px) {
+  .committee {
+    .inner {
+      flex-direction: column;
+    }
+    .left {
+      width: 100%;
+    }
+    .pic {
+      width: 100%;
+      margin-top: 2rem;
+    }
+  }
+}
 </style>
diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
new file mode 100644
index 0000000..d2ca8ab
--- /dev/null
+++ b/src/pages/industrial/index.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+
+    <div class="block history gray">
+      <div class="inner" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+          <div class="left">
+            <h2>{{ modules[1].form.subTitle }}</h2>
+            <div class="des">{{ modules[1].form.des }}</div>
+          </div>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+    
+    <div class="block land">
+      <div class="inner">
+        <img class="pic" :src="modules[2].form.pic" alt="">
+          <div class="right">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="text" v-html="modules[2].form.des"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <ul class="plan">
+          <li>
+            <div class="left">
+              <h6>{{ modules[4].form.title }}</h6>
+              <div class="text" v-html="modules[4].form.des"></div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+            </div>
+            <img class="pic" :src="modules[4].form.pic" alt="">
+          </li>
+          <li>
+            <div class="left">
+              <h6>{{ modules[5].form.title }}</h6>
+              <div class="text" v-html="modules[5].form.des"></div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
+            </div>
+            <img class="pic" :src="modules[5].form.pic" alt="">
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: [],
+    };
+  },
+  mounted() {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.history {
+  h2 {
+    font-size: 1.8rem;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 57px 30px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .left {
+    width: 695px;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.land {
+  .inner {
+    display: flex;
+  }
+  .pic {
+    width: 50%;
+    height: 450px;
+  }
+  .right {
+    width: 50%;
+  }
+  h6 {
+    margin-left: 50px;
+    font-size: 1.3rem;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #333;
+    @include ellipsis();
+  }
+  .text {
+    height: 405px;
+    padding: 50px;
+    margin-top: 1rem;
+    background: rgba(242,246,248,0.45);
+    border-radius: 0px 100px 0px 0px;
+  }
+}
+.plan {
+  li {
+    display: flex;
+    height: 500px;
+    margin-bottom: 60px;
+    color: #333;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+      .pic {
+        margin: -20px 0 0 -20px;
+        border-radius: 0 100px 0 0;
+      }
+    }
+    .left {
+      width: 50%;
+      padding: 50px;
+    }
+    h6 {
+      font-size: 1.4rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .text {
+      margin: 1rem 0;
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+    .pic {
+      width: 48%;
+      height: 500px;
+      margin: -20px -20px 0 0;
+      border-radius: 100px 0 0 0;
+    }
+  }
+}
+</style>
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
index fb320ad..a31e8d6 100644
--- a/src/pages/mission/index.vue
+++ b/src/pages/mission/index.vue
@@ -18,7 +18,7 @@
           <img src="@/assets/images/science/1.png" alt="" />
           <div class="texts">
             <h6>{{ modules[1].form.title }}</h6>
-            <div class="des">{{ modules[1].form.des }}</div>
+            <div class="des" v-html="modules[1].form.des"></div>
           </div>
         </div>
         <div
@@ -30,7 +30,7 @@
           <img src="@/assets/images/science/2.png" alt="" />
           <div class="texts rightText">
             <h6>{{ modules[2].form.title }}</h6>
-            <div class="des">{{ modules[2].form.des }}</div>
+            <div class="des" v-html="modules[2].form.des"></div>
           </div>
         </div>
       </div>
@@ -38,36 +38,17 @@
 
     <div class="block mind gray">
       <div class="inner">
-        <h6 class="m-title">指导思想</h6>
+        <h6 class="m-title">{{ modules[3].form.title }}</h6>
         <ul class="list">
-          <li>
-            <img src="@/assets/images/channel1.png" alt="" class="pic">
-            <div class="texts">
-              <h6>凝心聚力</h6>
-              <div class="des">IASF的工作人员来自五湖四海、大江南北，但大家目的一致，齐心协力建设世界一流的光源设施，为建设粤港澳大湾区国际科技创新中心做出有力支撑。</div>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="" class="pic">
-            <div class="texts">
-              <h6>凝心聚力</h6>
-              <div class="des">IASF的工作人员来自五湖四海、大江南北，但大家目的一致，齐心协力建设世界一流的光源设施，为建设粤港澳大湾区国际科技创新中心做出有力支撑。</div>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="" class="pic">
-            <div class="texts">
-              <h6>凝心聚力</h6>
-              <div class="des">IASF的工作人员来自五湖四海、大江南北，但大家目的一致，齐心协力建设世界一流的光源设施，为建设粤港澳大湾区国际科技创新中心做出有力支撑。</div>
-            </div>
-          </li>
-          <li>
-            <img src="@/assets/images/channel1.png" alt="" class="pic">
-            <div class="texts">
-              <h6>凝心聚力</h6>
-              <div class="des">IASF的工作人员来自五湖四海、大江南北，但大家目的一致，齐心协力建设世界一流的光源设施，为建设粤港澳大湾区国际科技创新中心做出有力支撑。</div>
-            </div>
-          </li>
+          <template v-for="(item, i) in modules[4].list">
+            <li v-if="item.isEnable" :key="i" :class="[{'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
+              <img :src="item.pic" alt="" class="pic">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <div class="des" v-html="item.des"></div>
+              </div>
+            </li>
+          </template>
         </ul>
       </div>
     </div>
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index 5ead310..252a98c 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -309,4 +309,39 @@ export default {
     height: 700px;
   }
 }
+@media (max-width: 920px) {
+  .fac {
+    .card, .l-card {
+      flex-direction: column;
+      li {
+        width: 100%;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+  .scan {
+    .scan-inner {
+      flex-direction: column;
+      padding: 0 10%;
+    }
+    .left {
+      width: 100%;
+    }
+    .pic {
+      width: 100%;
+      margin-top: 2rem;
+    }
+  }
+}
+@media (max-width: 640px) {
+  .about {
+    .inner {
+      flex-direction: column;
+    }
+    .pic {
+      width: 100%;
+      margin-bottom: 2rem;
+    }
+  }
+}
 </style>
diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue
new file mode 100644
index 0000000..bb939cd
--- /dev/null
+++ b/src/pages/researchTeam/index.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner single-banner-overview">
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+      </div>
+    </div>
+    <div class="content">
+      <div class="article">
+        <div class="left">
+          <div class="search">
+            <input type="text" placeholder="请输入搜索内容" v-model="title" clearable>
+          </div>
+
+          <ul class="teams">
+            <li v-for="(item, i) in modules[1].list" :key="i">
+              <div class="line">
+                <img src="http://10.10.11.7/images/researchTeam/3.png" alt="" class="icon">
+                <span class="bold">{{ item.name }}</span>
+                <span class="val">/ {{ item.job }}</span>
+              </div>
+              <div class="line">
+                <img src="http://10.10.11.7/images/researchTeam/4.png" alt="" class="icon">
+                <span class="text">专业 {{ item.major }}</span>
+              </div>
+              <div class="line">
+                <img src="http://10.10.11.7/images/researchTeam/5.png" alt="" class="icon">
+                <span class="text">荣誉 {{ item.honor }}</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="right">
+          <el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
+
+          <p class="l-title">{{$t('column.hot')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+
+          <p class="l-title">{{$t('column.latestNews')}}</p>
+          <ul class="list">
+            <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins, articleMixins],
+  data() {
+    return {
+      allList: [],
+      title: '',
+      searchTimer: null,
+      columns: [],
+      defaultProps: {
+        value: 'id',
+        label: 'columnName'
+      },
+      news: [],
+      hots: []
+    }
+  },
+  watch: {
+    title: function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.filter();
+      }, 500);
+    }
+  },
+  mounted() {
+    this.getColumn()
+    this.getArticle()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          this.allList = json[1].list
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
+      }).catch(err => {})
+    },
+    // 筛选列表
+    filter() {
+      const { title } = this
+      this.modules[1].list = this.allList.filter(e => {
+        return e.name.includes(title)
+      })
+    },
+    // 资讯
+    getColumn() {
+      this.$post(this.api.listWithTreeMenuVisible, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnName: '',
+        templateId: '',
+        typeId	: '',
+        isSort: 1
+      }).then(({ data }) => {
+        this.columns = data
+        this.getInfo()
+      }).catch(err => {})
+      
+      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
+        this.hots = Util.removeTag(data)
+      }).catch(err => {})
+    },
+    // 最新资讯
+    getArticle() {
+      this.$post(this.api.newlyPublishedArticles, {
+        pageNum: 1,
+        pageSize: 5,
+        siteId: this.$route.query.siteId || this.$store.state.content.site
+      }).then(({ data }) => {
+        this.news = Util.removeTag(data.records)
+      }).catch(res => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.content {
+  width: 1400px;
+}
+.article {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 66%;
+    .search {
+      display: inline-flex;
+      width: 34%;
+      input {
+        width: 100%;
+        height: 38px;
+        padding: 0 15px;
+        font-size: 14px;
+        color: #333;
+        background: #F7F7F7;
+        border: 0;
+        border-top-left-radius: 6px;
+        border-bottom-left-radius: 6px;
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+  .teams {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 30px;
+    li {
+      width: calc((100% - 10px) / 2);
+      padding: 20px 30px;
+      margin: 0 10px 10px 0;
+      background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0/cover no-repeat;
+      &:nth-child(even) {
+        margin-right: 0;
+      }
+    }
+    .line {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+    .icon {
+      margin-right: 8px;
+    }
+    .bold {
+      margin-right: 5px;
+      font-size: 1.1rem;
+      color: #333;
+    }
+    .val {
+      font-size: 1rem;
+      color: #999;
+    }
+    .text {
+      font-size: 1rem;
+      color: #666;
+    }
+  }
+  .notice {
+    display: flex;
+    li {
+      position: relative;
+      width: calc((100% - 20px) / 2);
+      height: 300px;
+      padding: 20px;
+      background-color: #fff;
+    }
+    .pic {
+      width: 100%;
+      height: 100%;
+    }
+    .text {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      width: calc(100% - 40px);
+      font-size: 1.6rem;
+      line-height: 66px;
+      text-align: center;
+      color: #fff;
+      background: rgba(32,57,81,0.68);
+    }
+  }
+  .right {
+    width: 20%;
+  }
+  .column {
+    width: 100%;
+    margin-bottom: 25px;
+  }
+  /deep/.el-tree-node__content {
+    height: 44px;
+    background-color: #E5EDF8;
+    border-bottom: 2px solid #fff;
+  }
+  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+    color: #fff;
+    background-color: #0f5698;
+  }
+  .list {
+    margin-bottom: 20px;
+    li {
+      padding: 16px 0;
+      border-bottom: 1px solid #D8D8D8;
+    }
+    .text {
+      margin-bottom: 5px;
+      font-size: 14px;
+      cursor: pointer;
+      &:hover {
+        color: $main-color;
+      }
+    }
+    .date {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .content {
+    width: 98%;
+  }
+  .article {
+    flex-direction: column;
+    .left, .right {
+      width: 100%;
+    }
+    .left {
+      margin-bottom: 30px;
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 750px) {
+  .article {
+    .recruit {
+      li {
+        flex-direction: column;
+      }
+      .pic {
+        width: 100%;
+        margin-bottom: 10px;
+      }
+    }
+    .notice {
+      flex-direction: column;
+      li {
+        width: 100%;
+      }
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .content {
+    .article {
+      flex-direction: column;
+      .left {
+        width: 100%;
+        .recruit {
+          li {
+            flex-direction: column;
+            .pic {
+              width: 100%;
+
+            }
+            .texts {
+              margin-top: .8rem;
+            }
+          }
+        }
+        .notice {
+          flex-direction: column;
+          li {
+            width: 100%;
+          }
+        }
+      }
+      .right{
+        width: 100%;
+        .el-tree {
+          display: none;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 320px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 13rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 7rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 13rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 13rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 15rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 7rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 15rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 15rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 18rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 10rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 18rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 18rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 20rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 12rem;
+      }
+    }
+  }
+    .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 22rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 22rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 22rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 14rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 26rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 26rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 26rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 16rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 30rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 30rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap  {
+    .single-banner {
+      .banner-img {
+        height: 30rem;
+      }
+      .texts {
+        left: 3rem;
+        top: 18rem;
+      }
+    }
+  }
+  .content {
+    .article {
+      .left {
+        .recruit {
+          li {
+            .pic {
+              height: 35rem;
+            }
+          }
+        }
+        .notice {
+          li {
+            height: auto;
+            .pic {
+              height: 35rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/scientific/index.vue b/src/pages/scientific/index.vue
new file mode 100644
index 0000000..acf4e95
--- /dev/null
+++ b/src/pages/scientific/index.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="wrap">
+    <div class="single-banner">
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <div class="texts">
+        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="banner-des des">{{ modules[0].form.des }}</p>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <div class="inner">
+        <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+        <ul class="items">
+          <li>
+            <img class="pic" :src="modules[1].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[1].form.title }}</h6>
+              <div class="text" v-html="modules[1].form.des"></div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+            </div>
+          </li>
+          <li>
+            <img class="pic" :src="modules[2].form.pic" alt="">
+            <div class="texts">
+              <h6>{{ modules[2].form.title }}</h6>
+              <div class="text" v-html="modules[2].form.des"></div>
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block program">
+      <div class="inner">
+        <div class="title wow fadeInUp">
+          <h5>
+            {{ modules[3].form.title }}
+            <span class="sub">{{ modules[3].form.subTitle }}</span>
+          </h5>
+          <span class="more" @click="toAll(modules[4].form)">MORE</span>
+        </div>
+        <template v-if="articles.length">
+          <div class="slide" @click="toArtice(articles[0], modules[4].form)">
+            <div class="texts">
+              <h6>{{ articles[0].title }}</h6>
+              <div class="des">{{ articles[0].mainBody }}</div>
+              <div class="meta">发表日期：{{ articles[0].releaseTime }} &emsp;浏览量：{{ articles[0].totalBrowsing }}</div>
+            </div>
+            <div class="img-wrap">
+              <img class="pic" :src="articles[0].titleImg" alt="">
+            </div>
+          </div>
+          <ul class="list">
+            <template v-for="(item, i) in articles">
+              <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[4].form)">
+                <div class="des">{{ item.title }}</div>
+                <p class="date">{{ item.releaseTime }}</p>
+              </li>
+            </template>
+          </ul>
+        </template>
+      </div>
+    </div>
+    
+    <div class="about">
+      <div class="inner">
+        <div class="texts">
+          <div class="title wow fadeInUp" data-wow-delay="0.7s">{{ modules[5].form.title }}</div>
+          <div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[5].form.des"></div>
+        </div>
+        <img src="@/assets/images/arrow-white.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import WOW from "wow.js";
+import Breadcrumb from '@/components/breadcrumb'
+import Util from '@/libs/util'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: [],
+      articles: []
+    };
+  },
+  components: {
+    Breadcrumb
+  },
+  mounted() {
+    new WOW().init();
+    this.getColumn()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+
+            // 获取文章列表
+            if (json[4].form.column.length) {
+              const { column, articleNum } = json[4].form
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles = Util.removeTag(data.slice(0, articleNum || 7))
+              }).catch(err => {})
+            }
+          }
+        })
+        .catch((err) => {});
+    },
+    // 获取父级所有栏目名称和id
+    getParent(data, id) {
+      for (const e of data) {
+        if (e.id == id) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          break
+        } else if (e.children.length) {
+          this.routes.push({
+            name: e.columnName,
+            query: {
+              id: e.id
+            }
+          })
+          this.getParent(e.children, id)
+        }
+      }
+    },
+    // 获取上级面包屑
+    getColumn() {
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        this.getParent(data, this.id)
+      }).catch(err => {})
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.items {
+  li {
+    position: relative;
+    height: 600px;
+    margin-bottom: 60px;
+    &:nth-child(even) {
+      .texts {
+        left: auto;
+        right: 100px;
+      }
+    }
+    .pic {
+      width: 100%;
+      height: 100%;
+    }
+    .texts {
+      position: absolute;
+      top: 100px;
+      left: 80px;
+      width: 500px;
+      min-height: 350px;
+      padding: 30px;
+      color: #333;
+      background-color: rgba(255, 255, 255, .85);
+      border-radius: 0px 0px 100px 0px;
+      border-top: 4px solid #0280F1;
+    }
+    h6 {
+      font-size: 1.2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .text {
+      margin: 1rem 0;
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+    .icon {
+      width: 40px;
+    }
+  }
+}
+.program {
+  background: #fff;
+  .title {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 25px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #ddd;
+    align-items: center;
+    h5 {
+      padding-left: 16px;
+      font-size: 1.6rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+      line-height: 1;
+      border-left: 6px solid #2B96EF;
+    }
+    .sub {
+      font-size: 1.1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #AFB7BF;
+    }
+    .more {
+      font-size: .8rem;
+      color: #666;
+      cursor: pointer;
+    }
+  }
+  .slide {
+    display: flex;
+    margin-bottom: 14px;
+    cursor: pointer;
+  }
+  .texts {
+    width: 51%;
+    padding: 56px;
+    background: #FBFBFB;
+    h6 {
+      font-size: 1.3rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+    }
+    .des {
+      margin: 35px 0 25px;
+      font-size: 1rem;
+      color: #666;
+      line-height: 32px;
+    }
+    .meta {
+      font-size: .9rem;
+      color: #666;
+    }
+  }
+  .img-wrap {
+    width: 49%;
+    height: 430px;
+    overflow: hidden;
+  }
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: .5s;
+  }
+  &:hover {
+    .pic {
+      transform: scale(1.3);
+    }
+  }
+  .list {
+    display: flex;
+    li {
+      width: calc((100% - 28px) / 3);
+      height: 204px;
+      padding: 36px 22px;
+      margin-right: 14px;
+      background: url(../../assets/images/sfel/7.png)  no-repeat center;
+      background-size: 100% 100%;
+      transition: .5s;
+      cursor: pointer;
+      &:nth-child(2) {
+        background-image: url(../../assets/images/sfel/8.png);
+      }
+      &:nth-child(3) {
+        margin-right: 0;
+        background-image: url(../../assets/images/sfel/9.png);
+      }
+      &:hover {
+        transform: translateY(20px);
+      }
+    }
+    .des {
+      height: 90px;
+      margin-bottom: 30px;
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 30px;
+    }
+    .date {
+      font-size: .9rem;
+      font-family: LaoSangamMN;
+      color: #FFFFFF;
+    }
+  }
+}
+.about {
+  padding: 10rem 0 3rem;
+  text-align: center;
+  background: url(../../assets/images/about-bg.png)  no-repeat center center;
+  background-size: 100% 100%;
+  .texts {
+    padding: 2.375rem 3.75rem;
+    color: #fff;
+    background: rgba(111, 69, 36, .56);
+    border-radius: 17px;
+    transition: .3s;
+    &:hover {
+      background: rgba(239, 126, 10, .56);
+      transform: translateY(10px);
+    }
+  }
+  .title {
+    margin-bottom: 1rem;
+    font-size: 2.2rem;
+  }
+  .des {
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+}
+</style>
diff --git a/src/pages/talentCenter/index.vue b/src/pages/talentCenter/index.vue
index b8a7f58..753c387 100644
--- a/src/pages/talentCenter/index.vue
+++ b/src/pages/talentCenter/index.vue
@@ -82,11 +82,12 @@
 
 <script>
 import mixins from '@/mixins/page'
+import articleMixins from '@/mixins/article';
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
-  mixins: [mixins],
+  mixins: [mixins, articleMixins],
   data() {
     return {
       columnId: '',
diff --git a/src/router/modules/industrial.js b/src/router/modules/industrial.js
new file mode 100644
index 0000000..8f507b1
--- /dev/null
+++ b/src/router/modules/industrial.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'industrial'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/researchTeam.js b/src/router/modules/researchTeam.js
new file mode 100644
index 0000000..762cc43
--- /dev/null
+++ b/src/router/modules/researchTeam.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'researchTeam'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/scientific.js b/src/router/modules/scientific.js
new file mode 100644
index 0000000..bf20db0
--- /dev/null
+++ b/src/router/modules/scientific.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'scientific'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};