teachcloud-print-web/card/elements/fill-line/ElemFillLine.vue

<template>
  <div class="elem-fill-line">
    <div class="elem-title" v-if="data.startNumber === data.parent.startNumber">
      {{ data.parent.topicName }}
    </div>
    <div class="elem-body" v-if="data.questionDirection === 'vertical'">
      <ul
        class="elem-fill-quesiton"
        v-for="question in data.questionLineNums"
        :key="question.no"
        :style="groupStyles"
      >
        <li class="elem-fill-no">
          <span :style="lineNoStyles"
            >{{ data.numberPre }}{{ question.no }}.</span
          >
        </li>
        <li
          class="elem-fill-line"
          v-for="line in question.count"
          :key="line"
          :style="lineStyles"
        ></li>
      </ul>
    </div>
    <div v-else class="elem-body">
      <ul
        class="elem-fill-quesiton"
        v-for="line in data.questionLineNums[0].count"
        :key="line"
        :style="groupStyles"
      >
        <li v-if="line === 1" class="elem-fill-no">
          <span :style="lineNoStyles">
            {{ data.numberPre }}{{ data.questionLineNums[0].no }}.
          </span>
        </li>
        <li
          v-if="line !== data.questionLineNums[0].count"
          class="elem-fill-comma"
          :style="lineNoStyles"
        >
          ,
        </li>
        <li class="elem-fill-line" :style="lineStyles"></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-fill-line",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      questions: []
    };
  },
  computed: {
    lineStyles() {
      return {
        height: this.data.lineSpacing + "px"
      };
    },
    lineNoStyles() {
      return {
        top: this.data.lineSpacing - 4 + "px"
      };
    },
    groupStyles() {
      return {
        width: 100 / this.data.questionNumberPerLine + "%"
      };
    }
  },
  mounted() {},
  methods: {}
};
</script>