liveRoom

src/components/pages/liveRoom.vue

@@ -120,19 +120,7 @@
           </span>
         </div>
       </div>
-      <div
-        class="answerBox"
-        style="
-          width: 38.5%;
-          max-width: 38.5%;
-          overflow: auto;
-          background: rgb(255, 255, 255);
-          height: 91.5%;
-          position: relative;
-          margin: 10px 15px;
-        "
-        v-if="isBlock == 5"
-      >
+      <div class="answerBox tools_box" :class="{fullStyle:full}" v-if="isBlock == 5">
         <!-- <div
           style="
             border-bottom: 3px solid rgb(44, 131, 238);
@@ -155,49 +143,112 @@
           <div class="nextStepOne" @click="isBlock = 0">关闭</div>
         </div>
         <div v-else style="height: 100%; width: 100%">
-          <div v-if="toolsList[0].tools[howTools] == 1" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 1" class="tools_child_box">
+            <div class="tools_title">
+              <span>电子白板</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe style="width: 100%; height: 100%; border: none" src="https://iwb.cocorobo.cn/"></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 2" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 2" class="tools_child_box">
+            <div class="tools_title">
+              <span>便签</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 3" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 3" class="tools_child_box">
+            <div class="tools_title">
+              <span>思维导图</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 4" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 4" class="tools_child_box">
+            <div class="tools_title">
+              <span>问卷调查</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/ask"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 6" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 6" class="tools_child_box">
+            <div class="tools_title">
+              <span>协同文档</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 7" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 7" class="tools_child_box">
+            <div class="tools_title">
+              <span>思维网格</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 8" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 8" class="tools_child_box">
+            <div class="tools_title">
+              <span>素材库</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <iframe
               style="width: 100%; height: 100%; border: none"
               src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
             ></iframe>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 10" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 10" class="tools_child_box">
+            <div class="tools_title">
+              <span>倒计时</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <div>倒计时</div>
           </div>
-          <div v-if="toolsList[0].tools[howTools] == 13" style="height: 90%; width: 100%">
+          <div v-if="toolsList[0].tools[howTools] == 13" class="tools_child_box">
+            <div class="tools_title">
+              <span>分小组</span>
+              <div>
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
+              </div>
+            </div>
             <div>分小组</div>
           </div>
           <div class="nextStepOne" @click="nextTool">下一步</div>
@@ -375,7 +426,7 @@ export default {
       pdfUrl:
         "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
       isLoading: false,
-      full:false,
+      full: false,
       formLabelWidth: "100px",
       userid: this.$route.query.userid,
       cid: this.$route.query.cid,
@@ -681,6 +732,13 @@ export default {
     previewImg(url) {
       this.$hevueImgPreview(url);
     },
+    fullTools() {
+      this.full = !this.full;
+    },
+    closeTools(){
+      this.full = false
+      this.isBlock = 0
+    }
   },
   created() {
     this.selectSWork();
@@ -975,4 +1033,55 @@ export default {
   line-height: 30px;
   cursor: pointer;
 }
+
+.tools_title {
+  background: #000;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  justify-content: space-between;
+  padding: 0 15px;
+  box-sizing: border-box;
+}
+.tools_title span {
+  color: #fff;
+}
+.tools_title div {
+  display: flex;
+  align-items: center;
+}
+.full,
+.closeImg {
+  height: 22px;
+  cursor: pointer;
+}
+.tools_title img,
+img {
+  margin-left: 10px;
+}
+
+.tools_box {
+  width: 38.5%;
+  max-width: 38.5%;
+  overflow: auto;
+  background: rgb(255, 255, 255);
+  height: 91.5%;
+  position: relative;
+  margin: 10px 15px;
+}
+
+.tools_child_box {
+  width: 100%;
+  height: calc(90% - 40px);
+  padding-top: 40px;
+}
+
+.fullStyle {
+  width: 100% !important;
+  max-width: 100% !important;
+}
 </style>