front/src/views/elective/report/components/elective-head-page.vue

<template>
  <div class="width100 relative">
    <el-image :src="require('@/assets/images/elective/elective_report_cover.png')"></el-image>
    <div v-if="electiveVisible" class="absolute f24 bold elective-report-info-container">
      <div class="landing-item">
        学校：<span>{{ schoolName }}</span>
      </div>
      <div class="landing-item">
        轮次：<span>{{ this.generation.status.year }}学年{{ this.generation.status.roundName }}</span>
      </div>
      <div class="landing-item">
        班级：<span>{{ firstClassName | classTailing }}</span>
      </div>
      <div class="landing-item">
        学生：<span>{{ nickName }}（{{ name }}）</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'elective-head-page',
  props: ['electiveVisible'],
  inject: ['getGeneration'],
  computed: {
    ...mapGetters(['schoolName', 'firstClassName', 'nickName', 'name']),
    generation() {
      return this.getGeneration()
    }
  }
}
</script>

<style lang="scss" scoped>

.elective-report-info-container {
  right: 100px;
  bottom: 0;
}

.landing-item + .landing-item {
  margin-top: 10px;
}

.landing-item {
  display: flex;
  flex-direction: row;

  span {
    display: inline-block;
    flex: 1;
    border-bottom: 1px solid #666666;
  }

}

</style>