Browse Source

实时课堂

lsc 2 years ago
parent
commit
6a2dd2711e

BIN
src/assets/icon/thirdToolList/translation.png


+ 39 - 13
src/components/pages/classRoom.vue

@@ -25,18 +25,15 @@
             <div class="tup">
               <img
                 :src="
-									item.cover != null && item.cover != ''
-										? JSON.parse(item.cover).length > 0
-											? JSON.parse(item.cover)[0].url
+									item.poster != null && item.poster != ''
+											? item.poster
 											: mr
-										: mr
 								"
                 alt
               />
             </div>
             <div class="bottom_box">
-              <div>{{ item.title }}</div>
-              <div class="kc_t" v-if="groupA == '1'">创建老师:{{ item.uname }}</div>
+              <div>{{ item.name }}</div>
               <div class="kc_time">{{ item.time }}</div>
             </div>
             <div class="three_bottom">
@@ -44,7 +41,7 @@
                 @click="
 									goTo(
 										'/liveRoom?cid=' +
-											item.courseId +
+											item.id +
 											'&userid=' +
 											userid +
 											'&oid=' +
@@ -112,12 +109,12 @@ export default {
       now: "",
       groupA: "0",
       course: [
-        {
-          cover: [],
-          courseId:"9a4e8dbe-132e-438e-97db-b07eb01fa04c",
-          title: "introduce a festival (Final)",
-          time: this.getNowTime(),
-        },
+        // {
+        //   cover: [],
+        //   courseId:"9a4e8dbe-132e-438e-97db-b07eb01fa04c",
+        //   title: "introduce a festival (Final)",
+        //   time: this.getNowTime(),
+        // },
       ],
       courseName: "",
       mr: require("../../assets/icon/pptImg2.png"),
@@ -143,6 +140,7 @@ export default {
     handleCurrentChange(val) {
       // console.log(`当前页: ${val}`);
       this.page = val;
+      this.getData();
     },
     init() {},
     handleClose(done) {
@@ -189,6 +187,7 @@ export default {
     },
     searchCourse() {
       this.page = 1;
+      this.getData();
     },
     // deleteCourse(cid) {
     //   const loading = this.openLoading(
@@ -215,9 +214,36 @@ export default {
     search() {
       this.page = 1;
     },
+    getData(){
+      if (!this.loading) {
+        this.loading = this.openLoading(
+          document.querySelector(".student_table")
+        );
+      }
+    
+      let params = {
+        cn: this.courseName,
+        uid:this.userid,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getRealTimeClass", params)
+        .then((res) => {
+          this.loading.close();
+          this.loading = "";
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.course = res.data[0];
+        })
+        .catch((err) => {
+          this.loading.close();
+          this.loading = "";
+          console.error(err);
+        });
+    }
   },
   created() {
     this.page = 1;
+    this.getData();
   },
 };
 </script>

+ 2 - 2
src/components/pages/components/answerData.vue

@@ -7,14 +7,14 @@
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
       <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; margin: 0 0 0 1rem"></div>
     </div>
-    <div class="tips">
+    <!-- <div class="tips">
       <img src="../../../assets/tips.png" alt />
       <span>
         提示:目前答对
         <span>正确选项B</span>的,只有
         <span>{{problemJson.B}}</span>位同学!学要继续往“实践探究”方向继续加强学习哦!
       </span>
-    </div>
+    </div> -->
   </div>
 </template>
 

+ 1 - 0
src/components/pages/components/pdf.vue

@@ -75,6 +75,7 @@ export default {
     pageTotalNum(val) {
       if (val) {
         this.loading.close();
+        this.getPage(1);
       }
     },
   },

+ 432 - 104
src/components/pages/liveRoom.vue

@@ -5,7 +5,8 @@
       width: 100%;
       height: 100%;
       margin: 0;
-      position: relate;
+      position: relative;
+      min-height: 750px;
     "
   >
     <!-- <div class="pb_content_body" style="height: 100%">
@@ -69,6 +70,7 @@
               <div
                 :class="{ pAnswer: item.is == 2 }"
                 v-for="(item, index) in studentArray"
+                @click="getOAnswer(item.answer, item.name)"
                 :key="index"
               >
                 {{ item.name }}
@@ -86,12 +88,31 @@
               </div>
               <div v-if="studentArray2.length == 0">暂无学生</div>
             </div>
-            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">
+            <!-- <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 1">
               共有四个选项,正在答题......
-            </div>
-            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 1">
+            </div> -->
+            <div
+              class="viewSta"
+              @click="isBlock = 3"
+              v-if="
+                isBlock == 1 &&
+                tools[steps].tools &&
+                tools[steps].tools.indexOf(9) != -1
+              "
+            >
               查看数据统计
             </div>
+            <div
+              class="viewSta"
+              @click="isBlock = 14"
+              v-else-if="
+                isBlock == 1 &&
+                tools[steps].tools &&
+                tools[steps].tools.indexOf(27) != -1
+              "
+            >
+              查看所有学生答题情况
+            </div>
             <span
               slot="footer"
               class="dialog-footer sztFooter"
@@ -137,7 +158,7 @@
             <AnswerData :problemJson="answerJson"></AnswerData>
           </div>
           <span slot="footer" class="dialog-footer sztFooter">
-            <el-button type="primary" @click="isBlock = 0">关闭</el-button>
+            <!-- <el-button type="primary" @click="isBlock = 0">关闭</el-button> -->
             <el-button type="primary" @click="isBlock = 1">返回</el-button>
           </span>
         </div>
@@ -189,6 +210,16 @@
               <div>思维导图</div>
             </div>
           </div>
+          <div
+            v-if="tools[steps].tools && tools[steps].tools.indexOf(28) != -1"
+            @click="(isBlock = 5), (toolCount = 28)"
+            class="toolCss"
+          >
+            <div class="toolImg">
+              <img src="../../assets/icon/thirdToolList/translation.png" alt />
+              <div>翻译</div>
+            </div>
+          </div>
           <div
             v-if="tools[steps].tools && tools[steps].tools.indexOf(4) != -1"
             @click="(isBlock = 5), (toolCount = 4)"
@@ -281,6 +312,27 @@
               src="//cloud.cocorobo.cn/mind/"
             ></iframe>
           </div>
+          <div v-if="toolCount == 28" 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="//dict.youdao.com/"
+            ></iframe>
+          </div>
           <div v-if="toolCount == 6" class="tools_child_box">
             <div class="tools_title">
               <span>协同文档</span>
@@ -471,6 +523,16 @@
               </div>
               <div>{{ v.name }}</div>
             </div>
+            <div
+              class="fileListCss"
+              v-for="(v, vIndex) in videoList2"
+              :key="vIndex"
+            >
+              <div class="fileCss" @click="playVideo2(v.src, vIndex)">
+                <img src="../../assets/uploadMp4.png" alt />
+              </div>
+              <div>{{ v.name }}</div>
+            </div>
             <div
               class="fileListCss"
               v-for="(f, fIndex) in fileList"
@@ -530,16 +592,169 @@
           </div>
         </div>
       </div>
+      <div class="answerBox tools_box" v-if="isBlock == 11">
+        <div style="height: 100%; width: 100%">
+          <div class="wheel" style="height: 80%; width: 100%">
+            <div
+              class="memberBox"
+              style="max-height: 100%"
+              v-if="worksList.length"
+            >
+              <div
+                v-for="(item, index) in worksList"
+                :key="index"
+                @click="getEv(item.upload, item.sName)"
+              >
+                {{ item.sName }}
+              </div>
+            </div>
+            <div v-else>暂无学生评价</div>
+          </div>
+          <div class="nextStepBox" style="margin-top: 5%">
+            <div class="nextStepOne" @click="isBlock = 0">关闭</div>
+          </div>
+        </div>
+      </div>
+      <div class="answerBox tools_box" v-if="isBlock == 12">
+        <div style="height: 100%; width: 100%">
+          <div class="wheel" style="height: 80%; width: 100%">
+            <div style="height: 100%; overflow: auto">
+              <div style="margin-bottom: 20px">{{ Sname }}</div>
+              <div class="score_box">
+                <span>聚焦主题</span>
+                <el-rate v-model="rate.ca" disabled></el-rate>
+              </div>
+              <div class="score_box">
+                <span>有开头结尾</span>
+                <el-rate v-model="rate.sia" disabled></el-rate>
+              </div>
+              <div class="score_box">
+                <span>语言正确,流畅</span>
+                <el-rate v-model="rate.zia" disabled></el-rate>
+              </div>
+              <div class="score_box">
+                <span>书写规范,美观</span>
+                <el-rate v-model="rate.qia" disabled></el-rate>
+              </div>
+            </div>
+          </div>
+          <div class="nextStepBox" style="margin-top: 5%">
+            <div class="nextStepOne" @click="isBlock = 11">返回</div>
+          </div>
+        </div>
+      </div>
+      <div class="answerBox tools_box" v-if="isBlock == 13">
+        <div style="height: 100%; width: 100%">
+          <div class="wheel" style="height: 80%; width: 100%">
+            <div style="height: 100%; overflow: auto">
+              <div style="margin-bottom: 20px">{{ Sname }}</div>
+              <div
+                v-if="
+                  tools[steps].tools && tools[steps].tools.indexOf(27) != -1
+                "
+              >
+                <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
+                  <div style="margin-right: 10px; font-size: 18px">
+                    {{ tIndex + 1 }}、
+                  </div>
+                  <el-select
+                    v-model="tkAnswer[tIndex]"
+                    placeholder="请选择答案"
+                    disabled
+                  >
+                    <el-option
+                      v-for="(tkA, tkAIndex) in tkAnswerBox"
+                      :key="tkAIndex"
+                      :label="tkA"
+                      :value="tkA"
+                    ></el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div
+                v-if="tools[steps].tools && tools[steps].tools.indexOf(9) != -1"
+              >
+                <div class="choose_style">
+                  <span :class="tkAnswer.indexOf(1) != -1 ? 'isChoose' : ''"
+                    >A</span
+                  >
+                  <span :class="tkAnswer.indexOf(2) != -1 ? 'isChoose' : ''"
+                    >B</span
+                  >
+                  <span :class="tkAnswer.indexOf(3) != -1 ? 'isChoose' : ''"
+                    >C</span
+                  >
+                  <span :class="tkAnswer.indexOf(4) != -1 ? 'isChoose' : ''"
+                    >D</span
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="nextStepBox" style="margin-top: 5%">
+            <div class="nextStepOne" @click="selectStudentByScoolPPt(1)">
+              返回
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="answerBox tools_box" v-if="isBlock == 14">
+        <div style="height: 100%; width: 100%">
+          <div class="wheel" style="height: 80%; width: 100%">
+            <div style="height: 100%; overflow: auto">
+              <div
+                v-for="(item, index) in worksList"
+                :key="index"
+                class="fill_box"
+              >
+                <span>{{ index + 1 }}、{{ item.sName }}</span>
+                <span
+                  v-for="(item, index) in JSON.parse(item.upload)"
+                  :key="index"
+                  >{{ index + 1 }}、{{ item }}</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="nextStepBox" style="margin-top: 5%">
+            <div class="nextStepOne" @click="selectStudentByScoolPPt(1)">
+              返回
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="answerBox tools_box" v-if="isBlock == 15">
+        <div style="height: 100%; width: 100%">
+          <div class="wheel" style="height: 80%; width: 100%">
+            <div style="height: 100%; overflow: auto">
+              <audio
+                style="margin: 0 auto; display: block"
+                :src="audioUrl"
+                controls="controls"
+                ref="audio"
+              >
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+          </div>
+          <div class="nextStepBox" style="margin-top: 5%">
+            <div class="nextStepOne" @click="isBlock = 8">返回</div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="blackBottomB">
       <div style="display: flex">
         <div
           class="blackButton"
-          @click="showMember(0)"
-          v-if="tools[steps].tools && tools[steps].tools.indexOf(9) != -1"
+          @click="selectStudentByScoolPPt(1)"
+          v-if="
+            (tools[steps].tools && tools[steps].tools.indexOf(9) != -1) ||
+            (tools[steps].tools && tools[steps].tools.indexOf(27) != -1)
+          "
         >
-          开始答题
+          查看学生答题情况
         </div>
         <div
           class="blackButton"
@@ -557,14 +772,14 @@
         </div>
         <div
           class="blackButton"
-          @click="checkStudentAnswer"
+          @click="selectStudentByScoolPPt(2)"
           v-if="tools[steps].tools && tools[steps].tools.indexOf(12) != -1"
         >
           选择学生回答
         </div>
         <div
           class="blackButton"
-          @click="selectSWork()"
+          @click="selectSWork(4)"
           v-if="
             (tools[steps].tools && tools[steps].tools.indexOf(1) != -1) ||
             (tools[steps].tools && tools[steps].tools.indexOf(3) != -1) ||
@@ -579,7 +794,7 @@
         </div>
         <div
           class="blackButton"
-          @click="selectSWork()"
+          @click="selectSWork(6)"
           v-if="tools[steps].tools && tools[steps].tools.indexOf(14) != -1"
         >
           查看评价
@@ -602,7 +817,7 @@
       class="dialog_diy"
     >
       <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
-        是否让“{{ answerStudent }}”同学进行单独答题?
+        是否让“{{ answerStudent.name }}”同学进行单独答题?
       </div>
       <div
         style="
@@ -616,7 +831,7 @@
           border-radius: 5px;
           cursor: pointer;
         "
-        @click="dialogVisible = false"
+        @click="pick"
       >
         确定
       </div>
@@ -736,50 +951,8 @@ export default {
         { name: "C.1728" },
         { name: "D.480" },
       ],
-      studentArray: [
-        // { name: "张可松", is: 1 },
-        // { name: "陈佳佳", is: 1 },
-        // { name: "许琦基", is: 1 },
-        // { name: "洛维奇", is: 1 },
-        // { name: "罗伟", is: 1 },
-        // { name: "李孝雄", is: 1 },
-        // { name: "李琪琪", is: 1 },
-        // { name: "黄子韬", is: 1 },
-        // { name: "张嘉琪", is: 1 },
-        // { name: "陈家", is: 1 },
-        // { name: "张可", is: 1 },
-        // { name: "庄小小", is: 1 },
-        // { name: "梁思成", is: 1 },
-        // { name: "房小玲", is: 1 },
-        // { name: "李卫涛", is: 1 },
-        // { name: "李玫儿", is: 1 },
-        // { name: "张可梦", is: 1 },
-        // { name: "李琦", is: 1 },
-        // { name: "梁惠", is: 1 },
-        // { name: "许佳琪", is: 1 },
-      ],
-      studentArray2: [
-        // { name: "张可松", is: 1 },
-        // { name: "陈佳佳", is: 1 },
-        // { name: "许琦基", is: 1 },
-        // { name: "洛维奇", is: 1 },
-        // { name: "罗伟", is: 1 },
-        // { name: "李孝雄", is: 1 },
-        // { name: "李琪琪", is: 1 },
-        // { name: "黄子韬", is: 1 },
-        // { name: "张嘉琪", is: 1 },
-        // { name: "陈家", is: 1 },
-        // { name: "张可", is: 1 },
-        // { name: "庄小小", is: 1 },
-        // { name: "梁思成", is: 1 },
-        // { name: "房小玲", is: 1 },
-        // { name: "李卫涛", is: 1 },
-        // { name: "李玫儿", is: 1 },
-        // { name: "张可梦", is: 1 },
-        // { name: "李琦", is: 1 },
-        // { name: "梁惠", is: 1 },
-        // { name: "许佳琪", is: 1 },
-      ],
+      studentArray: [],
+      studentArray2: [],
       askCount: 0,
       answerJson: {
         A: 0,
@@ -790,6 +963,14 @@ export default {
       answerStudent: "",
       tools: [
         "",
+        // {
+        //   file: [
+        //     {
+        //       name: "音频1.MP3",
+        //       src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
+        //     },
+        //   ],
+        // }
         "",
         {
           file: [
@@ -806,7 +987,7 @@ export default {
         { tools: [9] },
         { tools: [9] },
         { tools: [12] },
-        { tools: [9] },
+        { tools: [27] },
         {
           file: [
             {
@@ -817,7 +998,7 @@ export default {
         },
         { tools: [9] },
         "",
-        { tools: [3] },
+        { tools: [3, 28] },
         { tools: [16] },
         { tools: [14] },
         "",
@@ -838,6 +1019,7 @@ export default {
         content: "老师讲得真好",
       },
       videoList: [],
+      videoList2: [], //音频
       fileList: [],
       playerOptions: {
         playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
@@ -866,6 +1048,20 @@ export default {
       },
       playerO: {},
       videoindex: 0,
+      rate: {},
+      tkAnswerBox: [
+        "Feelings",
+        "Weather",
+        "Activities before the festival",
+        "Origin",
+        "Food",
+        "Time",
+        "ctivities during the festival",
+        "Reason",
+      ],
+      tkAnswer: [],
+      Sname: "",
+      audioUrl: "",
     };
   },
   methods: {
@@ -941,56 +1137,104 @@ export default {
       }
     },
     checkStudentAnswer() {
-      this.selectStudentByScoolPPt();
       this.isBlock = 6;
-      for (var i = 0; i < this.studentArray.length; i++) {
+      for (var i = 0; i < this.studentArray2.length; i++) {
         this.studentArray2[i].is = 1;
       }
     },
-    showMember(i) {
-      this.selectStudentByScoolPPt();
-      let _this = this;
-      this.isBlock = 1;
-      setTimeout(() => {
-        for (var i = 0; i < 10; i++) {
-          var a = _this.randomNum(0, _this.studentArray.length - 1);
-          _this.studentArray[a].is = 2;
-        }
-        this.askCount = 0;
-        for (var i in _this.studentArray) {
-          if (_this.studentArray[i].is == 2) {
-            _this.askCount++;
+    showMember() {
+      let params = {
+        uid: "",
+        cid: this.cid,
+        p: this.steps,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectSWork", params)
+        .then((res) => {
+          let _res = res.data[0];
+          let _this = this;
+          this.isBlock = 1;
+          for (var i = 0; i < _this.studentArray.length; i++) {
+            for (var j = 0; j < _res.length; j++) {
+              if (_res[j].userid == _this.studentArray[i].id) {
+                _this.studentArray[i].is = 2;
+                _this.studentArray[i].answer = _res[j].upload;
+              }
+            }
           }
-        }
-        i = 0;
-        this.answerJson = {
-          A: 0,
-          B: 0,
-          C: 0,
-          D: 0,
-        };
-        for (var i = 0; i < _this.askCount; i++) {
-          var a = _this.randomNum(0, 3);
-          if (a === 0) {
-            _this.answerJson.A++;
-          } else if (a === 1) {
-            _this.answerJson.B++;
-          } else if (a === 2) {
-            _this.answerJson.C++;
-          } else if (a === 3) {
-            _this.answerJson.D++;
+
+          if (this.tools[this.steps].tools.indexOf(9) != -1) {
+            this.answerJson = {
+              A: 0,
+              B: 0,
+              C: 0,
+              D: 0,
+            };
+            for (var i = 0; i < _res.length; i++) {
+              var a = JSON.parse(_res[i].upload);
+              if (a.indexOf(1) != -1) {
+                _this.answerJson.A++;
+              }
+              if (a.indexOf(2) != -1) {
+                _this.answerJson.B++;
+              }
+              if (a.indexOf(3) != -1) {
+                _this.answerJson.C++;
+              }
+              if (a.indexOf(4) != -1) {
+                _this.answerJson.D++;
+              }
+            }
           }
-        }
-      }, 2000);
+          if (this.tools[this.steps].tools.indexOf(27) != -1) {
+            this.worksList = [];
+            for (var i = 0; i < _res.length; i++) {
+              this.worksList.push({
+                upload: _res[i].upload,
+                sName: _res[i].username,
+                time: _res[i].time,
+              });
+            }
+          }
+        })
+        .catch((err) => {
+          this.$message.error("查询失败");
+          console.error(err);
+        });
+    },
+    getOAnswer(answer, name) {
+      if (!answer) {
+        return;
+      }
+      this.tkAnswer = JSON.parse(answer);
+      this.Sname = name;
+      this.isBlock = 13;
     },
     whoAnswer(item, index) {
-      for (var i = 0; i < this.studentArray.length; i++) {
+      for (var i = 0; i < this.studentArray2.length; i++) {
         this.studentArray2[i].is = 1;
       }
       this.studentArray2[index].is = 2;
-      this.answerStudent = item.name;
+      this.answerStudent = item;
       this.dialogVisible = true;
     },
+    pick() {
+      let params = [
+        {
+          h: JSON.stringify({ type: 2, userid: this.answerStudent.id }),
+          cid: this.cid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updatePPTHandle", params)
+        .then((res) => {
+          this.answerStudent = "";
+          this.dialogVisible = false;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     getPage(page) {
       console.log(page);
       let params = [
@@ -1008,7 +1252,7 @@ export default {
           console.error(err);
         });
     },
-    selectStudentByScoolPPt() {
+    selectStudentByScoolPPt(type) {
       let params = {
         oid: this.oid,
       };
@@ -1016,18 +1260,34 @@ export default {
         .get(this.$store.state.api + "selectStudentByScoolPPt", params)
         .then((res) => {
           if (res.data[0].length > 0) {
+            this.studentArray = [];
+            this.studentArray2 = [];
             for (var i = 0; i < res.data[0].length; i++) {
-              this.studentArray.push({ name: res.data[0][i].name, is: 1 });
-              this.studentArray2.push({ name: res.data[0][i].name, is: 1 });
+              this.studentArray.push({
+                id: res.data[0][i].userid,
+                name: res.data[0][i].name,
+                is: 1,
+              });
+              this.studentArray2.push({
+                id: res.data[0][i].userid,
+                name: res.data[0][i].name,
+                is: 1,
+              });
             }
           }
+
+          if (type == 1) {
+            this.showMember();
+          } else if (type == 2) {
+            this.checkStudentAnswer();
+          }
         })
         .catch((err) => {
           this.$message.error("查询失败");
           console.error(err);
         });
     },
-    selectSWork() {
+    selectSWork(type) {
       this.worksList = [];
       let params = {
         uid: "",
@@ -1045,16 +1305,26 @@ export default {
               time: this.worksDetail[i].time,
             });
           }
-          this.isBlock = 4;
+          if (type == 4) {
+            this.isBlock = 4;
+          } else {
+            this.isBlock = 11;
+          }
         })
         .catch((err) => {
           this.$message.error("查询失败");
           console.error(err);
         });
     },
+    getEv(rate, name) {
+      this.rate = JSON.parse(rate);
+      this.Sname = name;
+      this.isBlock = 12;
+    },
     selectFile() {
       this.fileList = [];
       this.videoList = [];
+      this.videoList2 = [];
       var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
       var b = this.tools[this.steps].file;
       for (var i = 0; i < b.length; i++) {
@@ -1066,6 +1336,12 @@ export default {
           ) != -1
         ) {
           this.fileList.push(b[i]);
+        } else if (
+          b[i].src
+            .split(".")
+            [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
+        ) {
+          this.videoList2.push(b[i]);
         } else {
           this.videoList.push(b[i]);
         }
@@ -1083,6 +1359,10 @@ export default {
       this.videoindex = i;
       this.isBlock = 9;
     },
+    playVideo2(u, i) {
+      this.audioUrl = u;
+      this.isBlock = 15;
+    },
     switchVideo(media) {
       this.playerO = {};
       this.playerOptions.poster = "";
@@ -1208,7 +1488,7 @@ export default {
 .blackButton {
   color: #fff;
   background: #066ebe;
-  width: 100px;
+  /* width: 100px; */
   height: 30px;
   line-height: 30px;
   text-align: center;
@@ -1216,6 +1496,7 @@ export default {
   border-radius: 5px;
   font-size: 15px;
   cursor: pointer;
+  padding: 0 10px;
 }
 
 .isNoOther {
@@ -1234,6 +1515,7 @@ export default {
   padding-left: 25px;
   padding: 25px;
   box-sizing: border-box;
+  height: calc(100% - 60px);
   /* max-height: 800px;
   overflow: auto; */
 }
@@ -1250,7 +1532,7 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  max-height: 600px;
+  max-height: 80%;
   overflow: auto;
 }
 .memberBox > div {
@@ -1263,10 +1545,15 @@ export default {
   border-radius: 5px;
   margin: 0 15px 15px 0;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 
 .memberBox .pAnswer {
-  background: rgb(55 197 144);
+  background: rgb(0 115 72);
 }
 
 .viewSta {
@@ -1589,4 +1876,45 @@ img {
 .video-player >>> .video-js {
   height: 100%;
 }
+
+.tkCss {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-bottom: 15px;
+}
+
+.fill_box + .fill_box {
+  margin-top: 10px;
+}
+.fill_box span + span {
+  margin-left: 10px;
+}
+.choose_style {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 10px 0 30px;
+}
+
+.choose_style span {
+  background: #f8f9ff;
+  color: #677fff;
+  border: 1px solid #95b5ff;
+  padding: 15px 20px;
+  font-size: 25px;
+  border-radius: 18px;
+  cursor: pointer;
+}
+
+.choose_style span + span {
+  margin-left: 25px;
+}
+
+.isChoose {
+  color: #fff !important;
+  background: #5e78fa !important;
+}
 </style>