1

src/components/subject/readingCompre.vue

 <template>
-  <!-- 单选题 -->
+  <!-- 阅读理解 -->
   <view>
     <view class="item">
       <view class="name">
@@ -27,24 +27,45 @@
         >
           <view class="item1">
             <view class="flex flex_start_center">
-              <view class="num readTitle" v-html="item1.Title"></view>
+              <view
+                class="num readTitle"
+                :style="{ paddingBottom: `${questionH}rpx` }"
+                v-html="item1.Title"
+              ></view>
             </view>
             <view
-              v-for="(item2, index2) in item1.QuestionContentObj"
-              :key="item2.id"
-              class="flex item2 flex_start_center"
+              class="questionBox"
+              :style="{ height: `${questionH}rpx` }"
+              @touchstart="touchstart"
+              @touchmove="touchmove"
+              @touchend="touchend"
             >
+              <view class="questionTotal">本阅读理解共5小题</view>
               <view
-                class="chooseNum"
-                :class="{ myAnswer: item1.myAnswer === item2.Name }"
-                @click="change(index1, index2)"
-                >{{ item2.Name }}
+                v-for="(item2, index2) in item1.QuestionContentObj"
+                :key="index2"
+                class="item2"
+              >
+                <view class="flex questionTitle">
+                  <view>{{ index2 + 1 }}、</view>
+                  <view v-html="item2.SubTitle"></view>
+                </view>
+                <view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
+                  <view class="flex flex_start_center item3">
+                    <view
+                      class="chooseNum"
+                      :class="{ myAnswer: item2.myAnswer === item3.Name }"
+                      @click="change(index1, index2, index3)"
+                      >{{ item3.Name }}
+                    </view>
+                    <view
+                      class="chooseName"
+                      @click="change(index1, index2, index3)"
+                      v-html="item3.Content"
+                    ></view>
+                  </view>
+                </view>
               </view>
-              <view
-                class="chooseName"
-                @click="change(index1, index2)"
-                v-html="item2.Content"
-              ></view>
             </view>
           </view>
         </swiper-item>
@@ -81,11 +102,13 @@ export default {
       Score: 0, //总分
       current: 1, //默认从第几个开始-用于从快捷菜单点入
       ExamIndex: 1, //第几题
+      questionH: 800, //问题区域高度
+      timer: null,
+      timeOutEvent: false,
     });
     data.data.DetailsList.forEach((item) => {
       item.Title = item.Title.replace(/\<img/gi, '<img style="max-width:100%"');
     });
-
     let methods = {
       changeNumToHan,
       jumpPage() {
@@ -97,9 +120,11 @@ export default {
         uni.navigateBack();
       },
       //选题
-      change(index1, index2) {
-        data.data.DetailsList[index1].myAnswer =
-          data.data.DetailsList[index1].QuestionContentObj[index2].Name;
+      change(index1, index2, index3) {
+        data.data.DetailsList[index1].QuestionContentObj[index2].myAnswer =
+          data.data.DetailsList[index1].QuestionContentObj[index2].SubAnwser[
+            index3
+          ].Name;
       },
       onchange(e) {
         data.ExamIndex = e.detail.current;
@@ -111,6 +136,27 @@ export default {
           this.$emit("getBeforeTopic");
         }
       },
+      //触摸事件
+      touchstart(e) {
+        console.log(133, e);
+        clearTimeout(data.timer);
+        data.timer = setTimeout(() => {
+          data.timeOutEvent = true;
+        }, 500);
+      },
+      touchmove(e) {
+        if (data.timeOutEvent) {
+          console.log("151", "长按了");
+          let touches = e.touches[0];
+          // let startTx = touches.clientX;
+          let startTy = touches.clientY;
+          console.log(134, startTy);
+        }
+      },
+      touchend() {
+        data.timeOutEvent = false;
+        clearTimeout(data.timer);
+      },
     };
     onMounted(() => {
       console.log(props.paperData, "props.paperData");
@@ -124,6 +170,10 @@ export default {
 };
 </script>
 <style scoped>
+.item {
+  /* margin-bottom: 40rpx; */
+  position: relative;
+}
 .name {
   height: 90rpx;
   font-size: 28rpx;
@@ -133,6 +183,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 30rpx;
 }
 
 .Single_Before {
@@ -157,23 +209,50 @@ export default {
   font-family: PingFang SC;
   font-weight: bold;
   color: #111111;
+  box-sizing: border-box;
 }
 .readTitle img {
   max-width: 100%;
 }
-.item {
-  /* margin-bottom: 40rpx; */
-  position: relative;
-}
 
 .item1 {
+  height: 100%;
   /* margin: 25rpx 0; */
   align-items: center;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 0 30rpx;
+}
+.questionBox {
+  width: 100%;
+  min-height: 500rpx !important;
+  max-height: 800rpx !important;
+  background-color: #eee;
+  position: absolute;
+  left: 0rpx;
+  bottom: env(safe-area-inset-bottom);
+  z-index: 9;
+  color: #000000;
+  overflow-y: auto;
+}
+.questionTotal {
+  text-align: center;
+  font-size: 22rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #888888;
+  margin: 20rpx 0;
+}
+.questionTitle {
+  font-size: 26rpx;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: #111111;
 }
-
 .item2 {
-  padding-left: 25rpx;
+  box-sizing: border-box;
   margin: 30rpx 0;
+  padding: 0 30rpx;
 }
 
 .myAnswer {
@@ -181,6 +260,10 @@ export default {
   color: #ffffff !important;
 }
 
+.item3 {
+  padding-left: 25rpx;
+  margin: 20rpx 0;
+}
 .chooseNum {
   width: 40rpx;
   height: 40rpx;

src/pages/exam/examPaper.vue

@@ -25,57 +25,64 @@
     </van-nav-bar>
     <view class="exam-con">
       <view v-for="(item, index) in peaperDetail.Paper.GroupList" :key="index">
-		 <!-- 数字单选题 -->
+        <!-- 数字单选题 -->
         <SingleChoiceNumber
           :paperData="item"
-		  @getAfterTopic="getAfterTopic()"
+          @getAfterTopic="getAfterTopic()"
           :sort="index"
-		  :isLast="isLast"
-          v-if="item.QuestionTypeKey === 'single-number'&&index===changeIndex" />
-		 <!-- 多选题 -->
+          :isLast="isLast"
+          v-if="
+            item.QuestionTypeKey === 'single-number' && index === changeIndex
+          "
+        />
+        <!-- 多选题 -->
         <MultipleChoice
           :paperData="item"
-	      :isLast="isLast"
-		  :sort="index"
-		  @getBeforeTopic="getBeforeTopic()"
-		  @getAfterTopic="getAfterTopic()"
-          v-if="item.QuestionTypeKey === 'multiple'&&index===changeIndex"
+          :isLast="isLast"
+          :sort="index"
+          @getBeforeTopic="getBeforeTopic()"
+          @getAfterTopic="getAfterTopic()"
+          v-if="item.QuestionTypeKey === 'multiple' && index === changeIndex"
+        />
+        <!-- 单选题 -->
+        <SingleChoice
+          :paperData="item"
+          :isLast="isLast"
+          :sort="index"
+          @getBeforeTopic="getBeforeTopic()"
+          @getAfterTopic="getAfterTopic()"
+          v-if="item.QuestionTypeKey === 'single' && index === changeIndex"
+        />
+        <!-- 听力题 -->
+        <ListenTopic
+          :paperData="item"
+          :isLast="isLast"
+          :sort="index"
+          @getBeforeTopic="getBeforeTopic()"
+          @getAfterTopic="getAfterTopic()"
+          v-if="item.QuestionTypeKey === 'listening' && index === changeIndex"
         />
-		<!-- 单选题 -->
-		<SingleChoice 
-		  :paperData="item"
-		  :isLast="isLast"
-		  :sort="index"
-		  @getBeforeTopic="getBeforeTopic()"
-		  @getAfterTopic="getAfterTopic()"
-		  v-if="item.QuestionTypeKey === 'single'&&index===changeIndex"
-		 />
-		 <!-- 听力题 -->
-	    <ListenTopic :paperData="item"
-		  :isLast="isLast"
-		  :sort="index"
-		  @getBeforeTopic="getBeforeTopic()"
-		  @getAfterTopic="getAfterTopic()"
-		   v-if="item.QuestionTypeKey === 'listening'&&index===changeIndex"
-		/>
-		<!-- 填空题 -->
+        <!-- 填空题 -->
         <FillInTheBlanks
           :paperData="item"
-		  :isLast="isLast"
-		  :sort="index"
-		  @getBeforeTopic="getBeforeTopic()"
-		  @getAfterTopic="getAfterTopic()"
-          v-if="item.QuestionTypeKey === 'fill-in'&&index===changeIndex"
+          :isLast="isLast"
+          :sort="index"
+          @getBeforeTopic="getBeforeTopic()"
+          @getAfterTopic="getAfterTopic()"
+          v-if="item.QuestionTypeKey === 'fill-in' && index === changeIndex"
         />
-		<!-- 阅读理解 -->
-		<readingCompre
-		  :paperData="item"
-		  :isLast="isLast"
-		  :sort="index"
-		  @getBeforeTopic="getBeforeTopic()"
-		  v-if="item.QuestionTypeKey === 'reading-comprehensio'&&index===changeIndex"
-		/>
-     <!--   <Judge :paperData="item" v-if="item.QuestionTypeKey === 'judge'" />
+        <!-- 阅读理解 -->
+        <readingCompre
+          :paperData="item"
+          :isLast="isLast"
+          :sort="index"
+          @getBeforeTopic="getBeforeTopic()"
+          v-if="
+            item.QuestionTypeKey === 'reading-comprehensio' &&
+            index === changeIndex
+          "
+        />
+        <!--   <Judge :paperData="item" v-if="item.QuestionTypeKey === 'judge'" />
         <Write
           :paperData="item"
           v-if="
@@ -114,9 +121,9 @@ import {
 import { getSystemInfo } from "../../utils/index";
 import { getPaperDetail } from "../../api/exam";
 import SingleChoiceNumber from "../../components/subject/SingleChoiceNumber.vue";
-import SingleChoice from "../../components/subject/SingleChoice.vue"
+import SingleChoice from "../../components/subject/SingleChoice.vue";
 import MultipleChoice from "../../components/subject/MultipleChoice.vue";
-import ListenTopic from "../../components/subject/ListenTopic.vue"
+import ListenTopic from "../../components/subject/ListenTopic.vue";
 import FillInTheBlanks from "../../components/subject/FillInTheBlanks";
 import readingCompre from "../../components/subject/readingCompre";
 
@@ -127,11 +134,11 @@ import Sort from "../../components/subject/Sort"; //"排序题"
 export default {
   components: {
     SingleChoiceNumber,
-	SingleChoice,
+    SingleChoice,
     MultipleChoice,
-	ListenTopic,
+    ListenTopic,
     FillInTheBlanks,
-	readingCompre,
+    readingCompre,
     Judge,
     Write,
     Connect,
@@ -144,10 +151,11 @@ export default {
       time: 2 * 60 * 60 * 1000,
       statusBarHeight: 0,
       // msg: { GuestId: Gid, PaperId: 6, Id: 3 },
-	  msg: { GuestId: Gid, PaperId: 23, Id: 22 },
+      msg: { GuestId: Gid, PaperId: 25, Id: 6 },
+      // msg: { GuestId: Gid, PaperId: 5, Id: 0 },
       peaperDetail: {},
-	  changeIndex:0,
-	  isLast:false, //用于判断是否从后往前翻
+      changeIndex: 0,
+      isLast: false, //用于判断是否从后往前翻
     });
     let methods = {
       jumpPage() {
@@ -168,15 +176,15 @@ export default {
           console.log(90, res.Data.Paper.GroupList);
         }
       },
-	  //往后翻
-	  getAfterTopic(){
-		  this.changeIndex++
-	  },
-	  //往前翻
-	  getBeforeTopic(){
-		  this.changeIndex--;
-		  this.isLast=true;
-	  }
+      //往后翻
+      getAfterTopic() {
+        this.changeIndex++;
+      },
+      //往前翻
+      getBeforeTopic() {
+        this.changeIndex--;
+        this.isLast = true;
+      },
     };
     onMounted(() => {
       getSystemInfo((res) => {
@@ -197,6 +205,6 @@ export default {
 <style scoped>
 .exam-con {
   box-sizing: border-box;
-  padding: 0 30rpx 30rpx;
+  /* padding: 0 30rpx 30rpx; */
 }
 </style>