Merge branch 'master' of http://192.168.0.115:3000/chenzimin2/ZGZQBWG

game/src/components/QuestionInner.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="question-inner">
+    <p class="question">
+      {{ questionList[currentQuestionIdx].question }}
+    </p>
+    <button
+      v-for="(option, index) in questionList[currentQuestionIdx].answerOptions"
+      :key="index"
+      :disabled="isSubmitted"
+      class="option"
+      :class="{
+        selected: selectedIdx === index,
+        rightOption: questionList[currentQuestionIdx].rightOptionIdx === index,
+        wrongOption: !questionList[currentQuestionIdx].rightOptionIdx !== index,
+        submitted: isSubmitted,
+        notSubmitted: !isSubmitted,
+      }"
+      @click="onClickOption(index)"
+    >
+      <div class="option-text">
+        {{ option }}
+      </div>
+      <div
+        v-show="isSubmitted && selectedIdx === index && questionList[currentQuestionIdx].rightOptionIdx.includes(index)"
+        class="result-tip"
+      >
+        <img
+          class="correct-icon"
+          src="@/assets/images/exam-paper-icon-correct.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <div
+        v-show="isSubmitted && selectedIdx === index && !questionList[currentQuestionIdx].rightOptionIdx.includes(index)"
+        class="result-tip"
+      >
+        <img
+          class="wrong-icon"
+          src="@/assets/images/exam-paper-icon-wrong.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: [
+  ],
+  data() {
+    return {
+      selectedIdx: null,
+      questionList: [
+        {
+          question: '你是sb吗？',
+          answerOptions: [
+            '是',
+            '不是',
+          ],
+          rightOptionIdx: 0,
+        },
+      ],
+      currentQuestionIdx: 0,
+      isSubmitted: false,
+    }
+  },
+  computed: {
+    isCorrect() {
+      return true
+    },
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+    onClickOption(idx) {
+      this.selectedIdx = idx
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.question-inner {
+  flex: 1 0 1px;
+  width: calc(100% - 150px * 2);
+  margin-top: 10px;
+  counter-reset: count;
+  > p.question {
+    margin-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+    max-height: 50px;
+    overflow: auto;
+  }
+  > button.option {
+    margin-top: 6px;
+    height: 45px;
+    padding-left: 10px;
+    padding-right: 50px;
+    padding-top: 5px;
+    width: 100%;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #693D2F;
+    counter-increment: count;
+    &.notSubmitted:hover {
+      color: #5f9533;
+    }
+    &.notSubmitted.selected {
+      background-image: url(@/assets/images/option-correct-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: #5f9533;
+    }
+    &.submitted {
+      pointer-events: none;
+    }
+    &.submitted.rightOption {
+      background-image: url(@/assets/images/option-correct-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      color: #5f9533;
+    }
+    &.submitted.selected.wrongOption {
+      background-image: url(@/assets/images/option-wrong-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    > .option-text {
+      &::before {
+        content: counter(count, upper-alpha);
+        margin-right: 0.5em;
+      }
+    }
+    > .result-tip {
+      display: inline-flex;
+      align-items: center;
+      > img.correct-icon {
+        width: 16px;
+        height: 12px;
+        margin-right: 9px;
+      }
+      > img.wrong-icon {
+        width: 13px;
+        height: 13px;
+        margin-right: 9px;
+      }
+    }
+  }
+}
+</style>

game/src/router/index.js

@@ -1,6 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import PlantTree from '../views/PlantTree.vue'
+import ExamPaper1 from '../views/ExamPaper1.vue'
+import ExamPaper2 from '../views/ExamPaper2.vue'
+import ExamPaper3 from '../views/ExamPaper3.vue'
 import PairUp from '../views/PairUp.vue'
 // import store from '@/store/index.js'
 
@@ -16,6 +19,21 @@ const routes = [
     component: PlantTree,
   },
   {
+    path: '/exam-paper-1',
+    name: 'ExamPaper1',
+    component: ExamPaper1,
+  },
+  {
+    path: '/exam-paper-2',
+    name: 'ExamPaper2',
+    component: ExamPaper2,
+  },
+  {
+    path: '/exam-paper-3',
+    name: 'ExamPaper3',
+    component: ExamPaper3,
+  },
+  {
     path: '/pair-up',
     name: 'PairUp',
     component: PairUp,

game/src/views/ExamPaper1.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="exam-paper">
+    <img
+      class="title"
+      src="@/assets/images/exam-paper-title-1.png"
+      alt=""
+      draggable="false"
+    >
+    <div
+      class="introduction"
+    >
+      <p>在这里，你将扮演一位杰出的助农专家，与广大农民一同携手迎接农业的挑战。</p>
+      <p>
+        通过回答问题，你将为农民刘大叔提供宝贵的建议，帮助他实现丰收和提高收入。你的农业智慧将在这片土地上开花结果，让我们一同踏上这场充满知识和农耕乐趣的冒险吧！
+      </p>
+    </div>
+    <!-- 底部按钮 -->
+    <button
+      class="start"
+      @click="router.push({
+        name: 'ExamPaper2',
+      })"
+    >
+      开始答题
+    </button>
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import dayjs from 'dayjs'
+import { shuffle } from 'lodash'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+</script>
+
+<style lang="less" scoped>
+.exam-paper{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/exam-paper-bg-1.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  >img.title{
+    position: absolute;
+    left: 50%;
+    top: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(282 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(129 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.introduction{
+    position: absolute;
+    left: 50%;
+    top: calc(215 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(295 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(313 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 1.5;
+    >p{
+      margin-bottom: 1em;
+    }
+  }
+  >button.start{
+    position: absolute;
+    left: 50%;
+    bottom: calc(59 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/exam-paper-btn-long-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 800;
+    color: #FFFFFF;
+    line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

game/src/views/ExamPaper2.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="exam-paper-2">
+    <img
+      class="title"
+      src="@/assets/images/exam-paper-title-2.png"
+      alt=""
+      draggable="false"
+    >
+    <!-- 左上角按钮 -->
+    <div class="btn-group">
+      <button
+        class="return-home"
+        @click="onClickReturnHome"
+      />
+      <button class="game-rule" />
+    </div>
+
+    <div class="question-inner">
+      <p class="question">
+        {{ questionList[currentQuestionIdx].question }}
+      </p>
+      <button
+        v-for="(option, index) in questionList[currentQuestionIdx].answerOptions"
+        :key="index"
+        :disabled="isSubmitted"
+        class="option"
+        :class="{
+          selected: selectedIdx === index,
+          rightOption: questionList[currentQuestionIdx].rightOptionIdx === index,
+          wrongOption: questionList[currentQuestionIdx].rightOptionIdx !== index,
+          submitted: isSubmitted,
+          notSubmitted: !isSubmitted,
+        }"
+        @click="onClickOption(index)"
+      >
+        <div class="option-text">
+          {{ option }}
+        </div>
+        <div
+          v-show="isSubmitted && selectedIdx === index && questionList[currentQuestionIdx].rightOptionIdx === index"
+          class="result-tip"
+        >
+          <img
+            class="correct-icon"
+            src="@/assets/images/exam-paper-icon-correct.png"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div
+          v-show="isSubmitted && selectedIdx === index && questionList[currentQuestionIdx].rightOptionIdx !== index"
+          class="result-tip"
+        >
+          <img
+            class="wrong-icon"
+            src="@/assets/images/exam-paper-icon-wrong.png"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </button>
+      <div
+        v-show="isSubmitted && questionList[currentQuestionIdx].desc"
+        class="answer-desc"
+      >
+        答案解析：{{ questionList[currentQuestionIdx].desc }}
+      </div>
+    </div>
+
+    <!-- 底部信息栏 -->
+    <div
+      class="common-info-group"
+    >
+      <div class="info-item bonus-point">
+        <img
+          class="icon"
+          src="@/assets/images/icon_bonus_point.png"
+          alt=""
+          draggable="false"
+        >
+        <span class="number">{{ bonusPoint }}</span>
+      </div>
+      <div class="info-item time-count">
+        <img
+          class="icon"
+          src="@/assets/images/icon_time_count.png"
+          alt=""
+          draggable="false"
+        >
+        <span class="number">{{ timeCountForShow }}</span>
+      </div>
+    </div>
+    <button
+      class="next"
+      @click="onClickNext"
+    >
+      下一题
+    </button>
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import dayjs from 'dayjs'
+import { shuffle } from 'lodash'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+function onClickReturnHome() {
+  router.push({
+    name: 'HomeView',
+  })
+}
+
+/**
+ * 倒计时
+ */
+const timeCount = ref(120)
+let timeCountIntervalId = null
+timeCountIntervalId = setInterval(() => {
+  timeCount.value--
+  if (timeCount.value === 0) {
+    clearInterval(timeCountIntervalId)
+    router.replace({
+      name: 'ExamPaper3',
+      query: {
+        correntCount: correntCount.value,
+        bonusPoint: bonusPoint.value,
+      }
+    })
+  }
+}, 1000)
+onBeforeUnmount(() => {
+  clearInterval(timeCountIntervalId)
+})
+const timeCountForShow = computed(() => {
+  return dayjs(timeCount.value * 1000).format('m:ss')
+})
+
+// 积分
+const bonusPoint = ref(0)
+// 答对计数
+const correntCount = ref(0)
+
+/**
+ * 游戏具体逻辑
+ */
+const selectedIdx = ref(null)
+const questionList = ref([
+  {
+    question: '你是sb吗？',
+    answerOptions: [
+      '是',
+      '不是',
+    ],
+    rightOptionIdx: 0,
+    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  },
+  {
+    question: '你是sb吗？',
+    answerOptions: [
+      '是',
+      '不是',
+    ],
+    rightOptionIdx: 0,
+    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  },
+  {
+    question: '你是sb吗？',
+    answerOptions: [
+      '是',
+      '不是',
+    ],
+    rightOptionIdx: 0,
+    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  },
+])
+const currentQuestionIdx = ref(0)
+const isSubmitted = computed(() => {
+  return selectedIdx.value !== null
+})
+const isCorrect = computed(() => {
+  return true
+})
+function onClickOption(idx) {
+  this.selectedIdx = idx
+  if (this.selectedIdx === questionList.value[currentQuestionIdx.value].rightOptionIdx) {
+    bonusPoint.value += 10
+    correntCount.value++
+  }
+}
+function onClickNext() {
+  if (currentQuestionIdx.value < questionList.value.length - 1) {
+    currentQuestionIdx.value++
+    selectedIdx.value = null
+  } else {
+    router.replace({
+      name: 'ExamPaper3',
+      query: {
+        correntCount: correntCount.value,
+        bonusPoint: bonusPoint.value,
+      }
+    })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.exam-paper-2{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/exam-paper-bg-2.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  >img.title{
+    position: absolute;
+    left: 50%;
+    top: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(213 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.btn-group{
+    position: absolute;
+    top: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    flex-direction: column;
+    gap: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button.return-home{
+      background-image: url(@/assets/images/icon_home.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button.game-rule{
+      background-image: url(@/assets/images/icon_rules.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >.question-inner {
+    flex: 1 0 1px;
+    width: calc(100% - 150px * 2);
+    margin-top: 10px;
+    counter-reset: count;
+    position: absolute;
+    left: 50%;
+    top: calc(162 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(284 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: 52%;
+    overflow: auto;
+    > p.question {
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 1.5;
+    }
+    > button.option {
+      margin-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #CCC;
+      counter-increment: count;
+      border-radius: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border: 1px solid #CCCCCC;
+      &.submitted {
+        pointer-events: none;
+      }
+      &.submitted.selected.rightOption {
+        color: #4AFFD4;
+        border: 1px solid #4AFFD4;
+      }
+      &.submitted.selected.wrongOption {
+        color: #FF6A6A;
+        border: 1px solid #FF6A6A;
+      }
+      > .option-text {
+        &::before {
+          content: counter(count, upper-alpha);
+          margin-right: 0.5em;
+        }
+      }
+      > .result-tip {
+        > img.correct-icon {
+          width: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        > img.wrong-icon {
+          width: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+    > .answer-desc{
+      margin-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 1.5;
+    }
+  }
+  >.common-info-group{
+    position: absolute;
+    left: 50%;
+    bottom: calc(131 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    display: flex;
+    gap: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.info-item{
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      padding-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-right: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: #395953;
+      border-radius: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      box-shadow: #16332E calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0 0;
+      >.icon{
+      }
+      >.number{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: heiti;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.bonus-point{
+      >.icon{
+        width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.time-count{
+      >.icon{
+        width: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+  >button.next{
+    position: absolute;
+    left: 50%;
+    bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/exam-paper-btn-long-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 800;
+    color: #FFFFFF;
+    line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+</style>

game/src/views/ExamPaper3.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="exam-paper-3">
+    <img
+      class="title"
+      src="@/assets/images/exam-paper-title-2.png"
+      alt=""
+      draggable="false"
+    >
+    <!-- 左上角按钮 -->
+    <div class="top-btn-group">
+      <button
+        class="return-home"
+        @click="onClickReturnHome"
+      />
+      <button class="game-rule" />
+    </div>
+    <img
+      class="star"
+      src="@/assets/images/pair-up-over-star.png"
+      alt=""
+      draggable="false"
+    >
+    <h2>恭喜您！</h2>
+    <p class="corp-count">
+      您一共答对<span class="number">{{ route.query.correntCount }}</span>道题
+    </p>
+    <p class="bonus-count">
+      获得<span class="number">{{ route.query.bonusPoint }}</span>积分
+    </p>
+    <div
+      class="bottom-btn-bar"
+    >
+      <button
+        @click="router.replace({
+          name: 'ExamPaper2'
+        })"
+      >
+        重新答题
+      </button>
+      <button>
+        返回首页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+</script>
+
+<style lang="less" scoped>
+.exam-paper-3{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/exam-paper-bg-2.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  >img.title{
+    position: absolute;
+    left: 50%;
+    top: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(213 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >.top-btn-group{
+    position: absolute;
+    top: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    flex-direction: column;
+    gap: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button.return-home{
+      background-image: url(@/assets/images/icon_home.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button.game-rule{
+      background-image: url(@/assets/images/icon_rules.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >img.star{
+    position: absolute;
+    left: 50%;
+    top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >h2{
+    position: absolute;
+    left: 50%;
+    top: calc(380 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-35%, 0);
+    font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  >p.corp-count{
+    position: absolute;
+    left: 50%;
+    top: calc(440 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: pre;
+    >span.number{
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: heiti;
+      font-weight: bold;
+      color: #EFB622;
+      line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: 0.2em;
+      margin-right: 0.2em;
+    }
+  }
+  >p.bonus-count{
+    position: absolute;
+    left: 50%;
+    top: calc(480 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: pre;
+    >span.number{
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: heiti;
+      font-weight: bold;
+      color: #EFB622;
+      line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: 0.2em;
+      margin-right: 0.2em;
+    }
+  }
+  >.bottom-btn-bar{
+    position: absolute;
+    left: 50%;
+    bottom: calc(73 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(322 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    justify-content: space-between;
+    >button{
+      width: calc(149 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-image: url(@/assets/images/exam-paper-btn-short-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 800;
+      color: #FFFFFF;
+      line-height: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      // -webkit-text-stroke: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #4E3933;
+      padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+}
+</style>