移动端 热点位置提示页

src/assets/style/reset.less

@@ -24,7 +24,7 @@ a{text-decoration: none;}
 
 
 ::-webkit-scrollbar { width: 5px; height: 5px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-::-webkit-scrollbar-thumb { background: #8f4831; border-radius: 2.5px;}
+::-webkit-scrollbar-thumb { background: rgba(46, 32, 19, 0.55); border-radius: 2.5px;}
 ::-webkit-scrollbar-button { display: none; }
 ::-webkit-scrollbar-track { background: gray; border-radius: 2.5px;}
 // 横竖滚动条轨道交汇处
@@ -32,6 +32,16 @@ a{text-decoration: none;}
 // 有必要给resizer设置border_radius吗？
 ::-webkit-scrollbar-resizer { background: transparent; }
 
+.mobile {
+  ::-webkit-scrollbar { width: 2px; height: 2px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+  ::-webkit-scrollbar-thumb { background: rgba(143, 72, 49, 0.5); border-radius: 1px;}
+  ::-webkit-scrollbar-track { background: transparent; border-radius: 1px;}
+  // 横竖滚动条轨道交汇处
+  ::-webkit-scrollbar-corner { background: transparent; }
+  // 有必要给resizer设置border_radius吗？
+  ::-webkit-scrollbar-resizer { background: transparent; }
+}
+
 .el-pagination button:disabled{
   background-color: transparent;
 }

src/views/gui/QuestionPositionTip.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="question-position-tip">
-    <div class="wrapper-1">
+    <div
+      class="wrapper-1"
+      :style="{
+        width: initialWrapperWidth + 'px',
+        height: initialWrapperHeight + 'px',
+        transform: wrapperTransformCss,
+      }"
+    >
       <button
         class="close"
         @click="$router.go(-1)"
@@ -12,7 +19,10 @@
         <p class="txt">
           请根据图片提示，寻找并查看知识点。超过{{ badgeGoalNum }}个知识点即可获得相应徽章。
         </p>
-        <p class="number">
+        <p
+          v-if="!isMobile"
+          class="number"
+        >
           {{ badgeCurrNum }}/{{ badgeTotalNum }}
         </p>
       </div>
@@ -107,6 +117,25 @@ export default {
     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) => {
@@ -139,12 +168,9 @@ export default {
   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;
@@ -226,4 +252,57 @@ export default {
     }
   }
 }
+
+.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>