我的考试弹窗样式修改

src/views/platform/bpmn/my-test/index.vue

@@ -88,97 +88,100 @@
       @close="visible => typeTreePopup = visible" /> -->
         <!-- 遮罩层,提示信息 -->
         <template>
+
             <van-popup
                 ref="examPopup"
                 v-model="ReachBottomShow"
                 custom-style="height: 100%"
-                :style="{ width: '80%',padding:'5%'}"
+                :style="{ width: '80%',height:'55%',padding:'5%'}"
                 @close="onClose"
             >
                 <!-- <div style="font-size: 20px; text-align: center;color: rgb(68, 152, 248);font-weight: 700;">
                     提示</div> -->
-                <div style="font-size: 20px; text-align: center;color: #333;font-weight: 700;">
-                    提示</div>
-                <div style="text-align: left;padding:  2%; font-weight: 700;font-size: 15px;color: #333;">当前考试信息如下：
-                </div>
-                <div style="width: 90%;margin: auto;">
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">考试名称:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.examName===''?'/':examPopup.examName===null?'/':examPopup.examName }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">考试题库:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.bankName===''?'/':examPopup.bankName===null?'/':examPopup.bankName }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">题目数量:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.questionCount===''?'/':examPopup.questionCount===null?'/':examPopup.questionCount }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">考试总分:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.totalScore===''?'/':examPopup.totalScore===null?'/':examPopup.totalScore }}</van-col>
-                    </van-row>
-                    <!-- <van-row class="examRow">
+                <div class="popup-content">
+                    <div style="font-size: 20px; text-align: center;color: #333;font-weight: 700;">
+                        提示</div>
+                    <div style="text-align: left;padding:  2%; font-weight: 700;font-size: 15px;color: #333;">当前考试信息如下：
+                    </div>
+                    <div style="width: 90%;margin: auto;">
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">考试名称:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.examName===''?'/':examPopup.examName===null?'/':examPopup.examName }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">考试题库:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.bankName===''?'/':examPopup.bankName===null?'/':examPopup.bankName }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">题目数量:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.questionCount===''?'/':examPopup.questionCount===null?'/':examPopup.questionCount }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">考试总分:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.totalScore===''?'/':examPopup.totalScore===null?'/':examPopup.totalScore }}</van-col>
+                        </van-row>
+                        <!-- <van-row class="examRow">
                         <van-col span="8" class="popupTitle">考试人数:</van-col>
                         <van-col
                             span="16"
                             class="popupContent"
                         >{{ examPopup.allExaminee===''?'/':examPopup.allExaminee===null?'/':(examPopup.allExaminee || '').split(',').length }}</van-col>
                     </van-row> -->
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">限考时间:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.limitDate===''?'/':examPopup.limitDate===null?'/':examPopup.limitDate }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">限考次数:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.limitCount===''?'/':examPopup.limitCount===null?'/':countTotal?`${examPopup.limitCount}次 （您已参加${countTotal.count - 1}次 ，本次不消耗次数）`:'' }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">考试时长:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.duration===''?'/':examPopup.duration===null?'/':examPopup.duration=='不限'?examPopup.duration:transformTime(examPopup.duration) }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">达标分数占比:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.qualifiedRadio===''?'/':examPopup.qualifiedRadio===null?'/':examPopup.qualifiedRadio }}</van-col>
-                    </van-row>
-                    <van-row class="examRow">
-                        <van-col span="8" class="popupTitle">计分方式:</van-col>
-                        <van-col
-                            span="16"
-                            class="popupContent"
-                        >{{ examPopup.scoringType===''?'/':examPopup.scoringType===null?'/':examPopup.scoringType }}</van-col>
-                    </van-row>
-                    <div style="margin:2% auto; font-size: 12px; color: red;text-align: left;">
-                        开始考试后中途不允许退出，直至交卷或考试结束，退出视作提交试卷！是否立即开始考试？
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">限考时间:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.limitDate===''?'/':examPopup.limitDate===null?'/':examPopup.limitDate }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">限考次数:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.limitCount===''?'/':examPopup.limitCount===null?'/':countTotal?`${examPopup.limitCount}次 （您已参加${countTotal.count - 1}次 ，本次不消耗次数）`:'' }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">考试时长:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.duration===''?'/':examPopup.duration===null?'/':examPopup.duration=='不限'?examPopup.duration:transformTime(examPopup.duration) }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">达标分数占比:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.qualifiedRadio===''?'/':examPopup.qualifiedRadio===null?'/':examPopup.qualifiedRadio }}</van-col>
+                        </van-row>
+                        <van-row class="examRow">
+                            <van-col span="8" class="popupTitle">计分方式:</van-col>
+                            <van-col
+                                span="16"
+                                class="popupContent"
+                            >{{ examPopup.scoringType===''?'/':examPopup.scoringType===null?'/':examPopup.scoringType }}</van-col>
+                        </van-row>
+                        <div style="margin:2% auto; font-size: 12px; color: red;text-align: left;">
+                            开始考试后中途不允许退出，直至交卷或考试结束，退出视作提交试卷！是否立即开始考试？
+                        </div>
+                        <van-row class="examRowto">
+                            <van-col span="12"> <van-button type="default" @click="ReachBottomShow=false">取消</van-button></van-col>
+                            <van-col span="12"> <van-button type="info" @click="changeShowPop(examPopup)">确定</van-button></van-col>
+                        </van-row>
                     </div>
-                    <van-row class="examRowto">
-                        <van-col span="12"> <van-button type="default" @click="ReachBottomShow=false">取消</van-button></van-col>
-                        <van-col span="12"> <van-button type="info" @click="changeShowPop(examPopup)">确定</van-button></van-col>
-                    </van-row>
                 </div>
             </van-popup>
         </template>
@@ -852,6 +855,9 @@ export default {
 <style scoped lang="scss">
   .examRow {
     padding: 2% 0;
+    // display: flex;
+    // flex-wrap: nowrap; /* 确保行不换行 */
+    // align-items: center; /* 垂直居中对齐 */
 
     .popupTitle {
       text-align: center;
@@ -861,8 +867,10 @@ export default {
 
     .popupContent {
       text-align: left;
+      // white-space: pre-line; /* 保留空白符序列，但允许内容中的换行 */
       font-size: 14px;
       color: #777;
+      overflow: hidden;
     }
   }
 
@@ -878,4 +886,9 @@ export default {
       }
     }
   }
+  .popup-content{
+    width: 100%;
+    overflow: auto; /* 当内容超出容器时显示滚动条 */
+    // padding: 10px; /* 可选：内边距 */
+  }
 </style>