jpcj-pc/src/views/threeExamAnaly/index.vue

<template>
  <div class="">
    <img class="w-full" src="@/assets/img/login/top_bg.png" />
    <div class="pr30 pl30">
      <div
        class="flex w-full flex-col h137 justify-center content-center relative"
      >
        <div
          @click="
            () => {
              $router.back();
            }
          "
          class="flex w72 h40 right0 round4 items-center justify-center absolute bottom16 bg-primary-yellow cursor-pointer"
        >
          <img
            class="w15 h15 mr5"
            src="@/assets/img/driverExamAnaly/close_icon.png"
          />
          <span class="font16">关闭</span>
        </div>

        <div class="font0 overflow-hidden">
          <span class="font50 text-red-500">{{ score }}</span>
          <span class="font16 text-red-500">分</span>
        </div>

        <div class="font16 w-full">你的成绩</div>
      </div>
      <div
        class="bg-red-100 h46 lh46 w-full pr20 pl20 text-left"
        style="color: #66645c"
      >
        提示：打"√"表示是正确答案；打"×"表示你答错的答案；答题是红色表示没有做。
      </div>
      <div class="pt30 pb30 pt30 pb30">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="round10 pt30 pr30 pl30 pb30 text-left round10 gray-border mb20"
        >
          <div>
            {{ index + 1 }}、<span v-html="list[index].question"></span>
          </div>
          <img
            class="w400"
            v-if="list[index].mediaUrl"
            :src="list[index].mediaUrl"
          />
          <div
            :class="{
              yes:
                list[index].userAnswer &&
                list[index]['an1'] ===
                  list[index]['an' + list[index].answertrue],
              no: list[index].userAnswer && userAnswerList[index] == '1',
              'text-red-500': userAnswerList[index].includes('0'),
            }"
            key="1"
          >
            A、{{ list[index]["an1"] }}
          </div>
          <div
            :class="{
              yes:
                list[index].userAnswer &&
                list[index]['an2'] ===
                  list[index]['an' + list[index].answertrue],
              no: list[index].userAnswer && userAnswerList[index] == '2',
              'text-red-500': userAnswerList[index].includes('0'),
            }"
            key="2"
          >
            B、{{ list[index]["an2"] }}
          </div>
          <div
            :class="{
              yes:
                list[index].userAnswer &&
                list[index]['an3'] ===
                  list[index]['an' + list[index].answertrue],
              no: list[index].userAnswer && userAnswerList[index] == '3',
              'text-red-500': userAnswerList[index].includes('0'),
            }"
            key="3"
            v-if="list[index]['an3']"
          >
            C、{{ list[index]["an3"] }}
          </div>
          <div
            :class="{
              yes:
                list[index].userAnswer &&
                list[index]['an4'] ===
                  list[index]['an' + list[index].answertrue],
              no: list[index].userAnswer && userAnswerList[index] == '4',
              'text-red-500': userAnswerList[index].includes('0'),
            }"
            key="4"
            v-if="list[index]['an4']"
          >
            D、{{ list[index]["an4"] }}
          </div>
          <div
            @click="
              () => {
                alertVisible = true;
                alertContent = list[index].explain;
              }
            "
            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20 cursor-pointer"
          >
            本题解析
          </div>
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      :title="alertTitle"
      :content="alertContent"
    ></mProblemAlert>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { threeApi } from "@/api/three/type";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
// import { Button } from "ant-design-vue";
export default defineComponent({
  setup() {
    return {
      score: ref(0),
      alertVisible: ref(false),
      userAnswerList: ref<string[]>([]),
      alertTitle: ref("解析"),
      alertContent: ref(""),
      list: ref<threeApi.threeForceList[]>([]),
    };
  },
  mounted() {
    this.score = Number(this.$route.query.score);

    this.userAnswerList = JSON.parse(
      (this.$route.query.wrongListRes as string) || "[]"
    );
    this.list = JSON.parse(
      window.sessionStorage.getItem("threeExam_temp_wrong_list") || "[]"
    );
  },
  components: {
    mProblemAlert,
    // aButton: Button,
  },
});
</script>

<style scoped>
.gray-border {
  border: 1px solid #d8d8d8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.yes::before {
  content: "√";
}
.no::before {
  content: "ⅹ";
}
</style>