hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/home-banner-components/ads-cell.vue

<!-- 广告位 固定三个,后台不设置也显示默认占位图-->
<template>
  <div class="ads-list">
    <div class="ads-list-item" @click="gotoUrl(datas.advert1_url)">
      <img :src="datas.advert1_src||require('~/assets/images/index/advert1.png')" alt="">
    </div>
    <div class="ads-list-item" @click="gotoUrl(datas.advert2_url)">
      <img :src="datas.advert2_src||require('~/assets/images/index/advert2.png')" alt="">
    </div>
    <div class="ads-list-item" @click="gotoUrl(datas.advert3_url)">
      <img :src="datas.advert3_src||require('~/assets/images/index/advert3.png')" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props:{
    datas: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    gotoUrl(_url){
      if(_url){
        window.location.href = _url;
      }
    }
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.ads-list{
  width: 100%;
  height: 95px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  margin-top: 15px;
  .ads-list-item{
    flex: 1;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>