GCLS_Page_Exercise/src/views/exercise_questions/answer/components/AnswerReport.vue

<template>
  <div class="answer-report">
    <div class="title">测试报告</div>
    <div class="answer-info">
      <div v-if="recordReport.answer_record.is_remarked === 'true'">
        <span>总得分</span>
        <span>{{ recordReport.answer_record.total_score }} 分</span>
      </div>
      <div>
        <span>耗时</span>
        <span>{{ secondFormatConversion(recordReport.answer_record.answer_duration, 'chinese') }}</span>
      </div>
      <div>
        <span>正确</span>
        <span>{{ recordReport.answer_record.right_count }}</span>
      </div>
      <div>
        <span>错误</span>
        <span>{{ recordReport.answer_record.error_count }}</span>
      </div>
    </div>
    <div
      v-if="
        recordReport.answer_record.answer_mode === 1 ||
        (recordReport.answer_record.answer_mode === 2 && recordReport.answer_record.is_remarked === 'true')
      "
      class="answer-list"
    >
      <span
        v-for="({ question_id, is_objective, answer_status, is_remarked }, i) in recordReport.question_list"
        :key="question_id"
        :class="[
          'answer-list-item',
          { subjectivity: is_objective === 'false', error: answer_status === 2 || answer_status === 0 },
          { remarked: is_remarked === 'true' },
        ]"
        @click="selectQuestion(i)"
      >
        {{ i + 1 }}
      </span>
    </div>
  </div>
</template>

<script>
import { secondFormatConversion } from '@/utils/transform';

export default {
  name: 'AnswerReport',
  props: {
    recordReport: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      secondFormatConversion,
    };
  },
  methods: {
    selectQuestion(i) {
      this.$emit('selectQuestion', i);
    },
  },
};
</script>

<style lang="scss" scoped>
.answer-report {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  align-items: center;
  padding: 24px 40px;

  .title {
    font-size: 32px;
    font-weight: bold;
    color: $light-main-color;
  }

  .answer-info {
    display: flex;
    column-gap: 120px;
    justify-content: center;
    width: 770px;
    padding: 24px 40px;
    background-color: #f7f7f7;
    border-radius: 8px;

    > div {
      display: flex;
      flex-direction: column;
      row-gap: 8px;

      :first-child {
        color: #949494;
      }

      :last-child {
        font-size: 24px;
        font-weight: bold;
        color: #000;
      }
    }
  }

  .answer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 770px;

    &-item {
      position: relative;
      width: 56px;
      height: 40px;
      padding: 8px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
      background-color: #f0f0f0;
      border-radius: 20px;

      &.error {
        color: #fff;
        background-color: $error-color;
      }

      &.subjectivity {
        color: $font-color;
        background-color: #fef2a4;
      }

      &.remarked {
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          display: inline-block;
          width: 6px;
          height: 6px;
          content: '';
          background-color: #f2555a;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>