热点位置提示

src/assets/style/reset.less

@@ -22,24 +22,16 @@ body{background:#fff;}
 a{text-decoration: none;}
 
 
-::-webkit-scrollbar {
-  width: 2px;
-  height: 8px;
-}
 
-::-webkit-scrollbar-thumb {
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
-  outline-offset: -2px;
-}
+::-webkit-scrollbar { width: 5px; height: 5px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb { background: #8f4831; border-radius: 2.5px;}
+::-webkit-scrollbar-button { display: none; }
+::-webkit-scrollbar-track { background: gray; border-radius: 2.5px;}
+// 横竖滚动条轨道交汇处
+::-webkit-scrollbar-corner { background: transparent; }
+// 有必要给resizer设置border_radius吗？
+::-webkit-scrollbar-resizer { background: transparent; }
 
-::-webkit-scrollbar-thumb:hover {
-  height: 50px;
-  background-color: #9f9f9f;
-  -webkit-border-radius: 4px;
-}
 .el-pagination button:disabled{
   background-color: transparent;
 }

src/router/index.js

@@ -5,6 +5,7 @@ import RuleDesc from "@/views/gui/RuleDesc.vue"
 import Login from "@/views/gui/Login.vue"
 import SignUp from "@/views/gui/SignUp.vue"
 import Share from "@/views/gui/Share.vue"
+import QuestionPositionTip from "@/views/gui/QuestionPositionTip.vue"
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -39,6 +40,11 @@ const routes = [
         name: 'Share',
         component: Share,
       },
+      {
+        path: 'question-position-tip',
+        name: 'QuestionPositionTip',
+        component: QuestionPositionTip,
+      },
     ]
   }
 ]

src/views/gui/QuestionPositionTip.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="question-position-tip">
+    <div class="wrapper-1">
+      <button
+        class="close"
+        @click="$router.go(-1)"
+      />
+      <h1 class="introduction-title">
+        {{ badgeTypeTxt }}
+      </h1>
+      <div class="introduction">
+        <p class="txt">
+          请根据图片提示，寻找并查看知识点。超过{{ badgeGoalNum }}个知识点即可获得相应徽章。
+        </p>
+        <p 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"
+
+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
+    },
+  },
+  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 {
+    width: 1017px;
+    height: 691px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -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;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/gui/UserInfo.vue

@@ -40,7 +40,10 @@
           </button>
         </menu>
       </div>
-      <div class="badge-info-wrapper">
+      <div
+        class="badge-info-wrapper"
+        @click="onClickBadgeInfo('1')"
+      >
         <div class="img-wrapper">
           <img
             class=""
@@ -60,7 +63,10 @@
           营造专家
         </div>
       </div>
-      <div class="badge-info-wrapper">
+      <div
+        class="badge-info-wrapper"
+        @click="onClickBadgeInfo('2')"
+      >
         <div class="img-wrapper">
           <img
             class=""
@@ -80,7 +86,10 @@
           历史达人
         </div>
       </div>
-      <div class="badge-info-wrapper">
+      <div
+        class="badge-info-wrapper"
+        @click="onClickBadgeInfo('3')"
+      >
         <div class="img-wrapper">
           <img
             class=""
@@ -203,6 +212,9 @@ export default {
     },
     onClickShare() {
       this.$router.push({ name: 'Share' })
+    },
+    onClickBadgeInfo(badgeCode) {
+      this.$router.push({ name: 'QuestionPositionTip', query: { badgeCode } })
     }
   }
 }
@@ -276,6 +288,7 @@ export default {
     }
     > .badge-info-wrapper {
       margin-bottom: 9px;
+      cursor: pointer;
       > .img-wrapper {
         width: 80px;
         height: 80px;