WenLanGeHotspot/src/views/QuestionJudge.vue

<template>
  <div
    class="question-judge"
  >
    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>
    <div class="title-wrapper">
      <h1>知识问答</h1>
    </div>
    <QuestionPending
      v-show="!isShowDesc"
      ref="question-pending"
      :is-submitted="isSubmitted"
      @submit="onSubmit"
    />
    <AnswerDesc
      v-show="isShowDesc"
    />
    <button
      v-show="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
      class="submit"
      @click="onSubmit"
    >
      提交答案
    </button>
    <div
      v-show="!isShowDesc && isSubmitted && $refs['question-pending']?.isCorrect"
      class="button-wrapper-correct"
    >
      <button
        class="watch-desc"
        @click="onClickWatchDesc"
      >
        答案解析
      </button>
      <button class="next">
        下一题（2）
      </button>
    </div>
    <div
      v-show="!isShowDesc && isSubmitted && !$refs['question-pending']?.isCorrect"
      class="button-wrapper-wrong"
    >
      <button class="next">
        下一题（2）
      </button>
      <button
        class="retry"
        @click="onClickRetry"
      >
        重新答题
      </button>
      <button
        class="watch-desc"
        @click="onClickWatchDesc"
      >
        答案解析
      </button>
    </div>
    <button
      v-show="isShowDesc"
      class="return-question"
      @click="isShowDesc = false"
    >
      返回题目
    </button>
  </div>
</template>

<script>
// import browser from "@/utils/browser";
import QuestionPending from "@/views/QuestionPending.vue"
import AnswerDesc from "@/views/AnswerDesc.vue"

export default {
  components: {
    QuestionPending,
    AnswerDesc,
  },
  data() {
    return {
      isSubmitted: false,
      isShowDesc: false,
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
    ])
  },
  watch: {
  },
  async mounted() {
  },
  methods: {
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    onSubmit() {
      if (this.$refs['question-pending'].canSubmit > 0) {
        this.isSubmitted = true
        console.log('submit!')
      }
    },
    onClickWatchDesc() {
      this.isShowDesc = true
    },
    onClickRetry() {
      this.isSubmitted = false
      this.isShowDesc = false
      this.$refs['question-pending'].selectedIdxList = []
    }
  }
}
</script>

<style lang="less" scoped>
.question-judge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 520px;
  background-image: url(@/assets/images/bg-short.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  > button.close {
    position: absolute;
    top: 40px;
    right: 45px;
    width: 32px;
    height: 34px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .title-wrapper {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 45px;
    width: 250px;
    height: 55px;
    background-image: url(@/assets/images/title-bottom-line-thin.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    > h1 {
      font-size: 36px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      line-height: 42px;
      color: #9A2D0A;
      background: linear-gradient(177deg, #9A2D0A 0%, #D1672B 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  > button.submit {
    margin-top: 10px;
    margin-bottom: 70px;
    width: 150px;
    height: 40px;
    background-image: url(@/assets/images/btn-main-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 20px;
    font-family: LiSu-Regular, LiSu;
    font-weight: 400;
    color: #FFFFFF;
  }
  > .button-wrapper-correct {
    margin-top: 10px;
    margin-bottom: 70px;
    > button {
      width: 149px;
      height: 40px;
      &.watch-desc {
        background-image: url(@/assets/images/btn-normal-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin-right: 15px;
      }
      &.next {
        background-image: url(@/assets/images/btn-main-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }
  > .button-wrapper-wrong {
    margin-top: 10px;
    margin-bottom: 70px;
    > button.next {
      display: block;
      width: 313px;
      height: 40px;
      background-image: url(@/assets/images/btn-main-long-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32px;
      margin-bottom: 8px;
    }
    > button.retry {
      width: 149px;
      height: 40px;
      background-image: url(@/assets/images/btn-normal-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #8F4831;
      margin-right: 15px;
    }
    > button.watch-desc {
      width: 149px;
      height: 40px;
      background-image: url(@/assets/images/btn-normal-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #8F4831;
    }
  }
  > button.return-question {
    margin-top: 10px;
    margin-bottom: 70px;
    display: block;
    width: 313px;
    height: 40px;
    background-image: url(@/assets/images/btn-main-long-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 20px;
    font-family: LiSu-Regular, LiSu;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32px;
  }
}
</style>