学习中心

src/components/study.vue

@@ -22,9 +22,7 @@
                 >
                   任务{{ navIndex + 1 }}
                 </div>
-                <div class="navTaskname">
-                  {{ nav.taskName }}
-                </div>
+                <div class="navTaskname">{{ nav.taskName }}</div>
               </div>
             </div>
           </div>
@@ -329,122 +327,140 @@
                   <div>工具</div>
                 </div>
               </div>
-              <div class="toolHeng">
+              <div class="toolHeng2">
                 <div
                   class="filebox"
-                  style="flex-wrap: nowrap; margin: 20px 0 10px 20px"
-                  :class="tool.toolDetail != '' ? 'isWidth' : ''"
+                  style="flex-wrap: nowrap; margin: 20px 20px 10px 20px"
                   v-for="(tool, toolIndex) in task.toolChoose"
                   :key="toolIndex"
                 >
-                  <div
-                    style="
-                      display: flex;
-                      flex-flow: row nowrap;
-                      flex-direction: row;
-                      flex-wrap: wrap;
-                      width: auto;
-                      max-width: 60%;
-                    "
-                  >
+                  <div>
                     <!-- v-for="(itemTool, indexTool) in toolTypeList"
                     :key="indexTool"-->
-                    <div
-                      class="addPoint"
-                      v-for="(tooC, toolCIndex) in tool.tool"
-                      :key="toolCIndex"
-                    >
-                      <div v-if="tooC == 8">
-                        <img
-                          src="../assets/icon/secondToolList/library.png"
-                          alt
-                          @click="addTools(tooC, toolIndex)"
-                        />
-                        <div style="margin: 5px 0">素材库</div>
-                      </div>
-                      <div v-if="tooC == 1">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/secondToolList/whiteBoard.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">电子白板</div>
-                      </div>
-                      <div v-if="tooC == 2">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/secondToolList/note.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">便签</div>
-                      </div>
-                      <div v-if="tooC == 3">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/secondToolList/mindMapping.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">思维导图</div>
-                      </div>
-                      <div v-if="tooC == 6">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/secondToolList/doc.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">协同文档</div>
-                      </div>
-                      <div v-if="tooC == 7">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/secondToolList/mindNetwork.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">思维网格</div>
-                      </div>
-                      <div v-if="tooC == 4">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/thirdToolList/ask.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">问卷调查</div>
-                      </div>
-                      <div v-if="tooC == 5">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/thirdToolList/score.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">量规评分</div>
-                      </div>
-                      <!-- <div v-if="tooC == 10">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/thirdToolList/time.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">倒计时</div>
-                      </div>
-                      <div v-if="tooC == 15">
-                        <img
-                          @click="addTools(tooC, toolIndex)"
-                          src="../assets/icon/thirdToolList/answer.png"
-                          alt
-                        />
-                        <div style="margin: 5px 0">问答工具</div>
-                      </div> -->
-                      <div v-if="tooC == 16">
+                    <div class="noiframeBox">
+                      <div
+                        class="addPoint"
+                        v-for="(tooC, toolCIndex) in tool.tool"
+                        :key="toolCIndex"
+                      >
+                        <div v-if="tooC == 8">
+                          <img
+                            src="../assets/icon/secondToolList/library.png"
+                            alt
+                            @click="addTools(tooC, toolIndex)"
+                          />
+                          <div style="margin: 5px 0">素材库</div>
+                        </div>
+                        <div v-if="tooC == 2">
+                          <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/note.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">便签</div>
+                        </div>
+                        <div v-if="tooC == 4">
+                          <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/thirdToolList/ask.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">问卷调查</div>
+                        </div>
+                        <div v-if="tooC == 5">
+                          <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/thirdToolList/score.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">量规评分</div>
+                        </div>
+                        <div v-if="tooC == 10">
+                          <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/thirdToolList/time.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">倒计时</div>
+                        </div>
+                        <div v-if="tooC == 15">
+                          <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/thirdToolList/answer.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">问答工具</div>
+                        </div>
+                        <!-- <div v-if="tooC == 16">
                         <img
                           @click="addTools(tooC, toolIndex)"
                           src="../assets/icon/thirdToolList/work.png"
                           alt
                         />
                         <div style="margin: 5px 0">作业提交</div>
+                        </div>-->
                       </div>
                     </div>
+                    <div class="iframeBox">
+                      <div
+                        class="addPoint"
+                        v-for="(tooC, toolCIndex) in tool.tool"
+                        :key="toolCIndex"
+                      >
+                        <div v-if="tooC == 1">
+                          <iframe
+                            src="https://iwb.cocorobo.cn/"
+                            ref="whiteBoard"
+                          ></iframe>
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/whiteBoard.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">电子白板</div>-->
+                        </div>
+                        <div v-if="tooC == 3">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/mindMapping.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">思维导图</div>-->
+                          <iframe
+                            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
+                            ref="mind"
+                          ></iframe>
+                        </div>
+                        <div v-if="tooC == 6">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/doc.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">协同文档</div>-->
+                          <iframe
+                            src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
+                          ></iframe>
+                        </div>
+                        <div v-if="tooC == 7">
+                          <!-- <img
+                            @click="addTools(tooC, toolIndex)"
+                            src="../assets/icon/secondToolList/mindNetwork.png"
+                            alt
+                          />
+                          <div style="margin: 5px 0">思维网格</div>-->
+                          <iframe
+                            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
+                            ref="grid"
+                          ></iframe>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="upload_toolBtn">
+                    <el-button type="primary">上传文件</el-button>
                   </div>
-                  <div style="padding: 0 0 20px 10px" v-if="tool.toolDetail != ''">
+                  <div class="tooldetail" v-if="tool.toolDetail != ''">
                     <div style="margin: 0 0 20px 0">工具描述</div>
                     <div style="height: 50px; overflow: auto">
                       {{ tool.toolDetail != "" ? tool.toolDetail : "暂无描述" }}
@@ -710,7 +726,7 @@
         <el-button type="primary" @click="dialogVisible1 = false">确定</el-button>
       </span>
     </el-dialog>
-    <el-dialog
+    <!-- <el-dialog
       title="查看工具"
       :visible.sync="dialogVisible2"
       :append-to-body="true"
@@ -797,7 +813,7 @@
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible2 = false">确定</el-button>
       </span>
-    </el-dialog>
+    </el-dialog>-->
     <el-dialog
       title="文件预览"
       :visible.sync="dialogVisible3"
@@ -2048,12 +2064,14 @@ export default {
 .filebox {
   display: flex;
   flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
+  flex-direction: column;
   padding: 15px 0;
 }
 
+.filebox .tooldetail {
+  margin: 20px 20px;
+}
+
 .file {
   display: flex;
   flex-direction: column;
@@ -2511,18 +2529,34 @@ export default {
   margin: 0 10px;
   width: 85px;
 }
-.addPoint {
+/* .addPoint {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-}
+} */
 .addPoint > div {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
-  margin: 0 15px 0 0;
+  /* margin: 0 15px 0 0; */
+}
+.noiframeBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.iframeBox {
+}
+.iframeBox iframe {
+  width: 100%;
+  height: 800px;
+  border: none;
+  margin-bottom: 20px;
+}
+.upload_toolBtn {
+  display: flex;
+  justify-content: flex-end;
 }
 .ediBottom {
   /* margin-left: 20px; */
@@ -2615,6 +2649,9 @@ export default {
 .redioStyle >>> .el-radio__label {
   font-size: 18px;
 }
+.toolHeng2 {
+  width: 100%;
+}
 .toolHeng {
   display: flex;
   flex-direction: row;