updata

src/pages/mockExam/index.vue

 <template>
-  <div class="mock-box">
-    <div class="top-tit">
-      <div class="left">考试时间：90分钟</div>
-      <!-- <div class="right">总分100分</div> -->
-    </div>
-    <div class="top-tit">
-      <div class="left">考试通过：80分</div>
-      <div class="right">总分：100分</div>
-    </div>
-    <div class="top-tit">
-      <div class="left new-w">试题类型：</div>
-      <div class="txt">单项选择题、多项选择题、判断题和
-案例题，全部为客观题</div>
-    </div>
-    <div class="intr">考试说明：</div>
-    <div class="answer-type">
-      <div class="tit">1.模考目的：</div>
-      <div class="type">
-        <p>考核道路运输企业主要负责人和安全生产管理人员对安全生产管理知识掌握程度</p>
-        <!-- <p>单选题共1题</p>
-        <p>单选题共1题</p> -->
+  <div class="comp-x">
+    <div class="mock-box">
+      <div class="top-tit">
+        <div class="left">考试时间：90分钟</div>
+        <!-- <div class="right">总分100分</div> -->
       </div>
-    </div>
-    <div class="answer-type">
-      <div class="tit">2.考核范围：</div>
-      <div class="type">
-        <p>道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产务实务等内容</p>
-        <!-- <p>单选题共1题</p>
-        <p>单选题共1题</p> -->
+      <div class="top-tit">
+        <div class="left">考试通过：80分</div>
+        <div class="right">总分：100分</div>
       </div>
-    </div>
-     <div class="answer-type">
-      <div class="tit">3.模考试卷：</div>
-      <div class="type">
-        <p>道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产务实务等内容</p>
-        <!-- <p>单选题共1题</p>
-        <p>单选题共1题</p> -->
+      <div class="top-tit">
+        <div class="left new-w">试题类型：</div>
+        <div class="txt">单项选择题、多项选择题、判断题和
+  案例题，全部为客观题</div>
       </div>
-    </div>
-    <div class="role-tit">选择角色：</div>
-    <div class="describe">请认真选择角色，选定后,模拟考试题型会针对角色为您匹配最准确的题型！</div>
-    <div class="sele-role">
-      <div @click="changeActive(1)" :class="roleChange === 1 ? 'btn active' : 'btn'">
-        <i></i>
-        <div class="txt">管理人员</div>
+      <div class="intr">考试说明：</div>
+      <div class="answer-type">
+        <div class="tit">1.模考目的：</div>
+        <div class="type">
+          <p>考核道路运输企业主要负责人和安全生产管理人员对安全生产管理知识掌握程度</p>
+          <!-- <p>单选题共1题</p>
+          <p>单选题共1题</p> -->
+        </div>
       </div>
-      <div @click="changeActive(2)" :class="roleChange === 2 ? 'btn active' : 'btn'">
-        <i></i>
-        <div class="txt">安全人员</div>
+      <div class="answer-type">
+        <div class="tit">2.考核范围：</div>
+        <div class="type">
+          <p>道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产务实务等内容</p>
+          <!-- <p>单选题共1题</p>
+          <p>单选题共1题</p> -->
+        </div>
       </div>
-    </div>
-    <div class="new-btit">试卷组卷比例见下表：</div>
-    <img src="../../assets/images/table.png" alt="" class="table">
-    <div class="start-exam">
-      <div class="b" @click="setRole">开始考试</div>
-    </div>
-    <div class="exam_submit" v-if="isExamPop">
-      <div class="pop">
-        <div class="tit">模拟考试</div>
-        <div class="txt">您上次未做完试题</div>
-        <div class="btn_box">
-          <div class="btn" @click="goAbilityExam(1)">重新答题</div>
-          <div class="btn btn2" @click="goAbilityExam(0)">继续答题</div>
+      <div class="answer-type">
+        <div class="tit">3.模考试卷：</div>
+        <div class="type">
+          <p>道路运输安全生产相关法律法规及标准规范、道路运输企业安全生产主体责任、道路运输企业安全管理知识、道路运输安全生产务实务等内容</p>
+          <!-- <p>单选题共1题</p>
+          <p>单选题共1题</p> -->
         </div>
       </div>
-    </div>
-    <div class="exam_submit" v-if="isExamPopTo">
-      <div class="pop">
-        <div class="tit">能力自测</div>
-        <div class="txt">考试还未结束确定退出考试？</div>
-        <div class="btn_box">
-          <div class="btn" @click="isExamPopTo = false">退出考试</div>
-          <div class="btn btn2" @click="goAbilityExam(0)">继续考试</div>
+      <div class="role-tit">选择角色：</div>
+      <div class="describe">请认真选择角色，选定后,模拟考试题型会针对角色为您匹配最准确的题型！</div>
+      <div class="sele-role">
+        <div @click="changeActive(1)" :class="roleChange === 1 ? 'btn active' : 'btn'">
+          <i></i>
+          <div class="txt">管理人员</div>
+        </div>
+        <div @click="changeActive(2)" :class="roleChange === 2 ? 'btn active' : 'btn'">
+          <i></i>
+          <div class="txt">安全人员</div>
+        </div>
+      </div>
+      <div class="new-btit">试卷组卷比例见下表：</div>
+      <img src="../../assets/images/table.png" alt="" class="table">
+      <div class="start-exam">
+        <div class="b" @click="setRole">开始考试</div>
+      </div>
+      <div class="exam_submit" v-if="isExamPop">
+        <div class="pop">
+          <div class="tit">模拟考试</div>
+          <div class="txt">您上次未做完试题</div>
+          <div class="btn_box">
+            <div class="btn" @click="goAbilityExam(1)">重新答题</div>
+            <div class="btn btn2" @click="goAbilityExam(0)">继续答题</div>
+          </div>
+        </div>
+      </div>
+      <div class="exam_submit" v-if="isExamPopTo">
+        <div class="pop">
+          <div class="tit">能力自测</div>
+          <div class="txt">考试还未结束确定退出考试？</div>
+          <div class="btn_box">
+            <div class="btn" @click="isExamPopTo = false">退出考试</div>
+            <div class="btn btn2" @click="goAbilityExam(0)">继续考试</div>
+          </div>
         </div>
       </div>
     </div>
@@ -144,6 +146,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.comp-x{
+  padding-bottom: env(safe-area-inset-bottom);
+}
 .mock-box{
   padding: 0 0.4rem 1rem 0.4rem;
 }