显示左侧及问答作业修改

src/components/study.vue

@@ -87,14 +87,17 @@
             class="vedioBox"
             v-if="
               vedio[taskCount].length > 0 ||
-              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].taskDetail != ''
+              chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                .taskDetail != ''
             "
           >
             <div class="checkbox">
               <div
                 class="check"
                 style="font-size: 25px"
-                :id="chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].id"
+                :id="
+                  chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].id
+                "
               >
                 <!-- {{ taskCount + 1 }}
                 {{ chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].task }} -->
@@ -121,15 +124,19 @@
                         overflow: auto;
                       "
                       v-if="
-                        chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                          .taskDetail != ''
+                        chapInfoList[courseType].chapterInfo[0].taskJson[
+                          taskCount
+                        ].taskDetail != ''
                       "
                     >
                       <!-- <span style="color: #cbcbcb">任务描述</span> -->
                       {{
-                        chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].taskDetail
-                          ? chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
-                              .taskDetail
+                        chapInfoList[courseType].chapterInfo[0].taskJson[
+                          taskCount
+                        ].taskDetail
+                          ? chapInfoList[courseType].chapterInfo[0].taskJson[
+                              taskCount
+                            ].taskDetail
                           : "暂无描述"
                       }}
                     </div>
@@ -144,7 +151,8 @@
                     v-if="
                       vedio.length &&
                       vedio[taskCount] &&
-                      vedio[taskCount].length > 0
+                      vedio[taskCount].length > 0 &&
+                      showType == 0
                     "
                   >
                     <div class="workd_media" style="height: 100%">
@@ -157,6 +165,35 @@
                       ></video-player>
                     </div>
                   </div>
+                  <div
+                    class="wheel"
+                    v-if="showType == 1"
+                    style="
+                      box-shadow: 0 0 6px 1px #f2f2f2;
+                      width: 90%;
+                      margin: 0 0 20px 30px;
+                      background: #f1f1f1;
+                    "
+                  >
+                    <div class="title">查看文档</div>
+                    <el-form class="textBox">
+                      <el-form-item label="文档标题" class="textTitle">
+                        <div style="font-size: 22px">{{ text.name }}</div>
+                      </el-form-item>
+                      <div>文档内容</div>
+                      <div v-html="text.url" class="textContent"></div>
+                    </el-form>
+                  </div>
+                  <div
+                    class="wheel"
+                    v-if="showType == 2"
+                    style="height: 520px; width: 90%; margin: 0 0 20px 30px"
+                  >
+                    <iframe
+                      style="width: 100%; height: 100%; border: none"
+                      :src="pptImgUrl"
+                    ></iframe>
+                  </div>
                 </div>
               </div>
 
@@ -320,14 +357,19 @@
                       overflow: auto;
                     "
                     v-if="
-                      chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].taskDetail !=
-                      ''
+                      chapInfoList[courseType].chapterInfo[0].taskJson[
+                        taskCount
+                      ].taskDetail != ''
                     "
                   >
                     <!-- <span style="color: #cbcbcb">任务描述</span> -->
                     {{
-                      chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].taskDetail
-                        ? chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].taskDetail
+                      chapInfoList[courseType].chapterInfo[0].taskJson[
+                        taskCount
+                      ].taskDetail
+                        ? chapInfoList[courseType].chapterInfo[0].taskJson[
+                            taskCount
+                          ].taskDetail
                         : "暂无描述"
                     }}
                   </div>
@@ -503,12 +545,12 @@
             <div
               class="vedioBox"
               v-if="
-                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].toolChoose[0]
-                  .tool &&
-                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].toolChoose[0].tool
-                  .length &&
-                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount].toolChoose[0].tool
-                  .length > 0
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .toolChoose[0].tool &&
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .toolChoose[0].tool.length &&
+                chapInfoList[courseType].chapterInfo[0].taskJson[taskCount]
+                  .toolChoose[0].tool.length > 0
               "
             >
               <div
@@ -531,9 +573,8 @@
                 <div
                   class="filebox"
                   style="flex-wrap: nowrap; margin: 0 20px"
-                  v-for="(tool, toolIndex) in chapInfoList[courseType].chapterInfo[0].taskJson[
-                    taskCount
-                  ].toolChoose"
+                  v-for="(tool, toolIndex) in chapInfoList[courseType]
+                    .chapterInfo[0].taskJson[taskCount].toolChoose"
                   :key="toolIndex"
                 >
                   <div
@@ -834,17 +875,24 @@
                       >
                         <!-- @click="previewImg(w.works)" -->
                         <div class="workImg">
-                          <img
+                          <!-- <img
                             src="../assets/icon/works/noImg.png"
                             @click="
                               openTools(15, toolIndex, taskCount, w.works)
                             "
                             alt=""
-                          />
+                          /> -->
+                          <div class="answerBg">
+                            <div>{{ w.sName }}</div>
+                            <div class="answerContent">
+                              {{ JSON.parse(w.works)[0].answer }}
+                            </div>
+                          </div>
+                          <!-- <div>{{ JSON.parse(w.works)[0].answer }}</div> -->
                         </div>
-                        <div class="worksName">
+                        <!-- <div class="worksName">
                           姓名：<span>{{ w.sName }}</span>
-                        </div>
+                        </div> -->
                       </div>
                     </div>
                     <div
@@ -1629,6 +1677,7 @@ export default {
       workTypeC: false,
       isAnswer: false,
       timer: null,
+      showType: 0,
     };
   },
   methods: {
@@ -1785,7 +1834,9 @@ export default {
         .get(this.$store.state.api + "selectSWorks", params)
         .then((res) => {
           var a =
-            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[this.taskCount].toolChoose;
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              this.taskCount
+            ].toolChoose;
           var b = res.data[0];
           for (var i = 0; i < a.length; i++) {
             this.worksStudent[i] = [];
@@ -1945,6 +1996,7 @@ export default {
       window.parent.postMessage({ allScreen: "1" }, "*");
     },
     nextOrpreSteps(t) {
+      this.showType = 0;
       var b = this.chapInfoList.length - 1;
       if (t == 0) {
         if (this.courseType == 0) {
@@ -2037,6 +2089,7 @@ export default {
       this.courseType = s;
       this.navId = i;
       this.taskCount = n;
+      this.showType = 0;
       this.isNoHomeWork = false;
       (this.studyJuri = [
         {
@@ -2282,10 +2335,12 @@ export default {
       var d = JSON.parse(JSON.stringify(this.playerOptions));
       d.sources[0].src = u;
       this.playerO[0] = d;
+      this.showType = 0;
     },
     lookText(i, t) {
       this.text = this.textList[i][t];
-      this.dialogVisible1 = true;
+      // this.dialogVisible1 = true;
+      this.showType = 1;
     },
     lookTools(i, t) {
       this.chapTools = this.chapToolList[i][t];
@@ -2301,7 +2356,8 @@ export default {
       ) {
         this.pptImgUrl =
           "https://view.officeapps.live.com/op/view.aspx?src=" + f.url;
-        this.dialogVisible3 = true;
+        // this.dialogVisible3 = true;
+        this.showType = 2;
       } else {
         window.open(this.file[i].url);
       }
@@ -2538,11 +2594,17 @@ export default {
         }
         if (!this.dialogVisible2) {
           this.askJson.askJson =
-            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index].toolChoose[i].askJson;
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askJson;
           this.askJson.askTitle =
-            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index].toolChoose[i].askTitle;
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askTitle;
           this.askJson.askCount =
-            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index].toolChoose[i].askCount;
+            this.chapInfoList[this.courseType].chapterInfo[0].taskJson[
+              index
+            ].toolChoose[i].askCount;
         } else {
           this.askJson.askJson = this.chapTools.askJson.askJson;
           this.askJson.askTitle = this.chapTools.askJson.askTitle;
@@ -2652,10 +2714,10 @@ export default {
           a = this.answerCount;
           this.toolsCount(a, t);
         }
-        this.answerQ = this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index].toolChoose[
-          i
-        ].answerQ
-          ? this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index].toolChoose[i].answerQ
+        this.answerQ = this.chapInfoList[this.courseType].chapterInfo[0]
+          .taskJson[index].toolChoose[i].answerQ
+          ? this.chapInfoList[this.courseType].chapterInfo[0].taskJson[index]
+              .toolChoose[i].answerQ
           : "";
         this.answerDialogVisible = true;
       }
@@ -3501,8 +3563,15 @@ export default {
 .isWidth {
   width: 20%;
 }
+.textTitle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .textTitle >>> .el-form-item__label {
-  font-size: 20px;
+  font-size: 22px;
+  color: #918f8f;
 }
 .textCss >>> .el-dialog {
   width: 800px !important;
@@ -3636,7 +3705,8 @@ export default {
   height: calc(100% - 40px - 21px - 20px);
 }
 .cru_selectBox::-webkit-scrollbar,
-.study_top::-webkit-scrollbar {
+.study_top::-webkit-scrollbar,
+.answerContent::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 6px;
   /*高宽分别对应横竖滚动条的尺寸*/
@@ -3645,14 +3715,16 @@ export default {
 
 /*定义滚动条轨道 内阴影+圆角*/
 .cru_selectBox::-webkit-scrollbar-track,
-.study_top::-webkit-scrollbar-track {
+.study_top::-webkit-scrollbar-track,
+.answerContent::-webkit-scrollbar {
   border-radius: 10px;
   background-color: #eee;
 }
 
 /*定义滑块 内阴影+圆角*/
 .cru_selectBox::-webkit-scrollbar-thumb,
-.study_top::-webkit-scrollbar-thumb {
+.study_top::-webkit-scrollbar-thumb,
+.answerContent::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: rgba(0, 0, 0, 0.1);
@@ -3730,18 +3802,15 @@ export default {
   align-items: flex-start;
   justify-content: flex-start;
   align-content: center;
-  width: 15%;
+  width: 260px;
+  height: 140px;
   margin-right: 10px;
 }
 .workImg {
-  width: 200px;
-  height: 140px;
-  cursor: pointer;
-}
-.workImg > img {
   width: 100%;
   height: 100%;
 }
+
 .worksName {
   margin: 5px 0 0 0;
 }
@@ -3770,4 +3839,50 @@ export default {
 .noWorksName:hover {
   background: #e7e7e7 !important;
 }
+.title {
+  background: rgb(72, 72, 72);
+  width: 98%;
+  height: 45px;
+  color: #fff;
+  line-height: 45px;
+  padding-left: 20px;
+}
+.textBox {
+  font-size: 20px;
+  margin: 15px 0px 20px 30px;
+  width: 90%;
+  padding: 30px 0 0 50px;
+}
+.textContent {
+  font-size: 18px;
+  padding: 40px 0px 0px;
+  height: 300px;
+  width: 85%;
+  overflow: auto;
+  line-height: 30px;
+}
+.answerBg {
+  background: url(/static/img/answerBg.93bcd2c.png) no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.answerBg > div:nth-child(1) {
+  font-size: 22px;
+  padding: 25px 0 10px;
+}
+.answerContent {
+  font-size: 18px;
+  width: 215px;
+  height: 60px;
+  overflow-y: auto;
+  word-break: break-all;
+  text-align: left;
+}
 </style>