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-if="!isShowDesc"
      ref="question-pending"
      :is-submitted="isSubmitted"
      @submit="onSubmit"
    />
    <button
      v-if="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题')"
      class="submit"
      @click="onSubmit"
    >
      提交答案
    </button>
  </div>
</template>

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

export default {
  components: {
    QuestionPending
  },
  data() {
    return {
      isSubmitted: false,
      isShowDesc: false,
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
    ])
  },
  watch: {
  },
  async mounted() {
  },
  methods: {
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    onSubmit() {
      const selectedIdxList = this.$refs['question-pending'].selectedIdxList
      const selectedCount = selectedIdxList.reduce((accumulator, currentValue) => {
        return accumulator + currentValue
      })
      if (selectedCount > 0) {
        this.isSubmitted = true
        console.log('submit!')
      }
    }
  }
}
</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;
  }
}
</style>