SFEL等

src/pages/sfel/index.vue

@@ -0,0 +1,926 @@
+<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 banner-block">
+      <div class="inner" v-if="modules[1].list[curColumn].articles.length">
+        <div class="title">
+          <h5>
+            新闻动态
+            <span class="sub"> NEWS CENTER</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
+          <img width="50%" height="410" :src="curArticle.titleImg" alt="">
+          <div class="right">
+            <h6>{{ curArticle.title }}</h6>
+            <div class="des" v-html="curArticle.mainBody"></div>
+            <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
+            <ul class="inds">
+              <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+            </ul>
+          </div>
+        </div>
+        
+        <ul class="card">
+          <template v-for="(item, i) in modules[1].list[curColumn].articles">
+            <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+              <img class="pic" :src="item.titleImg" alt="">
+              <div class="texts">
+                <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
+                <div class="des">{{ item.title }}</div>
+                <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block notice">
+      <div class="inner lg">
+        <div class="title">
+          <h5>
+            通知公告
+            <span class="sub"> ANNOUNCEMENTS</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <div class="shop-shows" v-if="articles.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
+            <el-carousel height="432px">
+              <el-carousel-item>
+                <div class="item">
+                  <img src="@/assets/images/survey3.png" alt="">
+                  <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                </div>
+              </el-carousel-item>
+              <el-carousel-item>
+                <div class="item">
+                  <img src="@/assets/images/survey3.png" alt="">
+                  <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                </div>
+              </el-carousel-item>
+              <el-carousel-item>
+                <div class="item">
+                  <img src="@/assets/images/survey3.png" alt="">
+                  <p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+            <div class="cards" style="margin-top: 18px;">
+              <h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6>
+              <div class="sum">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div>
+              <p class="date">2022/02/26</p>
+            </div>
+            <div class="card-wrap">
+              <div class="cards" style="margin-right: 18px">
+                <h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6>
+                <p class="date">2022/02/26</p>
+              </div>
+              <div class="cards">
+                <h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6>
+                <p class="date">2022/02/26</p>
+              </div>
+            </div>
+          </div>
+          <div class="right wow fadeInRight" data-wow-delay="0.5s">
+            <ul class="card-list">
+              <template v-for="(item, i) in articles">
+                <li v-if="i > 2" :key="i">
+                  <img class="pic" :src="item.titleImg" alt="">
+                  <div class="texts">
+                    <h6>{{ item.title }}</h6>
+                    <div class="des" v-html="item.mainBody"></div>
+                  </div>
+                </li>
+              </template>
+            </ul>
+            <div class="slide">
+              <img src="@/assets/images/survey3.png" alt="">
+              <p class="text">深圳综合粒子设施研究院与中国科学院</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block conference">
+      <div class="inner lg">
+        <div class="title">
+          <h5>
+            学术活动
+            <span class="sub"> ACADEMIC ACTIVITIES</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <div class="shows" v-if="articles1.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
+            <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+            <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
+          </div>
+          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
+            <template v-for="(item, i) in articles1">
+              <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
+                <img class="pic" :src="item.titleImg" alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
+                  <p v-if="item.keynoteSpeaker" class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                    {{ item.keynoteSpeaker }}
+                  </p>
+                  <p v-if="item.activityStartTime" class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
+                    Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                  </p>
+                  <p v-if="item.onlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
+                    Address: {{ item.onlineLocation }}
+                  </p>
+                </div>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="block media">
+      <div class="inner">
+        <div class="title">
+          <h5>
+            媒体采风
+            <span class="sub"> MEDIA COVERAGE</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <div class="media-wrap">
+          <div class="left">
+            <div class="slides">
+              <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px">
+                <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+                <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
+              </div>
+              <div class="item wow fadeInLeft" data-wow-delay="0.5s">
+                <img width="100%" height="100%" :src="articles1[0].titleImg" alt="">
+                <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
+              </div>
+            </div>
+            <ul class="list">
+              <li>
+                <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+              </li>
+              <li>
+                <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+              </li>
+              <li>
+                <h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
+                <div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
+              </li>
+            </ul>
+          </div>
+          <div class="right">
+            <img src="@/assets/images/survey3.png" alt="">
+            <div class="texts">
+              <h6>关于2021年度深圳综合粒子设施研究院采购公开表</h6>
+              <div class="des">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="block news">
+      <div class="inner">
+        <div class="title">
+          <h5>
+            出版物
+            <span class="sub"> PUBLICATIONS</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <ul class="news">
+          <!-- <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <div class="texts">
+              <h6>{{ item.title }}</h6>
+              <div class="des">{{ item.des }}</div>
+            </div>
+          </li> -->
+        </ul>
+      </div>
+    </div>
+    
+    <div class="block program">
+      <div class="inner">
+        <div class="title">
+          <h5>
+            工程进展
+            <span class="sub">PRROJECT PROGRESS</span>
+          </h5>
+          <span class="more">MORE</span>
+        </div>
+        <div class="slide">
+          <div class="texts">
+            <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
+            <div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段。对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标，面向国民经济主战场和世界科技前沿…</div>
+            <div class="meta">发表日期：2022.01.10 &emsp;浏览量：备份</div>
+          </div>
+          <img class="pic" src="@/assets/images/survey3.png" alt="">
+        </div>
+        <ul class="list">
+          <li>
+            <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+            <p class="date">2022.10.10</p>
+          </li>
+          <li>
+            <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+            <p class="date">2022.10.10</p>
+          </li>
+          <li>
+            <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
+            <p class="date">2022.10.10</p>
+          </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 {
+      curColumn: 0,
+      articles: [],
+      articles1: [],
+      curInd: 0,
+      curArticle: {},
+      timer: null
+    }
+  },
+  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'])
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
+
+          // 获取文章列表
+          const { list } = json[1]
+          if (list.length) {
+            list.map((e, i) => {
+              if (e.site && e.column.length) {
+                const id = e.column[e.column.length - 1]
+                e.id = id
+                if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
+                this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => {
+                  const list = Util.removeTag(data.slice(0, e.articleNum || 6))
+                  this.$set(e, 'articles', list)
+                  if (list.length && !i) this.curArticle = list[0]
+                }).catch(err => {})
+              } else {
+                this.$set(e, 'articles', [])
+              }
+            })
+          }
+          
+          if (json[3].form.column.length) {
+            const { column, site, articleNum } = json[3].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => {})
+          }
+          if (json[5].form.column.length) {
+            const { column, site, articleNum } = json[5].form
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
+            }).catch(err => {})
+          }
+
+          this.modules = json
+          this.carouselInterval()
+        }
+      }).catch(err => {})
+    },
+    // 自动轮播
+    carouselInterval() {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.curInd++
+        if (this.curInd > 2) this.curInd = 0
+        this.curArticle = this.modules[1].list[this.curColumn].articles[this.curInd]
+      }, 5000)
+    },
+    // 手动轮播切换
+    switchCarousel(i) {
+      if (this.curInd !== i) {
+        this.curInd = i
+        this.curArticle = this.modules[1].list[this.curColumn].articles[i]
+      }
+    },
+    // tab回调
+    tabChange(i) {
+      const { column } = this.modules[1].list[i]
+      if (column && column.length) {
+        const id = column[column.length - 1]
+        // 查询栏目详情
+        this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => {
+          const { typeId } = data
+          // 跳转链接
+          if (typeId === 2) {
+            let href = data.linkAddress
+            const cType = data.connectionType
+            if (cType !== 2) { // 非站外链接
+              const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+              // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+              const site = cType === 1 ?
+                (this.$route.query.siteId || this.site) :
+                data.siteSelection
+              if (ids[1]) { // 文章
+                href = '/article?id=' + ids[1]
+              } else { // 栏目
+                const columnIds = ids[0].split(',')
+                href = '/column?id=' + columnIds[columnIds.length - 1]
+              }
+              href = this.$router.resolve(href + '&siteId=' + site).href
+            }
+            // 是否新窗口打开
+            if (data.isOpen) {
+              window.open(href)
+            } else {
+              location.href = href
+            }
+          } else if (typeId === 3) {
+            // 长页栏目直接获取path
+            this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
+          } else {
+            this.curColumn = i
+          }
+        }).catch(err => {})
+      } else {
+        this.curColumn = i
+      }
+    },
+    // 跳转more
+    toMore() {
+      const { column } = this.modules[1].list[this.curColumn]
+      column.length && this.$router.push(`/column?id=${column[column.length - 1]}`)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-bottom: 25px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid #ddd;
+  h5 {
+    padding-left: 16px;
+    font-size: 36px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 1;
+    border-left: 6px solid #2B96EF;
+  }
+  .sub {
+    font-size: 22px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #AFB7BF;
+  }
+  .more {
+    font-size: 14px;
+    color: #666;
+    cursor: pointer;
+  }
+}
+.lg {
+  width: 1505px;
+}
+/deep/.articles {
+  width: 50%;
+  .el-carousel__indicators--horizontal {
+    bottom: 20px;
+    left: 804px;
+  }
+}
+.banner-block {
+  background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat;
+}
+.banner {
+  display: flex;
+  cursor: pointer;
+  .pic {
+    width: 700px;
+    height: 380px;
+  }
+  .right {
+    position: relative;
+    width: 50%;
+    padding: 50px 50px 30px;
+    background: #1583FF;
+    color: #fff;
+    &:hover {
+      background: #465f85;
+      h6, .des, .meta {
+        color: #fff;
+        transform: translateY(15px);
+      }
+    }
+  }
+  .inds {
+    position: absolute;
+    bottom: 40px;
+    left: 60px;
+    display: flex;
+    li {
+      width: 10px;
+      height: 10px;
+      margin-right: 12px;
+      background: #FFFFFF;
+      border-radius: 50%;
+      transition: .2s;
+      &.active {
+        width: 30px;
+        background: rgba(255,255,255,0.3);
+        border-radius: 5px;
+      }
+    }
+  }
+  h6 {
+    font-size: 24px;
+    transition: .3s;
+  }
+  .des {
+    margin: 30px 0;
+    font-size: 16px;
+    line-height: 24px;
+    transition: .3s;
+  }
+  .meta {
+    font-size: 16px;
+    transition: .3s;
+  }
+}
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 40px;
+  li {
+    width: calc((100% - 56px) / 3);
+    margin-right: 28px;
+    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
+    border-radius: 6px;
+    transition: .3s;
+    &:hover {
+      transform: scale(1.05);
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .pic {
+    width: 100%;
+    height: 240px;
+  }
+  .texts {
+    padding: 40px 30px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #666;
+  }
+  .des {
+    margin: 10px 0;
+    font-size: 20px;
+    font-family: SFProDisplay;
+    font-weight: 500;
+    color: #333;
+    line-height: 28px;
+  }
+  .arrow {
+    width: 36px;
+  }
+}
+
+.notice {
+  background: url(../../assets/images/sfel/3.png) 0 0/cover no-repeat;
+}
+.shop-shows {
+  display: flex;
+  .left {
+    width: 660px;
+    margin-right: 20px;
+    .item {
+      position: relative;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 20px;
+        font-size: 18px;
+        color: #fff;
+        line-height: 59px;
+        background-color: rgba(0, 0, 0, 0.57);
+      }
+    }
+    .card-wrap {
+      display: flex;
+      margin-top: 18px;
+    }
+    .cards {
+      padding: 20px;
+      background-color: #fff;
+      h6 {
+        margin-bottom: 10px;
+        font-size: 18px;
+        color: #48525E;
+      }
+      .sum {
+        font-size: 14px;
+        color: #6D7C8E;
+      }
+      .date {
+        margin-top: 24px;
+        font-size: 14px;
+        color: #C4CCD7;
+      }
+    }
+    h6 {
+      font-size: 24px;
+      color: #272727;
+    }
+    .des {
+      margin-top: 10px;
+      font-size: 16px;
+      color: #666;
+      line-height: 30px;
+    }
+  }
+  .right {
+    width: 824px;
+  }
+  .card-list {
+    li {
+      display: flex;
+      align-items: center;
+      padding: 24px;
+      margin-bottom: 18px;
+      background-color: #fff;
+      transition: .3s;
+      &:hover {
+        transform: scale(1.05);
+      }
+    }
+    .pic {
+      width: 116px;
+      height: 85px;
+      margin-right: 28px;
+    }
+    .texts {
+      width: 504px;
+      margin-right: 60px;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1583FF;
+    }
+    .des {
+      font-size: 16px;
+      color: #666;
+      line-height: 26px;
+      -webkit-line-clamp: 2;
+    }
+  }
+  .slide {
+    position: relative;
+    height: 284px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 12px;
+      line-height: 59px;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      background-color: rgba(0, 0, 0, 0.57);
+    }
+  }
+}
+.conference {
+  background: url(../../assets/images/sfel/4.png) 0 0/cover no-repeat;
+  .shows {
+    display: flex;
+  }
+  .left {
+    position: relative;
+    width: 688px;
+    height: 688px;
+    margin-right: 20px;
+    cursor: pointer;
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 12px;
+      line-height: 59px;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      background-color: rgba(0, 0, 0, 0.57);
+    }
+  }
+  .card-list {
+    width: 784px;
+    li {
+      display: flex;
+      align-items: center;
+      padding: 14px;
+      margin-bottom: 21px;
+      background-color: #fff;
+      cursor: pointer;
+      transition: .3s;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &:hover {
+        transform: translateX(20px);
+      }
+    }
+    .pic {
+      width: 188px;
+      height: 188px;
+      margin-right: 36px;
+    }
+    h6 {
+      margin-bottom: 10px;
+      font-size: 20px;
+      color: #333;
+    }
+    .sum {
+      font-size: 16px;
+      color: #666;
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+    .icon {
+      margin-right: 5px;
+    }
+  }
+}
+
+.media {
+  background: #fff;
+  .media-wrap {
+    display: flex;
+  }
+  .left {
+    width: 55%;
+    margin-right: 1%;
+    .slides {
+      display: flex;
+      margin-bottom: 20px;
+    }
+    .item {
+      position: relative;
+      width: 366px;
+      height: 197px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 27px;
+        line-height: 48px;
+        font-size: 16px;
+        color: #FFFFFF;
+        @include ellipsis;
+        background-color: rgba(0, 0, 0, 0.49);
+      }
+    }
+    .list {
+      padding: 34px 36px;
+      background: #fff;
+      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+      li {
+        margin-bottom: 41px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      h6 {
+        margin-bottom: 17px;
+        font-size: 20px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #272727;
+        line-height: 20px;
+        text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
+      }
+      .des {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+  .right {
+    width: 44%;
+    box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
+    img {
+      width: 100%;
+      height: 422px;
+    }
+    .texts {
+      padding: 40px 28px;
+      background: #fff;
+    }
+    h6 {
+      font-size: 24px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #272727;
+      line-height: 39px;
+      text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
+    }
+    .des {
+      margin-top: 16px;
+      font-size: 16px;
+      color: #666;
+    }
+  }
+}
+.news {
+  background: url(../../assets/images/sfel/5.png) (0 504px)/auto no-repeat,
+              url(../../assets/images/sfel/6.png) (bottom right)/auto no-repeat;
+  .inner {
+    width: 1400px;
+  }
+}
+.news {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  li {
+    position: relative;
+    width: calc((100% - 56px) / 3);
+    padding: 11px;
+    margin-right: 28px;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
+    border-radius: 10px;
+    transition: .3s;
+    &:hover {
+      transform: translateY(20px);
+    }
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:hover {
+      color: #fff;
+      background-color: #0252D9;
+    }
+  }
+  img {
+    width: 100%;
+    height: 481px;
+  }
+  .texts {
+    padding: 0 18px 50px;
+  }
+  h6 {
+    margin: 35px 0 12px;
+    font-size: 24px;
+    line-height: 33px;
+  }
+  .des {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+.program {
+  background: #fff;
+  .slide {
+    display: flex;
+    margin-bottom: 14px;
+  }
+  .texts {
+    width: 51%;
+    padding: 56px;
+    background: #FBFBFB;
+    h6 {
+      font-size: 24px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+    }
+    .des {
+      margin: 35px 0 25px;
+      font-size: 16px;
+      color: #666;
+      line-height: 32px;
+    }
+    .meta {
+      font-size: 14px;
+      color: #666;
+    }
+  }
+  .pic {
+    width: 49%;
+    height: 430px;
+  }
+  .list {
+    display: flex;
+    li {
+      width: calc((100% - 44px) / 3);
+      padding: 36px 22px;
+      margin-right: 14px;
+      background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat;
+      &: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);
+      }
+    }
+    .des {
+      margin-bottom: 30px;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 30px;
+    }
+    .date {
+      font-size: 16px;
+      font-family: LaoSangamMN;
+      color: #FFFFFF;
+    }
+  }
+}
+@media (max-width: 1520px) {
+  .lg {
+    width: 98%;
+  }
+}
+</style>

src/pages/survey/index.vue

@@ -0,0 +1,120 @@
+<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>
+
+    <ul class="tabs wow fadeInLeft">
+      <template v-for="(item, i) in tabs">
+        <li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
+      </template>
+    </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: [],
+      active: 0,
+      tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
+    }
+  },
+  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 => {})
+    },
+    // tab回调
+    tabChange(i) {
+      this.active = i
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import "../../styles/page/page.scss";
+.wrap {
+  background: url(../../assets/images/survey1.png) (0 559px)/auto no-repeat,
+              url(../../assets/images/survey2.png) (bottom right)/auto no-repeat;
+}
+.tabs {
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26);
+  li {
+    padding: 25px 19px;
+    margin: 0 10px;
+    font-size: 22px;
+    color: #333;
+    border-bottom: 4px solid transparent;
+    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
+    cursor: pointer;
+    &.active {
+      color: #1583FF;
+      border-bottom-color: #1583FF;
+    }
+  }
+}
+</style>

src/router/modules/sfel.js

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

src/router/modules/survey.js

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