模拟考试部分ui放大

src/components/m-do-topic/components/explainJq.vue

@@ -7,8 +7,8 @@
           v-if="explainJqGif"
           :src="explainJqGif"
         ></image>
-        <div class="text">{{ explainJq }}</div>
-        <div class="btn">
+        <div class="text uni-app-fontsize-paragraph">{{ explainJq }}</div>
+        <div class="btn uni-app-fontsize-paragraph">
           <span
             @click="
               () => {
@@ -133,7 +133,7 @@ export default {
       background: #ffffff;
     }
     .text {
-      font-size: 13px;
+ 
       font-family: PingFang SC;
       font-weight: 400;
       line-height: 19px;
@@ -144,14 +144,14 @@ export default {
       width: 100%;
       display: flex;
       justify-content: space-between;
-      padding: 0 40px;
+      padding: 0 15rpx;
       box-sizing: border-box;
       margin-top: 20px;
       span {
-        width: 76px;
+        width: 100px;
         height: 30px;
         border-radius: 15px;
-        font-size: 13px;
+        
         display: flex;
         justify-content: center;
         align-items: center;

src/components/m-do-topic/components/explainJs.vue

@@ -2,9 +2,9 @@
   <van-overlay z-index="10" :show="show">
     <div class="skills-box">
       <div class="skills">
-        <div class="title">官方解释</div>
-        <div class="text">{{ explainJs }}</div>
-        <div class="btn">
+        <div class="title uni-app-fontsize-paragraph">官方解释</div>
+        <div class="text uni-app-fontsize-paragraph">{{ explainJs }}</div>
+        <div class="btn uni-app-fontsize-paragraph">
           <span
             @click="
               () => {
@@ -100,7 +100,7 @@ export default {
     padding: 20px 16px;
     box-sizing: border-box;
     .title {
-      font-size: 15px;
+      // font-size: 13px;
       font-family: PingFang SC;
       font-weight: bold;
       line-height: 21px;
@@ -118,7 +118,7 @@ export default {
       background: #ffffff;
     }
     .text {
-      font-size: 13px;
+      // font-size: 13px;
       font-family: PingFang SC;
       font-weight: 400;
       line-height: 19px;
@@ -129,14 +129,14 @@ export default {
       width: 100%;
       display: flex;
       justify-content: space-between;
-      padding: 0 40px;
+      padding: 0 15px;
       box-sizing: border-box;
       margin-top: 20px;
       span {
-        width: 76px;
+        width: 100px;
         height: 30px;
         border-radius: 15px;
-        font-size: 13px;
+        // font-size: 13px;
         display: flex;
         justify-content: center;
         align-items: center;

src/components/m-do-topic/m-do-topic.vue

@@ -37,8 +37,8 @@
     </view>
     <view class="divider"></view>
     <view class="problem-box" :class="{
-      'pb80px':type=='exam',
-      'pb50px':type!='exam'
+      'pb80px': type == 'exam',
+      'pb50px': type != 'exam'
     }">
       <span class="problem-type">{{
         problemList[problemListIndex].questionType | questionType
@@ -69,7 +69,7 @@
         <view v-if="midFunc.includes('readQuestionAndAnswer')" @click="
           readQuestionAndAnswer();
         completeQuestion();
-                                                            " class="funcicon-item funcicon-item_select">
+                                                                      " class="funcicon-item funcicon-item_select">
           <m-jp-icon style="margin-right: 8rpx" type="a-dtda" size="10px" />
           <span>读题+答案</span>
         </view>
@@ -111,16 +111,16 @@
         problemList[problemListIndex].isCompleted
       ">
         <view v-for="(item, index) in problemList[problemListIndex].optsArr" :key="index" class="problem-select pl30">
-          <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="30">
+          <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="36">
           </icon>
-          <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" color="red" size="30"></icon>
-          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
+          <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" color="red" size="36"></icon>
+          <text v-if="!item.isAnswer && !item.selected" class="problem-op problem-fontsize">{{
             numberToLetter(index)
           }}</text>
-          <text v-if="item.isAnswer && !item.selected" class="problem-op problem-op_green">{{ numberToLetter(index)
+          <text v-if="item.isAnswer && !item.selected" class="problem-op problem-op_green problem-fontsize">{{ numberToLetter(index)
           }}</text>
           <view style="width: 8px"></view>
-          <text style="font-weight: 500" class="problem-opAnswer">{{
+          <text style="font-weight: 500" class="problem-opAnswer problem-fontsize">{{
             item.value
           }}</text>
         </view>
@@ -152,16 +152,16 @@
         problemList[problemListIndex].isCompleted
       " style="margin-top: 0">
         <view v-for="(item, index) in problemList[problemListIndex].optsArr" :key="index" class="problem-select">
-          <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="30">
+          <icon v-if="item.isAnswer && item.selected" class="icon-box-img" type="success" color="#06c05f" size="36">
           </icon>
-          <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" size="30" color="red"></icon>
-          <text v-if="!item.isAnswer && !item.selected" class="problem-op">{{
+          <icon v-if="!item.isAnswer && item.selected" class="icon-box-img" type="clear" size="36" color="red"></icon>
+          <text v-if="!item.isAnswer && !item.selected" class="problem-op problem-fontsize">{{
             numberToLetter(index)
           }}</text>
-          <text v-if="item.isAnswer && !item.selected" class="problem-op problem-op_green">{{ numberToLetter(index)
+          <text v-if="item.isAnswer && !item.selected" class="problem-op problem-op_green problem-fontsize">{{ numberToLetter(index)
           }}</text>
           <view style="width: 8px"></view>
-          <text class="problem-opAnswer">{{ item.value }}</text>
+          <text class="problem-opAnswer problem-fontsize">{{ item.value }}</text>
         </view>
       </view>
       <!-- #endif -->
@@ -272,23 +272,22 @@
       <funList :midFunc="midFunc" v-if="!hiddenFunction" @collect="collectTopics" @readQuestionAndAnswer="
         readQuestionAndAnswer();
       completeQuestion();
-                                                " :problemListItem="problemList[problemListIndex]"></funList>
+                                                        " :problemListItem="problemList[problemListIndex]"></funList>
 
       <!-- #endif -->
       <view v-if="!hiddenFunction" class="function-list">
-        <div  v-if="midFunc.includes('collect')" @click="collectTopics" class="function-item">
+        <div v-if="midFunc.includes('collect')" @click="collectTopics" class="function-item">
           <van-icon v-if="!problemList[problemListIndex].isCollect" name="star-o" size="25px" />
           <van-icon color="#ffde00ff" v-if="problemList[problemListIndex].isCollect" name="star" size="25px" />
           <span>收藏</span>
         </div>
-        <div  v-if="midFunc.includes('readQuestionAndAnswer')" @click="
+        <div v-if="midFunc.includes('readQuestionAndAnswer')" @click="
           readQuestionAndAnswer();
-        completeQuestion();
-                                                            " class="function-item">
+        completeQuestion();" class="function-item">
           <m-jp-icon type="a-dtda" size="25px" />
           <span>读题+答案</span>
         </div>
-        <div  v-if="midFunc.includes('readQuestion')" @click="readQuestion()" class="function-item">
+        <div v-if="midFunc.includes('readQuestion')" @click="readQuestion()" class="function-item">
           <m-jp-icon type="duti" size="25px" />
           <span>读题</span>
         </div>
@@ -362,7 +361,7 @@
           </view>
 
         </view>
-        <view v-if="type=='exam'" class="submit">
+        <view v-if="type == 'exam'" class="submit">
           <view @click="submitExam" class="submit-button">交卷</view>
         </view>
 
@@ -425,11 +424,8 @@
         </view>
       </tabbar>
       <!-- #endif -->
-      <van-overlay @click-overlay="
-        () => {
-          selectProblemListVisible = false;
-        }
-      " :show="selectProblemListVisible">
+      <!-- 题目序号选择 -->
+      <van-overlay :lock-scroll="false" :zIndex="100" :duration="500" :show="selectProblemListVisible">
         <view class="select-problem">
           <view class="problem-index">
             <view class="problem-header">
@@ -467,12 +463,12 @@
               </view>
             </view>
             <view class="problem-bottom">
-              <view @click="
+              <!-- <view @click="
                 () => {
                   selectProblemListVisible = false;
                 }
               " class="problem-bottom-sure">确定
-              </view>
+              </view> -->
               <view @click="
                 () => {
                   selectProblemListVisible = false;
@@ -1346,16 +1342,19 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.m-do-topic{
+.m-do-topic {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+
 .problem-fontsize {
   font-size: $uni-app-fontsize-topic;
 }
+
 .pb80px {
   padding-bottom: 80px;
 }
+
 .pb50px {
   padding-bottom: 50px;
 }
@@ -1371,9 +1370,10 @@ export default {
   width: 100%;
   background: #fff;
   padding-bottom: constant(safe-area-inset-bottom);
-    /*兼容 IOS<11.2*/
-    box-sizing: content-box;
-    padding-bottom: env(safe-area-inset-bottom);
+  /*兼容 IOS<11.2*/
+  box-sizing: content-box;
+  padding-bottom: env(safe-area-inset-bottom);
+
   .ipone-bottom {
 
     /*兼容 IOS>11.2*/
@@ -1402,6 +1402,7 @@ export default {
   justify-content: center;
   align-items: center;
   padding-top: 8rpx;
+
   .submit-button {
     width: 60%;
     background: #498ef5;
@@ -1410,7 +1411,7 @@ export default {
     line-height: 30px;
     height: 30px;
     border-radius: 20rpx;
-   
+
   }
 }
 
@@ -1479,6 +1480,8 @@ export default {
   height: 100vh;
   align-content: flex-end;
   align-items: flex-end;
+  
+
 
   .problem-index {
     width: 100vw;
@@ -1486,6 +1489,8 @@ export default {
     background: #fff;
     border-radius: 16rpx;
     padding-top: 50rpx;
+    -webkit-overflow-scrolling:touch;
+
   }
 
   .problem-bottom {
@@ -1504,12 +1509,13 @@ export default {
     }
 
     .problem-bottom-close {
-      width: 50%;
+      width: 100%;
       height: 100%;
       color: red;
       text-align: center;
       border-top: 2rpx solid #d8d8d8;
       line-height: 80rpx;
+
     }
   }
 
@@ -1546,10 +1552,12 @@ export default {
     height: 480rpx;
     padding-top: 30rpx;
     overflow-y: scroll;
+    -webkit-overflow-scrolling:touch;
 
     .problem-listBody {
       display: inline-block;
-      overflow: hidden;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling:touch;
 
       .problem-listItem {
         display: inline-block;
@@ -1562,6 +1570,7 @@ export default {
         margin-bottom: 15rpx;
         margin-left: 13rpx;
         margin-right: 13rpx;
+        font-size: 40rpx;
       }
 
       .problem-listItem_current {
@@ -1751,5 +1760,4 @@ export default {
       margin-top: 5px;
     }
   }
-}
-</style>
+}</style>

src/otherPages/exercise/index.vue

@@ -28,85 +28,6 @@
         <span>读题</span>
       </div>
     </view> -->
-    <van-overlay
-      @click-overlay="
-        () => {
-          selectProblemListVisible = false;
-        }
-      "
-      :show="selectProblemListVisible"
-    >
-      <view class="select-problem">
-        <view class="problem-index">
-          <view class="problem-header">
-            <view class="problem-header-left">
-              <view class="problem-dui">
-                <icon
-                  class="icon-box-img"
-                  color="#06c05f"
-                  type="success"
-                  size="18"
-                ></icon>
-                <text
-                  style="color: #06c05f; font-size: 14px; margin-left: 8rpx"
-                  >{{ trueNum }}</text
-                >
-              </view>
-              <view class="problem-cuo" style="margin-left: 16rpx">
-                <icon class="icon-box-img" type="clear" size="18"></icon>
-                <text style="color: red; font-size: 14px; margin-left: 8rpx">{{
-                  falseNum
-                }}</text>
-              </view>
-            </view>
-            <view class="problem-header-right">
-              <van-icon size="18px" name="description" />
-              <view style="font-size: 14px; display: flex; align-items: center"
-                >{{ problemListIndex + 1 }}/{{ problemListTotal }}</view
-              >
-            </view>
-          </view>
-          <view class="problem-body">
-            <view class="problem-listBody">
-              <view
-                class="problem-listItem"
-                :key="index"
-                v-for="(item, index) in problemList"
-                :class="{
-                  'problem-listItem_dui':
-                    item.userAnswer.length && item.userAnswer == item.answer,
-                  'problem-listItem_cuo':
-                    item.userAnswer.length && item.userAnswer !== item.answer,
-                }"
-              >
-                {{ index + 1 }}
-              </view>
-            </view>
-          </view>
-          <view class="problem-bottom">
-            <view
-              @click="
-                () => {
-                  selectProblemListVisible = false;
-                }
-              "
-              class="problem-bottom-sure"
-              >确定
-            </view>
-            <view
-              @click="
-                () => {
-                  selectProblemListVisible = false;
-                }
-              "
-              class="problem-bottom-close"
-            >
-              关闭</view
-            >
-          </view>
-        </view>
-      </view>
-    </van-overlay>
   </view>
 </template>
 <script>