From 80851b6974cc6e9ca32284cb2b9b4735254b0936 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 20 Apr 2023 11:23:25 +0800
Subject: [PATCH 1/5] =?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/const/column.js              |  26 ---
 src/pages/devHistory/index.vue   |  84 +++++++++
 src/pages/governance/index.vue   |   1 -
 src/pages/mission/index.vue      |   1 -
 src/pages/overview/index.vue     | 312 +++++++++++++++++++++++++++++++
 src/router/modules/devHistory.js |  14 ++
 src/router/modules/overview.js   |  14 ++
 7 files changed, 424 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/devHistory/index.vue
 create mode 100644 src/pages/overview/index.vue
 create mode 100644 src/router/modules/devHistory.js
 create mode 100644 src/router/modules/overview.js

diff --git a/src/const/column.js b/src/const/column.js
index f38a5b6..1789b06 100644
--- a/src/const/column.js
+++ b/src/const/column.js
@@ -22,32 +22,6 @@
       name: '子级优先栏目'
     }
   ],
-  long: [
-    {
-      name: 'SFEL',
-      path: 'sfel'
-    },
-    {
-      name: 'SFEL-科普之窗',
-      path: 'science'
-    },
-    {
-      name: 'SFEL-装置介绍-实验站',
-      path: 'exp'
-    },
-    {
-      name: 'SFEL-人才队伍',
-      path: 'talent'
-    },
-    {
-      name: 'SFEL-用户共享',
-      path: 'userSharing'
-    },
-    {
-      name: 'SFEL-概况',
-      path: 'survey'
-    },
-  ],
   // 出版物类型
   publicationTypes: [
     {
diff --git a/src/pages/devHistory/index.vue b/src/pages/devHistory/index.vue
new file mode 100644
index 0000000..35b8534
--- /dev/null
+++ b/src/pages/devHistory/index.vue
@@ -0,0 +1,84 @@
+<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">
+      <div class="inner">
+        <h6>光束线</h6>
+        <p class="en">The beam line</p>
+        <div class="text">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      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 {
+  h6 {
+    position: relative;
+    font-size: 2.4rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin-top: -25px;
+    font-size: 2.4rem;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .text {
+    margin-top: 30px;
+  }
+}
+</style>
diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
index 5532ebf..613ab10 100644
--- a/src/pages/governance/index.vue
+++ b/src/pages/governance/index.vue
@@ -4,7 +4,6 @@
       <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>
 
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
index 16bab68..fb320ad 100644
--- a/src/pages/mission/index.vue
+++ b/src/pages/mission/index.vue
@@ -4,7 +4,6 @@
       <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>
 
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
new file mode 100644
index 0000000..ba8a690
--- /dev/null
+++ b/src/pages/overview/index.vue
@@ -0,0 +1,312 @@
+<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 about gray">
+      <div class="inner">
+        <img src="@/assets/images/science/1.png" alt="" class="pic" />
+        <div class="texts">
+          <h6>关于我们</h6>
+          <div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
+          <h6>关于我们</h6>
+          <div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="block fac">
+      <div class="inner">
+        <h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
+        <ul class="card">
+          <li>
+            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <div class="texts">
+              <h6>深圳自由电子激光</h6>
+              <div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
+              <img src="@/assets/images/arrow.png" alt="" class="arrow">
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <div class="texts">
+              <h6>深圳自由电子激光</h6>
+              <div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
+              <img src="@/assets/images/arrow.png" alt="" class="arrow">
+            </div>
+          </li>
+        </ul>
+        <ul class="l-card">
+          <li>
+            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <div class="texts">
+              <h6>机制创新</h6>
+              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <div class="texts">
+              <h6>机制创新</h6>
+              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+            </div>
+          </li>
+          <li>
+            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <div class="texts">
+              <h6>机制创新</h6>
+              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block scan gray">
+      <h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
+      <p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
+      <div class="scan-inner">
+        <div class="left">
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/7.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/8.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/9.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/10.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/11.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <div class="line">
+            <img src="http://10.10.11.7/images/overview/12.png" alt="" class="icon" />
+            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          </div>
+          <ul class="total">
+            <li>
+              <p class="num">300+</p>
+              <p class="text">在职员工</p>
+            </li>
+            <li>
+              <p class="num">85%</p>
+              <p class="text">工程技术人员</p>
+            </li>
+            <li>
+              <p class="num">200+</p>
+              <p class="text">培养专项博士</p>
+            </li>
+          </ul>
+        </div>
+        <img src="@/assets/images/science/1.png" alt="" class="pic" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "@/mixins/page";
+import Setting from "@/setting";
+import Util from "@/libs/util";
+import WOW from "wow.js";
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    };
+  },
+  mounted() {
+    new WOW().init();
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.about {
+  padding-top: 0;
+  .inner {
+    position: relative;
+    display: flex;
+    padding: 20px;
+    margin-top: -50px;
+    background-color: #fff;
+  }
+  .pic {
+    width: 40%;
+    height: 330px;
+    margin-right: 30px;
+  }
+  h6 {
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #333;
+    &:before {
+      content: '';
+      display: block;
+      width: 28px;
+      height: 4px;
+      margin-bottom: 12px;
+      background: #0280F1;
+    }
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 1rem;
+    color: #666;
+    line-height: 2;
+  }
+}
+.fac {
+  .card {
+    display: flex;
+    li {
+      width: calc((100% - 20px) / 2);
+      color: #333;
+      background-color: #FCFBFB;
+      &:first-child {
+        margin-right: 20px;
+      }
+    }
+    .pic {
+      width: 100%;
+      height: 350px;
+    }
+    .texts {
+      padding: 20px;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 1.2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .text {
+      font-size: 1rem;
+    }
+  }
+  .l-card {
+    display: flex;
+    margin-top: 20px;
+    li {
+      position: relative;
+      width: calc((100% - 40px) / 3);
+      height: 380px;
+      margin-right: 20px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .pic {
+      width: 100%;
+      height: 100%;
+    }
+    .texts {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 140px 30px 0;
+      color: #fff;
+      background-color: rgba(0, 0, 0, .5);
+    }
+    h6 {
+      margin-bottom: 15px;
+      font-size: 2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .text {
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 2;
+      @include mul-ellipsis(4);
+    }
+  }
+}
+.scan {
+  .scan-inner {
+    display: flex;
+    padding-left: 20%;
+  }
+  .left {
+    width: 30%;
+    margin-right: 80px;
+  }
+  .line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    .icon {
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
+    }
+    .text {
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      color: #333;
+      line-height: 2;
+      @include mul-ellipsis(2);
+    }
+  }
+  .total {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 50px;
+    .num {
+      margin-bottom: 10px;
+      font-size: 2rem;
+      font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
+      font-weight: 800;
+      color: #1583FF;
+    }
+    .text {
+      font-size: 1rem;
+      color: #333;
+    }
+  }
+  .pic {
+    width: 70%;
+    height: 700px;
+  }
+}
+</style>
diff --git a/src/router/modules/devHistory.js b/src/router/modules/devHistory.js
new file mode 100644
index 0000000..28d2780
--- /dev/null
+++ b/src/router/modules/devHistory.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'devHistory'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/overview.js b/src/router/modules/overview.js
new file mode 100644
index 0000000..e380013
--- /dev/null
+++ b/src/router/modules/overview.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'overview'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};

From bb0eb5b16441379ab3dfe9ccb3c2aef85faed636 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 20 Apr 2023 16:02:50 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E9=95=BF=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/devHistory/index.vue |  15 +-
 src/pages/governance/index.vue |  23 +--
 src/pages/org/index.vue        | 255 +++++++++++++++++++++++++++++++++
 src/pages/overview/index.vue   | 110 +++++++-------
 src/router/modules/org.js      |  14 ++
 5 files changed, 338 insertions(+), 79 deletions(-)
 create mode 100644 src/pages/org/index.vue
 create mode 100644 src/router/modules/org.js

diff --git a/src/pages/devHistory/index.vue b/src/pages/devHistory/index.vue
index 35b8534..259d9d6 100644
--- a/src/pages/devHistory/index.vue
+++ b/src/pages/devHistory/index.vue
@@ -9,9 +9,12 @@
 
     <div class="block history">
       <div class="inner">
-        <h6>光束线</h6>
-        <p class="en">The beam line</p>
-        <div class="text">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
+        <h6>{{ modules[1].form.title }}</h6>
+        <p class="en">{{ modules[1].form.subTitle }}</p>
+        <div class="text" v-html="modules[1].form.des"></div>
+        <h6 style="font-size: 1.6rem">{{ modules[2].form.title }}</h6>
+        <p class="en" style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p>
+        <div class="text" v-html="modules[2].form.des"></div>
       </div>
     </div>
   </div>
@@ -19,14 +22,12 @@
 
 <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() {
@@ -78,7 +79,7 @@ export default {
     color: #E3E3E3;
   }
   .text {
-    margin-top: 30px;
+    margin: 30px 0;
   }
 }
 </style>
diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
index 613ab10..5439489 100644
--- a/src/pages/governance/index.vue
+++ b/src/pages/governance/index.vue
@@ -12,7 +12,7 @@
         <div class="texts wow fadeInDown" data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.title }}</h2>
-            <div class="des">{{ modules[1].form.des }}</div>
+            <div class="des" v-html="modules[1].form.des"></div>
           </div>
           <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
         </div>
@@ -21,26 +21,17 @@
 
     <div class="cards">
       <ul>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
-        <li>理事会</li>
+        <li v-for="(item, i) in modules[2].list" :key="i">{{ item.title }}</li>
       </ul>
     </div>
 
     <div class="block committee gray">
       <div class="inner">
         <div class="left">
-          <h2>发顺丰散发放散阀发放散阀</h2>
-          <div class="text">       产业促进委员会对理事会负责，是贯彻战略性新兴产业发展需求牵引导向，强化设施服务深圳和大湾区高新技术产业发展，加强“从0 到1”原创科技成果持续供给产业，强化科技服务经济的专门机构。
-
-       产业促进委员会主要负责根据深圳和大湾区产业需求及发展动态，挖掘、凝练高新技术产业发展的“卡脖子”技术和下一代产业发展关键技术；对研究院设施的产业需求、建设方案和性能指标进行咨询建议，参与编制设施中产业板块线站机时分配方案；收集产业用户对设施的管理运行模式、装置使用和升级需求、重点合作课题的建议和意见，为设施服务产业发展方向、研究计划、运行管理等的完善和改进提供决策参考；负责对定期举办产业用户培训进行指导，积极引导高新技术企业与研究院深度合作，促进设施服务产业经济发展。</div>
+          <h2>{{ modules[3].form.title }}</h2>
+          <div class="text" v-html="modules[3].form.des"></div>
         </div>
-        <img class="pic" src="@/assets/images/channel1.png" alt="">
+        <img class="pic" :src="modules[3].form.pic" alt="">
       </div>
     </div>
   </div>
@@ -48,14 +39,12 @@
 
 <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() {
diff --git a/src/pages/org/index.vue b/src/pages/org/index.vue
new file mode 100644
index 0000000..d5c0917
--- /dev/null
+++ b/src/pages/org/index.vue
@@ -0,0 +1,255 @@
+<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="tab-content">
+      <div class="org">
+        <div class="left">
+          <h6>{{ modules[1].form.title }}</h6>
+          <p class="text" v-html="modules[1].form.des"></p>
+        </div>
+        <img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt="">
+      </div>
+      <div class="lg-bg">
+        <img width="100%" :src="modules[2].form.pic" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    new WOW().init()
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(
+        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
+      )
+        .then(({ data }) => {
+          if (data.length) {
+            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+            const json = JSON.parse(
+              this.preview
+                ? data
+                : data[data.length - 1][
+                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                  ]
+            );
+            this.modules = json;
+            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+          }
+        })
+        .catch((err) => {});
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.org {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1294px;
+  padding: 9px 86px 29px 116px;
+  margin: 0 auto 50px;
+  background: #FCFCFC;
+  border-radius: 160px;
+  .left {
+    width: 705px;
+  }
+  h6 {
+    font-size: 1.4rem;
+    font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+    font-weight: bold;
+    color: #333;
+  }
+  .text {
+    margin-top: 10px;
+    font-size: 1rem;
+    color: #020202;
+    line-height: 2rem;
+  }
+  .pic {
+    width: 320px;
+    height: 282px;
+  }
+}
+.lg-bg {
+  width: 85%;
+  margin: 0 auto;
+}
+@media (max-width: 1200px) {
+  .org{
+    width: 100%;
+    padding:15px;
+    flex-direction: column;
+    .pic {
+      width: 100%;
+    }
+    .left{
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+  .single-banner {
+    .banner-img {
+      height: 15rem;
+    }
+    .texts{
+      top: 8rem !important;
+      left: 22rem !important;
+    }
+  }
+}
+@media (max-width: 320px) {
+  .single-banner {
+    .banner-img {
+      height: 13rem;
+    }
+    .texts {
+      top: 9rem !important;
+      left: 8rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .org{
+    .pic {
+      width: 100%;
+      height: 13rem;
+    }
+  }
+}
+@media (min-width: 320px) and (max-width: 375px) {
+  .single-banner {
+    .banner-img {
+      height: 15rem;
+    }
+    .texts {
+      top: 11rem !important;
+    left: 10rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .single-banner {
+    .banner-img {
+      height: 18rem;
+    }
+    .texts {
+      top: 14rem !important;
+    left: 13rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 480px) and (max-width: 640px) {
+  .single-banner {
+    .banner-img {
+      height: 22rem;
+    }
+    .texts {
+      top: 18rem !important;
+      left: 25rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+@media (min-width: 640px) and (max-width: 768px) {
+  .single-banner {
+    .banner-img {
+      height: 25rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 25rem;
+      }
+    }
+  }
+}
+@media (min-width: 768px) and (max-width: 980px) {
+  .single-banner {
+    .banner-img {
+      height: 28rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 28rem;
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .single-banner {
+    .banner-img {
+      height: 32rem;
+    }
+    .texts {
+      top: 21rem !important;
+      left: 37rem !important;
+      .banner-title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+  .tab-content{
+    .org{
+      .pic {
+        width: 100%;
+        height: 32rem;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index ba8a690..8ebb287 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -9,58 +9,58 @@
 
     <div class="block about gray">
       <div class="inner">
-        <img src="@/assets/images/science/1.png" alt="" class="pic" />
+        <img :src="modules[1].form.pic" alt="" class="pic" />
         <div class="texts">
-          <h6>关于我们</h6>
-          <div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
-          <h6>关于我们</h6>
-          <div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
+          <h6>{{ modules[2].form.title }}</h6>
+          <div class="des" v-html="modules[2].form.des"></div>
+          <h6>{{ modules[3].form.title }}</h6>
+          <div class="des" v-html="modules[3].form.des"></div>
         </div>
       </div>
     </div>
     
     <div class="block fac">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <ul class="card">
           <li>
-            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <img :src="modules[5].form.pic" alt="" class="pic" />
             <div class="texts">
-              <h6>深圳自由电子激光</h6>
-              <div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
+              <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">
             </div>
           </li>
           <li>
-            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <img :src="modules[6].form.pic" alt="" class="pic" />
             <div class="texts">
-              <h6>深圳自由电子激光</h6>
-              <div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
+              <h6>{{ modules[6].form.title }}</h6>
+              <div class="text" v-html="modules[6].form.des"></div>
               <img src="@/assets/images/arrow.png" alt="" class="arrow">
             </div>
           </li>
         </ul>
         <ul class="l-card">
           <li>
-            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <img :src="modules[7].form.pic" alt="" class="pic" />
             <div class="texts">
-              <h6>机制创新</h6>
-              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+              <h6>{{ modules[7].form.title }}</h6>
+              <div class="text" v-html="modules[7].form.des"></div>
             </div>
           </li>
           <li>
-            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <img :src="modules[8].form.pic" alt="" class="pic" />
             <div class="texts">
-              <h6>机制创新</h6>
-              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+              <h6>{{ modules[8].form.title }}</h6>
+              <div class="text" v-html="modules[8].form.des"></div>
             </div>
           </li>
           <li>
-            <img src="@/assets/images/science/1.png" alt="" class="pic" />
+            <img :src="modules[9].form.pic" alt="" class="pic" />
             <div class="texts">
-              <h6>机制创新</h6>
-              <div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
+              <h6>{{ modules[9].form.title }}</h6>
+              <div class="text" v-html="modules[9].form.des"></div>
             </div>
           </li>
         </ul>
@@ -68,50 +68,29 @@
     </div>
 
     <div class="block scan gray">
-      <h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
-      <p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
+      <h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2>
+      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[10].form.des }}</p>
       <div class="scan-inner">
         <div class="left">
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/7.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
-          </div>
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/8.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
-          </div>
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/9.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
-          </div>
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/10.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
-          </div>
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/11.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
-          </div>
-          <div class="line">
-            <img src="http://10.10.11.7/images/overview/12.png" alt="" class="icon" />
-            <p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
+          <div class="line" v-for="(item, i) in modules[11].list" :key="i">
+            <p class="text">{{ item.title }}</p>
           </div>
           <ul class="total">
             <li>
-              <p class="num">300+</p>
-              <p class="text">在职员工</p>
+              <p class="num">{{ modules[12].form.title }}</p>
+              <p class="text">{{ modules[12].form.des }}</p>
             </li>
             <li>
-              <p class="num">85%</p>
-              <p class="text">工程技术人员</p>
+              <p class="num">{{ modules[13].form.title }}</p>
+              <p class="text">{{ modules[13].form.des }}</p>
             </li>
             <li>
-              <p class="num">200+</p>
-              <p class="text">培养专项博士</p>
+              <p class="num">{{ modules[14].form.title }}</p>
+              <p class="text">{{ modules[14].form.des }}</p>
             </li>
           </ul>
         </div>
-        <img src="@/assets/images/science/1.png" alt="" class="pic" />
+        <img :src="modules[15].form.pic" alt="" class="pic" />
       </div>
     </div>
   </div>
@@ -275,10 +254,31 @@ export default {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
-    .icon {
+    &:before {
+      content: '';
+      min-width: 50px;
       width: 50px;
       height: 50px;
       margin-right: 20px;
+      background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
+    }
+    &:nth-child(2):before {
+      background-image: url(http://10.10.11.7/images/overview/8.png);
+    }
+    &:nth-child(3):before {
+      background-image: url(http://10.10.11.7/images/overview/9.png);
+    }
+    &:nth-child(4):before {
+      background-image: url(http://10.10.11.7/images/overview/10.png);
+    }
+    &:nth-child(5):before {
+      background-image: url(http://10.10.11.7/images/overview/11.png);
+    }
+    &:nth-child(6):before {
+      background-image: url(http://10.10.11.7/images/overview/12.png);
+    }
+    &:nth-child(7):before {
+      background-image: url(http://10.10.11.7/images/overview/13.png);
     }
     .text {
       font-size: 1rem;
diff --git a/src/router/modules/org.js b/src/router/modules/org.js
new file mode 100644
index 0000000..d4812f9
--- /dev/null
+++ b/src/router/modules/org.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'org'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};

From 8e8625dcda97071e7930d396536d1bc3b65d4fbb Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 20 Apr 2023 16:48:22 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/devHistory/index.vue         |  4 ++--
 src/pages/estate/event/index.vue       |  6 +++---
 src/pages/estate/index/index.vue       |  2 +-
 src/pages/estate/location/index.vue    |  4 ++--
 src/pages/estate/survey/index.vue      |  2 +-
 src/pages/org/index.vue                | 22 ++++++++++------------
 src/pages/overview/index.vue           | 14 +++++++-------
 src/pages/overviewDevHistory/index.vue |  2 +-
 8 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/pages/devHistory/index.vue b/src/pages/devHistory/index.vue
index 259d9d6..728e45f 100644
--- a/src/pages/devHistory/index.vue
+++ b/src/pages/devHistory/index.vue
@@ -66,14 +66,14 @@ export default {
 .history {
   h6 {
     position: relative;
-    font-size: 2.4rem;
+    font-size: 2.2rem;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #333333;
   }
   .en {
     margin-top: -25px;
-    font-size: 2.4rem;
+    font-size: 2.2rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
     color: #E3E3E3;
diff --git a/src/pages/estate/event/index.vue b/src/pages/estate/event/index.vue
index c1fa526..df06781 100644
--- a/src/pages/estate/event/index.vue
+++ b/src/pages/estate/event/index.vue
@@ -97,14 +97,14 @@ export default {
 .history {
   h2 {
     position: relative;
-    font-size: 2.2rem;
+    font-size: 2rem;
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
     color: #1C1C1C;
   }
   .en {
     margin: -15px 0 40px;
-    font-size: 2.2rem;
+    font-size: 2rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
     color: #E3E3E3;
@@ -150,7 +150,7 @@ export default {
   }
   .year {
     margin: 0 0 20px 20px;
-    font-size: 3.8rem;
+    font-size: 3.2rem;
     font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
     font-weight: 800;
     color: #1A81F4;
diff --git a/src/pages/estate/index/index.vue b/src/pages/estate/index/index.vue
index 794e8a1..b55bf6e 100644
--- a/src/pages/estate/index/index.vue
+++ b/src/pages/estate/index/index.vue
@@ -381,7 +381,7 @@ export default {
   .des {
     height: 60px;
     margin: 10px 0;
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-family: SFProDisplay;
     font-weight: 500;
     color: #333;
diff --git a/src/pages/estate/location/index.vue b/src/pages/estate/location/index.vue
index a97e61e..a8f8400 100644
--- a/src/pages/estate/location/index.vue
+++ b/src/pages/estate/location/index.vue
@@ -89,7 +89,7 @@ export default {
 }
 
 .tab-content {
-  width: 80%;
+  width: 70%;
   max-width: 1504px;
   padding-bottom: 100px;
   margin: 30px auto 0;
@@ -131,7 +131,7 @@ export default {
   }
   h6 {
     margin-bottom: 24px;
-    font-size: 2.4rem;
+    font-size: 2rem;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
   }
diff --git a/src/pages/estate/survey/index.vue b/src/pages/estate/survey/index.vue
index f866a8a..82aebfe 100644
--- a/src/pages/estate/survey/index.vue
+++ b/src/pages/estate/survey/index.vue
@@ -83,7 +83,7 @@ export default {
   h6 {
     position: relative;
     margin-bottom: 30px;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
     font-weight: bold;
     color: #333;
diff --git a/src/pages/org/index.vue b/src/pages/org/index.vue
index d5c0917..d125ce4 100644
--- a/src/pages/org/index.vue
+++ b/src/pages/org/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrap">
+  <div class="wrap p-b-30">
     <div class="single-banner single-banner-overview">
       <img class="banner-img" :src="modules[0].form.pic" alt="">
       <div class="texts">
@@ -7,17 +7,15 @@
       </div>
     </div>
 
-    <div class="tab-content">
-      <div class="org">
-        <div class="left">
-          <h6>{{ modules[1].form.title }}</h6>
-          <p class="text" v-html="modules[1].form.des"></p>
-        </div>
-        <img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt="">
-      </div>
-      <div class="lg-bg">
-        <img width="100%" :src="modules[2].form.pic" alt="">
+    <div class="org">
+      <div class="left">
+        <h6>{{ modules[1].form.title }}</h6>
+        <p class="text" v-html="modules[1].form.des"></p>
       </div>
+      <img class="pic" src="http://10.10.11.7/images/overviewSetup/1.png" alt="">
+    </div>
+    <div class="lg-bg">
+      <img width="100%" :src="modules[2].form.pic" alt="">
     </div>
   </div>
 </template>
@@ -95,7 +93,7 @@ export default {
   }
 }
 .lg-bg {
-  width: 85%;
+  width: 65%;
   margin: 0 auto;
 }
 @media (max-width: 1200px) {
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index 8ebb287..5ead310 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -29,7 +29,7 @@
             <div class="texts">
               <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">
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
             </div>
           </li>
           <li>
@@ -37,26 +37,26 @@
             <div class="texts">
               <h6>{{ modules[6].form.title }}</h6>
               <div class="text" v-html="modules[6].form.des"></div>
-              <img src="@/assets/images/arrow.png" alt="" class="arrow">
+              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[6].form.link.linkName)}" @click="openLink(modules[6].form)">
             </div>
           </li>
         </ul>
         <ul class="l-card">
-          <li>
+          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" @click="openLink(modules[7].form)">
             <img :src="modules[7].form.pic" alt="" class="pic" />
             <div class="texts">
               <h6>{{ modules[7].form.title }}</h6>
               <div class="text" v-html="modules[7].form.des"></div>
             </div>
           </li>
-          <li>
+          <li :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}" @click="openLink(modules[8].form)">
             <img :src="modules[8].form.pic" alt="" class="pic" />
             <div class="texts">
               <h6>{{ modules[8].form.title }}</h6>
               <div class="text" v-html="modules[8].form.des"></div>
             </div>
           </li>
-          <li>
+          <li :class="{'cursor-pointer': isLink(modules[9].form.link.linkName)}" @click="openLink(modules[9].form)">
             <img :src="modules[9].form.pic" alt="" class="pic" />
             <div class="texts">
               <h6>{{ modules[9].form.title }}</h6>
@@ -230,7 +230,7 @@ export default {
     }
     h6 {
       margin-bottom: 15px;
-      font-size: 2rem;
+      font-size: 1.6rem;
       font-family: PingFangSC-Medium, PingFang SC;
     }
     .text {
@@ -284,7 +284,7 @@ export default {
       font-size: 1rem;
       font-family: PingFangSC-Medium, PingFang SC;
       color: #333;
-      line-height: 2;
+      line-height: 1.6;
       @include mul-ellipsis(2);
     }
   }
diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue
index ef16598..da246b7 100644
--- a/src/pages/overviewDevHistory/index.vue
+++ b/src/pages/overviewDevHistory/index.vue
@@ -149,7 +149,7 @@ export default {
   }
   .year {
     margin: 0 0 20px 20px;
-    font-size: 3.8rem;
+    font-size: 3.2rem;
     font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
     font-weight: 800;
     color: #1A81F4;

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 4/5] =?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: '' }
+    }
+  ]
+};

From 7a46e2e4937610550ad643f8e95c1bb8f0b507b6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Sun, 23 Apr 2023 17:36:42 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/industrial/index.vue   |  58 +++++-
 src/pages/mission/index.vue      | 163 ++--------------
 src/pages/researchTeam/index.vue | 312 +------------------------------
 src/pages/scientific/index.vue   |  38 +++-
 4 files changed, 114 insertions(+), 457 deletions(-)

diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
index d2ca8ab..b27edb4 100644
--- a/src/pages/industrial/index.vue
+++ b/src/pages/industrial/index.vue
@@ -15,7 +15,7 @@
             <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="">
+          <img class="bg" :src="modules[1].form.pic" alt="">
         </div>
       </div>
     </div>
@@ -120,7 +120,8 @@ export default {
     }
   }
   .left {
-    width: 695px;
+    width: 500px;
+    padding-right: 30px;
   }
   .des {
     margin: 20px 0;
@@ -129,6 +130,8 @@ export default {
     line-height: 31px;
   }
   .bg {
+    width: 560px;
+    height: 500px;
     margin: -122px 0 0 0;
   }
 }
@@ -194,4 +197,55 @@ export default {
     }
   }
 }
+@media (max-width: 1200px) {
+  .history {
+    .left {
+      width: 50%;
+    }
+    .bg {
+      width: 50%;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  .history {
+    .texts {
+      flex-direction: column;
+    }
+    .left {
+      width: 100%;
+    }
+    .bg {
+      width: 100%;
+      height: auto;
+      margin-top: 1rem;
+    }
+  }
+  .land {
+    .inner {
+      flex-direction: column;
+    }
+    .pic, .right {
+      width: 100%;
+    }
+    .right {
+      margin-top: 1rem;
+    }
+    .text {
+      height: auto;
+    }
+  }
+  .plan {
+    li {
+      flex-direction: column !important;
+      height: auto;
+      .left, .pic {
+        width: 100%;
+      }
+      .pic {
+        margin: 1rem 0 0 !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
index a31e8d6..9a7de7d 100644
--- a/src/pages/mission/index.vue
+++ b/src/pages/mission/index.vue
@@ -172,8 +172,8 @@ export default {
       padding: 0 20px;
     }
     h6 {
-      margin-bottom: 20px;
-      font-size: 1.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.3rem;
       color: #272727;
       @include ellipsis();
     }
@@ -185,11 +185,8 @@ export default {
   }
 }
 @media (max-width: 1200px) {
-  body {
-    width: 100% !important;
-  }
   .inner {
-    width: 100%;
+    width: 98%;
   }
   .item {
     img {
@@ -208,153 +205,25 @@ export default {
     }
   }
 }
-@media (max-width: 320px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 13rem;
-      }
-      .texts {
-        top: 6rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
-    }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 13rem;
-      }
-      .texts {
-        top: 6rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
-    }
-  }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 20rem;
-      }
-      .texts {
-        top: 10rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
-    }
-  }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 25rem;
-      }
-      .texts {
-        top: 10rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 2rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
+@media (max-width: 980px) {
+  .mind {
+    .list {
+      flex-direction: column;
     }
-  }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 35rem;
-      }
-      .texts {
-        top: 20rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 2rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
-    }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 35rem;
-      }
-      .texts {
-        top: 20rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 2rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
+    li {
+      width: 100%;
     }
   }
 }
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 40rem;
+@media (max-width: 480px) {
+  .mind {
+    li {
+      .pic {
+        width: 150px;
+        height: 130px;
       }
       .texts {
-        top: 20rem;
-        left: 12rem;
-        .banner-title{
-          font-size: 2rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
+        width: calc(100% - 150px);
       }
     }
   }
diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue
index bb939cd..bd18155 100644
--- a/src/pages/researchTeam/index.vue
+++ b/src/pages/researchTeam/index.vue
@@ -208,31 +208,6 @@ export default {
       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%;
   }
@@ -283,19 +258,14 @@ export default {
     }
   }
 }
-
-@media (min-width: 280px) and (max-width: 750px) {
+@media (max-width: 640px) {
   .article {
-    .recruit {
-      li {
-        flex-direction: column;
-      }
-      .pic {
-        width: 100%;
-        margin-bottom: 10px;
+    .left {
+      .search {
+        width: 5 0%;
       }
     }
-    .notice {
+    .teams {
       flex-direction: column;
       li {
         width: 100%;
@@ -303,276 +273,4 @@ export default {
     }
   }
 }
-@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
index acf4e95..3e3c18d 100644
--- a/src/pages/scientific/index.vue
+++ b/src/pages/scientific/index.vue
@@ -332,11 +332,47 @@ export default {
   }
   .title {
     margin-bottom: 1rem;
-    font-size: 2.2rem;
+    font-size: 1.8rem;
   }
   .des {
     font-size: 1rem;
     line-height: 1.6;
   }
 }
+@media (max-width: 1200px) {
+  .items {
+    li {
+      .texts {
+        left: 0;
+        width: 98%;
+      }
+      &:nth-child(even) {
+        .texts {
+          right: auto;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 780px) {
+  .program {
+    .slide {
+      flex-direction: column;
+    }
+    .texts {
+      width: 100%;
+    }
+    .img-wrap {
+      width: 100%;
+      height: 250px;
+    }
+    .list {
+      flex-direction: column;
+      li {
+        width: 100%;
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}
 </style>