teachcloud-print-web/card/elements/fill-pane/ElemFillPane.vue

<template>
  <div class="elem-fill-pane" :style="elemStyle">
    <div
      v-for="n in data.paneCount"
      :key="n"
      class="fill-pane-item"
      :style="paneStyles"
    >
      <div class="fill-pane-cont" :style="contStyles"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-fill-pane",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    contStyles() {
      return {
        borderStyle: this.data.borderStyle,
        width: this.data.paneWidth + "px",
        height: this.data.paneHeight + "px"
      };
    },
    paneStyles() {
      return {
        padding: this.data.paneGap / 2 + "px"
      };
    },
    elemStyle() {
      return {
        padding: this.data.paneGap / 2 + "px"
      };
    }
  },
  methods: {}
};
</script>