|
|
@@ -452,7 +452,6 @@
|
|
|
</div>
|
|
|
<div
|
|
|
style="
|
|
|
- display: flex;
|
|
|
margin: 23px 0;
|
|
|
flex-direction: row;
|
|
|
justify-content: flex-start;
|
|
|
@@ -468,110 +467,247 @@
|
|
|
>
|
|
|
添加工具
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
+ <div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="添加工具描述"
|
|
|
+ class="binfo_input"
|
|
|
+ style="margin: 20px 0"
|
|
|
+ v-model="unitJson[unitIndex].toolText"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="toolChoose">
|
|
|
- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="openTools(1)">
|
|
|
- <img src="../../assets/icon/whiteBordIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check" @click="addTools(1)">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(1) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="openTools(2)">
|
|
|
- <img src="../../assets/icon/noteIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check" @click="addTools(2)">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(2) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="openTools(3)">
|
|
|
- <img src="../../assets/icon/mindIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check" @click="addTools(3)">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(3) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="openTools(4)">
|
|
|
- <img src="../../assets/icon/askIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check" @click="addTools(4)">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(4) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="addTools(5)">
|
|
|
- <img src="../../assets/icon/scoreIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(5) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <div class="tool">
|
|
|
- <div class="whiteBIcon" @click="openTools(6)">
|
|
|
- <img src="../../assets/icon/wordIcon.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="check" @click="addTools(6)">
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkNo.png"
|
|
|
- alt=""
|
|
|
- v-if="item.toolChoose.indexOf(6) == -1"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../assets/icon/checkedIs.png"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
+ <div class="tools">
|
|
|
+ <div class="leftTools">
|
|
|
+ <div class="chooseWho">
|
|
|
+ <div
|
|
|
+ :class="toolType == 0 ? 'isChooseActive' : ''"
|
|
|
+ @click="toolType = 0"
|
|
|
+ >
|
|
|
+ 展示类
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="toolType == 1 ? 'isChooseActive' : ''"
|
|
|
+ @click="toolType = 1"
|
|
|
+ >
|
|
|
+ 思维类
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="toolType == 2 ? 'isChooseActive' : ''"
|
|
|
+ @click="toolType = 2"
|
|
|
+ >
|
|
|
+ 评价类
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="min-height: 163px">
|
|
|
+ <div class="toolSort" v-if="toolType == 0">
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(8)">
|
|
|
+ <img src="../../assets/icon/secondToolList/library.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(8)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(8) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="toolSort" v-if="toolType == 1">
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(7)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/secondToolList/mindNetwork.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(7)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(7) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(1)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/secondToolList/whiteBoard.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(1)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(1) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(2)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/secondToolList/note.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(2)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(2) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(6)">
|
|
|
+ <img src="../../assets/icon/secondToolList/doc.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(6)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(6) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(3)">
|
|
|
+ <img src="../../assets/icon/secondToolList/mindMapping.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(3)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(3) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="toolSort" v-if="toolType == 2">
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(5)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/thirdToolList/score.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(5)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(5) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="whiteBIcon" @click="addTools(4)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/thirdToolList/ask.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="check" @click="addTools(4)">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkNo.png"
|
|
|
+ alt=""
|
|
|
+ v-if="item.toolChoose.indexOf(4) == -1"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/checkedIs.png"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-switch
|
|
|
+ v-model="unitJson[unitIndex].isShowTools"
|
|
|
+ active-text="是否开启评价"
|
|
|
+ style="margin: 30px 0px 10px 0; padding-bottom: 30px"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
</div>
|
|
|
+ <!-- <div class="rightTools">
|
|
|
+ <div class="firstToolList">
|
|
|
+ <div>知识展示类工具</div>
|
|
|
+ <div class="iconList">
|
|
|
+ <div class="iconTool">
|
|
|
+ <div class="toolIcon">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/firstToolList/project.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>虚拟仿真平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="iconTool">
|
|
|
+ <div class="toolIcon">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/firstToolList/mindMapping.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>文本</div>
|
|
|
+ </div>
|
|
|
+ <div class="iconTool">
|
|
|
+ <div class="toolIcon">
|
|
|
+ <img
|
|
|
+ src="../../assets/icon/firstToolList/study.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>文本</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="secondToolList">
|
|
|
+ <div>思维可视化工具</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="thirdToolList">
|
|
|
+ <div>评价类工具</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -1051,6 +1187,8 @@ export default {
|
|
|
question: "",
|
|
|
chapterData: [],
|
|
|
toolChoose: [],
|
|
|
+ isShowTools: false,
|
|
|
+ toolText: "",
|
|
|
askCount: 1,
|
|
|
askTitle: "",
|
|
|
askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
|
|
|
@@ -1079,6 +1217,7 @@ export default {
|
|
|
courseTypeSon: [],
|
|
|
clearArray: [],
|
|
|
loading: false,
|
|
|
+ toolType: 0,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -1709,23 +1848,23 @@ export default {
|
|
|
goTo(path) {
|
|
|
this.$router.push(path);
|
|
|
},
|
|
|
- openTools(i) {
|
|
|
- if (i == 1) {
|
|
|
- window.parent.postMessage({ tools: "1" }, "*");
|
|
|
- } else if (i == 2) {
|
|
|
- window.parent.postMessage({ tools: "2" }, "*");
|
|
|
- } else if (i == 3) {
|
|
|
- window.parent.postMessage({ tools: "3" }, "*");
|
|
|
- } else if (i == 4) {
|
|
|
- window.parent.postMessage({ tools: "4" }, "*");
|
|
|
- }
|
|
|
- // else if(i == 5){
|
|
|
- // window.parent.postMessage({ tools: "5" }, "*");
|
|
|
- // }
|
|
|
- else {
|
|
|
- window.parent.postMessage({ tools: "6" }, "*");
|
|
|
- }
|
|
|
- },
|
|
|
+ // openTools(i) {
|
|
|
+ // if (i == 1) {
|
|
|
+ // window.parent.postMessage({ tools: "1" }, "*");
|
|
|
+ // } else if (i == 2) {
|
|
|
+ // window.parent.postMessage({ tools: "2" }, "*");
|
|
|
+ // } else if (i == 3) {
|
|
|
+ // window.parent.postMessage({ tools: "3" }, "*");
|
|
|
+ // } else if (i == 4) {
|
|
|
+ // window.parent.postMessage({ tools: "4" }, "*");
|
|
|
+ // }
|
|
|
+ // // else if(i == 5){
|
|
|
+ // // window.parent.postMessage({ tools: "5" }, "*");
|
|
|
+ // // }
|
|
|
+ // else {
|
|
|
+ // window.parent.postMessage({ tools: "6" }, "*");
|
|
|
+ // }
|
|
|
+ // },
|
|
|
addTools(i) {
|
|
|
if (this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.length == 0) {
|
|
|
this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.push(i);
|
|
|
@@ -2936,21 +3075,22 @@ ol {
|
|
|
flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
width: 20%;
|
|
|
- margin: 0 20px;
|
|
|
+ margin: 10px 0 10px 0;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.whiteBIcon {
|
|
|
- width: 150px;
|
|
|
+ width: 70px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.whiteBIcon > img,
|
|
|
-.check > img {
|
|
|
+.check > img,
|
|
|
+.toolIcon > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.check {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
cursor: pointer;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
@@ -3087,4 +3227,72 @@ ol {
|
|
|
border-radius: 10px;
|
|
|
min-width: 800px;
|
|
|
}
|
|
|
+.chooseWho {
|
|
|
+ display: flex;
|
|
|
+ width: 500px;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.chooseWho > div {
|
|
|
+ cursor: pointer;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.isChooseActive {
|
|
|
+ color: #3e88f4;
|
|
|
+ border-bottom: 2px solid #2f80f3;
|
|
|
+}
|
|
|
+.toolSort {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ min-width: 685px;
|
|
|
+}
|
|
|
+.tools {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+.leftTools,
|
|
|
+.rightTools {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+.rightTools {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.firstToolList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.iconList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20px 0 5px 0;
|
|
|
+ width: 240px;
|
|
|
+ min-width: 240px;
|
|
|
+}
|
|
|
+.iconTool {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 15px 10px;
|
|
|
+}
|
|
|
+.toolIcon {
|
|
|
+ width: 50px;
|
|
|
+}
|
|
|
</style>
|
zengyicheng
