store-shop-uniapp/components/canvasShow/basics/custom.vue

<template>
  <div class="custom warp" :class="'terminal' + terminal">
    <div class="rowLayout" v-if="componentContent.layoutType ==='L1' || componentContent.layoutType ==='L2' || componentContent.layoutType ==='L3' || componentContent.layoutType ==='L4'">
      <div class="customLayout" :style="{'padding':'0 ' + componentContent.pageSpacing + 'px','marginLeft':(-componentContent.imgClearance) +'px'}">
        <div class="ul clearfix" :class="'layout'+componentContent.layoutType">
          <a class="a-link" @click="jumpLink(item.linkObj)">
          <div class='li' v-if="item.src" v-for="(item,index) of componentContent.imgData" :key="index" :style="{'backgroundImage':'url(' + item.src + ')','width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','paddingLeft':componentContent.imgClearance +'px'}">
<!--           <img class="img" :src="item.src" v-if="item.src" mode="widthFix">-->
          </div>
          </a>
        </div>
      </div>
    </div>
    <div class="boxLayout" v-else :style="{'padding':'0 ' + componentContent.pageSpacing + 'px','paddingBottom':componentContent.maxH !== 0?getItemValue(componentContent.maxH) + '%': '100%'}">
      <div class="boxLayoutInner">
        <div class="boxWarp">
          <div class="customLayout" :style="{'marginLeft':(-componentContent.imgClearance) +'px','top':(-componentContent.imgClearance) +'px'}">
            <div class="ul clearfix" :class="'layout'+componentContent.layoutType">
              <a class="a-link" @click="jumpLink(item.linkObj)">
                <div class='li' v-for="(item,index) of componentContent.imgData" v-if="item.src" :key="index" :style="{'backgroundImage':'url(' + item.src + ')','width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','padding':componentContent.imgClearance +'px 0 0 ' + componentContent.imgClearance +'px'}">
<!--                  <img class="img" :src="item.src" v-if="item.src" mode="widthFix">-->
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {funMixin} from '../config/mixin'
  export default {
    name: 'customComponent',
    mixins: [funMixin],
    data () {
      return {
      }
    },
    props: {
      terminal: {
        type: Number,
        default: 4
      },
      componentContent: {
        type: Object
      }
    },
    methods: {
      // 计算生成格子百分比
      getItemValue (val) {
        const density = parseInt(this.componentContent.density)
        if (val === 0 || density === 0) {
          return 0
        }
        return (val / density * 10000 / 100.00)// 小数点后两位百分比
      }
    }
  }
</script>

<style lang="scss" scoped>
  .custom{
	  width: 710upx;
	  margin: 0 auto;
    .boxLayout{
      position: relative;
      .boxLayoutInner{
        padding-bottom: 100%;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
      }
      .boxWarp{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
      }
    }
    .customLayout{
      position: relative;
      .ul{
        display: flex;
        flex-wrap: wrap;
        position: relative;
      }
      .li{
		 box-sizing: border-box;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        .img{
          width: 100%;
          display: block;
        }
      }
      .layoutL1 .li{
        flex: 0 0 100%;
      }
      .layoutL2 .li{
        flex: 0 0 50%;
      }
      .layoutL3 .li{
        flex: 0 0 33.3%;
      }
      .layoutL4 .li{
        flex: 0 0 25%;
      }
      .layoutT2B2{
        padding-bottom: 100%;
        .li{
          width: 50%;
          height: 50%;
          position: absolute;
          .img{
            width: 100%;
            height: 100%;
          }
          &:nth-child(1){
            left: 0;
            top: 0;
          }
          &:nth-child(2){
            right: 0;
            top: 0;
          }
          &:nth-child(3){
            left: 0;
            bottom: 0;
          }
          &:nth-child(4){
            right: 0;
            bottom: 0;
          }
        }
      }
      .layoutL1R2{
        padding-bottom: 100%;
        .li{
          width: 50%;
          height: 50%;
          position: absolute;
          .img{
            width: 100%;
            height: 100%;
          }
          &:nth-child(1){
            height: 100%;
            left: 0;
            top: 0;
          }
          &:nth-child(2){
            right: 0;
            top: 0;
          }
          &:nth-child(3){
            right: 0;
            bottom: 0;
          }
        }
      }
      .layoutT1B2{
        padding-bottom: 100%;
        .li{
          width: 50%;
          height: 50%;
          position: absolute;
          .img{
            width: 100%;
            height: 100%;
          }
          &:nth-child(1){
            width: 100%;
            left: 0;
            top: 0;
          }
          &:nth-child(2){
            left: 0;
            bottom: 0;
          }
          &:nth-child(3){
            right: 0;
            bottom: 0;
          }
        }
      }
      .layoutL1T1B2{
        padding-bottom: 50%;
        .li{
          position: absolute;
          .img{
            width: 100%;
            height: 100%;
          }
          &:nth-child(1){
            width: 50%;
            height: 100%;
            left: 0;
            top: 0;
          }
          &:nth-child(2){
            right: 0;
            top: 0;
            width: 50%;
            height: 50%;
          }
          &:nth-child(3){
            left: 50%;
            bottom: 0;
            width: 25%;
            height: 50%;
          }
          &:nth-child(4){
            right: 0;
            bottom: 0;
            width: 25%;
            height: 50%;
          }
        }
      }
      .layoutaverage{
        padding-bottom: 100%;
        .li{
          position: absolute;
          .img{
            width: 100%;
            height: 100%;
          }
        }
      }
      // #ifdef MP
      .layoutaverage{
        padding-bottom: 91%;
      }
      // #endif
    }
  }
</style>