装置介绍等

src/pages/device/beam.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block share">
+      <div class="inner">
+        <h6>光束线</h6>
+        <p class="en">The beam line</p>
+        <div class="sum">S³FEL光束线覆盖的波段范围为1~30 nm，包含前端区、光学传输系统和诊断系统，是连接自由电子激光光源和后端科学实验站的桥梁。</div>
+        <div class="flex">
+          <div class="left">
+            <div class="des">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。
+  </div>
+          </div>
+          <img class="pic" src="@/assets/images/device/1.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="intro">
+      <img class="pic" src="@/assets/images/device/2.png" alt="">
+      <div class="des">波荡器是S³FEL光束线的关键部件，由一系列N极和S极交替排列的磁铁阵列构成，是一种能够产生空间周期性分布磁场的电磁装置。被超导直线加速器加速的高能电子束经过波荡器时，将扭摆状波荡前行。通过合理选择电子束和波荡器的参数，可使电子束在每个波动周期内与波荡器发出的同步辐射相互干涉，以获得超高亮度、强相干、高重频的X射线自由电子激光。</div>
+    </div>
+
+    <div class="unit">
+      <h6>波荡器性能指标</h6>
+      <img class="pic" src="@/assets/images/device/3.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  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)
+        }
+      }).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}`).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";
+.wrap {
+  background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
+}
+.share {
+  position: relative;
+  .inner {
+    width: 1323px;
+  }
+  .left {
+    width: 547px;
+    margin-right: 66px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin-top: -35px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .sum {
+    margin-top: 60px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 44px;
+  }
+  .des {
+    margin-top: 25px;
+    font-size: 18px;
+    color: #333;
+    line-height: 37px;
+    overflow: visible;
+  }
+  .pic {
+    width: 710px;
+    height: 509px;
+    margin-top: -30px;
+    border-top-left-radius: 20px;
+  }
+}
+.intro {
+  display: flex;
+  align-items: center;
+  max-width: 1490px;
+  width: 90%;
+  height: 393px;
+  margin-bottom: 67px;
+  .pic {
+    width: 60%;
+    height: 100%;
+  }
+  .des {
+    height: 100%;
+    padding: 57px 60px 20px 60px;
+    font-size: 22px;
+    color: #fff;
+    line-height: 40px;
+    background: #2E4984;
+  }
+}
+.unit {
+  width: 986px;
+  padding-bottom: 60px;
+  margin: 0 auto;
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+}
+</style>

src/pages/device/layout.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block share">
+      <div class="inner">
+        <h6>整体布局</h6>
+        <p class="en">The overall layout</p>
+        <div class="card">S³FEL装置主要包括一台超导直线加速器（电子束能量为2.5 GeV、重复频率为1 MHz）、4条波荡器线及首批14个实验线站。根据具体的功能可以分为注入器、主加速器、自由电子激光放大器（波荡器线）、光束线和实验站，还有包括束流诊断、控制、激光、同步、数据采集与处理等在内的公共子系统，以及低温、公用设施等配套系统和设施。</div>
+        <div class="flex" style="margin-top: 290px">
+          <div class="left">
+            <div class="des">    S³FEL首批拟建设4条波荡器线，分别是2条外种子（EEHG）线和2条自放大自发辐射（SASE）线，以同时满足首批实验站的不同研究需求。按照能区划分，FEL-1、FEL-2工作在自放大自发辐射模式（SASE），并且为将来升级为self-seeding模式预留空间。FEL-1出光波段为1-3 nm（调整电子束能量时可覆盖1-6 nm），FEL-2输出光波长为2.3-15 nm，作为光刻研究专用光束线。FEL-3和4基于回声型谐波产生原理（EEHG），FEL-3输出波长为2.3-15 nm，涵盖水窗波段，FEL-4输出波长为5-30 nm的极紫外FEL脉冲。通过快速束流分配技术，波荡器束线可同时工作。各条波荡器线产生的FEL光，通过光束线系统实现FEL光学参数的实时诊断，包括光强、光谱、光斑位置，光斑尺寸以及相干性等，并通过传输与聚焦系统传输至后端的实验站，以满足各个实验站对光源的不同需求。首批建设实验站共涉及6个前沿科技领域，分别为极紫外光刻、量子材料、能源催化、生物医药、大气与星际科学以及原子分子科学。</div>
+          </div>
+          <img class="pic" src="@/assets/images/device/6.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="intro">
+      <img class="bg" src="@/assets/images/device/7.png" alt="">
+      <img class="pic" src="@/assets/images/device/8.png" alt="">
+    </div>
+
+    <div class="unit">
+      <h6>S³FEL性能指标</h6>
+      <img class="pic" src="@/assets/images/device/9.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  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)
+        }
+      }).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}`).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";
+.wrap {
+  background: url(../../assets/images/device/4.png) bottom right/auto no-repeat;
+}
+.share {
+  position: relative;
+  .inner {
+    width: 1323px;
+  }
+  .left {
+    width: 547px;
+    margin-right: 66px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin: -35px 0 40px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .card {
+    position: absolute;
+    left: 0;
+    max-width: 1671px;
+    width: 90%;
+    height: 171px;
+    padding-left: 20%;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 38px;
+    background: url(../../assets/images/device/5.png) 0 0/cover no-repeat;
+  }
+  .des {
+    margin-top: 25px;
+    font-size: 18px;
+    color: #333;
+    line-height: 37px;
+    overflow: visible;
+  }
+  .pic {
+    width: 710px;
+    height: 509px;
+    border-top-left-radius: 20px;
+  }
+}
+.intro {
+  position: relative;
+  height: 794px;
+  margin-bottom: 37px;
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .pic {
+    position: absolute;
+    top: 67px;
+    left: 15%;
+  }
+}
+.unit {
+  width: 986px;
+  padding-bottom: 60px;
+  margin: 0 auto;
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+}
+</style>

src/pages/device/super.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block history gray">
+      <div class="inner">
+        <h2 class="wow fadeInLeft">{{ modules[1].form.title }}</h2>
+        <p class="en">Superconducting linac -1</p>
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+          <div class="left">
+            <h6>{{ modules[1].form.subTitle }}</h6>
+            <div class="line"></div>
+            <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 intro">
+      <div class="inner">
+        <div class="left">
+          <h5>S³FEL超导直线加速器示意图</h5>
+          <img src="@/assets/images/device/11.png" alt="">
+        </div>
+        <div class="right">
+          <h6>S³FEL超导直线加速器性能指标</h6>
+          <img src="@/assets/images/device/12.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  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)
+        }
+      }).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}`).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";
+.history {
+  h2 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1C1C1C;
+  }
+  .en {
+    margin: -35px 0 40px;
+    font-size: 48px;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #E3E3E3;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 0 30px 38px;
+    margin-top: 20px;
+    background: #1583FF;
+    border-radius: 65px 100px 0px 0px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  .left {
+    width: 695px;
+  }
+  h6 {
+    font-size: 28px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+  }
+  .des {
+    margin: 20px 0;
+    font-size: 22px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 44px;
+  }
+  .bg {
+    margin: -122px -30px 0 0;
+    border-top-left-radius: 30px;
+  }
+}
+.intro {
+  .inner {
+    display: flex;
+    width: 1506px;
+  }
+  .left {
+    width: 30%;
+  }
+  .right {
+    width: 68%;
+    margin-left: 2%;
+  }
+  h5 {
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+  }
+  h6 {
+    padding-left: 15px;
+    margin-bottom: 15px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2A2A2A;
+    border-left: 4px solid #1583FF;
+  }
+  img {
+    width: 100%;
+  }
+}
+</style>

src/pages/exp/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block station">
+      <div class="inner">
+        <h6>实验线站</h6>
+        <p class="en">EXPERIMENT STATIONS</p>
+        <img class="pic" src="@/assets/images/exp/1.png" alt="">
+        <div class="des">       科学实验站是S³FEL面向国家重大需求、聚焦科学前沿和引领地区产业发展的关键，旨在重点探究量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的关键技术和科学难题。S³FEL的供光具有超高时间分辨（40飞秒）、超高重复频率（最高百万赫兹）和超高亮度（电子束能量达2.5 Gev）的特点。
+
+        S³FEL可在原子尺度上研究复杂生物分子和材料的结构及组成，进而绘制病毒或细胞的原子量级三维精细结构，有助于科学家更深入地了解生物分子的结构和功能，为新药研发提供依据。在能源催化领域，S³FEL可研究飞秒内的化学变化，如化学键的形成和断裂、反应体系中电荷和能量的转移、反应过程中催化剂表面结构的动态演变等， 有助于科学家更好地研究复杂催化过程的反应机理和动力学过程，进而提高传统能源的利用效率，加快新能源开发。S³FEL还可用于探索极端电场或磁场强度下的物质变化，如研究星云和恒星的演变，探索生命的起源等。
+</div>
+      </div>
+    </div>
+
+    <ul class="list">
+      <li class="item1">
+        <img src="@/assets/images/exp/2.png" alt="">
+        <h6>量子材料</h6>
+      </li>
+      <li class="item2">
+        <img src="@/assets/images/exp/3.png" alt="">
+        <h6>能源催化</h6>
+      </li>
+      <li class="item3">
+        <img src="@/assets/images/exp/4.png" alt="">
+        <h6>生物医药</h6>
+      </li>
+      <li class="item4">
+        <img src="@/assets/images/exp/5.png" alt="">
+        <h6>大气雾霾与团簇研究</h6>
+      </li>
+      <li class="item5">
+        <img src="@/assets/images/exp/6.png" alt="">
+        <h6>星际化学</h6>
+      </li>
+      <li class="item6">
+        <img src="@/assets/images/exp/7.png" alt="">
+        <h6>原子分子物理</h6>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  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)
+        }
+      }).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}`).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";
+.station {
+  .inner {
+    width: 1200px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 1;
+  }
+  .en {
+    margin-bottom: 20px;
+    font-size: 45px;
+    font-family: AppleSystemUIFont;
+    color: #E4E4E4;
+    line-height: 1;
+  }
+  .pic {
+    width: 100%;
+    height: 604px;
+  }
+  .des {
+    margin-top: 55px;
+    font-size: 18px;
+    color: #333;
+    line-height: 34px;
+    overflow: visible;
+  }
+}
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 30px;
+  li {
+    position: relative;
+    height: 542px;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  h6 {
+    position: absolute;
+    top: 192px;
+    left: 60px;
+    font-size: 30px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #fff;
+  }
+  .item1, .item2 {
+    width: 25%;
+  }
+  .item3 {
+    width: 50%;
+  }
+  .item4 {
+    width: 40%;
+  }
+  .item5 {
+    width: 32%;
+  }
+  .item6 {
+    width: 28%;
+  }
+}
+</style>

src/pages/userSharing/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="wrap">
+    <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div :class="['banner-item', {'cursor-pointer': item.link.linkName !== '无'}]" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">{{ item.title }}</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
+
+    <div class="block share">
+      <div class="inner">
+        <div class="left">
+          <h6>用户共享</h6>
+          <p class="en">USERS SHARE</p>
+          <div class="des">       S³FEL是由深圳市政府投资建设的新一代自由电子激光大科学装置，将成为世界上顶级的先进光源大科学装置，是支撑深圳社会主义先行示范区和大湾区综合性国家科学中心建设的大型公共科技创新平台，对提升我国的科技影响力、集聚顶尖科技人才、推动科技创新具有非常重要的意义。 S³FEL以“高效运行、分类开放”为共享理念，向全世界科技界实行开放共享，促进信息、材料、能源、生物化学等多个基础科学领域的极速发展。</div>
+        </div>
+        <img class="pic" src="@/assets/images/userSharing/1.png" alt="">
+        <div class="card">
+          <p class="title">高效运行、分类开放</p>
+          <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="block gray">
+      <ul class="group">
+        <li>
+          <img src="@/assets/images/userSharing/2.png" alt="">
+          <h6>机时申请</h6>
+          <div class="des">向全世界科技界实行开放共享，多个基础科学领域的极速发展。</div>
+        </li>
+        <li>
+          <img src="@/assets/images/userSharing/3.png" alt="">
+          <h6>实时运行动态</h6>
+          <div class="des">促进信息、材料、能源、生物、环境、化学等多个基础科学领域的极速发展。</div>
+        </li>
+        <li>
+          <img src="@/assets/images/userSharing/4.png" alt="">
+          <h6>用户常见问题</h6>
+          <div class="des">常见问题答案，也能提问由深圳市政府投资建设的新一代自由</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Breadcrumb from '@/components/breadcrumb'
+import WOW from 'wow.js'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      routes: []
+    }
+  },
+  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)
+        }
+      }).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}`).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";
+.share {
+  position: relative;
+  .inner {
+    display: flex;
+    width: 1476px;
+  }
+  .left {
+    width: 509px;
+  }
+  h6 {
+    position: relative;
+    font-size: 48px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+  }
+  .en {
+    margin-top: -35px;
+    font-size: 45px;
+    font-family: AppleSystemUIFont;
+    color: #E4E4E4;
+  }
+  .des {
+    margin-top: 25px;
+    font-size: 18px;
+    color: #333;
+    line-height: 37px;
+    overflow: visible;
+  }
+  .pic {
+    width: 944px;
+    height: 568px;
+    border-top-left-radius: 20px;
+  }
+  .card {
+    position: absolute;
+    bottom: 145px;
+    left: 0;
+    width: 1068px;
+    height: 145px;
+    padding: 20px 0 0 11%;
+    background: #7BACC4;
+    border-radius: 0px 100px 0px 0px;
+    opacity: 0.88;
+  }
+  .title {
+    margin-bottom: 10px;
+    font-size: 40px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #fff;
+  }
+  .en-text {
+    font-size: 28px;
+    font-family: AppleSystemUIFont;
+    color: #fff;
+    letter-spacing: 2px;
+  }
+}
+.group {
+  display: flex;
+  justify-content: center;
+  li {
+    position: relative;
+    width: 420px;
+    height: 390px;
+    padding: 195px 0 0 32px;
+    margin-right: 20px;
+    color: #fff;
+  }
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  h6 {
+    position: relative;
+    font-size: 36px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+  .des {
+    position: relative;
+    margin-top: 16px;
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    line-height: 31px;
+  }
+}
+</style>

src/router/modules/device.js

@@ -0,0 +1,23 @@
+import BasicLayout from '@/layouts/home'
+const name = 'device'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      path: `beam`,
+      component: () => import(`@/pages/${name}/beam`),
+      meta: { title: '' }
+    },
+    {
+      path: `layout`,
+      component: () => import(`@/pages/${name}/layout`),
+      meta: { title: '' }
+    },
+    {
+      path: `super`,
+      component: () => import(`@/pages/${name}/super`),
+      meta: { title: '' }
+    }
+  ]
+};

src/router/modules/exp.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'exp'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};

src/router/modules/userSharing.js

@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'userSharing'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};