添加【单页栏目】长页

src/layouts/navbar/index.vue

@@ -189,7 +189,7 @@ $height: 89px;
     span {
       font-size: 1rem;
       font-weight: 600;
-      text-shadow: 0px 2px 2px rgba(185, 185, 185, .6);
+      text-shadow: 0px 2px 1px rgba(185, 185, 185, .5);
     }
 
     &:hover {

src/pages/singlePage/index.vue

@@ -0,0 +1,476 @@
+<template>
+  <div class="wrap">
+    <template v-if="modules.length">
+      <el-carousel class="carousel fadeInUp" :interval="6000" height="230px"
+        :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 v-if="!item.mediaType || isImg(item.mediaType)" class="pic"
+              :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+            <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
+              <source :src="item.pic" type="video/mp4">
+              您的浏览器不支持 video 标签。
+            </video>
+            <div class="text-wrap">
+              <div class="qrcodes fadeInUp">
+                <div v-if="item.weixinPic1" class="qrcode">
+                  <img width="103" :src="item.weixinPic1" alt="">
+                  <p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p>
+                </div>
+                <div v-if="item.weixinPic2" class="qrcode m-l-30">
+                  <img width="103" :src="item.weixinPic2" alt="">
+                  <p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p>
+                </div>
+              </div>
+              <div class="text" v-html="item.des"></div>
+            </div>
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+
+      <div class="block-bg">
+        <div class="block">
+          <div class="inner column-wrap">
+            <div class="item m-r-20">
+              <div class="title wow fadeInUp">
+                <h5>
+                  {{ modules[1].form.title }}
+                  <span class="sub">{{ modules[1].form.subTitle }}</span>
+                </h5>
+                <span class="more" @click="toAll(modules[2].form)">MORE</span>
+              </div>
+              <ul class="columns">
+                <li v-for="(item, i) in articles" :key="i">
+                  <p class="column-name" @click="toArtice(item, modules[2].form)">{{ item.title }}</p>
+                  <span class="meta">{{ item.releaseTime }}</span>
+                </li>
+              </ul>
+            </div>
+            <div class="item">
+              <div class="title wow fadeInUp">
+                <h5>
+                  {{ modules[3].form.title }}
+                  <span class="sub">{{ modules[3].form.subTitle }}</span>
+                </h5>
+                <span class="more" @click="toAll(modules[4].form)">MORE</span>
+              </div>
+              <ul class="columns">
+                <li v-for="(item, i) in articles1" :key="i">
+                  <p class="column-name" @click="toArtice(item, modules[4].form)">{{ item.title }}</p>
+                  <span class="meta">{{ item.releaseTime }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="block m-t-10 m-b-10">
+          <div class="inner">
+            <ul class="entry">
+              <template v-for="(item, i) in modules[5].list">
+                <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
+                  @click="openLink(item, i)">
+                  <img class="icon" :src="item.pic" alt="">
+                  <p class="text">{{ item.title }}</p>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+
+        <div class="block">
+          <div class="inner links-inner">
+            <h6 class="link-title">友情链接</h6>
+            <ul class="links">
+              <template v-for="(item, i) in modules[6].list">
+                <li v-if="item.isEnable" :key="i">
+                  <el-link class="link" type="primary" @click="openLink(item, i)">{{ item.title }}</el-link>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+import $ from 'jquery'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      isImg: Util.isImg,
+      articles: [],
+      articles1: [],
+    }
+  },
+  mounted () { },
+  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 138 ~ this.$post ~ this.modules", this.modules)
+
+          const promises = []
+          // 获取文章列表
+          if (json[2].form.column.length) {
+            const { column, articleNum } = json[2].form
+            promises.push(new Promise((resolve) => {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles = data.slice(0, articleNum || 8)
+                resolve()
+              }).catch(err => { })
+            }))
+          }
+
+          if (json[4].form.column.length) {
+            const { column, articleNum } = json[4].form
+            promises.push(new Promise((resolve) => {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles1 = data.slice(0, articleNum || 8)
+                resolve()
+              }).catch(err => { })
+            }))
+          }
+
+          // 恢复上次从本页面跳转出去时的位置
+          Promise.all(promises).then(_ => {
+            this.$nextTick(() => {
+              const { scrollTop } = this.$store.state.content
+              if (scrollTop) {
+                this.hide = true
+                $(window).scrollTop(scrollTop)
+                this.$store.commit('content/setScrollTop', 0)
+              }
+            })
+          })
+          // this.carouselInterval()
+        }
+      }).catch(err => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+
+.carousel {
+  .pic {
+    height: 100%;
+    background-position: center center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+
+  /deep/.el-carousel__container {
+    height: 100%;
+  }
+
+  .text-wrap {
+    position: absolute;
+    top: 55%;
+    left: 12%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    transform: translateY(-50%);
+  }
+
+  .qrcodes {
+    display: flex;
+    margin-right: 50px;
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #fff;
+      white-space: nowrap;
+    }
+  }
+}
+
+
+.block {
+  padding: 10px 0;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.9rem;
+    border-bottom: 1px solid #ddd;
+    align-items: center;
+
+    h5 {
+      padding-left: 6px;
+      font-size: 1.2rem;
+      font-weight: 500;
+      color: #333;
+      line-height: 1;
+      border-left: 3px solid #2b96ef;
+    }
+
+    .sub {
+      font-size: 0.88rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #afb7bf;
+    }
+
+    .more {
+      font-size: 0.6rem;
+      color: #666;
+      cursor: pointer;
+    }
+  }
+}
+
+.block-bg {
+  min-height: calc(100vh - 320px);
+  background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
+}
+
+.column-wrap {
+  display: flex;
+
+  .item {
+    width: calc(100% - 20px);
+    padding: 14px;
+    background-color: #fff;
+    box-shadow: 0 0 7px rgba(239, 239, 239, .8);
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 15px;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed #cbcbcb;
+  }
+
+  .column-name {
+    font-size: .9rem;
+    color: #333;
+    cursor: pointer;
+
+    &:hover {
+      color: $main-color;
+    }
+  }
+
+  .meta {
+    font-size: .8rem;
+  }
+}
+
+.links-inner {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #fbfbfb;
+  border-radius: 4px;
+
+  .link-title {
+    position: relative;
+    padding: 10px 12px;
+    font-size: 1rem;
+    line-height: 1;
+    white-space: nowrap;
+    color: #fff;
+    background-color: $main-color;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 100%;
+      border: 18px solid transparent;
+      border-left-color: $main-color;
+    }
+  }
+
+  .links {
+    display: inline-flex;
+    flex: 1;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-left: 20px;
+    font-size: .9rem;
+
+    .link {
+      display: block;
+      max-width: 200px;
+      @include ellipsis;
+    }
+  }
+}
+
+.inner {
+  width: 1200px;
+}
+
+.entry {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  li {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  img {
+    max-width: 40px;
+    object-fit: cover;
+  }
+
+  .text {
+    margin-top: 10px;
+    font-size: 0.9rem;
+    color: #48525e;
+  }
+}
+
+.tools {
+  z-index: 10;
+  position: fixed;
+  top: 30vh;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  li {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 22px;
+    margin-bottom: 1px;
+    font-size: 20px;
+    color: #0084ff;
+    line-height: 56px;
+    background-color: rgba(19, 18, 19, 0.94);
+    cursor: pointer;
+    transition: 0.3s;
+
+    &:before {
+      content: '';
+      width: 28px;
+      height: 28px;
+      margin-right: 7px;
+      background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat;
+    }
+
+    &:nth-child(2):before {
+      background-image: url(https://huorantech.com/images/iasf/icon2.png);
+    }
+
+    &:nth-child(2):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon2-1.png);
+    }
+
+    &:nth-child(3):before {
+      background-image: url(https://huorantech.com/images/iasf/icon3.png);
+    }
+
+    &:nth-child(3):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon3-1.png);
+    }
+
+    &:nth-child(4):before {
+      background-image: url(https://huorantech.com/images/iasf/icon4.png);
+    }
+
+    &:nth-child(4):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon4-1.png);
+    }
+
+    &:hover {
+      justify-content: flex-start;
+      // width: 192px;
+      padding-right: 4rem;
+      color: #fff;
+      background-color: rgba(1, 129, 247, 0.94);
+
+      &:before {
+        background-image: url(https://huorantech.com/images/iasf/icon1-1.png);
+      }
+    }
+  }
+
+  .icon {
+    margin-right: 10px;
+  }
+}
+
+
+@media (max-width: 1200px) {
+  .carousel .texts {
+    left: 5%;
+    right: 5%;
+  }
+
+  .card {
+    flex-direction: column;
+
+    li {
+      margin-top: 1.25rem;
+      width: 100%;
+    }
+  }
+
+  .news {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  .news-banner {
+    flex-direction: column;
+
+    .pic-wrap,
+    .right {
+      width: 100%;
+    }
+  }
+
+  .entry {
+    // flex-direction: column;
+    flex-wrap: wrap;
+
+    li {
+      width: 48% !important;
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>

src/pages/team/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="wrap p-b-30">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,18 +10,13 @@
     <div class="content">
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable"
+          <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
-              :key="i"
+            @click="openLink(item)">
-              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+            <img :src="item.pic" alt="" class="pic">
-              @click="openLink(item)">
-            <img :src="item.pic"
-                 alt=""
-                 class="pic">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <p class="job">{{ item.subTitle }}</p>
-              <div class="text"
+              <div class="text" v-html="item.des"></div>
-                   v-html="item.des"></div>
             </div>
           </li>
         </template>
@@ -77,68 +70,84 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .content {
-    display: flex;
+  display: flex;
-    width: 1200px;
+  width: 1200px;
-    justify-content: space-between;
+  justify-content: space-between;
-    .left {
+
-        width: calc(100% - 300px);
+  .left {
+    width: calc(100% - 300px);
+  }
+
+  .list {
+    li {
+      display: flex;
+      align-items: center;
+      padding-bottom: 30px;
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ddd;
+
+      &:last-child {
+        border-bottom: 0;
+      }
     }
-    .list {
+
-        li {
+    .pic {
-            display: flex;
+      width: 224px;
-            align-items: center;
+      height: 268px;
-            padding-bottom: 30px;
+      margin-right: 25px;
-            margin-bottom: 30px;
+      object-fit: cover;
-            border-bottom: 1px solid #ddd;
+    }
-            &:last-child {
+
-                border-bottom: 0;
+    .texts {
-            }
+      width: calc(100% - 249px);
-        }
+    }
-        .pic {
+
-            width: 224px;
+    h6 {
-            height: 268px;
+      font-size: 1.2rem;
-            margin-right: 25px;
+      font-family: PingFangSC-Medium, PingFang SC;
-            object-fit: cover;
+      color: #333;
-        }
-        h6 {
-            font-size: 1.2rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            color: #333;
-        }
-        .job {
-            margin: 16px 0;
-            font-size: 1rem;
-            font-family: PingFangSC-Regular, PingFang SC;
-            color: #333;
-        }
-        .text {
-            font-size: 1rem;
-            font-family: PingFangSC-Regular, PingFang SC;
-            color: #333;
-        }
     }
+
+    .job {
+      margin: 16px 0;
+      font-size: 1rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+    }
+
+    .text {
+      font-size: 1rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+    }
+  }
 }
+
 @media (max-width: 1200px) {
-    .content {
+  .content {
-        width: 95%;
+    width: 95%;
-        flex-direction: column;
+    flex-direction: column;
-        .left,
+
-        .right {
+    .left,
-            width: 100%;
+    .right {
-        }
+      width: 100%;
     }
+  }
 }
+
 @media (max-width: 640px) {
-    .content {
+  .content {
-        .list {
+    .list {
-            li {
+      li {
-                flex-direction: column;
+        flex-direction: column;
-            }
+      }
-            .pic {
+
-                margin: 0 0 20px 0;
+      .pic {
-            }
+        margin: 0 0 20px 0;
-        }
+      }
     }
+  }
 }
 </style>

src/router/modules/singlePage.js

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