|
|
@@ -85,62 +85,76 @@
|
|
|
<div class="courseTd">{{ courseDetail.brief }}</div>
|
|
|
</div>
|
|
|
<div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
|
|
|
- <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
|
|
|
- <div>第{{ index + 1 }}阶段</div>
|
|
|
- <div :title="item.dyName">{{ item.dyName }}</div>
|
|
|
- <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
|
|
|
+ <div v-if="(tType == 1 || tType == 4)" class="checkBox">
|
|
|
+ <span :class="{ active: type == 1 }" @click="type = 1">课程分析</span>
|
|
|
+ <span :class="{ active: type == 2 }" @click="type = 2">阶段选择</span>
|
|
|
</div>
|
|
|
- <div v-if="(tType == 1 || tType == 4) && Object.keys(chaptersJson).length" class="detail">
|
|
|
- <div class="statebox">
|
|
|
- <div><span>全部阶段</span><span>{{ chaptersJson.state.stage }}</span></div>
|
|
|
- <div><span>已进行</span><span>{{ chaptersJson.state.finish }}</span></div>
|
|
|
- <div><span>未进行</span><span>{{ chaptersJson.state.learing }}</span></div>
|
|
|
+ <div v-if="((tType == 1 || tType == 4) && type == 2) || tType == 2"
|
|
|
+ :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
|
|
|
+ <div class="blue_box_one" v-for="(item, index) in chapInfo" :key="index" @click="addUserRate(index)">
|
|
|
+ <div>第{{ index + 1 }}阶段</div>
|
|
|
+ <div :title="item.dyName">{{ item.dyName }}</div>
|
|
|
+ <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
|
|
|
</div>
|
|
|
- <div class="progress">
|
|
|
- <div v-for="(item, index) in chaptersJson.tool" :key="index">
|
|
|
- <div>第{{ index + 1 }}阶段 {{ chaptersJson.chapterState[index].isFinsh ? '已完成' : '进行中' }}</div>
|
|
|
- <div v-for="(item2, index2) in item" :key="index + '-' + index2">
|
|
|
- <div>任务{{ index2 + 1 }}</div>
|
|
|
- <div class="p_tool_box">
|
|
|
- <span v-for="(item3, index3) in item2" :key="index + '-' + index2 + '-' + index3" class="p_tool">
|
|
|
-
|
|
|
- <div v-if="item3.tool == 1">
|
|
|
- <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
|
|
|
- <div>电子白板</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 3">
|
|
|
- <img src="../assets/icon/secondToolList/mindMapping.png" alt />
|
|
|
- <div>思维导图</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 6">
|
|
|
- <img src="../assets/icon/secondToolList/doc.png" alt />
|
|
|
- <div>协同文档</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 7">
|
|
|
- <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
|
|
|
- <div>思维网格</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 8">
|
|
|
- <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
- <div>素材库</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 17">
|
|
|
- <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
- <div>学习资料</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 2">
|
|
|
- <img src="../assets/icon/secondToolList/note.png" alt />
|
|
|
- <div>便签</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 4">
|
|
|
- <img src="../assets/icon/thirdToolList/ask.png" alt />
|
|
|
- <div>问卷调查</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 45">
|
|
|
- <img src="../assets/icon/thirdToolList/choose.png" alt />
|
|
|
- <div>选择题</div>
|
|
|
- </div>
|
|
|
- <!-- <div v-if="item3.tool == 5">
|
|
|
+ </div>
|
|
|
+ <div v-if="(tType == 1 || tType == 4) && Object.keys(chaptersJson).length && type == 1" class="detail">
|
|
|
+ <div class="detail_box">
|
|
|
+ <div class="title"><span class="toolIcon">工具分析</span>
|
|
|
+ <div class="statebox">
|
|
|
+ <div><span class="taskIcon">全部阶段:</span><span>{{ chaptersJson.state.stage }}</span></div>
|
|
|
+ <div><span class="finishIcon">已进行:</span><span>{{ chaptersJson.state.finish }}</span></div>
|
|
|
+ <div><span class="learningIcon">未进行:</span><span>{{ chaptersJson.state.learing }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box" v-if="chaptersJson.tool.length">
|
|
|
+ <div class="progress">
|
|
|
+ <div v-for="(item, index) in chaptersJson.tool" :key="index" class="chapter">
|
|
|
+ <div class="stage">第{{ index + 1 }}阶段</div>
|
|
|
+ <!-- {{ chaptersJson.chapterState[index].isFinsh ? '已完成' : '进行中' }} -->
|
|
|
+ <div class="task">
|
|
|
+ <div v-for="(item2, index2) in item" :key="index + '-' + index2" class="taskBox">
|
|
|
+ <div class="taskName">任务{{ index2 + 1 }}</div>
|
|
|
+ <div class="p_tool_box">
|
|
|
+ <span v-for="(item3, index3) in item2" :key="index + '-' + index2 + '-' + index3"
|
|
|
+ class="p_tool">
|
|
|
+
|
|
|
+ <div v-if="item3.tool == 1">
|
|
|
+ <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
|
|
|
+ <div>电子白板</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 3">
|
|
|
+ <img src="../assets/icon/secondToolList/mindMapping.png" alt />
|
|
|
+ <div>思维导图</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 6">
|
|
|
+ <img src="../assets/icon/secondToolList/doc.png" alt />
|
|
|
+ <div>协同文档</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 7">
|
|
|
+ <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
|
|
|
+ <div>思维网格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 8">
|
|
|
+ <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
+ <div>素材库</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 17">
|
|
|
+ <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
+ <div>学习资料</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 2">
|
|
|
+ <img src="../assets/icon/secondToolList/note.png" alt />
|
|
|
+ <div>便签</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 4">
|
|
|
+ <img src="../assets/icon/thirdToolList/ask.png" alt />
|
|
|
+ <div>问卷调查</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 45">
|
|
|
+ <img src="../assets/icon/thirdToolList/choose.png" alt />
|
|
|
+ <div>选择题</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="item3.tool == 5">
|
|
|
<img
|
|
|
|
|
|
src="../assets/icon/thirdToolList/score.png"
|
|
|
@@ -148,258 +162,264 @@
|
|
|
/>
|
|
|
<div >量规评分</div>
|
|
|
</div> -->
|
|
|
- <div v-if="item3.tool == 10">
|
|
|
- <img src="../assets/icon/thirdToolList/time.png" alt />
|
|
|
- <div>倒计时</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 15">
|
|
|
- <img src="../assets/icon/thirdToolList/answer.png" alt />
|
|
|
- <div>问答工具</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 26">
|
|
|
- <img src="../assets/icon/thirdToolList/courseDesign.png" alt />
|
|
|
- <div>课程设计</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 18">
|
|
|
- <img src="../assets/icon/thirdToolList/trainPlatform.png" alt />
|
|
|
- <div>训练服务器</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 16">
|
|
|
- <img src="../assets/icon/thirdToolList/work.png" alt />
|
|
|
- <div>作业提交</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 21">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>编程平台</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 22">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>AI体验</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 23">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>Python</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 24">
|
|
|
- <img src="../assets/icon/fourthToolList/AIprogram.png" alt />
|
|
|
- <div>AI平台</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 25">
|
|
|
- <img src="../assets/icon/thirdToolList/evalua.png" alt />
|
|
|
- <div>目标管理</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 31">
|
|
|
- <img src="../assets/icon/secondToolList/networkPanel.png" alt />
|
|
|
- <div>数学画板</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 28">
|
|
|
- <img src="../assets/icon/secondToolList/translation.png" alt />
|
|
|
- <div>翻译</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 37">
|
|
|
- <img src="../assets/icon/secondToolList/mohe.png" alt />
|
|
|
- <div>魔盒识字</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 38">
|
|
|
- <img src="../assets/icon/secondToolList/24game.png" alt />
|
|
|
- <div>24点</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 39">
|
|
|
- <img src="../assets/icon/secondToolList/GeoGebra.png" alt />
|
|
|
- <div>GeoGebra</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 32">
|
|
|
- <img src="../assets/icon/thirdToolList/code.png" alt />
|
|
|
- <div>源码编辑</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 40">
|
|
|
- <img src="../assets/icon/secondToolList/eval.png" alt />
|
|
|
- <div>学生评价</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 41">
|
|
|
- <img src="../assets/icon/thirdToolList/select.png" alt />
|
|
|
- <div>选择填空</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 44">
|
|
|
- <img src="../assets/icon/thirdToolList/hanClass.png" alt />
|
|
|
- <div>汉字宫</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 47">
|
|
|
- <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
- <div>连词成句</div>
|
|
|
- </div>
|
|
|
- <div v-if="(item3.tool == 48)">
|
|
|
- <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
- <div>表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="(item3.tool == 49)">
|
|
|
- <img src="../assets/icon/fourthToolList/group.png" alt />
|
|
|
- <div>学生分组</div>
|
|
|
+ <div v-if="item3.tool == 10">
|
|
|
+ <img src="../assets/icon/thirdToolList/time.png" alt />
|
|
|
+ <div>倒计时</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 15">
|
|
|
+ <img src="../assets/icon/thirdToolList/answer.png" alt />
|
|
|
+ <div>问答工具</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 26">
|
|
|
+ <img src="../assets/icon/thirdToolList/courseDesign.png" alt />
|
|
|
+ <div>课程设计</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 18">
|
|
|
+ <img src="../assets/icon/thirdToolList/trainPlatform.png" alt />
|
|
|
+ <div>训练服务器</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 16">
|
|
|
+ <img src="../assets/icon/thirdToolList/work.png" alt />
|
|
|
+ <div>作业提交</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 21">
|
|
|
+ <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
+ <div>编程平台</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 22">
|
|
|
+ <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
+ <div>AI体验</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 23">
|
|
|
+ <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
+ <div>Python</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 24">
|
|
|
+ <img src="../assets/icon/fourthToolList/AIprogram.png" alt />
|
|
|
+ <div>AI平台</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 25">
|
|
|
+ <img src="../assets/icon/thirdToolList/evalua.png" alt />
|
|
|
+ <div>目标管理</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 31">
|
|
|
+ <img src="../assets/icon/secondToolList/networkPanel.png" alt />
|
|
|
+ <div>数学画板</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 28">
|
|
|
+ <img src="../assets/icon/secondToolList/translation.png" alt />
|
|
|
+ <div>翻译</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 37">
|
|
|
+ <img src="../assets/icon/secondToolList/mohe.png" alt />
|
|
|
+ <div>魔盒识字</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 38">
|
|
|
+ <img src="../assets/icon/secondToolList/24game.png" alt />
|
|
|
+ <div>24点</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 39">
|
|
|
+ <img src="../assets/icon/secondToolList/GeoGebra.png" alt />
|
|
|
+ <div>GeoGebra</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 32">
|
|
|
+ <img src="../assets/icon/thirdToolList/code.png" alt />
|
|
|
+ <div>源码编辑</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 40">
|
|
|
+ <img src="../assets/icon/secondToolList/eval.png" alt />
|
|
|
+ <div>学生评价</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 41">
|
|
|
+ <img src="../assets/icon/thirdToolList/select.png" alt />
|
|
|
+ <div>选择填空</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 44">
|
|
|
+ <img src="../assets/icon/thirdToolList/hanClass.png" alt />
|
|
|
+ <div>汉字宫</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 47">
|
|
|
+ <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
+ <div>连词成句</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="(item3.tool == 48)">
|
|
|
+ <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
+ <div>表格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="(item3.tool == 49)">
|
|
|
+ <img src="../assets/icon/fourthToolList/group.png" alt />
|
|
|
+ <div>学生分组</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="(item3.tool == undefined)">
|
|
|
+ <img src="../assets/icon/empytool.png" alt style="width: 64px;height: 75px;" />
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div v-for="(item, index) in Object.keys(chaptersJson.time)" :key="index">
|
|
|
- {{ '时间:' + item + '次数:' + chaptersJson.time[item] }}</div> -->
|
|
|
- <div v-if="Object.keys(chaptersJson.time).length">
|
|
|
- <Heatmap :Josn="chaptersJson.time" :num="chaptersJson.studentCount"></Heatmap>
|
|
|
+ <div class="detail_box" v-if="Object.keys(chaptersJson.time).length">
|
|
|
+ <div class="title"><span class="frequencyIcon">作业频率</span></div>
|
|
|
+ <div class="box">
|
|
|
+ <div>
|
|
|
+ <Heatmap :Josn="chaptersJson.time" :num="chaptersJson.studentCount"></Heatmap>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>实施时间：{{ chaptersJson.startTime }}</div>
|
|
|
- <div class="progress">
|
|
|
- <div v-for="(item, index) in chaptersJson.work" :key="index">
|
|
|
- <h2>第{{ index + 1 }}阶段 {{ item.name }}</h2>
|
|
|
- <div v-for="(item2, index2) in item.chapter" :key="index + '-' + index2">
|
|
|
- <h3>任务{{ index2 + 1 }} {{ item2.name }}</h3>
|
|
|
- <div class="p_tool_box2">
|
|
|
- <span v-for="(item3, index3) in item2.task" :key="index + '-' + index2 + '-' + index3"
|
|
|
- class="p_tool2">
|
|
|
- <div>步骤{{ index3 + 1 }}</div>
|
|
|
- <div class="toolBigBox">
|
|
|
- <div class="toolbox">
|
|
|
- <div v-if="item3.tool == 1">
|
|
|
- <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
|
|
|
- <div>电子白板</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 3">
|
|
|
- <img src="../assets/icon/secondToolList/mindMapping.png" alt />
|
|
|
- <div>思维导图</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 6">
|
|
|
- <img src="../assets/icon/secondToolList/doc.png" alt />
|
|
|
- <div>协同文档</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 7">
|
|
|
- <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
|
|
|
- <div>思维网格</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 8">
|
|
|
- <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
- <div>素材库</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 17">
|
|
|
- <img src="../assets/icon/secondToolList/library.png" alt />
|
|
|
- <div>学习资料</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 2">
|
|
|
- <img src="../assets/icon/secondToolList/note.png" alt />
|
|
|
- <div>便签</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 4">
|
|
|
- <img src="../assets/icon/thirdToolList/ask.png" alt />
|
|
|
- <div>问卷调查</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 45">
|
|
|
- <img src="../assets/icon/thirdToolList/choose.png" alt />
|
|
|
- <div>选择题</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 10">
|
|
|
- <img src="../assets/icon/thirdToolList/time.png" alt />
|
|
|
- <div>倒计时</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 15">
|
|
|
- <img src="../assets/icon/thirdToolList/answer.png" alt />
|
|
|
- <div>问答工具</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 26">
|
|
|
- <img src="../assets/icon/thirdToolList/courseDesign.png" alt />
|
|
|
- <div>课程设计</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 18">
|
|
|
- <img src="../assets/icon/thirdToolList/trainPlatform.png" alt />
|
|
|
- <div>训练服务器</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 16">
|
|
|
- <img src="../assets/icon/thirdToolList/work.png" alt />
|
|
|
- <div>作业提交</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 21">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>编程平台</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 22">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>AI体验</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 23">
|
|
|
- <img src="../assets/icon/fourthToolList/program.png" alt />
|
|
|
- <div>Python</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 24">
|
|
|
- <img src="../assets/icon/fourthToolList/AIprogram.png" alt />
|
|
|
- <div>AI平台</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 25">
|
|
|
- <img src="../assets/icon/thirdToolList/evalua.png" alt />
|
|
|
- <div>目标管理</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 31">
|
|
|
- <img src="../assets/icon/secondToolList/networkPanel.png" alt />
|
|
|
- <div>数学画板</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 28">
|
|
|
- <img src="../assets/icon/secondToolList/translation.png" alt />
|
|
|
- <div>翻译</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 37">
|
|
|
- <img src="../assets/icon/secondToolList/mohe.png" alt />
|
|
|
- <div>魔盒识字</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 38">
|
|
|
- <img src="../assets/icon/secondToolList/24game.png" alt />
|
|
|
- <div>24点</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 39">
|
|
|
- <img src="../assets/icon/secondToolList/GeoGebra.png" alt />
|
|
|
- <div>GeoGebra</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 32">
|
|
|
- <img src="../assets/icon/thirdToolList/code.png" alt />
|
|
|
- <div>源码编辑</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 40">
|
|
|
- <img src="../assets/icon/secondToolList/eval.png" alt />
|
|
|
- <div>学生评价</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 41">
|
|
|
- <img src="../assets/icon/thirdToolList/select.png" alt />
|
|
|
- <div>选择填空</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 44">
|
|
|
- <img src="../assets/icon/thirdToolList/hanClass.png" alt />
|
|
|
- <div>汉字宫</div>
|
|
|
- </div>
|
|
|
- <div v-if="item3.tool == 47">
|
|
|
- <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
- <div>连词成句</div>
|
|
|
- </div>
|
|
|
- <div v-if="(item3.tool == 48)">
|
|
|
- <img src="../assets/icon/fourthToolList/conSentences.png" alt />
|
|
|
- <div>表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="(item3.tool == 49)">
|
|
|
- <img src="../assets/icon/fourthToolList/group.png" alt />
|
|
|
- <div>学生分组</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="toolSta" v-if="item3.works.length">
|
|
|
- <!-- works:[],likeCount: 0, commentCount: 0, score: 0, isScore: 0 -->
|
|
|
- <span>作业数量:{{ item3.works.length }}</span>
|
|
|
- <span v-if="chaptersJson.studentCount">完成率:{{ ((item3.works.length /
|
|
|
- chaptersJson.studentCount) * 100).toFixed(2) + '%'
|
|
|
- }}</span>
|
|
|
- <span>点赞数量:{{ item3.likeCount }}</span>
|
|
|
- <span>评论数量:{{ item3.commentCount }}</span>
|
|
|
- <span v-if="item3.isScore">作业评价量:{{ item3.isScore }}</span>
|
|
|
- <span v-if="item3.isScore">评价平均分:{{ (item3.score / item3.isScore).toFixed(2) }}</span>
|
|
|
+ <div class="detail_box">
|
|
|
+ <div class="title"><span class="timeIcon">实施时间</span></div>
|
|
|
+ <div class="box">
|
|
|
+ <div style="font-size: 22px;margin: 15px 0 45px;">{{ courseDetail.title }}</div>
|
|
|
+ <div class="chapter_time_box">
|
|
|
+ <div v-for="(item, index) in chaptersJson.work" :key="index" class="c_box">
|
|
|
+ <div class="stage_box">
|
|
|
+ <div class="yuan"></div>
|
|
|
+ <div class="stage">第{{ index + 1 }}阶段 {{ item.name }}</div>
|
|
|
+ <div class="s_up" :class="{ s_up2: item.is }" @click="item.is = !item.is"><img src="../assets/icon/up.png" alt=""></div>
|
|
|
+ </div>
|
|
|
+ <div v-show="item.is">
|
|
|
+ <div v-for="(item2, index2) in item.chapter" :key="index + '-' + index2">
|
|
|
+ <div>任务{{ index2 + 1 }}：{{ item2.name }}</div>
|
|
|
+ <div class="p_tool_box2">
|
|
|
+ <span v-for="(item3, index3) in item2.task" :key="index + '-' + index2 + '-' + index3"
|
|
|
+ class="p_tool2">
|
|
|
+ <div class="toolBigBox">
|
|
|
+ <div class="toolbox">
|
|
|
+ <div>工具{{ index3 + 1 }}：</div>
|
|
|
+ <div v-if="item3.tool == 1">
|
|
|
+ 电子白板
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 3">
|
|
|
+ 思维导图
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 6">
|
|
|
+ 协同文档
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 7">
|
|
|
+ 思维网格
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 8">
|
|
|
+ 素材库
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 17">
|
|
|
+ 学习资料
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 2">
|
|
|
+ 便签
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 4">
|
|
|
+ 问卷调查
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 45">
|
|
|
+ 选择题
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 10">
|
|
|
+ 倒计时
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 15">
|
|
|
+ 问答工具
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 26">
|
|
|
+ 课程设计
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 18">
|
|
|
+ 训练服务器
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 16">
|
|
|
+ 作业提交
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 21">
|
|
|
+ 编程平台
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 22">
|
|
|
+ AI体验
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 23">
|
|
|
+ Python
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 24">
|
|
|
+ AI平台
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 25">
|
|
|
+ 目标管理
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 31">
|
|
|
+ 数学画板
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 28">
|
|
|
+ 翻译
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 37">
|
|
|
+ 魔盒识字
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 38">
|
|
|
+ 24点
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 39">
|
|
|
+ GeoGebra
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 32">
|
|
|
+ 源码编辑
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 40">
|
|
|
+ 学生评价
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 41">
|
|
|
+ 选择填空
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 44">
|
|
|
+ 汉字宫
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.tool == 47">
|
|
|
+ 连词成句
|
|
|
+ </div>
|
|
|
+ <div v-if="(item3.tool == 48)">
|
|
|
+ 表格
|
|
|
+ </div>
|
|
|
+ <div v-if="(item3.tool == 49)">
|
|
|
+ 学生分组
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="toolSta" v-if="item3.works.length">
|
|
|
+ <!-- works:[],likeCount: 0, commentCount: 0, score: 0, isScore: 0 -->
|
|
|
+ <div>
|
|
|
+ <div>任务实施情况：</div>
|
|
|
+ <div>
|
|
|
+ <div>作业数量：{{ item3.works.length }}</div>
|
|
|
+ <div v-if="chaptersJson.studentCount">任务完成率：{{ ((item3.works.length /
|
|
|
+ chaptersJson.studentCount) * 100).toFixed(2) + '%'
|
|
|
+ }} </div>
|
|
|
+ <div>
|
|
|
+ <div>点赞：{{ item3.likeCount }}</div>
|
|
|
+ <div>评论：{{ item3.commentCount }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item3.isScore">
|
|
|
+ <div>任务效果：</div>
|
|
|
+ <div>
|
|
|
+ <div>作业评价量：{{ item3.isScore }}</div>
|
|
|
+ <div>评价平均分：{{ (item3.score / item3.isScore).toFixed(2)
|
|
|
+ }}分</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- <div v-for="(item, index) in Object.keys(chaptersJson.time)" :key="index">
|
|
|
+ {{ '时间:' + item + '次数:' + chaptersJson.time[item] }}</div> -->
|
|
|
+ <!-- <div>实施时间：{{ chaptersJson.startTime }}</div> -->
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -461,6 +481,7 @@ export default {
|
|
|
mr: require("../assets/icon/wheel.png"),
|
|
|
rw: 0,
|
|
|
chaptersJson: {},
|
|
|
+ type: 1,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -611,78 +632,78 @@ export default {
|
|
|
let _sCont = res.data[4];
|
|
|
let _comment = res.data[5];
|
|
|
|
|
|
- // let _chaptersJson = {
|
|
|
- // chapterState: _chapters,
|
|
|
- // state: {
|
|
|
- // stage: _chapters.length,
|
|
|
- // finish: 0,
|
|
|
- // learing: 0,
|
|
|
- // },
|
|
|
- // date: _works[0].time,
|
|
|
- // tool: [],
|
|
|
- // chapter: [],
|
|
|
- // time: {},
|
|
|
- // startTime: _works.length ? _works[0].time : '',
|
|
|
- // work: [],
|
|
|
- // studentCount: _sCont[0].usercount
|
|
|
- // }
|
|
|
- // let timeAarry = []
|
|
|
- // for (var j = 0; j < _works.length; j++) {
|
|
|
- // timeAarry.push(_works[j].vtime)
|
|
|
- // }
|
|
|
- // timeAarry.forEach(item => {
|
|
|
- // _chaptersJson.time[item] = (_chaptersJson.time[item] + 1) || 1
|
|
|
- // })
|
|
|
- // for (var i = 0; i < _chapters.length; i++) {
|
|
|
- // _chaptersJson.chapterState[i].isFinsh = false;
|
|
|
- // _chaptersJson.tool[i] = []
|
|
|
- // _chaptersJson.chapter[i] = []
|
|
|
- // _chaptersJson.work[i] = { name: _chapters[i].dyName, chapter: [] }
|
|
|
- // for (var j = 0; j < _works.length; j++) {
|
|
|
- // if (i == _works[j].stage) {
|
|
|
- // _chaptersJson.chapterState[i].isFinsh = true;
|
|
|
- // _chaptersJson.state.finish++
|
|
|
- // break;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // let el = _chapters[i].chapterInfo[0].taskJson;
|
|
|
- // for (var z = 0; z < el.length; z++) {
|
|
|
- // _chaptersJson.tool[i][z] = []
|
|
|
- // _chaptersJson.chapter[i][z] = []
|
|
|
- // _chaptersJson.work[i].chapter[z] = { name: el[z].task, task: [] }
|
|
|
- // let tools = el[z].toolChoose
|
|
|
- // for (var k = 0; k < tools.length; k++) {
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k] = { tool: tools[k].tool[0], works: [], likeCount: 0, commentCount: 0, score: 0, isScore: 0 }
|
|
|
- // for (var j = 0; j < _works.length; j++) {
|
|
|
- // if (i == _works[j].stage && z == _works[j].task && k == _works[j].tool) {
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k].works.push(_works[j])
|
|
|
- // if (_works[j].score) {
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k].score += JSON.parse(_works[j].score).wScore
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k].isScore++
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // for (var j = 0; j < _comment.length; j++) {
|
|
|
- // if (i == _comment[j].stage && z == _comment[j].task && k == _comment[j].tool) {
|
|
|
- // if (_comment[j].cType == 1) {
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k].likeCount++
|
|
|
- // }
|
|
|
-
|
|
|
- // if (_comment[j].cType == 2) {
|
|
|
- // _chaptersJson.work[i].chapter[z].task[k].commentCount++
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // // if (_chaptersJson.chapter[i][z].indexOf(tools[k].tool[0]) == -1) {
|
|
|
- // // _chaptersJson.tool[i][z].push(tools[k].tool[0])
|
|
|
- // // }
|
|
|
- // _chaptersJson.chapter[i][z][k] = { tool: tools[k].tool[0] }
|
|
|
- // _chaptersJson.tool[i][z][k] = { tool: tools[k].tool[0] }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // _chaptersJson.state.learing = _chaptersJson.state.stage - _chaptersJson.state.finish
|
|
|
- // this.chaptersJson = _chaptersJson
|
|
|
+ let _chaptersJson = {
|
|
|
+ chapterState: _chapters,
|
|
|
+ state: {
|
|
|
+ stage: _chapters.length,
|
|
|
+ finish: 0,
|
|
|
+ learing: 0,
|
|
|
+ },
|
|
|
+ tool: [],
|
|
|
+ chapter: [],
|
|
|
+ time: {},
|
|
|
+ startTime: _works.length ? _works[0].time : '',
|
|
|
+ work: [],
|
|
|
+ studentCount: _sCont[0].usercount
|
|
|
+ }
|
|
|
+ let timeAarry = []
|
|
|
+ for (var j = 0; j < _works.length; j++) {
|
|
|
+ timeAarry.push(_works[j].vtime)
|
|
|
+ }
|
|
|
+ timeAarry.forEach(item => {
|
|
|
+ _chaptersJson.time[item] = (_chaptersJson.time[item] + 1) || 1
|
|
|
+ })
|
|
|
+ for (var i = 0; i < _chapters.length; i++) {
|
|
|
+ _chaptersJson.chapterState[i].isFinsh = false;
|
|
|
+ _chaptersJson.tool[i] = []
|
|
|
+ _chaptersJson.chapter[i] = []
|
|
|
+ _chaptersJson.work[i] = { name: _chapters[i].dyName, chapter: [] }
|
|
|
+ for (var j = 0; j < _works.length; j++) {
|
|
|
+ if (i == _works[j].stage) {
|
|
|
+ _chaptersJson.chapterState[i].isFinsh = true;
|
|
|
+ _chaptersJson.state.finish++
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let el = _chapters[i].chapterInfo[0].taskJson;
|
|
|
+ for (var z = 0; z < el.length; z++) {
|
|
|
+ _chaptersJson.tool[i][z] = []
|
|
|
+ _chaptersJson.chapter[i][z] = []
|
|
|
+ _chaptersJson.work[i].chapter[z] = { name: el[z].task, task: [] }
|
|
|
+ _chaptersJson.work[i].is = false;
|
|
|
+ let tools = el[z].toolChoose
|
|
|
+ for (var k = 0; k < tools.length; k++) {
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k] = { tool: tools[k].tool[0], works: [], likeCount: 0, commentCount: 0, score: 0, isScore: 0 }
|
|
|
+ for (var j = 0; j < _works.length; j++) {
|
|
|
+ if (i == _works[j].stage && z == _works[j].task && k == _works[j].tool) {
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k].works.push(_works[j])
|
|
|
+ if (_works[j].score) {
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k].score += JSON.parse(_works[j].score).wScore
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k].isScore++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var j = 0; j < _comment.length; j++) {
|
|
|
+ if (i == _comment[j].stage && z == _comment[j].task && k == _comment[j].tool) {
|
|
|
+ if (_comment[j].cType == 1) {
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k].likeCount++
|
|
|
+ }
|
|
|
+
|
|
|
+ if (_comment[j].cType == 2) {
|
|
|
+ _chaptersJson.work[i].chapter[z].task[k].commentCount++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (_chaptersJson.chapter[i][z].indexOf(tools[k].tool[0]) == -1) {
|
|
|
+ // _chaptersJson.tool[i][z].push(tools[k].tool[0])
|
|
|
+ // }
|
|
|
+ _chaptersJson.chapter[i][z][k] = { tool: tools[k].tool[0] }
|
|
|
+ _chaptersJson.tool[i][z][k] = { tool: tools[k].tool[0] }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _chaptersJson.state.learing = _chaptersJson.state.stage - _chaptersJson.state.finish
|
|
|
+ this.chaptersJson = _chaptersJson
|
|
|
// debugger
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
@@ -1111,17 +1132,22 @@ export default {
|
|
|
.detail {
|
|
|
width: 100%;
|
|
|
padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.statebox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
box-sizing: border-box;
|
|
|
+ margin-left: 30px;
|
|
|
}
|
|
|
|
|
|
.statebox div {
|
|
|
- border: 1px solid #205cc6;
|
|
|
- padding: 15px 20px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.statebox div+div {
|
|
|
@@ -1129,45 +1155,53 @@ export default {
|
|
|
}
|
|
|
|
|
|
.statebox div span {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.statebox div span+span {
|
|
|
margin-left: 10px;
|
|
|
+ color: #1463eb;
|
|
|
}
|
|
|
|
|
|
|
|
|
.p_tool_box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- background: #205cc6;
|
|
|
- color: #fff;
|
|
|
- padding: 10px 15px;
|
|
|
+ background: rgb(217, 227, 239);
|
|
|
+ /* color: #fff; */
|
|
|
+ padding: 0 15px 10px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 200px;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
.p_tool {
|
|
|
display: flex;
|
|
|
- margin-right: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.p_tool>div {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
+ min-width: 60px;
|
|
|
}
|
|
|
|
|
|
.p_tool>div img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
|
|
|
.p_tool>div>div {
|
|
|
margin-top: 5px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.p_tool_box2 {
|
|
|
- background: #205cc6;
|
|
|
- color: #fff;
|
|
|
padding: 10px 15px;
|
|
|
}
|
|
|
|
|
|
@@ -1177,7 +1211,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
- margin-bottom: 10px;
|
|
|
+ /* margin-bottom: 10px; */
|
|
|
}
|
|
|
|
|
|
.p_tool2>div:nth-child(1) {
|
|
|
@@ -1186,26 +1220,280 @@ export default {
|
|
|
|
|
|
.toolBigBox {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.toolSta {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ margin: 20px 0 0;
|
|
|
}
|
|
|
|
|
|
-.p_tool2 .toolbox>div:nth-child(1) {
|
|
|
+.toolSta>div {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.toolSta>div+div {
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.toolSta>div>div:nth-child(1) {
|
|
|
+ margin: 10px 10px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.toolSta>div>div:nth-child(2)>div {
|
|
|
+ background: rgb(79, 140, 223);
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 15px;
|
|
|
+ min-width: 150px;
|
|
|
+ font-size: 18px;
|
|
|
align-items: center;
|
|
|
- width: 100px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
-.p_tool2 .toolbox>div:nth-child(1) img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+.toolSta>div:nth-child(2)>div:nth-child(2)>div {
|
|
|
+ background: rgb(53, 103, 172);
|
|
|
}
|
|
|
|
|
|
-.p_tool2 .toolbox>div:nth-child(1)>div {
|
|
|
- margin-top: 5px;
|
|
|
+.toolSta>div>div:nth-child(2)>div+div {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.toolSta>div>div:nth-child(2)>div>div+div {
|
|
|
+ margin: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.p_tool2 .toolbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkBox {
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 0 0 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.checkBox span {
|
|
|
+ padding: 0 10px 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkBox span+span {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.checkBox .active {
|
|
|
+ border-bottom: 2px solid rgb(75, 151, 229);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.detail_box {
|
|
|
+ background-color: rgb(231, 240, 247);
|
|
|
+ padding: 15px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.detail_box+.detail_box {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail_box .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.detail_box .title>span:nth-child(1) {
|
|
|
+ font-size: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.detail_box .box {
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 15px 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ /* width: 100%; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.progress {
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 15px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter+.chapter {
|
|
|
+ padding-left: 10px;
|
|
|
+ border-left: 1px solid rgb(220, 220, 220);
|
|
|
+}
|
|
|
+
|
|
|
+.chapter .stage {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter .task {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter .task .taskBox {
|
|
|
+ min-width: 110px;
|
|
|
+ max-width: 180px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter .task .taskBox+.taskBox {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.chapter .task .taskBox .taskName {
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px
|
|
|
+}
|
|
|
+
|
|
|
+.toolIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/toolion.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.toolIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/toolion.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.taskIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/task.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.finishIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/finish.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.learningIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/learning.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.frequencyIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/frequency.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.timeIcon::before {
|
|
|
+ content: '';
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url(../assets/icon/time.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.chapter_time_box {
|
|
|
+ border-left: 5px solid #f0f0f0;
|
|
|
+ padding: 0 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box {
|
|
|
+ padding-top: 40px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box .stage_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: -20px;
|
|
|
+ left: -45px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box .stage_box .yuan {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background: rgb(244, 244, 244);
|
|
|
+ border-radius: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box .stage_box .yuan::before {
|
|
|
+ content: '';
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: rgb(59, 149, 238);
|
|
|
+ border-radius: 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.c_box .stage_box .stage {
|
|
|
+ background: linear-gradient(90deg, #477cd7, #65b9fc);
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_up {
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.s_up2 {
|
|
|
+ transform: rotate(90deg);
|
|
|
}
|
|
|
</style>
|
