lsc 3 years ago
parent
commit
8a50abb7e9
1 changed files with 79 additions and 247 deletions
  1. 79 247
      src/components/pages/liveRoom.vue

+ 79 - 247
src/components/pages/liveRoom.vue

@@ -15,27 +15,17 @@
         <div class="logoLive">
           <img src="../../assets/icon/logo.png" alt />
         </div>
-        <div style="color: #fff; line-height: 45px; padding-left: 15px">
-          湖心亭看雪可可乐博模拟展示课件
-        </div>
+        <div style="color: #fff; line-height: 45px; padding-left: 15px">湖心亭看雪可可乐博模拟展示课件</div>
       </div>
     </div>
     <div class="isNoOther">
-      <div
-        class="imgMiddle"
-        :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
-        v-show="!full"
-      >
+      <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'" v-show="!full">
         <!-- <img src="../../assets/icon/kc1.png" alt /> -->
         <!-- <iframe
           style="width: 100%; height: 100%; border: none"
           src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%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%B61656644341323.pptx"
         ></iframe>-->
-        <pdf
-          :pdfUrl="pdfUrl"
-          style="width: 100%; height: 100%"
-          :getPage="getPage"
-        ></pdf>
+        <pdf :pdfUrl="pdfUrl" style="width: 100%; height: 100%" :getPage="getPage"></pdf>
       </div>
       <div
         style="
@@ -48,14 +38,8 @@
         "
         v-if="isBlock == 1 || isBlock == 2 || isBlock == 6"
       >
-        <div
-          style="background: #fff; height: 92%; width: 96%; margin: 10px auto"
-        >
-          <div
-            style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
-          >
-            答题查看
-          </div>
+        <div style="background: #fff; height: 92%; width: 96%; margin: 10px auto">
+          <div style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px">答题查看</div>
 
           <div class="answerBox" v-if="isBlock == 1">
             <div class="answerTimuBox" v-for="item in 1" :key="item">
@@ -68,9 +52,7 @@
                 <span>C</span>
                 <span>D</span>
               </div>
-              <el-button style="margin: 0 auto" @click="showMember(item)"
-                >开始答题</el-button
-              >
+              <el-button style="margin: 0 auto" @click="showMember(item)">开始答题</el-button>
             </div>
           </div>
           <div class="answerBox" v-if="isBlock == 2 || isBlock == 6">
@@ -79,9 +61,7 @@
                 :class="{ pAnswer: item.is == 2 }"
                 v-for="(item, index) in studentArray"
                 :key="index"
-              >
-                {{ item.name }}
-              </div>
+              >{{ item.name }}</div>
             </div>
             <div class="memberBox" v-if="isBlock == 6">
               <div
@@ -89,21 +69,11 @@
                 v-for="(item, index) in studentArray2"
                 :key="index"
                 @click="whoAnswer(item, index)"
-              >
-                {{ item.name }}
-              </div>
-            </div>
-            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 2">
-              正在答题......
+              >{{ item.name }}</div>
             </div>
-            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 2">
-              查看数据统计
-            </div>
-            <span
-              slot="footer"
-              class="dialog-footer sztFooter"
-              v-if="isBlock == 6"
-            >
+            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 2">正在答题......</div>
+            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 2">查看数据统计</div>
+            <span slot="footer" class="dialog-footer sztFooter" v-if="isBlock == 6">
               <el-button type="primary" @click="isBlock = 0">关闭</el-button>
               <!-- <el-button type="primary" @click="isBlock = 2">返回</el-button> -->
             </span>
@@ -150,11 +120,7 @@
           </span>
         </div>
       </div>
-      <div
-        class="answerBox tools_box"
-        :class="{ fullStyle: full }"
-        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);
@@ -171,37 +137,18 @@
             <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"
-                />
+                <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>
+            <iframe style="width: 100%; height: 100%; border: none" src="https://iwb.cocorobo.cn/"></iframe>
           </div>
           <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -213,16 +160,8 @@
             <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -234,16 +173,8 @@
             <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -255,16 +186,8 @@
             <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -276,16 +199,8 @@
             <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -297,16 +212,8 @@
             <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"
-                />
+                <img src="../../assets/full.png" class="full" @click="fullTools" />
+                <img src="../../assets/close1.png" class="closeImg" @click="closeTools" />
               </div>
             </div>
             <iframe
@@ -318,117 +225,59 @@
             <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"
-                />
+                <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] == 10"
-            class="tools_child_box"
-          >
+          <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"
-                />
+                <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] == 11"
-            class="tools_child_box"
-          >
+          <div v-if="toolsList[0].tools[howTools] == 11" 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"
-                />
+                <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"
-            class="tools_child_box"
-          >
+          <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"
-                />
+                <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] == 14"
-            class="tools_child_box"
-          >
+          <div v-if="toolsList[0].tools[howTools] == 14" 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"
-                />
+                <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"
-            v-if="howTools != 0 && toolsList[0].tools.length > 1"
-          >
-            上一步
-          </div>
-          <div
-            class="nextStepOne"
-            @click="nextTool"
-            v-if="howTools != toolsList[0].tools.length -1 && toolsList[0].tools.length > 1"
-          >
-            下一步
+          <div class="nextStepBox" v-if="toolsList[0].tools.length > 1">
+            <div class="nextStepOne" @click="howTools--" v-if="howTools != 0">上一步</div>
+            <div
+              class="nextStepOne"
+              @click="howTools++"
+              v-if="howTools != toolsList[0].tools.length -1"
+            >下一步</div>
           </div>
         </div>
         <!-- <div v-if="toolCount == 0" style="height: 90%">
@@ -473,9 +322,7 @@
             height: 25px;
             line-height: 25px;
           "
-        >
-          查看作业
-        </div>
+        >查看作业</div>
         <div class="workBox">
           <div class="works" v-for="(w, wIndex) in worksList" :key="wIndex">
             <div class="workImg">
@@ -502,9 +349,7 @@
 
     <div class="blackBottomB">
       <div style="display: flex">
-        <div class="blackButton" @click="answerWork" v-if="steps == 3">
-          开始答题
-        </div>
+        <div class="blackButton" @click="answerWork" v-if="steps == 3">开始答题</div>
         <div
           class="blackButton"
           @click="isBlock = 5"
@@ -515,19 +360,9 @@
             steps != 11 &&
             steps != 12
           "
-        >
-          查看工具
-        </div>
-        <div class="blackButton" @click="checkStudentAnswer" v-if="steps == 8">
-          选择学生回答
-        </div>
-        <div
-          class="blackButton"
-          @click="isBlock = 4"
-          v-if="steps == 11 || steps == 12"
-        >
-          查看作业
-        </div>
+        >查看工具</div>
+        <div class="blackButton" @click="checkStudentAnswer" v-if="steps == 8">选择学生回答</div>
+        <div class="blackButton" @click="isBlock = 4" v-if="steps == 11 || steps == 12">查看作业</div>
       </div>
       <!-- <div
         class="blackButton"
@@ -545,9 +380,9 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
-        是否让“{{ answerStudent }}”同学进行单独答题?
-      </div>
+      <div
+        style="text-align: center; padding: 20px 0 50px 0; font-size: 18px"
+      >是否让“{{ answerStudent }}”同学进行单独答题?</div>
       <div
         style="
           width: 200px;
@@ -561,9 +396,7 @@
           cursor: pointer;
         "
         @click="dialogVisible = false"
-      >
-        确定
-      </div>
+      >确定</div>
     </el-dialog>
     <el-dialog
       :visible.sync="dialogVisible1"
@@ -572,9 +405,7 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
-        正在开发中!
-      </div>
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">正在开发中!</div>
       <div
         style="
           width: 200px;
@@ -588,9 +419,7 @@
           cursor: pointer;
         "
         @click="dialogVisible1 = false"
-      >
-        确定
-      </div>
+      >确定</div>
     </el-dialog>
     <el-dialog
       :visible.sync="dialogVisible2"
@@ -599,9 +428,7 @@
       :before-close="handleClose"
       class="dialog_diy"
     >
-      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
-        课程结束后才有报告!
-      </div>
+      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">课程结束后才有报告!</div>
       <div
         style="
           width: 200px;
@@ -615,9 +442,7 @@
           cursor: pointer;
         "
         @click="dialogVisible2 = false"
-      >
-        确定
-      </div>
+      >确定</div>
     </el-dialog>
   </div>
 </template>
@@ -759,14 +584,13 @@ export default {
     },
     //uuid生成
     guid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
-        /[xy]/g,
-        function (c) {
-          var r = (Math.random() * 16) | 0,
-            v = c == "x" ? r : (r & 0x3) | 0x8;
-          return v.toString(16);
-        }
-      );
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
+        c
+      ) {
+        var r = (Math.random() * 16) | 0,
+          v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
     },
     time() {
       if (!this.now) {
@@ -1129,6 +953,11 @@ export default {
   object-fit: cover;
   cursor: pointer;
 }
+.nextStepBox {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
 .nextStepOne {
   background: #6b92c9;
   color: #fff;
@@ -1138,11 +967,14 @@ export default {
   line-height: 35px;
   font-size: 14px;
   border-radius: 5px;
-  position: absolute;
-  bottom: 50px;
-  left: 40%;
   cursor: pointer;
 }
+
+.nextStepOne,
+.nextStepOne {
+  margin-left: 10px;
+}
+
 .logoLive {
   width: 35px;
 }