FE_IASF_client/src/pages/estate/location/index.vue

<template>
  <!-- 产业光源-地理位置 -->
  <div class="wrap">
    <div class="single-banner single-banner-overview">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="">
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
      </div>
    </div>

    <ul class="tabs wow fadeInLeft">
      <template v-for="(item, i) in tabs">
        <li :class="{active: item.id == active}"
            :key="i"
            @click="tabChange(item)">{{ item.columnName }}</li>
      </template>
    </ul>

    <div class="tab-content">
      <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"
               v-html="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"
               v-html="modules[2].form.des"></div>
        </div>
      </div>
      <div class="item wow bounceInLeft"
           data-wow-delay="0.5s"
           :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
           @click="openLink(modules[3].form)">
        <div class="img-wrap">
          <img class="pic"
               :src="modules[3].form.pic"
               alt="">
        </div>
        <div class="texts">
          <h6>{{ modules[3].form.title }}</h6>
          <div class="des"
               v-html="modules[3].form.des"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import overview from '@/mixins/estate'
import WOW from 'wow.js'
export default {
  mixins: [mixins, overview],
  data () {
    return {

    }
  },
  mounted () {
    new WOW().init()
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss';
.tab-content {
    width: 70%;
    max-width: 1504px;
    padding-bottom: 100px;
    margin: 30px auto 0;
    .item {
        display: flex;
        padding: 42px;
        margin-bottom: 36px;
        color: #333;
        background: #f5f5f5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
        transition: 0.5s;
        &:nth-child(even) {
            justify-content: space-between;
            flex-direction: row-reverse;
            background-position: 30% 100%;
            .texts {
                padding-left: 0;
            }
        }
        &:hover {
            .pic {
                transform: scale(1.1);
            }
        }
    }
    .img-wrap {
        height: 383px;
        overflow: hidden;
    }
    .pic {
        width: 100%;
        height: 100%;
        transition: 0.5s;
    }
    .texts {
        width: 707px;
        padding: 98px 72px 30px 80px;
    }
    h6 {
        margin-bottom: 24px;
        font-size: 2rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
    }
    .des {
        font-size: 1rem;
        line-height: 33px;
        -webkit-line-clamp: 8;
    }
}
</style>