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