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: i == active}" :key="i" @click="tabChange(i)">{{ item }}</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">{{ 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 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">{{ 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 {
      active: 3 
    }
  },
  mounted() {
    new WOW().init()
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css);
@import "../../../styles/page/page.scss";
.tabs {
  display: flex;
  justify-content: center;
  box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
  li {
    padding: 25px 19px;
    margin: 0 10px;
    font-size: 1.1rem;
    color: #333;
    border-bottom: 4px solid transparent;
    text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
    cursor: pointer;
    &.active {
      color: #1583FF;
      border-bottom-color: #1583FF;
    }
  }
}

.tab-content {
  width: 80%;
  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: .5s;
    &:nth-child(even) {
      justify-content: space-between;
      flex-direction: row-reverse;
      background-position: 30% 100%;
      .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;
  }
}
@media (max-width: 1200px) {
  .tabs {
    overflow: hidden;;
    overflow-x: auto;
    white-space: normal;
    justify-content: normal;
    display: -webkit-box;
    li {
      white-space: normal;
    }
  }
  .tab-content{
    padding: 20px 0;
    .org{
    width: 100%;
    padding:15px;
    flex-direction: column;
    .left{
      width: 100%;
    }
  }
  }
 
}
</style>