FE_IASF_client/src/pages/science/index.vue

<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">
      <div class="inner">
        <div class="item" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)">
          <img src="@/assets/images/science/1.png" alt="">
          <div class="texts">
            <h6>{{ modules[1].form.title }}</h6>
            <div class="des">{{ modules[1].form.des }}</div>
          </div>
        </div>
        <div class="item" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
          <img src="@/assets/images/science/2.png" alt="">
          <div class="texts">
            <h6>{{ modules[2].form.title }}</h6>
            <div class="des">{{ modules[2].form.des }}</div>
          </div>
        </div>
        <div class="item" :class="{'cursor-pointer': modules[3].form.link.linkName !== '无'}" @click="openLink(modules[3].form)">
          <img src="@/assets/images/science/3.png" alt="">
          <div class="texts">
            <h6>{{ modules[3].form.title }}</h6>
            <div class="des">{{ modules[3].form.des }}</div>
          </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";
.inner {
  width: 1200px;
}
.item {
  position: relative;
  margin-bottom: 58px;
  img {
    width: 100%;
    height: 508px;
  }
  &:nth-child(2) .texts {
    color: #fff;
    background: #33B3C1;
  }
  &:nth-child(3) .texts {
    color: #fff;
    background: #E47C22;
  }
  &:nth-child(even) .texts {
    left: auto;
    right: -28px;
  }
  .texts {
    position: absolute;
    top: 79px;
    left: -28px;
    width: 532px;
    padding: 70px 38px;
    color: #333;
    background: #FFF6E9;
  }
  h6 {
    margin-bottom: 14px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
  .des {
    font-size: 18px;
  }
}
</style>