yueyang-map-h5/src/views/answer/index.vue

<!--  -->
<template>
  <div class="answer">
    <Header title="诗潮岳涌" />
    <div class="bg-container">
      <div class="bg-img">
        <img src="@/assets/images/anserHome.png" alt="" />
      </div>

      <div class="control-box">
        <div class="pic"></div>

        <div class="content">
          <div class="title">
            <div class="icon"></div>
            <span>{{ custom[answerIndex].question }}</span>
          </div>
          <div class="options">
            <div
              @click="changeOption(index, i)"
              class="item"
              v-for="(i, index) in custom[answerIndex].options"
              :class="{ isTrue: optionIndex != -1 && i.correct, isFalse: optionIndex == index && !i.correct }"
            >
              <span>{{ i.text }}</span>
              <!-- <div v-if="optionIndex != -1 && i.correct" class="icon true"></div>
              <div v-if="optionIndex == index && !i.correct" class="icon false"></div> -->
            </div>
          </div>
          <div class="viewer" :class="{ show: isCheck }" @click="showReview = true">查看解析</div>
        </div>
      </div>
    </div>
    <div class="review-layer" v-if="showReview">
      <div class="review-bg">
        <div class="text-box">
          <div class="header">
            <p class="review-title">{{ custom[answerIndex].content.title }}</p>
            <span class="review-author">{{ custom[answerIndex].content.time }} {{ custom[answerIndex].content.author }} </span>
            <p class="review-content" v-html="custom[answerIndex].content.text"></p>
          </div>
          <div class="body">
            <p class="desc-title">诗词译文</p>
            <p class="desc" v-html="custom[answerIndex].content.explain"></p>
            <p class="desc-title">诗词赏析</p>
            <p class="desc" v-html="custom[answerIndex].content.appreciate"></p>
          </div>
        </div>
        <div class="controls-box">
          <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
          <div class="continue" @click="reStartOrContinue()">继续</div>
        </div>
      </div>
    </div>
    <div class="complete-layer" v-if="showComplete">
      <div>
        <div class="complete-content">
          <div class="pic"></div>
          <p>恭喜您！</p>
          <p class="complete-title">您已完成全部题目</p>
          <p class="complete-count">
            答对<span>{{ counts }}</span
            >道题目
          </p>
          <div class="replay" @click="reStartOrContinue(0)">重新开始</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted, watch } from "vue";
import Header from "@/components/header/index.vue";
import { custom } from "./constant";
const answerIndex = ref(0);
const optionIndex = ref(-1);
const isCheck = ref(false);
const counts = ref(0);
const showReview = ref(false);
const showComplete = ref(false);
const changeOption = (index, i) => {
  if (!isCheck.value) {
    optionIndex.value = index;
    if (i.correct) {
      counts.value++;
    }
    isCheck.value = true;
    // setTimeout(() => {
    //   showReview.value = true;
    // }, 1000);
  }
};
watch(
  () => isCheck.value,
  (val) => {
    if (val) {
      // answerIndex.value++;
      // optionIndex.value = -1;
    }
  }
);
const reStartOrContinue = (type = 1) => {
  if (type == 0) {
    answerIndex.value = 0;
    showComplete.value = false;
  } else {
    if (answerIndex.value >= custom.length - 1) {
      showComplete.value = true;
    } else {
      answerIndex.value++;
    }
  }
  optionIndex.value = -1;
  isCheck.value = false;
  showReview.value = false;
};
</script>
<style lang="scss" scoped>
.answer {
  width: 100%;
  height: 100%;
  .bg-container {
    width: 100%;
    height: 100%;
    position: relative;
    .bg-img {
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .control-box {
      min-height: 40%;
      width: 100%;
      background: url("@/assets/images/answerBg.png") no-repeat;
      background-size: cover;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 0.9333rem 1.1467rem 0;
      padding-top: 0.4rem;
      .pic {
        width: 3.8667rem;
        height: 1.6667rem;
        background: url("@/assets/images/answerTitle.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -2.4rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .content {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .title {
          min-height: 0.9333rem;
          border-radius: 0.4667rem;
          padding: 0.1333rem 0.2667rem;
          display: flex;
          align-items: center;
          // justify-content: flex-start;
          font-size: 0.3733rem;
          color: #3d2924;
          margin-top: 1.3333rem;
          margin-bottom: 0.5867rem;
          .icon {
            width: 0.3067rem;
            height: 0.3067rem;
            background: url("../../assets/images/answerTitleIcon.png");
            background-size: 100% 100%;

            display: inline-block;
          }
          span {
            padding-left: 0.1333rem;
            display: inline-block;
            width: calc(100% - 0.3067rem);
          }
        }
        .viewer {
          width: 4.2667rem;
          height: 1.0933rem;
          color: #fff;
          font-size: 0.3733rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("../../assets/images/fristBtn.png");
          background-size: 100% 100%;
          margin: 2.6667rem auto 1.8267rem;
          // margin-bottom: 1.8267rem;
          visibility: hidden;
          &.show {
            visibility: visible;
          }
        }
        .options {
          margin-top: 0.5333rem;
          .item {
            background: #fff;
            min-height: 1.28rem;
            border-radius: 0.4533rem;
            padding: 0.1333rem 0.2667rem;
            display: flex;
            align-items: center;
            justify-content: center;
            // box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25); /* 内阴影效果 */
            font-size: 0.3733rem;
            color: rgba(0, 0, 0, 0.8);
            margin-bottom: 0.2667rem;

            border-radius: 1.1733rem;
            border: 1px solid rgba(106, 73, 52, 0.5);
            background: none;
            &.isFalse {
              background: rgba(227, 97, 97, 0.3);
              border: 1px solid rgba(167, 9, 9, 0.5);
              color: rgba(146, 37, 37, 1);
            }
            &.isTrue {
              background: rgba(76, 179, 127, 0.3);
              border: 1px solid #4cb37f;
              color: rgba(14, 132, 73, 1);
            }

            span {
              width: 100%;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .review-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    // background: url("@/assets/images/reviewBg.png") no-repeat;
    // background-size: cover;
    padding: 1.12rem 0 0 1.1467rem;
    .review-bg {
      width: 100%;
      height: calc(100% - 1.0667rem);
      padding: 1.6rem .5333rem 1.3333rem;
      // overflow-y: auto;
      background: url("@/assets/images/reviewBg.png") no-repeat;
      background-size: 100% 100%;
      background-color: #f2f2f2;
      position: absolute;
      bottom: 0;
      left: 0;
      .text-box {
        width: 100%;
        height: 85%;
        overflow-y: auto;
        .header {
          width: 90%;
          padding: 0 0.4rem 0.5333rem;
          border-bottom: 0.0267rem dashed #9c8f86;
          margin: 0 auto;
          .review-title {
            font-weight: bold;
            font-size: 0.4667rem;
            color: #3d2924;
            text-align: center;
            margin-top: 0.4rem;
          }
          .review-author {
            font-weight: 400;
            font-size: 0.3733rem;
            color: #3d2924;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 1.0667rem;
            margin-top: 0.4rem;
          }
          .review-content {
            font-size: 0.3733rem;
            color: #3d2924;
            line-height: 0.6533rem;
            letter-spacing: 0.12rem;
            display: flex;
            margin-top: 0.2rem;
            align-items: center;
            justify-content: center;
          }
        }
        .body {
          width: 90%;
          // padding: 0 0.4rem 0.5333rem;
          margin: 0 auto;
          .desc-title {
            font-weight: bold;
            font-size: 0.4667rem;
            color: #6a4934;
            margin-top: 0.9067rem;
            &::before {
              content: "";
              width: 0.3067rem;
              height: 0.3067rem;
              display: inline-block;
              background: url("@/assets/images/reviewTitleIcon.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 0.16rem;
            }
          }
          .desc {
            font-weight: 400;
            font-size: 0.3333rem;
            color: rgba(106, 73, 52, 0.8);
            line-height: 0.4933rem;
            margin-top: 0.5333rem;
          }
        }
      }
      .controls-box {
        width: 100%;
        height: 20%;
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        > div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 2.7067rem;
          height: 0.8267rem;
          font-weight: 400;
          font-size: 0.3333rem;
          color: #fff;
          background: none;
          background: url("@/assets/images/answer-btn.png") no-repeat;
          background-size: 100% 100%;
        }
        .replay {
          margin-right: 0.2667rem;
        }
        .continue {
        }
      }
    }
  }

  .complete-layer {
    background: url("@/assets/images/anserHome.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    > div {
      width: 90%;
      height: 80%;
      background: url("@/assets/images/answerBg.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      .complete-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .pic {
          width: 6.0667rem;
          height: 2.08rem;
          background: url("@/assets/images/complete@2x.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 1.0667rem;
        }
        p {
          font-weight: 400;
          font-size: 0.3333rem;
          color: #3d2924;
          line-height: 0.4933rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .complete-count {
          font-size: 0.3333rem;
          margin-top: 0.4rem;
          span {
            font-size: 0.84rem;
            font-weight: bold;
          }
        }

        .replay {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 4.2667rem;
          height: 1.0933rem;
          font-weight: 400;
          font-size: 0.4267rem;
          color: #fff;
          line-height: 0.4933rem;
          background: url("@/assets/images/fristBtn.png") no-repeat;
          background-size: 100% 100%;
          border-radius: 1.1733rem;
          margin-top: 1.84rem;
        }
      }
    }
  }
}
.icon {
  width: 0.5333rem;
  height: 0.5333rem;
  &.true {
    background: url("@/assets/images/true.png") no-repeat;
    background-size: 100% 100%;
  }
  &.false {
    background: url("@/assets/images/false.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>