FE_IASF_client/src/pages/talent/index.vue

<template>
  <div class="wrap">
    <div class="single-banner">
      <img class="banner-img" :src="modules[0].form.pic" alt="">
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
        <p class="banner-des">{{ modules[0].form.des }}</p>
      </div>
    </div>

    <div class="block talent">
      <div class="inner">
        <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
          <div class="img-wrap">
            <img class="pic" :src="modules[1].form.pic" alt="">
          </div>
          <div class="texts">
            <h6>{{ modules[1].form.title }}</h6>
            <div class="des">{{ modules[1].form.des }}</div>
          </div>
        </div>
        <div class="item wow bounceInRight" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
          <div class="img-wrap">
            <img class="pic" :src="modules[2].form.pic" alt="">
          </div>
          <div class="texts">
            <h6>{{ modules[2].form.title }}</h6>
            <div class="des">{{ modules[2].form.des }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="style">
      <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
      <el-carousel :interval="4000" type="card" height="510px">
        <template v-for="(item, i) in modules[4].list">
          <el-carousel-item v-if="item.isEnable" :key="i">
            <div class="item" @click="openLink(item)">
              <img :src="item.pic" alt="">
              <p class="text">{{ item.title }}</p>
            </div>
          </el-carousel-item>
        </template>
      </el-carousel>
    </div>

    <div class="block intro">
      <div class="inner">
        <div class="item wow fadeInDown" data-wow-delay="0.1s">
          <div class="img-wrap">
            <img class="pic" :src="modules[5].form.pic" alt="">
          </div>
          <div class="texts">
            <p class="type">{{ modules[5].form.subTitle }}</p>
            <h6>{{ modules[5].form.title }}</h6>
            <div class="des">{{ modules[5].form.des }}</div>
            <el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">查看更多</el-button>
          </div>
        </div>
        <div class="item wow fadeInDown" data-wow-delay="0.3s">
          <div class="img-wrap">
            <img class="pic" :src="modules[6].form.pic" alt="">
          </div>
          <div class="texts">
            <p class="type">{{ modules[6].form.subTitle }}</p>
            <h6>{{ modules[6].form.title }}</h6>
            <div class="des">{{ modules[6].form.des }}</div>
            <el-button v-if="isLink(modules[6].form.link.linkName)" type="primary" @click="openLink(modules[6].form)">查看更多</el-button>
          </div>
        </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()
  },
  methods: {
    // 获取文章详情
    getInfo() {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
        }
      }).catch(err => {})
    },
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.wrap {
  background: #F8F9FB;
}
.talent {
  .inner {
    width: 100%;
    max-width: 1504px;
  }
  .item {
    display: flex;
    padding: 42px;
    margin-bottom: 36px;
    color: #333;
    background: #fff;
    transition: .5s;
    &:nth-child(even) {
      justify-content: space-between;
      flex-direction: row-reverse;
      .texts {
        padding-left: 0;
      }
    }
    &:hover {
      color: #fff;
      background: #005388;
      .pic {
        transform: scale(1.1);
      }
    }
  }
  .img-wrap {
    height: 465px;
    overflow: hidden;
  }
  .pic {
    width: 100%;
    height: 100%;
    transition: .5s;
  }
  .texts {
    width: 707px;
    padding: 98px 72px 30px 80px;
  }
  h6 {
    margin-bottom: 24px;
    font-size: 2.4rem;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
  }
  .des {
    font-size: 1rem;
    line-height: 33px;
    -webkit-line-clamp: 8;
  }
}
.style {
  h6 {
    margin-bottom: 59px;
    font-size: 2.4rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    color: #333333;
  }
  .item {
    position: relative;
    width: 100%;
    height: 510px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 30px;
    line-height: 3.4rem;
    font-size: 1.2rem;
    color: #fff;
    background: rgba(0,0,0,0.38);
  }
}
.intro {
  .inner {
    width: 100%;
    max-width: 1504px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    color: #333;
    background: #fff;
    transition: .5s;
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
    &:hover {
      color: #fff;
      background: #465f85;
      .pic {
        transform: scale(1.1);
      }
    }
  }
  .img-wrap {
    height: 505px;
    overflow: hidden;
  }
  .pic {
    width: 100%;
    height: 100%;
    transition: .5s;
  }
  .texts {
    width: 45%;
    padding: 0 58px;
  }
  .type {
    font-size: 1rem;
  }
  h6 {
    margin: 20px 0;
    font-size: 1.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
  .des {
    margin-bottom: 30px;
    font-size: 0.9rem;
    line-height: 30px;
  }
}
</style>