hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/solution-layout.vue

<!-- 解决方案 -->
<template>
  <div id="solution-layout">
    <div class="solution-box">
      <div class="item" v-for="(item,index) in this.datas" :key="index" :style="{ backgroundImage:'url('+(item.img?item.img:require('../../assets/images/index/solution-4.png'))+')'}">
        <template>
          <!-- <div class="bg-div"></div> -->
          <div class="title text-over">{{item.title}}</div>
          <div class="content text-over">{{item.desc}}</div>
          <div class="btn" @click="gotoUrl(item.url)">查看详细</div>
        </template>
      </div>
      <template v-if="surplus>0">
        <div class="item" v-for="(child,i) in surplus" :key="'surplus-'+i"></div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    datas: {
      type: Array,
      default: () => ([])
    },
  },
  data () {
    return {
      surplus:0
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {
     this.surplus = 4 - this.datas.length;
  },

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

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#solution-layout{
  width: 100%;
  .solution-box{
    width: 100%;
    height: 350px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 32px;
    // overflow: hidden;
    .item{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      padding: 28px;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      background-blend-mode: screen;
      border-radius: 4px;
      cursor:pointer;
      .bg-div{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
      }
      .title{
        width: 100%;
        font-size: 22px;
	      font-weight: bold;
        -webkit-line-clamp: 2;
      }
      .content{
        width: 100%;
        line-height: 32px;
        font-size: 14px;
	      font-weight: 400;
        -webkit-line-clamp: 5;
      }
      .text-over{
        text-shadow: 0px 1px 0px rgba(153, 153, 153, 0.4);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        letter-spacing: 2px;
      }
      .btn{
        width: 150px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        background-color: rgba($color: #fff, $alpha: 0.25);
        border-radius: 2px;
        box-shadow: 0px 0px 15px -10px rgba(4, 0, 0, 0.4);
        text-shadow: 0px 1px 2px #2f2f2f;
        &:hover{
          background: #fff;
          color: #000;
          text-shadow: none;
        }
      }
      &:nth-child(1){
        background-image:url(../../assets/images/index/solution-1.png);
      }
      &:nth-child(2){
        background-image:url(../../assets/images/index/solution-2.png);
      }
      &:nth-child(3){
        background-image:url(../../assets/images/index/solution-3.png);
      }
      &:nth-child(4){
        background-image:url(../../assets/images/index/solution-4.png);
      }
      &:hover{
        // cursor:pointer;
        box-shadow: 6px 8px 15px 0px rgba(4, 0, 0, 0.4);
      }
      &{
        background-size: 100% 100%;
      }
    }
  }
}
</style>