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="tabChangeNewPage(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: 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: .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: 2rem;
    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%;
    }
  }
  }
 
}
@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%;
      }
      img{
        width: 100%;
      }
    }
  }
  .block  {
    padding: 2rem 0;
    .inner {
      width: 90%;
      .event {
        flex-direction: column;
        .time {
          width: 100%;
          li {
            width: 100%;
            justify-content: flex-start;
          }
        }
        .right {
          width: 100%;
          .list {
            li {
              padding: 1.25rem;
              flex-direction: column;
              .texts {
                width: 100%;
              }
              .pic {
                width: 100%;
                margin-top: 1rem;
              }
            }
          }
        }
      }
    }
  }
  .tab-content {
    padding: 1.25rem 0;
    .item  {
      padding: .85rem;
      flex-direction: column !important;
      .texts {
        margin-top: .5rem;
        width: 100%;
        padding: 0;
      }
    }
  }
}
@media (max-width: 320px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 13rem;
      }
      .texts {
        top: 6rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 13rem;
      }
    }
    .item {
      .img-wrap {
        height: 13rem;
      }
      .texts {
        h6 {
          font-size: 1.5rem;
        }
      }
    }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 13rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 320px) and (max-width: 375px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 13rem;
      }
      .texts {
        top: 6rem;
        left: 5rem;
       
      }
     
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 18rem;
      }
    }
    .item {
        .img-wrap {
          height: 15rem;
        }
        .texts {
          h6 {
            font-size: 1.5rem;
          }
        }
      }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 15rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 375px) and (max-width: 480px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 15rem;
      }
      .texts {
        top: 6rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 20rem;
      }
    }
    .item {
        .img-wrap {
          height: 18rem;
        }
        .texts {
          h6 {
            font-size: 1.5rem;
          }
        }
      }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 18rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 480px) and (max-width: 640px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 18rem;
      }
      .texts {
        top: 10rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 24rem;
      }
    }
    .item {
        .img-wrap {
          height: 22rem;
        }
        .texts {
          h6 {
            font-size: 1.5rem;
          }
        }
      }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 20rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 640px) and (max-width: 768px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 22rem;
      }
      .texts {
        top: 12rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 28rem;
      }
    }
    .item {
        .img-wrap {
          height: 25rem;
        }
        .texts {
          h6 {
            font-size: 1.5rem;
          }
        }
      }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 22rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 768px) and (max-width: 980px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 25rem;
      }
      .texts {
        top: 15rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 30rem;
      }
    }
    .item {
        .img-wrap {
          height: 28rem;
        }
        .texts {
          h6 {
            font-size: 1.5rem;
          }
        }
      }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 25rem;
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 980px) and (max-width: 1200px) {
  .wrap {
    .single-banner {
      .banner-img {
        height: 32rem;
      }
      .texts {
        top: 20rem;
        left: 5rem;
       
      }
    }
  }
  .tab-content {
    .survey {
      padding: 1.25rem;
      width: 100%;
      margin-bottom: 2rem;
    }
    .org{
      img{
        width: 100%;
        height: 32rem;
      }
    }
  }
  .block  {
    .inner {
      .event {
        .right {
          .list {
            li {
              .pic {
                width: 100%;
                margin-top: 1rem;
                height: 27rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>