front/src/views/elective/report/components/elective-test-reports.vue

<template>
  <div class="fx-column">
    <index-card v-for="test in testResults" :key="test.key" :title="test.title" class="elective-report-card">
      <test-report :category="test.key" :source="test.result" readonly></test-report>
    </index-card>
    <index-card title="选科测评专业" class="mt20">
      <test-result :all-test-results="testResults" :selected-majors="summary.selectedList" readonly></test-result>
      <elective-major-match></elective-major-match>
    </index-card>
  </div>
</template>

<script>
import TestSummary from '@/views/elective/test/components/test-summary'
import IndexCard from '@/views/index/components/index-card'
import TestReport from '@/views/elective/test/components/test-report'
import ElectiveMajorMatch from '@/views/elective/report/components/elective-major-match'

export default {
  name: 'elective-test-reports',
  extends: TestSummary, // NOTE: 这里直接继承了TestSummary页面的关键能力
  components: { ElectiveMajorMatch, TestReport, IndexCard }
}
</script>

<style scoped>
.elective-report-card > /deep/ .el-card__body {
  padding: 0;
}

.elective-report-card + .elective-report-card {
  margin-top: 20px;
}
</style>