
    <div
      style="display: flex;flex-wrap: wrap;box-sizing: border-box"
      :style="[{
        width: bigBoxWidth + 'px',
        height: bigBoxHeight + 'px',
      }]"
    >
      <div
        v-for="item in getBgBoxItemList"
        :key="item.id"
        style="display: flex;flex-wrap: wrap;justify-content: center;align-items: center"
        :style="[{
          width: item.boxWidth + 'px',
          height: item.boxHeight + 'px',
          border: '1px solid rgba(0, 0, 0, 0.1)'
        }]"
      >
        {{ `第${item.verticalNumber + 1}排，第${item.horizontalNumber + 1}列` }}
      </div>
    </div>
      type: 2,
      bigBoxWidth: 1360,
      bigBoxHeight: 678
computed: {
  getBgBoxItemList() {
    const minObj = {
      boxNum: 12,
      transverseBlocks: 4,
      longitudinalBlocks: 3
    };
    const maxObj = {
      boxNum: 48,
      transverseBlocks: 8,
      longitudinalBlocks: 6
    };
    const showObj = this.type == 0 ? minObj : maxObj;
    const boxArr = [];
    for (let i = 0; i < showObj.boxNum; i++) {
      const horizontalNumber = i % showObj.transverseBlocks;
      const verticalNumber = Math.floor(i / showObj.transverseBlocks);
      const boxWidth = (this.bigBoxWidth / showObj.transverseBlocks);
      const boxHeight = (this.bigBoxHeight / showObj.longitudinalBlocks);
      boxArr.push({
        id: i,
        horizontalNumber,
        verticalNumber,
        boxWidth,
        boxHeight,
        leftTopX: horizontalNumber * boxWidth,
        leftTopY: verticalNumber * boxHeight,
        rightBottomX: (horizontalNumber + 1) * boxWidth,
        rightBottomY: (verticalNumber + 1) * boxHeight
      });
    }
    console.log(boxArr);
    return boxArr;
  }
},