nxdt-uniapp/pages/myExam/endOfExamination.vue

<template>
  <view>
    <Navbar title="考后结算" :showHome="true" :goTo="goUrl" />
    <div class="content">
      <div class="progress">
        <zui-progress-circle
          :size="240"
          :ringWidth="19"
          :position="states.score / states.totalScore"
          :range="[180, 360]"
          :texture="['#849CF4', '#E9EDF7']"
        />
        <div class="item score">
          {{ states.score }}
          <span style="font-size: 28px">分</span>
        </div>
        <div class="item isPass">{{ states.isPass }}</div>
      </div>

      <div class="exam-wrapper">
        <div class="exam-item">
          <div>考试名称</div>
          <div>{{ states.examType }}</div>
        </div>
        <div class="exam-item">
          <div>交卷时间</div>
          <div>{{ states.submitTime }}</div>
        </div>
      </div>

      <div class="answer-sheet">
        <Title title="答题卡" />
        <div class="answer-wrapper">
          <div class="item-wrapper" v-for="(item, index) in states.answerSheet" :key="index">
            <div class="answer-item" :class="{ isAnswer: !item.isAnswer, isUnAnswer: item.isUnAnswer }">
              {{ index + 1 }}
            </div>
          </div>
        </div>
      </div>

      <div class="exam-detail">
        <Title title="考试情况" />
        <div class="detail-wrapper">
          <div class="total">
            <div>一共</div>
            <div class="common-color">{{ states.answerSheet.length }}题</div>
          </div>
          <div class="correct">
            <div>答对</div>
            <div class="correct-color">{{ states.correctNum }}题</div>
          </div>
          <div class="error">
            <div>答错</div>
            <div class="error-color">{{ states.errorNum }}题</div>
          </div>
          <div class="time">
            <div>总用时</div>
            <div class="common-color">{{ states.examTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  props: {
    states: {
      type: Object,
      default: () => {}
    },
    isStudyTask: {
      type: Boolean,
      default: false
    },
    isTrain: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goUrl: '/pages/myExam/index'
    }
  },
  mounted() {
    if (this.isStudyTask) {
      this.goUrl = '/pages/learningTasks/index'
    } else if (this.isTrain) {
      this.goUrl = '/pages/myTraining/index'
    } else {
      this.goUrl = '/pages/myExam/index'
    }
  },
  methods: {
    onBackPress(options) {
      console.log(options)
      if (options.from == 'backbutton') {
        // 来自手势返回
        console.log('手势返回')
        // 返回为 true 时，不会执行返回操作，可以自定义返回逻辑
        // 返回为 false 或者不返回时，则执行默认返回操作
        return true
      }
      // 返回为 false 或者不返回时，则执行默认返回操作
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;

  .progress {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    // 第二个元素
    &:nth-child(2) {
      font-size: 40px;
      font-weight: 600;
      color: #638dee;
    }

    .item {
      // 向上移动
      transform: translateY(-170px);
    }

    .score {
      font-size: 36px;
      color: #638fed;
    }

    .isPass {
      font-size: 22px;
      color: #333;
    }
  }

  .exam-wrapper {
    transform: translateY(-150px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    color: #8a8a8a;
    line-height: 30px;

    .exam-item {
      display: flex;
      justify-content: space-between;
    }
  }

  .answer-sheet {
    transform: translateY(-140px);

    .answer-wrapper {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .item-wrapper {
        width: 20%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        .answer-item {
          width: 39px;
          height: 39px;
          line-height: 39px;
          text-align: center;
          border-radius: 50%;
          background: #7cd1b6;
          color: #fff;
          &.isAnswer {
            background: #f87b55;
          }
          &.isUnAnswer {
            background: #8a8a8a;
          }
        }
      }
    }
  }

  .exam-detail {
    transform: translateY(-130px);

    .detail-wrapper {
      padding: 16px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      color: #8a8a8a;
      line-height: 30px;
      background-color: #f4f9fe;
      border-radius: 5px;

      .total,
      .correct,
      .error,
      .time {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  // 通用颜色
  .common-color {
    color: #1989fa;
  }

  // 正确颜色
  .correct-color {
    color: #48d66b;
  }

  // 错误颜色
  .error-color {
    color: #f87b55;
  }
}
</style>