union-question-web/src/modules/card/elements/card-head/cardHeadSpin/HeadDynamic.vue

<template>
  <div :class="classes">
    <!-- write -->
    <div
      class="head-dynamic-part head-dynamic-write"
      v-if="data.examNumberStyle !== 'FILL'"
    >
      <div class="stdinfo-item">
        <span><i>手写签名</i></span>
        <span>：</span>
        <span></span>
      </div>
      <p>
        注意：签名则表示您认可答题卡提供的信息与您本人信息相符；如签名与信息不符或者未签名，试卷作废。
      </p>
    </div>
    <!-- file -->
    <div class="head-dynamic-part head-dynamic-fill">
      <div class="head-dynamic-content">
        <p><span>正确填涂：</span><i></i></p>
        <p>
          <span>错误填涂：</span>
          <i>√</i>
          <i>×</i>
          <i></i>
          <i></i>
        </p>
      </div>
    </div>
    <!-- miss discipline -->
    <div
      v-if="data.examAbsent || data.discipline"
      class="head-dynamic-part head-dynamic-missfill"
    >
      <div class="head-dynamic-miss" v-if="data.examAbsent">
        <div class="head-dynamic-content">
          <span class="dynamic-miss-title">缺考标记</span>
          <span class="dynamic-miss-body"
            ><i
              class="head-dynamic-rect dynamic-miss-area"
              id="dynamic-miss-area"
            ></i
          ></span>
        </div>
      </div>
      <div class="head-dynamic-miss" v-if="data.discipline">
        <div class="head-dynamic-content">
          <span class="dynamic-miss-title">违纪标记</span>
          <span class="dynamic-miss-body"
            ><i
              class="head-dynamic-rect dynamic-breach-area"
              id="dynamic-breach-area"
            ></i
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { calcSum } from "../../../plugins/utils";

export default {
  name: "head-dynamic",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    classes() {
      let partNum = 1;
      if (this.data.examNumberStyle !== "FILL" && this.data.writeSign)
        partNum++;
      if (this.data.examAbsent || this.data.discipline) partNum++;

      return ["head-dynamic", "card-head-body-spin", `head-dynamic-${partNum}`];
    },
  },
  mounted() {
    this.initStyles();
  },
  methods: {
    initStyles() {
      const { examNumberStyle } = this.data;
      if (examNumberStyle === "FILL") return;

      const parentHeight = this.$el.parentNode.offsetHeight;
      this.$el.style.height = parentHeight + "px";
      const childrenCount = this.$el.children.length;
      if (childrenCount > 1) {
        let heights = [];
        for (let i = 0; i < childrenCount; i++) {
          heights[i] = this.$el.children[i].offsetHeight;
        }
        const lastChildHeight = parentHeight - calcSum(heights.slice(0, -1));
        this.$el.children[childrenCount - 1].style.height =
          lastChildHeight + "px";
      }
    },
  },
};
</script>