The grid layout realizes the custom configuration of the bottom banner

  <template>
    <div>
      <portal-props-common :show-channel-id="true" :show-custom="false" :show-card-theme="false" />
      <a-form-model-item label="显示行数">
        <a-input-number v-model="grid.component.bottomLineNumber" :min="1" />
      </a-form-model-item>
      <a-form-model-item label="显示列数">
        <a-input-number v-model="grid.component.bottomArrangeNumber" :min="4" />
      </a-form-model-item>
      <a-form-model-item label="总显示个数">
        <a-input-number v-model="grid.component.lineNumber" :min="4" default-value="4" />
      </a-form-model-item>
      <a-form-model-item label="行间距(px)">
        <a-input-number v-model="grid.component.bottomRow" :min="3" />
      </a-form-model-item>
      <a-form-model-item label="列间距(px)">
        <a-input-number v-model="grid.component.bottomColumn" :min="3" />
      </a-form-model-item>
      <a-form-model-item label="元素高度(px)">
        <a-input-number v-model="grid.component.bottomHeight" :min="90" :max="120" />
      </a-form-model-item>
      <a-form-model-item label="是否占位">
        <a-radio-group v-model="grid.component.bottomOccupy" :default-value="2">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="2">
            否
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </div>
  </template>

  <script>
  import portalBottomPictureView from './portal-bottom-picture-view.vue'
  import components from './_import-components/portal-bottom-picture-edit-import'

  function getComponentForEdit(component) {
    return {
      render() {
        if (!this.$attrs.data.bottomLineNumber) {
          this.$set(this.$attrs.data, 'bottomLineNumber', '1')
        }
        if (!this.$attrs.data.bottomArrangeNumber) {
          this.$set(this.$attrs.data, 'bottomArrangeNumber', '4')
        }
        if (!this.$attrs.data.lineNumber) {
          this.$set(this.$attrs.data, 'lineNumber', '4')
        }
        if (!this.$attrs.data.bottomOccupy) {
          this.$set(this.$attrs.data, 'bottomOccupy', 2)
        }
        if (!this.$attrs.data.bottomHeight) {
          this.$set(this.$attrs.data, 'bottomHeight', '90')
        }
        if (!this.$attrs.data.bottomRow) {
          this.$set(this.$attrs.data, 'bottomRow', '3')
        }
        if (!this.$attrs.data.bottomColumn) {
          this.$set(this.$attrs.data, 'bottomColumn', '3')
        }
        const isEdit = true
        const componentProps = {
          ...this.$attrs.data,
          isEdit,
        }
        return <portalBottomPictureView componentProps={componentProps} />
      },
    }
  }
  export const metaInfo = {
    componentForEdit: getComponentForEdit(),
  }

  export default {
    name: 'PortalBottomPictureEdit',
    metaInfo: {
      title: 'PortalBottomPictureEdit',
    },
    components,
    data() {
      return {}
    },
    methods: {},
  }
  </script>

  <style module lang="scss">
  @use '@/common/design' as *;
  </style>

<template>
  <div :class="$style.wrap">
    <div :class="$style.btnbox">
      <div v-if="componentProps.isEdit" :class="$style.btn" :style="gridStyle">
        <div v-for="(item, index) in Data" :key="index" :class="$style.griditem">
          <a :href="item.gourl">
            <img :src="item.imgurl" alt="" />
          </a>
        </div>
      </div>
      <div v-else :class="$style.btn" :style="gridStyle">
        <div v-for="(item, index) in data" :key="index" :class="$style.griditem">
          <a :href="getArticleUrl(item)" target="_blank" rel="opener">
            <img :src="(avatarSrc + item.thumbnaiAttachment[0].code) | sdResource" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import img from '@custom/images/login-background.png'
import components from './_import-components/portal-bottom-picture-view-import'
import { channelListMixin } from './channel-list-mixin'
import componentService from './component-service'

export default {
  name: 'PortalBottomPictureView',
  metaInfo: {
    title: 'PortalBottomPictureView',
  },
  components: {
    ...components,
  },
  mixins: [channelListMixin],
  props: {
    componentProps: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      gridStyle: '',
      imgUrl: '',
      Data: [],
      mockData: [],
      imgList: [],
      avatarSrc: 'api/flow-mobile/v1/task-form-process/download-attachments/',
    }
  },
  watch: {
    // 行数
    'componentProps.bottomLineNumber': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 列数
    'componentProps.bottomArrangeNumber': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 行间距
    'componentProps.bottomRow': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 列间距
    'componentProps.bottomColumn': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 总个数
    'componentProps.lineNumber': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 元素高度
    'componentProps.bottomHeight': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
    // 是否占位
    'componentProps.bottomOccupy': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
        if (
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
          this.componentProps.lineNumber
        ) {
          this.countStyle()
        } else {
          this.setStyle()
        }
      },
    },
  },
  inject: {
    isAnony: { default: false },
    portalHome: { default: {} },
  },
  created() {
    this.gridStyle = `
        grid-template: repeat(1, ${this.componentProps.bottomHeight}px) / repeat(${this.componentProps.bottomArrangeNumber}, 1fr);
        grid-column-gap: ${this.componentProps.bottomColumn}px;
        grid-row-gap: ${this.componentProps.bottomRow}px;
      `
    if (this.componentProps.isEdit) {
      this.getMockData()
    } else {
      if (this.isAnony || this.portalHome.isAnonyPage !== '0') {
        this.avatarSrc = 'api/we-open/v1/anonymity/download-attachments/'
      }
    }
  },
  mounted() {
    if (
      this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber <
      this.componentProps.lineNumber
    ) {
      this.countStyle()
    } else {
      this.setStyle()
    }
  },
  methods: {
    getMockData() {
      this.mockData = []
      for (var i = 0; i < this.componentProps.lineNumber; i++) {
        this.mockData.push({
          id: Math.random(),
          imgurl: img,
          gourl: 'http://www.baidu.com',
        })
      }
      this.getData()
    },
    getData() {
      if (
        this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber >=
        this.componentProps.lineNumber
      ) {
        this.Data = this.mockData
      } else {
        this.Data = this.mockData.splice(
          0,
          this.componentProps.bottomLineNumber * this.componentProps.bottomArrangeNumber
        )
      }
    },
    setStyle() {
      // 2 不占位置 1 占位置
      if (this.componentProps.bottomOccupy === 2) {
        // 2 不占位置
        this.gridStyle = `
          grid-template: repeat(${Math.ceil(
            this.componentProps.lineNumber / this.componentProps.bottomArrangeNumber
          )}, ${this.componentProps.bottomHeight}px) / repeat(${
          this.componentProps.bottomArrangeNumber
        }, 1fr);
          grid-column-gap: ${this.componentProps.bottomColumn}px;
          grid-row-gap: ${this.componentProps.bottomRow}px;
        `
      } else {
        //  1 占位置
        this.gridStyle = `
          grid-template: repeat(${this.componentProps.bottomLineNumber}, ${this.componentProps.bottomHeight}px) / repeat(${this.componentProps.bottomArrangeNumber}, 1fr);
          grid-column-gap: ${this.componentProps.bottomColumn}px;
          grid-row-gap: ${this.componentProps.bottomRow}px;
        `
      }
    },
    countStyle() {
      this.gridStyle = `
          grid-template: repeat(${this.componentProps.bottomLineNumber}, ${this.componentProps.bottomHeight}px) / repeat(${this.componentProps.bottomArrangeNumber}, 1fr);
          grid-column-gap: ${this.componentProps.bottomColumn}px;
          grid-row-gap: ${this.componentProps.bottomRow}px;
        `
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.wrap {
  width: 100%;
  height: 100%;
}

.btnbox {
  width: 100%;
  // height: 100%;
  // border: 1px solid #000;
}

.btn {
  display: grid;
  // grid-gap: 10px 10px;
  // height: 100%;
  width: 100%;
  padding: 5px;
  // border: 1px solid red;

  .griditem {
    a {
      display: inline-block;
      width: 100%;
      height: 100%;

      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>