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

---
 src/pages/governance/index.vue   | 203 ++++++++++++++++
 src/pages/mission/index.vue      | 382 +++++++++++++++++++++++++++++++
 src/router/modules/governance.js |  14 ++
 src/router/modules/mission.js    |  14 ++
 4 files changed, 613 insertions(+)
 create mode 100644 src/pages/governance/index.vue
 create mode 100644 src/pages/mission/index.vue
 create mode 100644 src/router/modules/governance.js
 create mode 100644 src/router/modules/mission.js

diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
new file mode 100644
index 0000000..5532ebf
--- /dev/null
+++ b/src/pages/governance/index.vue
@@ -0,0 +1,203 @@
+<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 history gray">
+      <div class="inner">
+        <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>
+          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="cards">
+      <ul>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+        <li>理事会</li>
+      </ul>
+    </div>
+
+    <div class="block committee gray">
+      <div class="inner">
+        <div class="left">
+          <h2>发顺丰散发放散阀发放散阀</h2>
+          <div class="text">       产业促进委员会对理事会负责，是贯彻战略性新兴产业发展需求牵引导向，强化设施服务深圳和大湾区高新技术产业发展，加强“从0 到1”原创科技成果持续供给产业，强化科技服务经济的专门机构。
+
+       产业促进委员会主要负责根据深圳和大湾区产业需求及发展动态，挖掘、凝练高新技术产业发展的“卡脖子”技术和下一代产业发展关键技术；对研究院设施的产业需求、建设方案和性能指标进行咨询建议，参与编制设施中产业板块线站机时分配方案；收集产业用户对设施的管理运行模式、装置使用和升级需求、重点合作课题的建议和意见，为设施服务产业发展方向、研究计划、运行管理等的完善和改进提供决策参考；负责对定期举办产业用户培训进行指导，积极引导高新技术企业与研究院深度合作，促进设施服务产业经济发展。</div>
+        </div>
+        <img class="pic" src="@/assets/images/channel1.png" alt="">
+      </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 {
+    padding-bottom: 15px;
+    font-size: 1.2rem;
+    color: #333;
+    &:after {
+      content: '';
+      display: block;
+      width: 65px;
+      height: 3px;
+      margin-top: 20px;
+      background: #0280F1;
+    }
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 0 50px 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;
+  }
+}
+.cards {
+  padding: 60px 0;
+  ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 1200px;
+    margin: 0 auto;
+  }
+  li {
+    width: 260px;
+    margin: 0 30px 50px 0;
+    line-height: 84px;
+    font-size: 1.2rem;
+    color: #333;
+    text-align: center;
+    @include ellipsis();
+    background: url(http://10.10.11.7/images/governance/3.png) 0 0/cover no-repeat;
+    cursor: pointer;
+    &:nth-child(2) {
+      background-image: url(http://10.10.11.7/images/governance/4.png);
+    }
+    &:nth-child(3) {
+      background-image: url(http://10.10.11.7/images/governance/5.png);
+    }
+    &:nth-child(4) {
+      background-image: url(http://10.10.11.7/images/governance/4.png);
+    }
+    &:nth-child(5) {
+      background-image: url(http://10.10.11.7/images/governance/7.png);
+    }
+    &:nth-child(6) {
+      background-image: url(http://10.10.11.7/images/governance/6.png);
+    }
+    &:nth-child(8) {
+      background-image: url(http://10.10.11.7/images/governance/6.png);
+    }
+    &:hover {
+      color: #fff;
+      background: #0D84F2;
+    }
+  }
+}
+.committee {
+  .inner {
+    display: flex;
+    align-items: center;
+  }
+  .left {
+    width: 50%;
+    margin-right: 2%;
+  }
+  h2 {
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #333;
+  }
+  .text {
+    font-size: 1rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 1.5;
+    color: #333;
+  }
+  .pic {
+    width: 48%;
+    height: 300px;
+  }
+}
+</style>
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
new file mode 100644
index 0000000..16bab68
--- /dev/null
+++ b/src/pages/mission/index.vue
@@ -0,0 +1,382 @@
+<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">
+      <div class="inner">
+        <div
+          class="item wow bounceInLeft"
+          data-wow-delay="0.5s"
+          :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+          @click="openLink(modules[1].form)"
+        >
+          <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>
+        </div>
+        <div
+          class="item wow bounceInRight"
+          data-wow-delay="0.8s"
+          :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+          @click="openLink(modules[2].form)"
+        >
+          <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>
+        </div>
+      </div>
+    </div>
+
+    <div class="block mind gray">
+      <div class="inner">
+        <h6 class="m-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>
+        </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";
+.inner {
+  width: 1200px;
+}
+.item {
+  position: relative;
+  margin-bottom: 58px;
+  &:hover {
+    .texts {
+      color: #fff;
+      transform: scale(1.05);
+      background: #32b6e9 !important;
+    }
+  }
+  img {
+    width: 90%;
+    height: 400px;
+  }
+  &:nth-child(2) .texts {
+    left: auto;
+    right: 0;
+    color: #fff;
+    background: rgba(40,179,255,0.34);
+  }
+  .texts {
+    position: absolute;
+    top: 79px;
+    left: -28px;
+    width: 532px;
+    padding: 70px 38px;
+    color: #333;
+    background: rgba(255, 241, 231, 0.84);
+    transition: 0.5s;
+  }
+  h6 {
+    margin-bottom: 14px;
+    font-size: 2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+  .des {
+    font-size: 1rem;
+  }
+}
+.mind {
+  .m-title {
+    margin-bottom: 30px;
+    font-size: 2.2rem;
+    text-align: center;
+    color: #333;
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  li {
+    display: inline-flex;
+    align-items: center;
+    width: calc((100% - 22px) / 2);
+    margin: 0 22px 22px 0;
+    background-color: #fff;
+    &:nth-child(even) {
+      margin-right: 0;
+    }
+    .pic {
+      width: 250px;
+      height: 230px;
+    }
+    .texts {
+      width: calc(100% - 250px);
+      padding: 0 20px;
+    }
+    h6 {
+      margin-bottom: 20px;
+      font-size: 1.5rem;
+      color: #272727;
+      @include ellipsis();
+    }
+    .des {
+      font-size: 1rem;
+      color: #666;
+      line-height: 1.5;
+    }
+  }
+}
+@media (max-width: 1200px) {
+  body {
+    width: 100% !important;
+  }
+  .inner {
+    width: 100%;
+  }
+  .item {
+    img {
+      margin-left: 30px;
+    }
+    .rightText {
+      right: 12px !important;
+    }
+    .texts {
+      width: 85%;
+      box-sizing: border-box;
+      left: 12px;
+      .des{
+        -webkit-line-clamp: inherit
+      }
+    }
+  }
+}
+@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 (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;
+        }
+      }
+    }
+  }
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    .single-banner {
+      .banner-img {
+        height: 40rem;
+      }
+      .texts {
+        top: 20rem;
+        left: 12rem;
+        .banner-title{
+          font-size: 2rem;
+          margin-bottom: .5rem;
+        }
+        .banner-des{
+          font-size: .85rem;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/modules/governance.js b/src/router/modules/governance.js
new file mode 100644
index 0000000..698882b
--- /dev/null
+++ b/src/router/modules/governance.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'governance'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/mission.js b/src/router/modules/mission.js
new file mode 100644
index 0000000..a5be7db
--- /dev/null
+++ b/src/router/modules/mission.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'mission'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};