realtorEasier-webSite/mobile/src/pages/home/components/plate3.vue

<template>
  <div class="plate03">
    <h1 class="common-title">{{ $t('home.plate2Title') }}<span class="more" @click="$router.push('/cases/全部')">{{$t('common.more')}}></span></h1>
    <swiper class="swiper-wrapper" :options="swiperOption">
      <swiper-slide
        class="swiper-slide"
        v-for="(item,i) in list"
        :key="i"
      >
      <div @click="toLink(item)">
        <img  :src="item.bgImg" alt="">
        <h2>{{ item.text }}</h2>
      </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          text: '雍正故宫',
          bgImg: require('@/assets/images/refactor/home/4case_01@2x.png'),
          link: 'https://www.4dkankan.com/showPC.html?m=JPoqsQXL'
        },
        {
          text: '小米有品',
          bgImg: require('@/assets/images/refactor/home/4case_02@2x.png'),
          link: 'https://www.4dkankan.com/showProPC.html?m=5p1fFyLxv'
        },
        {
          text: '华发依山郡',
          bgImg: require('@/assets/images/refactor/home/4case_03@2x.jpg'),
          link: 'https://www.4dkankan.com/spc.html?m=t-VJjZMUl'
        },
        {
          text: '万豪酒店',
          bgImg: require('@/assets/images/refactor/home/4case_04@2x.jpg'),
          link: 'https://www.4dkankan.com/showPC.html?m=PoCGXVFP'
        }
      ],
      swiperOption: {
        slidesPerView: 'auto',
        autoplay: false,
        spaceBetween: 20
      }
    }
  },
  methods: {
    toLink ({link}) {
      window.open(link)
    }
  }
}
</script>

<style lang="scss" scoped>
.plate03 {
  margin-top: 55px;
  padding: 0 0 0 20px;
  .common-title {
    margin-bottom: 30px;
  }
  .swiper-slide {
    width: 286px;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      position: absolute;
      top: 57px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      line-height: 33px;
      white-space: nowrap;
    }
    &:last-child {
      margin-right: 20px;
    }
  }
}
</style>