adjust popup layout

pages/index.vue

@@ -66,23 +66,27 @@
     <van-popup v-model="q1Mask" round position="bottom" :style="{ height: '94%' }">
       <div class="q1Mask-wrapper">
         <div class="q1Mask-header">
-          <div v-if="q1Mask" class="q1Mask-header-btn" @click="q1Mask = false">取消</div>
+          <div class="q1Mask-header-btn" @click="q1Mask = false">取消</div>
           <div class="q1Mask-header-title">掉签教程</div>
         </div>
+        <div class="q1Mask-img">
           <img src="~/assets/images/q1_img.jpg" />
         </div>
+      </div>
     </van-popup>
-    <van-popup v-model="q2Mask" round position="bottom" :style="{ height: '92.5%' }">
+    <van-popup v-model="q2Mask" round position="bottom" :style="{ height: '94%' }">
       <div class="q1Mask-wrapper">
         <div class="q1Mask-header">
-          <div v-if="q2Mask" class="q1Mask-header-btn" @click="q2Mask = false">取消</div>
+          <div class="q1Mask-header-btn" @click="q2Mask = false">取消</div>
           <div class="q1Mask-header-title">安装教程</div>
         </div>
+        <div class="q1Mask-img">
           <img src="~/assets/images/q2_img.jpg" />
           <div class="q1Mask-btn" @click="goAnti()">一键信任</div>
         </div>
+      </div>
     </van-popup>
-</div>
+  </div>
 </template>
 
 <script>
@@ -306,7 +310,6 @@ export default {
 
 .q1Mask-header {
   height: 3rem;
-  position: fixed;
   background-color: white;
   width: 100%;
   border-radius: 1rem 1rem 0 0;
@@ -327,8 +330,13 @@ export default {
   font-weight: bold;
 }
 
-.q1Mask-wrapper img {
-  margin-top: 3rem;
+.q1Mask-img {
+  width: 100%;
+  height: calc(93.8vh - 3rem);
+  overflow-y: auto;
+}
+
+.q1Mask-img img {
   width: 100%;
 }