FE_IASF_client/src/pages/home/index.vue

<template>
  <div class="wrap"
       v-if="modules.length>=1">
    <el-carousel class="carousel"
                 :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">
          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
               width="100%"
               :src="item.pic"
               alt=""
               @click="openLink(item)">
          <!-- <div class="texts">
            <h6>{{ item.title }}</h6>
            <p class="text">{{ item.des }}</p>
          </div> -->
        </el-carousel-item>
      </template>
    </el-carousel>

    <div class="block">
      <div class="inner">
        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
        <ul class="card">
          <li class="wow fadeInDown"
              data-wow-delay="0.2s">
            <img class="pic"
                 :src="modules[2].form.pic"
                 alt="">
            <div class="texts">
              <h6>{{ modules[2].form.title }}</h6>
              <p class="des">{{ modules[2].form.des }}</p>
              <img v-if="modules[2].form.link"
                   src="@/assets/images/arrow.png"
                   alt=""
                   :class="{'arrow': isLink(modules[2].form.link.linkName)}"
                   @click="openLink(modules[2].form)">
            </div>
          </li>
          <li class="wow fadeInDown"
              data-wow-delay="0.6s">
            <img class="pic"
                 :src="modules[3].form.pic"
                 alt="">
            <div class="texts">
              <h6>{{ modules[3].form.title }}</h6>
              <p class="des">{{ modules[3].form.des }}</p>
              <img src="@/assets/images/arrow.png"
                   alt=""
                   :class="{'arrow': isLink(modules[3].form.link.linkName)}"
                   @click="openLink(modules[3].form)">
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="block news-block">
      <div class="inner">
        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
        <ul class="news">
          <li class="wow fadeInDown"
              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
              v-for="(item, i) in articles"
              :key="i"
              @click="toArtice(item, modules[5].form)">
            <img :src="item.titleImg"
                 alt="">
            <div class="texts">
              <h6>{{ item.title }}</h6>
              <div class="des"
                   v-html="item.mainBody"></div>
              <span class="meta">{{ item.releaseTime }}</span>
            </div>
          </li>
        </ul>
        <div class="all-link"
             @click="toAll(modules[5].form)">
          <span>{{$t('column.all')}} <img class="icon"
                 src="@/assets/images/arrow.png"
                 alt=""></span>
        </div>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
        <ul class="people">
          <template v-for="(item, i) in modules[7].list">
            <li v-if="item.isEnable"
                :key="i"
                class="wow fadeInDown"
                :data-wow-delay="(0.4 * i).toFixed(1) + 's'">
              <img class="pic"
                   :src="item.pic"
                   alt="">
              <div class="texts">
                <h6>{{ item.title }}</h6>
                <p class="des">{{ item.des }}</p>
                <img src="@/assets/images/arrow.png"
                     alt=""
                     :class="{'arrow': isLink(item.link.linkName)}"
                     @click="openLink(item)">
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>

    <div class="about"
         :class="{'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName)}"
         @click="openLink(modules[8].form)">
      <div class="inner">
        <img class="pic wow fadeInUp"
             src="@/assets/images/about.png"
             alt="">
        <div class="line wow fadeInUp"
             data-wow-delay="0.4s"></div>
        <div class="text wow fadeInUp"
             data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
        <div class="des wow fadeInDown"
             data-wow-delay="1s"
             v-html="modules[8].form.des"></div>
      </div>
    </div>

    <div class="block"
         style="padding-bottom: 0">
      <div class="inner">
        <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
        <ul class="stat">
          <li>
            <!-- <p class="num">{{ modules[10].form.title }}</p> -->
            <animate-number class="num"
                            ref="num1"
                            from="0"
                            :to="modules[10].form.title"
                            duration="3000" />
            <p class="text">{{ modules[10].form.des }}</p>
          </li>
          <li>
            <animate-number class="num"
                            ref="num2"
                            from="0"
                            :to="modules[11].form.title"
                            duration="3000" />
            <p class="text">{{ modules[11].form.des }}</p>
          </li>
          <li>
            <animate-number class="num"
                            ref="num3"
                            from="0"
                            :to="modules[12].form.title"
                            duration="3000" />
            <p class="text">{{ modules[12].form.des }}</p>
          </li>
          <li class="wow fadeInRight"
              data-wow-delay="0.9s">
            <p class="num">{{ modules[13].form.title }}</p>
            <p class="text">{{ modules[13].form.des }}</p>
          </li>
          <li class="wow fadeInRight"
              data-wow-delay="1.2s">
            <p class="num">{{ modules[14].form.title }}</p>
            <p class="text">{{ modules[14].form.des }}</p>
          </li>
          <li class="wow fadeInRight"
              data-wow-delay="1.5s">
            <p class="num">{{ modules[15].form.title }}</p>
            <p class="text">{{ modules[15].form.des }}</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 {
      articles: [],
    }
  },
  beforeDestroy () {
    // 移除滚动事件
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    new WOW().init()
    window.addEventListener('scroll', this.handleScroll)
  },
  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('JSON=>', json)
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)

          // 获取文章列表
          const { column, site, articleNum } = json[5].form
          if (column.length) {
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
            }).catch(err => { })
          }
        }
      }).catch(err => { })
    },
    // 监听页面滚动，到了底部后开始数字滚动动画
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 6350) {
        window.removeEventListener('scroll', this.handleScroll) // 展示完动画后移除滚动监听
        for (let i = 1; i < 5; i++) {
          this.$refs['num' + i].start()
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.carousel {
    height: 100vh;
    img {
        height: 100%;
        object-fit: cover;
    }
    /deep/.el-carousel__container {
        height: 100vh;
    }
    .texts {
        position: absolute;
        bottom: 20%;
        left: 120px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        h6,
        .text {
            padding: 20px 15px;
            color: #fff;
        }
        h6 {
            margin-bottom: 30px;
            font-size: 68px;
            font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
        }
        .text {
            font-size: 24px;
            font-family: AppleSystemUIFont;
        }
    }
}
.block {
    padding-top: 3.15rem;
    .b-title {
        font-size: 2.25rem;
    }
    .intro {
        font-size: 1.35rem;
        margin-bottom: 3.6rem;
    }
}
.card {
    display: flex;
    justify-content: space-between;
    li {
        width: 47%;
        transition: 0.3s;
        &:hover {
            margin-top: -0.9375rem;
        }
    }
    .pic {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .texts {
        padding-left: 1.375rem;
        margin-top: 3rem;
        border-left: 2px solid #dfe4e9;
    }
    h6 {
        min-height: 4.5rem;
        margin-bottom: 1.56rem;
        line-height: 2rem;
        font-size: 1.368rem;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .des {
        font-size: 1.024rem;
        color: #222;
        line-height: 30px;
    }
}

.news-block {
    background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
}
.news {
    display: flex;
    flex-wrap: wrap;
    li {
        display: inline-flex;
        width: calc((100% - 35px) / 2);
        padding: 2.125rem;
        margin-bottom: 1.75rem;
        background-color: #fff;
        cursor: pointer;
        overflow: hidden;
        transition: 0.3s;
        &:nth-child(odd) {
            margin-right: 1.75rem;
        }
        &:hover {
            transform: scale(1.05);
        }
    }
    img {
        width: 12.5rem;
        height: 7.81rem;
        object-fit: cover;
    }
    .texts {
        width: calc(100% - 220px);
        margin-left: 1.25rem;
    }
    h6 {
        font-size: 1.28rem;
        color: #0648a8;
        @include ellipsis;
    }
    .des {
        margin: 14px 0;
        font-size: 1.14rem;
        color: #333;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .meta {
        font-size: 1.14rem;
        color: #999;
    }
}

.people {
    li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 7.87rem;
        &:nth-child(even) {
            flex-direction: row-reverse;
        }
        &:hover {
            .pic {
                transform: scale(1.05);
            }
            .texts {
                transform: translateY(15px);
            }
        }
    }
    .pic {
        width: 47%;
        height: auto;
        transition: 0.3s;
        object-fit: cover;
    }
    .texts {
        width: 48%;
        padding-top: 8.5rem;
        transition: 0.3s;
    }
    h6 {
        font-size: 1.8rem;
    }
    .des {
        margin: 20px 0 10px;
        font-size: 1.2rem;
        color: #020202;
        line-height: 30px;
    }
}

.glance {
    padding-bottom: 3.125rem;
    font-size: 2.81rem;
    font-weight: bold;
    font-family: SFProDisplay-Bold, SFProDisplay;
    text-align: center;
    border-bottom: 1px solid #dedede;
}
.stat {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 3.75rem;
    li {
        width: 27%;
        margin-bottom: 50px;
        transition: 0.3s;
        &:hover {
            transform: translateX(20px);
        }
    }
    .num {
        margin-bottom: 10px;
        font-family: toppan;
        font-size: 2.7rem;
        font-weight: 800;
        color: #035ce1;
        line-height: 49px;
    }
    .text {
        font-size: 1.08rem;
        margin-top: 1rem;
        line-height: 1.8rem;
    }
}
.about {
    padding: 3.848rem 0 9.9rem;
    background: url(../../assets/images/about-bg.png) no-repeat center center;
    // background-size: 100% 100%;
    .pic {
        object-fit: cover;
    }
    .line {
        display: flex;
        align-items: center;
        margin: 3.125rem 0 1.875rem;
        width: 5.5rem;
        height: 6px;
        background-color: #fff;
        &:after {
            content: '';
            width: 6px;
            height: 6px;
        }
    }
    .text {
        font-size: 1.35rem;
        color: #fff;
    }
    .des {
        display: block;
        padding: 2.375rem 3.75rem;
        margin-top: 3.78rem;
        font-size: 1.35rem;
        color: #fff;
        line-height: 42px;
        text-align: center;
        background: rgba(111, 69, 36, 0.56);
        border-radius: 17px;
        overflow: visible;
        transition: 0.3s;
        &:hover {
            background: rgba(239, 126, 10, 0.56);
            transform: translateY(10px);
        }
    }
}

@media (min-width: 280px) and (max-width: 1200px) {
    .carousel {
        height: 21.87rem;
        img {
            height: 100%;
        }
        /deep/.el-carousel__container {
            height: 21.87rem;
        }
    }
    .about {
        .des {
            font-size: 1rem;
        }
    }
    .el-carousel__item {
        height: 21.87rem;
        img {
            height: 21.87rem;
        }
    }
    .block {
        padding: 3.125rem 0;
        .inner {
            width: 95%;
            margin: 0 auto;
            .b-title {
                font-size: 2rem;
                margin-bottom: 1.25rem;
            }
            .wow {
                font-size: 1.5rem;
            }
            .intro {
                margin-bottom: 1.25rem;
            }
            .card {
                flex-direction: column;
                li {
                    margin-top: 1.25rem;
                    width: 100%;
                }
            }
            .news {
                flex-direction: column;
                li {
                    width: 100%;
                    margin-bottom: 15px;
                    img {
                        width: 10rem;
                    }
                    .texts {
                        width: calc(100% - 10rem);
                    }
                }
            }
            .people {
                li {
                    flex-direction: column;
                    margin-bottom: 1.25rem;
                    .pic {
                        width: 100%;
                        height: 21.875rem;
                    }
                    .texts {
                        padding-top: 1.25rem;
                        width: 100%;
                    }
                }
            }
        }
    }
    .card .pic {
        height: 20rem;
    }
    .about {
        width: 100%;
        padding: 1.25rem 0 1.875rem;
        .inner {
            width: 95%;
            margin: 0 auto;
            .line {
                margin: 1.25rem 0 1.25rem;
            }
            .des {
                margin-top: 1.25rem;
                padding: 10px 1.25rem;
            }
        }
    }
    .glance {
        padding-bottom: 1.25rem;
    }
    .stat {
        flex-direction: column;
        li {
            width: 100%;
            text-align: center;
        }
    }
}

@media (min-width: 751px) and (max-width: 920px) {
    .news {
        flex-direction: column;
        li {
            width: 100%;
            margin-bottom: 0.9375rem;
            img {
                width: 10rem;
            }
            .texts {
                width: calc(100% - 10rem);
            }
        }
    }
}

@media (min-width: 320px) and (max-width: 375px) {
    .wrap {
        /deep/ .el-carousel {
            height: 15rem;
        }
        /deep/ .el-carousel__container {
            height: 15rem;
        }
        /deep/ .el-carousel__item {
            height: 15rem;
            img {
                height: 15rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                li {
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    .pic {
                        height: auto;
                    }
                }
            }
        }
    }
    .about {
        .inner {
            .des {
                line-height: 1.5rem;
            }
        }
    }
}
@media (min-width: 375px) and (max-width: 480px) {
    .wrap {
        /deep/ .el-carousel {
            height: 15rem;
        }
        /deep/ .el-carousel__container {
            height: 15rem;
        }
        /deep/ .el-carousel__item {
            height: 15rem;
            img {
                height: 15rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                li {
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    .pic {
                        height: auto;
                    }
                }
            }
        }
    }
    .about {
        .inner {
            .des {
                line-height: 1.5rem;
            }
        }
    }
}
@media (min-width: 480px) and (max-width: 640px) {
    .wrap {
        /deep/ .el-carousel {
            height: 18rem;
        }
        /deep/ .el-carousel__container {
            height: 18rem;
        }
        /deep/ .el-carousel__item {
            height: 18rem;
            img {
                height: 18rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                li {
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    .pic {
                        height: auto;
                    }
                }
            }
            .about {
                .des {
                    line-height: 1.5rem;
                }
            }
        }
    }
}
@media (min-width: 640px) and (max-width: 768px) {
    .wrap {
        /deep/ .el-carousel {
            height: 20rem;
        }
        /deep/ .el-carousel__container {
            height: 20rem;
        }
        /deep/ .el-carousel__item {
            height: 20rem;
            img {
                height: 20rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                li {
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    .pic {
                        height: auto;
                    }
                }
            }
            .about {
                .des {
                    line-height: 1.2rem;
                }
            }
            .stat {
                flex-direction: row;
                li {
                    width: 30%;
                }
            }
        }
    }
}
@media (min-width: 768px) and (max-width: 980px) {
    .wrap {
        /deep/ .el-carousel {
            height: 22rem;
        }
        /deep/ .el-carousel__container {
            height: 22rem;
        }
        /deep/ .el-carousel__item {
            height: 22rem;
            img {
                height: 22rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                flex-direction: row;
                li {
                    width: 47%;
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    flex-direction: row;
                    &:nth-child(2) {
                        flex-direction: row-reverse !important;
                    }
                    .pic {
                        width: 47%;
                        height: auto;
                    }
                    .texts {
                        width: 48%;
                    }
                }
            }
            .about {
                .des {
                    line-height: 1.2rem;
                }
            }
            .stat {
                flex-direction: row;
                li {
                    width: 30%;
                }
            }
        }
    }
}
@media (min-width: 980px) and (max-width: 1200px) {
    .wrap {
        /deep/ .el-carousel {
            height: 25rem;
        }
        /deep/ .el-carousel__container {
            height: 25rem;
        }
        /deep/ .el-carousel__item {
            height: 25rem;
            img {
                height: 25rem;
            }
        }
    }
    .block {
        padding: 1rem 0;
        .inner {
            .intro {
                margin-bottom: 1rem;
                font-size: 0.95rem;
                line-height: 1rem;
            }
            .card {
                flex-direction: row;
                li {
                    width: 47%;
                    .pic {
                        height: auto;
                    }
                    .texts {
                        margin-top: 1.2rem;
                    }
                }
            }
            .news {
                li {
                    padding: 1.2rem;
                    img {
                        width: 8rem;
                    }
                }
            }
            .people {
                li {
                    flex-direction: row;
                    &:nth-child(2) {
                        flex-direction: row-reverse !important;
                    }
                    .pic {
                        width: 47%;
                        height: auto;
                    }
                    .texts {
                        width: 48%;
                    }
                }
            }
            .about {
                .des {
                }
            }
            .stat {
                flex-direction: row;
                li {
                    width: 30%;
                }
            }
        }
    }
}
</style>