From 6747314cc9902f5ac3966991c0244ebc07844ce6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 29 Aug 2024 13:54:22 +0800
Subject: [PATCH] fix

---
 src/views/course/contentSettings.vue          |   4 +-
 src/views/match/manage/theoryReport.vue       |  23 +-
 .../contentSettings/index.vue                 |   2 +-
 src/views/theoreticalCourse/preview/index.vue | 581 +++++++++---------
 src/views/theoryExam/index.vue                |   2 +-
 5 files changed, 305 insertions(+), 307 deletions(-)

diff --git a/src/views/course/contentSettings.vue b/src/views/course/contentSettings.vue
index d7be973..6d293b5 100644
--- a/src/views/course/contentSettings.vue
+++ b/src/views/course/contentSettings.vue
@@ -634,7 +634,7 @@ export default {
             width: "100%",
             autoplay: false,
             vid: fileId,
-            playauth: res.data.playAuth,
+            playauth: res.playAuth,
             encryptType: 1 //当播放私有加密流时需要设置。
           }, player => {
             this.downloadFile(row.name, player._urls[0].Url)
@@ -649,7 +649,7 @@ export default {
         // 阿里云视频点播
         if (row.fileId) {
           this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-            this.playAuth = res.data.playAuth;
+            this.playAuth = res.playAuth;
             if (this.player) {
               this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
             } else {
diff --git a/src/views/match/manage/theoryReport.vue b/src/views/match/manage/theoryReport.vue
index 6a36775..6fa3482 100644
--- a/src/views/match/manage/theoryReport.vue
+++ b/src/views/match/manage/theoryReport.vue
@@ -36,7 +36,7 @@
         <div class="text-right">
           <el-button type="primary" @click="exportPage">导出报告</el-button>
         </div>
-        <h6 class="r-title">标准实验报告</h6>
+        <h6 class="r-title">标准成绩报告</h6>
         <div class="info">
           <h6 class="l-title">
             <img src="@/assets/img/info1.png" alt="">
@@ -75,7 +75,7 @@
             <li>
               <label>用时：</label>
               <el-input v-if="editing" v-model="info.timeSum"></el-input>
-              <span v-else>{{ info.timeSum }}</span>
+              <span v-else>{{ info.timeSum }}分钟</span>
             </li>
             <li>
               <label>指导老师：</label>
@@ -126,7 +126,7 @@
                     </div>
                     <el-tag class="m-r-5" :type="ques.difficultTheme">{{ ques.difficult }}</el-tag>
 
-                    <div class="stem" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div>
+                    <div class="stem html-parse" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div>
                     <p>（{{ ques.questionScore }}分）</p>
                   </div>
 
@@ -139,7 +139,7 @@
                       <span v-else class="icon not-ans"></span>
 
                       <span>{{ numToLetter(j) }}.&nbsp;</span>
-                      <div class="text" v-html="opt.optionText"></div>
+                      <div class="text html-parse" v-html="opt.optionText"></div>
                     </div>
                   </div>
                   <template v-if="item.questionType === 'essay'">
@@ -149,19 +149,20 @@
                     </div>
                     <div v-if="ques.uploadInstructions" class="line m-b-10">
                       <span>考生上传附件说明：</span>
-                      <div v-html="ques.uploadInstructions"></div>
+                      <div v-html="ques.uploadInstructions" class="html-parse"></div>
                     </div>
                   </template>
 
                   <div v-if="ques.knowledgePointList && ques.knowledgePointList.length" class="m-b-10">
                     <span>【知识点】</span>
-                    <el-tag v-for="(kp, k) in ques.knowledgePointList" :key="k" class="m-r-5">{{ kp.name }}</el-tag>
+                    <el-tag v-for="(kp, k) in ques.knowledgePointList" :key="k" class="m-r-5" type="info">{{ kp.name
+                      }}</el-tag>
                   </div>
                   <div class="flex m-b-10">
                     <span>【解析】</span>
                     <div
                       v-if="ques.questionAnswerVersionsList.length && ques.questionAnswerVersionsList[0].answerAnalysis"
-                      v-html="ques.questionAnswerVersionsList[0].answerAnalysis"></div>
+                      v-html="ques.questionAnswerVersionsList[0].answerAnalysis" class="html-parse"></div>
                     <div v-else>暂无解析</div>
                   </div>
 
@@ -314,7 +315,7 @@ export default {
               const quesAnswer = []
               opts && opts.map((m, j) => {
                 const selected = userAnswer.includes(m.optionNumber)
-                m.optCorrect = m.answerIsCorrect ? (selected ? 1 : -1) : (selected ? 0 : -1) // 用户选择的结果跟正确答案是否匹配(1正确，0错误，-1未选择)
+                m.optCorrect = m.answerIsCorrect ? 1 : (selected ? 0 : -1) // 用户选择的结果跟正确答案是否匹配(1正确，0错误，-1未选择)
                 m.answerIsCorrect && quesAnswer.push(type === 'judgement' ? m.optionText : numToLetter(j))
               })
               n.quesAnswer = quesAnswer.join('')
@@ -398,7 +399,7 @@ export default {
     // 答题卡题目点击滚动
     scrollToQues (e) {
       const el = document.querySelector('#ques' + e.id)
-      el && this.scrollToSmooth(el.offsetTop - document.querySelector('#quesWrap').offsetTop + 200, 200)
+      el && this.scrollToSmooth(el.offsetTop - document.querySelector('#right').offsetTop, 200)
     },
     // 答题卡筛选
     filterStatus (e) {
@@ -612,10 +613,8 @@ samp {
 
   .left {
     width: 290px;
-    max-height: calc(100vh - 267px);
     margin-right: 15px;
     background-color: #fff;
-    overflow: auto;
 
     .title {
       padding: 10px 0;
@@ -631,7 +630,9 @@ samp {
     }
 
     .type-wrap {
+      max-height: calc(100vh - 369px);
       padding: 10px;
+      overflow: auto;
 
       .type {
         margin-bottom: 20px;
diff --git a/src/views/theoreticalCourse/contentSettings/index.vue b/src/views/theoreticalCourse/contentSettings/index.vue
index 3dd1e51..0a78558 100644
--- a/src/views/theoreticalCourse/contentSettings/index.vue
+++ b/src/views/theoreticalCourse/contentSettings/index.vue
@@ -705,7 +705,7 @@ export default {
         // 阿里云视频点播
         if (row.fileId) {
           this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-            this.playAuth = res.data.playAuth;
+            this.playAuth = res.playAuth;
             if (this.player) {
               this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
             } else {
diff --git a/src/views/theoreticalCourse/preview/index.vue b/src/views/theoreticalCourse/preview/index.vue
index 4783799..00662c9 100644
--- a/src/views/theoreticalCourse/preview/index.vue
+++ b/src/views/theoreticalCourse/preview/index.vue
@@ -1,78 +1,46 @@
 <template>
   <!--  课程预览  -->
   <div class="wrap">
-    <el-card shadow="hover"
-             class="m-b-20">
+    <el-card shadow="hover" class="m-b-20">
       <div class="flex-between">
-        <el-page-header @back="back"
-                        :content="'课程预览'"></el-page-header>
+        <el-page-header @back="back" :content="'课程预览'"></el-page-header>
       </div>
     </el-card>
 
     <div class="flex">
-      <div class="cover"
-           :class="{'is-word': showMask1}">
-        <img v-if="coverUrl"
-             :src="coverUrl"
-             alt=""
-             width="100%"
-             height="100%">
+      <div class="cover" :class="{ 'is-word': showMask1 }">
+        <img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
         <template v-else-if="iframeSrc">
-          <iframe class="inner fileIframe"
-                  id="fileIframe"
-                  :src="iframeSrc"
-                  frameborder="0"></iframe>
+          <iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
           <template v-if="showMask">
-            <div class="mask"
-                 style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
-            <div class="mask"
-                 style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+            <div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div>
+            <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
           </template>
           <template v-if="showMask1">
-            <div class="word-mask"
-                 style="height: 40px;"></div>
-            <div class="word-mask2"
-                 style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+            <div class="word-mask" style="height: 40px;"></div>
+            <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
           </template>
           <template v-if="showMask2">
-            <div class="excel-mask1"
-                 style="height: 48px;"></div>
+            <div class="excel-mask1" style="height: 48px;"></div>
           </template>
         </template>
-        <div class="pdf inner"
-             v-else-if="pdfSrc">
+        <div class="pdf inner" v-else-if="pdfSrc">
           <p class="arrow">
-            <span @click="changePdfPage(0)"
-                  class="turn el-icon-arrow-left"
-                  :class="{grey: currentPage==1}"></span>
+            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{ grey: currentPage == 1 }"></span>
             {{ currentPage }} / {{ pageCount }}
-            <span @click="changePdfPage(1)"
-                  class="turn el-icon-arrow-right"
-                  :class="{grey: currentPage==pageCount}"></span>
+            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
+              :class="{ grey: currentPage == pageCount }"></span>
           </p>
-          <pdf class="pdf-wrap"
-               :src="pdfSrc"
-               :page="currentPage"
-               @num-pages="pageCount=$event"
-               @page-loaded="currentPage=$event"
-               @loaded="loadPdfHandler">
+          <pdf class="pdf-wrap" :src="pdfSrc" :page="currentPage" @num-pages="pageCount = $event"
+            @page-loaded="currentPage = $event" @loaded="loadPdfHandler">
           </pdf>
         </div>
-        <div class="inner"
-             v-else-if="playAuth">
-          <div class="video_wid"
-               id="player"></div>
+        <div class="inner" v-else-if="playAuth">
+          <div class="video_wid" id="player"></div>
         </div>
-        <div class="inner"
-             v-else-if="videoSrc">
-          <video class="video"
-                 :key="videoSrc"
-                 width="100%"
-                 height="100%"
-                 autoplay
-                 controls>
-            <source :src="videoSrc"
-                    type="video/mp4">
+        <div class="inner" v-else-if="videoSrc">
+          <video class="video" :key="videoSrc" width="100%" height="100%" autoplay controls>
+            <source :src="videoSrc" type="video/mp4">
             您的浏览器不支持 video 标签。
           </video>
         </div>
@@ -81,49 +49,26 @@
         <div class="list">
           <h4 class="title">{{ courseName }}</h4>
           <div class="desc-wrap">
-            <div class="desc"
-                 :class="{active: desShrink}"
-                 v-html="description"></div>
-            <i class="arrow"
-               :class="{active: desShrink}"
-               v-if="description.length > 40">
+            <div class="desc" :class="{ active: desShrink }" v-html="description"></div>
+            <i class="arrow" :class="{ active: desShrink }" v-if="description.length > 40">
               <span>...</span>
-              <img src="@/assets/img/arrow-down.png"
-                   alt=""
-                   @click="desShrink = !desShrink">
+              <img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink">
             </i>
           </div>
           <div class="chapters">
             <template v-if="videoList.length">
-              <div class="chapter"
-                   v-for="(item,index) in videoList"
-                   :key="index">
+              <div class="chapter" v-for="(item, index) in videoList" :key="index">
                 <div class="chapterName">{{ item.name }}</div>
-                <div class="section"
-                     v-if="item.subsectionList.length">
-                  <div v-for="(section,i) in item.subsectionList"
-                       :key="i"
-                       @click="preview(section, item.name)">
-                    <p class="sectionName ellipsis"
-                       :class="{active: curLink === `${item.name}${section.name}`}">
-                      <img v-if="section.fileType === 'pptx'"
-                           src="@/assets/img/exts/ppt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'mp4'"
-                           src="@/assets/img/exts/video.png"
-                           alt="">
+                <div class="section" v-if="item.subsectionList.length">
+                  <div v-for="(section, i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
+                    <p class="sectionName ellipsis" :class="{ active: curLink === `${item.name}${section.name}` }">
+                      <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                      <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
                       <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
-                           src="@/assets/img/exts/word.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'txt'"
-                           src="@/assets/img/exts/txt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'pdf'"
-                           src="@/assets/img/exts/pdf.png"
-                           alt="">
-                      <img v-else
-                           src="@/assets/img/exts/pic.png"
-                           alt="">
+                        src="@/assets/img/exts/word.png" alt="">
+                      <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                      <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                      <img v-else src="@/assets/img/exts/pic.png" alt="">
                       {{ section.name }}
                     </p>
                   </div>
@@ -222,7 +167,7 @@ export default {
         // 阿里云视频点播
         if (row.fileId) {
           this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-            this.playAuth = res.data.playAuth;
+            this.playAuth = res.playAuth;
             this.$nextTick(() => {
               if (this.player) {
                 this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
@@ -320,265 +265,317 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    padding: 0 200px;
+  padding: 0 200px;
 }
+
 $height: 700px;
+
 .video_wid,
 .cover {
-    position: relative;
-    width: 76%;
-    height: $height !important;
-    border: 0;
+  position: relative;
+  width: 76%;
+  height: $height !important;
+  border: 0;
 }
+
 .page {
-    /deep/.des {
-        overflow: auto;
-        div,
-        p,
-        span {
-            font-family: PingFangSC-Regular !important;
-        }
+  /deep/.des {
+    overflow: auto;
+
+    div,
+    p,
+    span {
+      font-family: PingFangSC-Regular !important;
     }
+  }
 }
+
 .l-title {
-    font-size: 17px;
+  font-size: 17px;
 }
+
 .cover {
-    background-color: #252528;
-    img {
-        border-radius: 8px;
-    }
-    &.is-word {
-        overflow: hidden;
-    }
+  background-color: #252528;
+
+  img {
+    border-radius: 8px;
+  }
+
+  &.is-word {
+    overflow: hidden;
+  }
 }
+
 .fileIframe {
-    height: $height !important;
+  height: $height !important;
 }
+
 .video_wid,
 .inner {
-    width: 100%;
-    height: 100% !important;
-    border: 0;
-    overflow: auto;
+  width: 100%;
+  height: 100% !important;
+  border: 0;
+  overflow: auto;
 }
+
 .cover.is-word {
-    .inner {
-        height: calc(100% + 38px) !important;
-        margin-top: -38px;
-    }
+  .inner {
+    height: calc(100% + 38px) !important;
+    margin-top: -38px;
+  }
 }
+
 .video_wid:focus {
-    outline: none;
+  outline: none;
 }
+
 .catalog {
-    width: 296px;
-    padding: 16px;
-    margin-left: 12px;
-    background-color: #252528;
+  width: 296px;
+  padding: 16px;
+  margin-left: 12px;
+  background-color: #252528;
 }
+
 .list {
-    height: calc(700px - 82px);
-    overflow-y: auto;
-    .title {
-        margin-bottom: 11px;
-        color: #fff;
-        font-size: 16px;
-    }
-    .pro-title {
-        margin-bottom: 5px;
-        color: #fff;
-        font-size: 12px;
-    }
-    /deep/.el-progress-bar {
-        width: 92%;
-    }
-    /deep/.el-progress__text {
-        color: #fff;
+  height: calc(700px - 82px);
+  overflow-y: auto;
+
+  .title {
+    margin-bottom: 11px;
+    color: #fff;
+    font-size: 16px;
+  }
+
+  .pro-title {
+    margin-bottom: 5px;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  /deep/.el-progress-bar {
+    width: 92%;
+  }
+
+  /deep/.el-progress__text {
+    color: #fff;
+  }
+
+  .desc-wrap {
+    position: relative;
+
+    .desc {
+      font-size: 12px;
+      color: #fff;
+      line-height: 22px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &.active {
+        display: block;
+        overflow: visible;
+      }
     }
-    .desc-wrap {
-        position: relative;
-        .desc {
-            font-size: 12px;
-            color: #fff;
-            line-height: 22px;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            &.active {
-                display: block;
-                overflow: visible;
-            }
+
+    .arrow {
+      position: absolute;
+      bottom: 2px;
+      right: 0;
+      display: flex;
+      justify-content: space-between;
+      width: 46px;
+      background-color: #fff;
+
+      span {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      img {
+        width: 16px;
+        cursor: pointer;
+      }
+
+      &.active {
+        span {
+          opacity: 0;
         }
-        .arrow {
-            position: absolute;
-            bottom: 2px;
-            right: 0;
-            display: flex;
-            justify-content: space-between;
-            width: 46px;
-            background-color: #fff;
-            span {
-                font-size: 14px;
-                color: rgba(0, 0, 0, 0.65);
-            }
-            img {
-                width: 16px;
-                cursor: pointer;
-            }
-            &.active {
-                span {
-                    opacity: 0;
-                }
-                img {
-                    transform: rotate(180deg);
-                }
-            }
+
+        img {
+          transform: rotate(180deg);
         }
+      }
     }
-    .chapters {
-        margin-top: 16px;
-        max-height: calc(100% - 53px);
-        overflow: auto;
-    }
-    .chapter {
-        margin-bottom: 20px;
+  }
+
+  .chapters {
+    margin-top: 16px;
+    max-height: calc(100% - 53px);
+    overflow: auto;
+  }
+
+  .chapter {
+    margin-bottom: 20px;
+  }
+
+  .chapterName {
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .section {
+    padding: 5px 15px;
+    margin-top: 12px;
+    background-color: #121214;
+  }
+
+  .sectionName {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 15px;
+    margin: 12px 0;
+    font-size: 12px;
+    color: #999;
+    cursor: pointer;
+
+    img {
+      margin-right: 8px;
     }
-    .chapterName {
-        color: #fff;
-        font-size: 14px;
+
+    .icon {
+      position: absolute;
+      right: 0;
+      font-size: 14px;
+      color: #00c935;
     }
-    .section {
-        padding: 5px 15px;
-        margin-top: 12px;
-        background-color: #121214;
+
+    .circle {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      border: 1px solid #ccc;
     }
-    .sectionName {
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding-right: 15px;
-        margin: 12px 0;
-        font-size: 12px;
-        color: #999;
-        cursor: pointer;
-        img {
-            margin-right: 8px;
-        }
-        .icon {
-            position: absolute;
-            right: 0;
-            font-size: 14px;
-            color: #00c935;
-        }
-        .circle {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            border: 1px solid #ccc;
-        }
-        &.active {
-            color: #fff;
-        }
+
+    &.active {
+      color: #fff;
     }
+  }
 }
+
 .buy {
-    text-align: center;
-    .tips {
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-    img {
-        width: 85%;
-    }
+  text-align: center;
+
+  .tips {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  img {
+    width: 85%;
+  }
 }
+
 .el-image-viewer__wrapper {
-    transform: translateY(-10px);
-    transition: transform 0.5s;
+  transform: translateY(-10px);
+  transition: transform 0.5s;
 
-    &.active {
-        transform: translateY(0);
-    }
+  &.active {
+    transform: translateY(0);
+  }
 }
+
 .el-image-viewer__close {
-    z-index: 2000;
-    top: 15px;
-    right: 15px;
-    &.doc-close {
-        i {
-            color: #000 !important;
-        }
+  z-index: 2000;
+  top: 15px;
+  right: 15px;
+
+  &.doc-close {
+    i {
+      color: #000 !important;
     }
+  }
 }
+
 .list::-webkit-scrollbar {
-    width: 4px;
+  width: 4px;
 }
+
 .list::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0.06);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .mask {
-    z-index: 9;
-    position: absolute;
-    background-color: rgb(57, 58, 61);
+  z-index: 9;
+  position: absolute;
+  background-color: rgb(57, 58, 61);
 }
+
 .word-mask {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background-color: rgb(243, 242, 241);
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: rgb(243, 242, 241);
 }
+
 .word-mask1 {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    background-color: #185abd;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  background-color: #185abd;
 }
+
 .word-mask2 {
-    z-index: 9;
-    position: absolute;
-    background-color: transparent;
+  z-index: 9;
+  position: absolute;
+  background-color: transparent;
 }
+
 .excel-mask1 {
-    z-index: 9;
-    position: absolute;
-    top: 0;
-    left: 20%;
-    width: 60%;
-    background-color: #107c41;
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  left: 20%;
+  width: 60%;
+  background-color: #107c41;
 }
+
 .pdf {
-    position: relative;
-    .full {
-        position: absolute;
-        top: 7px;
-        right: 10px;
-        cursor: pointer;
-    }
-    .arrow {
-        padding: 10px 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        color: #fff;
-        background-color: #333;
-        .turn {
-            margin: 0 10px;
-            font-size: 18px;
-            cursor: pointer;
-        }
-    }
-    .pdf-wrap {
-        width: 80%;
-        margin: 0 auto;
+  position: relative;
+
+  .full {
+    position: absolute;
+    top: 7px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .arrow {
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: #fff;
+    background-color: #333;
+
+    .turn {
+      margin: 0 10px;
+      font-size: 18px;
+      cursor: pointer;
     }
+  }
+
+  .pdf-wrap {
+    width: 80%;
+    margin: 0 auto;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/theoryExam/index.vue b/src/views/theoryExam/index.vue
index 8ee11c5..5947fba 100644
--- a/src/views/theoryExam/index.vue
+++ b/src/views/theoryExam/index.vue
@@ -38,6 +38,6 @@ export default {
 
 <style lang="scss" scoped>
 iframe {
-  height: calc(100vh - 173px);
+  height: calc(100vh - 167px);
 }
 </style>