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