WenLanGe/src/views/gui/QuestionPositionTip.vue

<template>
  <div class="question-position-tip">
    <div
      class="wrapper-1"
      :style="{
        width: initialWrapperWidth + 'px',
        height: initialWrapperHeight + 'px',
        transform: wrapperTransformCss,
      }"
    >
      <button
        class="close"
        @click="$router.go(-1)"
      />
      <h1 class="introduction-title">
        {{ badgeTypeTxt }}
      </h1>
      <div class="introduction">
        <p class="txt">
          请根据图片提示，寻找并查看知识点。超过{{ badgeGoalNum }}个知识点即可获得相应徽章。
        </p>
        <p
          v-if="!isMobile"
          class="number"
        >
          {{ badgeCurrNum }}/{{ badgeTotalNum }}
        </p>
      </div>
      <ul class="img-list">
        <li
          v-for="(item, index) in quizListInBadgeType"
          :key="index"
        >
          <img
            class="position"
            :src="require(`@/assets/images/quizScreenshots/${item.id}.png`)"
            alt=""
            draggable="false"
          >
          <img
            v-if="quizStatus(item.id) === 1"
            class="status"
            src="@/assets/images/quiz-status-correct.png"
            alt=""
            draggable="false"
          >
          <img
            v-if="quizStatus(item.id) === 0"
            class="status"
            src="@/assets/images/quiz-status-wrong.png"
            alt=""
            draggable="false"
          >
          <img
            v-if="quizStatus(item.id) === -1"
            class="status"
            src="@/assets/images/quiz-status-blank.png"
            alt=""
            draggable="false"
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import quizData, { badgeTypeCode2txt } from "@/quizData.js"
import globalApi from "@/api"

export default {
  data() {
    return {
      answerRecord: null,
    }
  },
  computed: {
    ...globalMapState([
      'badgeArchGoal',
      'badgeHistoryGoal',
      'badgeProtectorGoal',
      'badgeArchCurrent',
      'badgeHistoryCurrent',
      'badgeProtectorCurrent',
    ]),
    badgeTypeTxt() {
      return badgeTypeCode2txt[this.$route.query.badgeCode]
    },
    badgeGoalNum() {
      switch (this.$route.query.badgeCode) {
      case '1':
        return this.badgeArchGoal
      case '2':
        return this.badgeHistoryGoal
      case '3':
        return this.badgeProtectorGoal
      default:
        return 5
      }
    },
    badgeCurrNum() {
      switch (this.$route.query.badgeCode) {
      case '1':
        return this.badgeArchCurrent
      case '2':
        return this.badgeHistoryCurrent
      case '3':
        return this.badgeProtectorCurrent
      default:
        return 0
      }
    },
    quizListInBadgeType() {
      return quizData.filter((item) => {
        return item.badgeTypeCode.includes(this.$route.query.badgeCode)
      })
    },
    badgeTotalNum() {
      return this.quizListInBadgeType.length
    },
    initialWrapperWidth() {
      return this.isMobile ? 330 : 1017
    },
    initialWrapperHeight() {
      return this.isMobile ? 678 : 691
    },
    wrapperTransformCss() {
      if (this.isMobile) {
        const WHRateViewport = window.innerWidth / window.innerHeight
        const WHRateComp = this.initialWrapperWidth / this.initialWrapperHeight
        if (WHRateViewport >= WHRateComp) { // 视口矮宽
          return `translate(-50%, -50%) scale(${window.innerHeight / this.initialWrapperHeight * 0.9})`
        } else {
          return `translate(-50%, -50%) scale(${window.innerWidth / this.initialWrapperWidth * 0.9})`
        }
      } else {
        return ''
      }
    }
  },
  mounted() {
    globalApi.getAnswerRecord().then((res) => {
      this.answerRecord = res
    })
  },
  methods: {
    quizStatus(id) {
      if (!this.answerRecord) {
        return undefined
      }
      const answerTarget = this.answerRecord.find(recordItem => {return recordItem.num === id})
      if (!answerTarget) {
        return -1 // 没答过
      }
      return answerTarget.hasRight // 0: 错 1：对
    }
  }
}
</script>

<style lang="less" scoped>
.question-position-tip {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(46,32,19,0.55);
  backdrop-filter: blur(5px);
  z-index: 10000;
  > .wrapper-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url(@/assets/images/quiz-position-tip-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 50px 40px 40px 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    > .close {
      position: absolute;
      top: 52px;
      right: 47px;
      width: 42px;
      height: 45px;
      background-image: url(@/assets/images/close.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    > h1.introduction-title {
      flex: 0 1 auto;
      display: inline-block;
      background-image: url(@/assets/images/title_decorator.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      padding: 0 92px 25px 92px;
      font-size: 36px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #ab3f14;
    }
    > .introduction {
      flex: 0 1 auto;
      margin-top: 5px;
      text-align: center;
      > p.txt {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #A4573F;
      }
      > p.number {
        margin-top: 10px;
        font-size: 22px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: bold;
        color: #b3735c;
      }
    }
    > ul.img-list {
      margin-top: 10px;
      flex: 1 0 1px;
      width: 100%;
      overflow: auto;
      > li {
        display: inline-block;
        width: 270px;
        height: 192px;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #FFFFFF;
        position: relative;
        margin-right: 29px;
        margin-bottom: 24px;
        > img.position {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        > img.status {
          position: absolute;
          right: 7px;
          bottom: 7px;
          width: 36px;
          height: 36px;
        }
      }
    }
  }
}

.mobile {
  .question-position-tip {
    > .wrapper-1 {
      background-image: url(@/assets/images/quiz-position-tip-bg-mobile.png);
      padding: 50px 21px 40px 32px;
      > .close {
        top: 52px;
        right: 25px;
        width: 23px;
        height: 23px;
      }
      > h1.introduction-title {
        margin-right: 15px;
        background-image: url(@/assets/images/title-decorator-mobile.png);
        font-size: 24px;
        padding: 0 30px 15px 30px;
      }
      > .introduction {
        margin-top: 5px;
        margin-right: 15px;
        > p.txt {
          text-align: justify;
          font-size: 14px;
          opacity: 0.8;
        }
      }
      > ul.img-list {
        margin-top: 10px;
        padding-right: 13px;
        > li {
          width: 100%;
          height: 170px;
          margin-bottom: 10px;
          margin-right: initial;
          > img.position {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          > img.status {
            position: absolute;
            right: 5px;
            bottom: 5px;
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
}
</style>