courseDetail.vue 55 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866
  1. <template>
  2. <div class="pb_content">
  3. <div class="pb_content_body" style="height: 100%">
  4. <div class="body_student">
  5. <div class="student_head">
  6. <div
  7. v-if="tType != 4"
  8. class="return"
  9. @click.stop="
  10. goTo(
  11. '/index?userid=' +
  12. userid +
  13. '&oid=' +
  14. oid +
  15. '&org=' +
  16. org +
  17. '&cid=' +
  18. classId +
  19. '&tType=' +
  20. tType +
  21. '&screenType=' +
  22. screenType
  23. )
  24. "
  25. >
  26. 返回
  27. <!-- <img src="../assets/icon/return.png" alt="" /> -->
  28. </div>
  29. <div class="box_course">
  30. <div class="wheel">
  31. <img
  32. style="object-fit: cover"
  33. :src="
  34. this.courseDetail.cover != null &&
  35. this.courseDetail.cover != ''
  36. ? JSON.parse(this.courseDetail.cover).length > 0
  37. ? JSON.parse(this.courseDetail.cover)[0].url
  38. : mr
  39. : mr
  40. "
  41. alt
  42. />
  43. </div>
  44. <div class="right_box">
  45. <div class="rightT">
  46. <div class="right_box_title">{{ courseDetail.title }}</div>
  47. <div class="jd">{{ chapInfo.length }}阶段</div>
  48. <div class="jd">{{ rw }}任务</div>
  49. </div>
  50. <div class="cType">
  51. <div
  52. class="all_choose"
  53. v-for="(item, index) in courseType"
  54. :key="index"
  55. >
  56. <span style="color: #6c6c6c">{{ item + ":" }}</span>
  57. <span
  58. class="type_children"
  59. v-for="(item2, index2) in courseTypeJson[item]"
  60. :key="index2"
  61. >{{ item2 }}</span
  62. >
  63. </div>
  64. </div>
  65. <div class="cType" style="font-size: 18px; color: #6c6c6c">
  66. <div style="min-width: 150px">
  67. 创建者:<span style="color: #000">{{
  68. courseDetail.username
  69. }}</span>
  70. </div>
  71. <div class="Tname" v-if="Tname.length > 0">
  72. 协同人员:<span
  73. v-for="(tname, tIndex) in Tname"
  74. :key="tIndex"
  75. style="margin: 0 5px; color: #000"
  76. >{{ tname }}</span
  77. >
  78. </div>
  79. </div>
  80. <div class="cType" style="font-size: 18px; color: #6c6c6c">
  81. <div style="display: flex; align-items: center">
  82. <div>参与人数:</div>
  83. <div class="man">
  84. <img src="../assets/people.png" alt />
  85. </div>
  86. <div class="person" style="color: #000">
  87. {{
  88. courseDetail.vcount != null ? courseDetail.vcount : 0
  89. }}人
  90. </div>
  91. </div>
  92. <div class="Tname" v-if="courseDetail.classname">
  93. 授课班级:<span style="margin: 0 5px; color: #000">{{
  94. courseDetail.classname
  95. }}</span>
  96. </div>
  97. </div>
  98. <div class="now_study" @click="dialogVisible = true">
  99. 立即学习
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="student_body">
  105. <div class="sLeft" v-if="courseDetail.brief">
  106. <div class="courseT">项目详情</div>
  107. <div class="courseTd">{{ courseDetail.brief }}</div>
  108. </div>
  109. <div :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'">
  110. <div v-if="tType == 1 || tType == 4" class="checkBox">
  111. <span :class="{ active: type == 2 }" @click="type = 2"
  112. >阶段选择</span
  113. >
  114. <span :class="{ active: type == 1 }" @click="type = 1"
  115. >课程分析</span
  116. >
  117. </div>
  118. <div
  119. v-if="((tType == 1 || tType == 4) && type == 2) || tType == 2"
  120. :class="courseDetail.brief != '' ? 'rightTd' : 'noBRight'"
  121. style="width: 100%"
  122. >
  123. <div
  124. class="blue_box_one"
  125. v-for="(item, index) in chapInfo"
  126. :key="index"
  127. @click="addUserRate(index)"
  128. >
  129. <div>第{{ index + 1 }}阶段</div>
  130. <div :title="item.dyName">{{ item.dyName }}</div>
  131. <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
  132. </div>
  133. </div>
  134. <div
  135. v-if="
  136. (tType == 1 || tType == 4) &&
  137. Object.keys(chaptersJson).length &&
  138. type == 1
  139. "
  140. class="detail"
  141. >
  142. <div class="detail_box">
  143. <div class="title">
  144. <span class="toolIcon">工具分析</span>
  145. <div class="statebox">
  146. <div>
  147. <span class="taskIcon">全部阶段:</span
  148. ><span>{{ chaptersJson.state.stage }}</span>
  149. </div>
  150. <div>
  151. <span class="finishIcon">已进行:</span
  152. ><span>{{ chaptersJson.state.finish }}</span>
  153. </div>
  154. <div>
  155. <span class="learningIcon">未进行:</span
  156. ><span>{{ chaptersJson.state.learing }}</span>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="box" v-if="chaptersJson.tool.length">
  161. <div class="progress">
  162. <div
  163. v-for="(item, index) in chaptersJson.tool"
  164. :key="index"
  165. class="chapter"
  166. >
  167. <div
  168. class="stage"
  169. style="
  170. cursor: pointer;
  171. display: flex;
  172. flex-direction: row;
  173. flex-wrap: nowrap;
  174. justify-content: center;
  175. align-items: center;
  176. "
  177. @click="addUserRate(index)"
  178. >
  179. <div>第{{ index + 1 }}阶段</div>
  180. <div>
  181. <el-tooltip
  182. class="item"
  183. effect="light"
  184. :content="item.name"
  185. placement="top"
  186. >
  187. <div class="titleCss" style="max-width: 260px">
  188. {{ item.name }}
  189. </div>
  190. </el-tooltip>
  191. </div>
  192. </div>
  193. <!-- {{ chaptersJson.chapterState[index].isFinsh ? '已完成' : '进行中' }} -->
  194. <div class="task">
  195. <div
  196. v-for="(item2, index2) in item.array"
  197. :key="index + '-' + index2"
  198. class="taskBox"
  199. >
  200. <div class="taskName">
  201. <div class="navIndex">任务{{ index2 + 1 }}</div>
  202. <div>
  203. <el-tooltip
  204. class="item"
  205. effect="light"
  206. :content="item2.name"
  207. placement="top"
  208. >
  209. <div class="titleCss">{{ item2.name }}</div>
  210. </el-tooltip>
  211. </div>
  212. </div>
  213. <div class="p_tool_box">
  214. <span
  215. v-for="(item3, index3) in item2.array"
  216. :key="index + '-' + index2 + '-' + index3"
  217. class="p_tool"
  218. >
  219. <div v-if="item3.tool == 1">
  220. <img
  221. src="../assets/icon/secondToolList/whiteBoard.png"
  222. alt
  223. />
  224. <div>电子白板</div>
  225. </div>
  226. <div v-if="item3.tool == 3">
  227. <img
  228. src="../assets/icon/secondToolList/mindMapping.png"
  229. alt
  230. />
  231. <div>思维导图</div>
  232. </div>
  233. <div v-if="item3.tool == 6">
  234. <img
  235. src="../assets/icon/secondToolList/doc.png"
  236. alt
  237. />
  238. <div>协同文档</div>
  239. </div>
  240. <div v-if="item3.tool == 7">
  241. <img
  242. src="../assets/icon/secondToolList/mindNetwork.png"
  243. alt
  244. />
  245. <div>思维网格</div>
  246. </div>
  247. <div v-if="item3.tool == 8">
  248. <img
  249. src="../assets/icon/secondToolList/library.png"
  250. alt
  251. />
  252. <div>素材库</div>
  253. </div>
  254. <div v-if="item3.tool == 17">
  255. <img
  256. src="../assets/icon/secondToolList/library.png"
  257. alt
  258. />
  259. <div>学习资料</div>
  260. </div>
  261. <div v-if="item3.tool == 2">
  262. <img
  263. src="../assets/icon/secondToolList/note.png"
  264. alt
  265. />
  266. <div>便签</div>
  267. </div>
  268. <div v-if="item3.tool == 4">
  269. <img
  270. src="../assets/icon/thirdToolList/ask.png"
  271. alt
  272. />
  273. <div>问卷调查</div>
  274. </div>
  275. <div v-if="item3.tool == 45">
  276. <img
  277. src="../assets/icon/thirdToolList/choose.png"
  278. alt
  279. />
  280. <div>选择题</div>
  281. </div>
  282. <!-- <div v-if="item3.tool == 5">
  283. <img
  284. src="../assets/icon/thirdToolList/score.png"
  285. alt
  286. />
  287. <div >量规评分</div>
  288. </div> -->
  289. <div v-if="item3.tool == 10">
  290. <img
  291. src="../assets/icon/thirdToolList/time.png"
  292. alt
  293. />
  294. <div>倒计时</div>
  295. </div>
  296. <div v-if="item3.tool == 15">
  297. <img
  298. src="../assets/icon/thirdToolList/answer.png"
  299. alt
  300. />
  301. <div>问答工具</div>
  302. </div>
  303. <div v-if="item3.tool == 26">
  304. <img
  305. src="../assets/icon/thirdToolList/courseDesign.png"
  306. alt
  307. />
  308. <div>课程设计</div>
  309. </div>
  310. <div v-if="item3.tool == 18">
  311. <img
  312. src="../assets/icon/thirdToolList/trainPlatform.png"
  313. alt
  314. />
  315. <div>训练服务器</div>
  316. </div>
  317. <div v-if="item3.tool == 16">
  318. <img
  319. src="../assets/icon/thirdToolList/work.png"
  320. alt
  321. />
  322. <div>作业提交</div>
  323. </div>
  324. <div v-if="item3.tool == 21">
  325. <img
  326. src="../assets/icon/fourthToolList/program.png"
  327. alt
  328. />
  329. <div>编程平台</div>
  330. </div>
  331. <div v-if="item3.tool == 22">
  332. <img
  333. src="../assets/icon/fourthToolList/program.png"
  334. alt
  335. />
  336. <div>AI体验</div>
  337. </div>
  338. <div v-if="item3.tool == 23">
  339. <img
  340. src="../assets/icon/fourthToolList/program.png"
  341. alt
  342. />
  343. <div>Python</div>
  344. </div>
  345. <div v-if="item3.tool == 24">
  346. <img
  347. src="../assets/icon/fourthToolList/AIprogram.png"
  348. alt
  349. />
  350. <div>AI平台</div>
  351. </div>
  352. <div v-if="item3.tool == 25">
  353. <img
  354. src="../assets/icon/thirdToolList/evalua.png"
  355. alt
  356. />
  357. <div>目标管理</div>
  358. </div>
  359. <div v-if="item3.tool == 31">
  360. <img
  361. src="../assets/icon/secondToolList/networkPanel.png"
  362. alt
  363. />
  364. <div>数学画板</div>
  365. </div>
  366. <div v-if="item3.tool == 28">
  367. <img
  368. src="../assets/icon/secondToolList/translation.png"
  369. alt
  370. />
  371. <div>翻译</div>
  372. </div>
  373. <div v-if="item3.tool == 37">
  374. <img
  375. src="../assets/icon/secondToolList/mohe.png"
  376. alt
  377. />
  378. <div>魔盒识字</div>
  379. </div>
  380. <div v-if="item3.tool == 38">
  381. <img
  382. src="../assets/icon/secondToolList/24game.png"
  383. alt
  384. />
  385. <div>24点</div>
  386. </div>
  387. <div v-if="item3.tool == 39">
  388. <img
  389. src="../assets/icon/secondToolList/GeoGebra.png"
  390. alt
  391. />
  392. <div>GeoGebra</div>
  393. </div>
  394. <div v-if="item3.tool == 32">
  395. <img
  396. src="../assets/icon/thirdToolList/code.png"
  397. alt
  398. />
  399. <div>源码编辑</div>
  400. </div>
  401. <div v-if="item3.tool == 40">
  402. <img
  403. src="../assets/icon/secondToolList/eval.png"
  404. alt
  405. />
  406. <div>学生评价</div>
  407. </div>
  408. <div v-if="item3.tool == 41">
  409. <img
  410. src="../assets/icon/thirdToolList/select.png"
  411. alt
  412. />
  413. <div>选择填空</div>
  414. </div>
  415. <div v-if="item3.tool == 44">
  416. <img
  417. src="../assets/icon/thirdToolList/hanClass.png"
  418. alt
  419. />
  420. <div>汉字宫</div>
  421. </div>
  422. <div v-if="item3.tool == 47">
  423. <img
  424. src="../assets/icon/fourthToolList/conSentences.png"
  425. alt
  426. />
  427. <div>连词成句</div>
  428. </div>
  429. <div v-if="item3.tool == 48">
  430. <img
  431. src="../assets/icon/fourthToolList/conSentences.png"
  432. alt
  433. />
  434. <div>表格</div>
  435. </div>
  436. <div v-if="item3.tool == 49">
  437. <img
  438. src="../assets/icon/fourthToolList/group.png"
  439. alt
  440. />
  441. <div>学生分组</div>
  442. </div>
  443. <div v-if="item3.tool == 50">
  444. <img
  445. src="../assets/icon/thirdToolList/plwork.png"
  446. alt
  447. />
  448. <div>批量上传</div>
  449. </div>
  450. <div v-if="item3.tool == undefined">
  451. <img
  452. src="../assets/icon/empytool.png"
  453. alt
  454. style="width: 64px; height: 75px"
  455. />
  456. </div>
  457. </span>
  458. </div>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. <div
  466. class="detail_box"
  467. v-if="Object.keys(chaptersJson.time).length"
  468. >
  469. <div class="title">
  470. <span class="frequencyIcon">活跃频率</span>
  471. </div>
  472. <div class="box">
  473. <div>
  474. <Heatmap
  475. :Josn="chaptersJson.time"
  476. :num="chaptersJson.studentCount"
  477. ></Heatmap>
  478. </div>
  479. </div>
  480. </div>
  481. <div class="detail_box">
  482. <div class="title"><span class="timeIcon">实施时间</span></div>
  483. <div class="box">
  484. <div style="font-size: 22px; margin: 15px 0 45px">
  485. {{ courseDetail.title }}
  486. </div>
  487. <div class="chapter_time_box" style="margin-left: 170px">
  488. <div
  489. v-for="(item, index) in chaptersJson.work"
  490. :key="index"
  491. class="c_box"
  492. >
  493. <div class="stage_box" style="left: -195px">
  494. <div
  495. style="
  496. min-width: 150px;
  497. position: relative;
  498. left: -5px;
  499. "
  500. >
  501. {{ item.time }}
  502. </div>
  503. <div class="yuan"></div>
  504. <div class="stage">
  505. 第{{ index + 1 }}阶段 {{ item.name }}
  506. </div>
  507. <div
  508. class="s_up"
  509. :class="{ s_up2: !item.is }"
  510. @click="item.is = !item.is"
  511. >
  512. <img src="../assets/icon/up.png" alt="" />
  513. </div>
  514. </div>
  515. <div v-show="item.is">
  516. <div
  517. v-for="(item2, index2) in item.chapter"
  518. :key="index + '-' + index2"
  519. >
  520. <div
  521. style="
  522. display: flex;
  523. flex-direction: row;
  524. flex-wrap: nowrap;
  525. align-items: center;
  526. "
  527. v-if="
  528. item2.task[0].tool != undefined && item2.isWork
  529. "
  530. >
  531. <div
  532. style="
  533. width: 13px;
  534. height: 13px;
  535. background: #5a82cb 100%;
  536. border-radius: 50%;
  537. margin-right: 10px;
  538. "
  539. ></div>
  540. <div
  541. style="
  542. color: #4376c3;
  543. font-size: 20px;
  544. font-weight: bold;
  545. "
  546. >
  547. 任务{{ index2 + 1 }}:{{ item2.name }}
  548. </div>
  549. </div>
  550. <div class="p_tool_box2">
  551. <span
  552. v-for="(item3, index3) in item2.task"
  553. :key="index + '-' + index2 + '-' + index3"
  554. class="p_tool2"
  555. >
  556. <div
  557. class="toolBigBox"
  558. style="
  559. display: flex;
  560. flex-direction: row;
  561. flex-wrap: nowrap;
  562. align-items: center;
  563. "
  564. v-if="item3.works.length"
  565. >
  566. <div
  567. style="
  568. display: flex;
  569. flex-direction: row;
  570. flex-wrap: nowrap;
  571. align-items: flex-end;
  572. min-width: 140px;
  573. "
  574. >
  575. <div class="lineBox"></div>
  576. <div class="toolbox">
  577. <div
  578. style="font-size: 16px; font-weight: bold"
  579. >
  580. 步骤{{ index3 + 1 }}:
  581. </div>
  582. <div v-if="item3.tool == 1">电子白板</div>
  583. <div v-if="item3.tool == 3">思维导图</div>
  584. <div v-if="item3.tool == 6">协同文档</div>
  585. <div v-if="item3.tool == 7">思维网格</div>
  586. <div v-if="item3.tool == 8">素材库</div>
  587. <div v-if="item3.tool == 17">学习资料</div>
  588. <div v-if="item3.tool == 2">便签</div>
  589. <div v-if="item3.tool == 4">问卷调查</div>
  590. <div v-if="item3.tool == 45">选择题</div>
  591. <div v-if="item3.tool == 10">倒计时</div>
  592. <div v-if="item3.tool == 15">问答工具</div>
  593. <div v-if="item3.tool == 26">课程设计</div>
  594. <div v-if="item3.tool == 18">
  595. 训练服务器
  596. </div>
  597. <div v-if="item3.tool == 16">作业提交</div>
  598. <div v-if="item3.tool == 21">编程平台</div>
  599. <div v-if="item3.tool == 22">AI体验</div>
  600. <div v-if="item3.tool == 23">Python</div>
  601. <div v-if="item3.tool == 24">AI平台</div>
  602. <div v-if="item3.tool == 25">目标管理</div>
  603. <div v-if="item3.tool == 31">数学画板</div>
  604. <div v-if="item3.tool == 28">翻译</div>
  605. <div v-if="item3.tool == 37">魔盒识字</div>
  606. <div v-if="item3.tool == 38">24点</div>
  607. <div v-if="item3.tool == 39">GeoGebra</div>
  608. <div v-if="item3.tool == 32">源码编辑</div>
  609. <div v-if="item3.tool == 40">学生评价</div>
  610. <div v-if="item3.tool == 41">选择填空</div>
  611. <div v-if="item3.tool == 44">汉字宫</div>
  612. <div v-if="item3.tool == 47">连词成句</div>
  613. <div v-if="item3.tool == 48">表格</div>
  614. <div v-if="item3.tool == 49">学生分组</div>
  615. <div v-if="item3.tool == 50">批量上传</div>
  616. </div>
  617. </div>
  618. <div
  619. v-if="item3.works.length"
  620. style="
  621. display: flex;
  622. flex-direction: row;
  623. flex-wrap: wrap;
  624. align-items: center;
  625. margin-left: 10px;
  626. "
  627. >
  628. <!-- works:[],likeCount: 0, commentCount: 0, score: 0, isScore: 0 -->
  629. <div class="disCss">
  630. <div class="blueBtn">
  631. 作业数量:{{ item3.works.length }}
  632. </div>
  633. <div
  634. v-if="chaptersJson.studentCount"
  635. class="blueBtn"
  636. >
  637. 任务完成率:{{
  638. (
  639. (item3.works.length /
  640. chaptersJson.studentCount) *
  641. 100
  642. ).toFixed(2) > 100.0
  643. ? 100 + "%"
  644. : (
  645. (item3.works.length /
  646. chaptersJson.studentCount) *
  647. 100
  648. ).toFixed(2) + "%"
  649. }}
  650. </div>
  651. <div class="blueBtn">
  652. <div>点赞:{{ item3.likeCount }}</div>
  653. <div style="margin-left: 15px">
  654. 评论:{{ item3.commentCount }}
  655. </div>
  656. </div>
  657. </div>
  658. <div v-if="item3.isScore">
  659. <div class="disCss">
  660. <div class="blueBtn">
  661. 作业评价量:{{ item3.isScore }}
  662. </div>
  663. <div class="blueBtn">
  664. 评价平均分:{{
  665. (item3.score / item3.isScore).toFixed(
  666. 2
  667. )
  668. }}分
  669. </div>
  670. </div>
  671. </div>
  672. </div>
  673. </div>
  674. </span>
  675. </div>
  676. </div>
  677. </div>
  678. </div>
  679. </div>
  680. </div>
  681. </div>
  682. <!-- <div v-for="(item, index) in Object.keys(chaptersJson.time)" :key="index">
  683. {{ '时间:' + item + '次数:' + chaptersJson.time[item] }}</div> -->
  684. <!-- <div>实施时间:{{ chaptersJson.startTime }}</div> -->
  685. </div>
  686. </div>
  687. </div>
  688. <!-- <div
  689. style="
  690. text-align: center;
  691. padding: 30px 0 20px 0;
  692. box-sizing: border-box;
  693. "
  694. >
  695. 此处滚动加载..
  696. </div>-->
  697. <el-dialog
  698. title="阶段选择"
  699. :visible.sync="dialogVisible"
  700. :append-to-body="true"
  701. width="700px"
  702. :before-close="handleClose"
  703. class="dialog_change"
  704. >
  705. <div style="font-size: 20px">请选择阶段</div>
  706. <div
  707. style="
  708. padding: 20px 30px;
  709. display: flex;
  710. flex-direction: row;
  711. flex-wrap: wrap;
  712. "
  713. >
  714. <div
  715. class="blue_box"
  716. v-for="(item, index) in chapInfo"
  717. :key="index"
  718. @click="addUserRate(index)"
  719. >
  720. <div>第{{ index + 1 }}阶段</div>
  721. <div>{{ item.dyName }}</div>
  722. <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
  723. </div>
  724. </div>
  725. </el-dialog>
  726. </div>
  727. </div>
  728. </div>
  729. </template>
  730. <script>
  731. import Heatmap from "./tools/heatmap.vue";
  732. export default {
  733. components: {
  734. Heatmap,
  735. },
  736. data() {
  737. return {
  738. choose: 0,
  739. dialogVisible: false,
  740. id: this.$route.query.courseId,
  741. userid: this.$route.query.userid,
  742. oid: this.$route.query.oid,
  743. org: this.$route.query.org,
  744. classId: this.$route.query.cid,
  745. tType: this.$route.query.tType,
  746. screenType: this.$route.query.screenType,
  747. courseDetail: {},
  748. aStudentName: [],
  749. chapInfo: [],
  750. courseType: [],
  751. Tname: [],
  752. courseTypeJson: {},
  753. userinfo: [],
  754. mr: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/noBanner1656409780264.jpg",
  755. rw: 0,
  756. chaptersJson: {},
  757. type: 2,
  758. };
  759. },
  760. methods: {
  761. handleClose(done) {
  762. done();
  763. },
  764. goTo(path) {
  765. this.$router.push(path);
  766. },
  767. addUserRate(i) {
  768. // var suid = this.userid;
  769. // if (
  770. // JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1 &&
  771. // JSON.parse(this.courseDetail.userid) != suid
  772. // ) {
  773. // this.$message.error("你没有该权限");
  774. // return;
  775. // }
  776. // var a =
  777. // this.courseDetail.course_student != ""
  778. // ? JSON.parse(this.courseDetail.course_student)
  779. // : "";
  780. // if (this.courseDetail.userid != suid) {
  781. // if (this.userinfo.type == 2) {
  782. // if (a != "") {
  783. // if (
  784. // JSON.parse(this.courseDetail.course_student).indexOf(suid) == -1
  785. // ) {
  786. // this.$message.error("你没有该权限");
  787. // return;
  788. // }
  789. // } else {
  790. // this.$message.error("暂无项目学员,请联系老师添加项目学员!");
  791. // return;
  792. // }
  793. // }
  794. // }
  795. let params = {
  796. uid: this.userid,
  797. cid: this.id,
  798. };
  799. this.ajax
  800. .get(this.$store.state.api + "addUserR", params)
  801. .then((res) => {
  802. console.log(res.data);
  803. this.updateVc();
  804. if (this.tType == 1 || this.tType == 2 || this.tType == 4) {
  805. this.goTo(
  806. "/studyStudent?type=" +
  807. i +
  808. "&courseId=" +
  809. this.id +
  810. "&userid=" +
  811. this.userid +
  812. "&oid=" +
  813. this.oid +
  814. "&org=" +
  815. this.org +
  816. "&cid=" +
  817. this.classId +
  818. "&tType=" +
  819. this.tType +
  820. "&screenType=" +
  821. this.screenType
  822. );
  823. } else {
  824. this.goTo(
  825. "/study?type=" +
  826. i +
  827. "&courseId=" +
  828. this.id +
  829. "&userid=" +
  830. this.userid +
  831. "&oid=" +
  832. this.oid +
  833. "&org=" +
  834. this.org +
  835. "&cid=" +
  836. this.classId +
  837. "&tType=" +
  838. this.tType +
  839. "&screenType=" +
  840. this.screenType
  841. );
  842. }
  843. })
  844. .catch((err) => {
  845. console.error(err);
  846. });
  847. },
  848. updateVc() {
  849. let params = {
  850. cid: this.id,
  851. };
  852. this.ajax
  853. .get(this.$store.state.api + "updateVc", params)
  854. .then((res) => {
  855. console.log(res.data);
  856. })
  857. .catch((err) => {
  858. console.error(err);
  859. });
  860. },
  861. getCourseDetail() {
  862. const loading = this.$loading.service({
  863. background: "rgba(255, 255, 255, 0.7)",
  864. target: document.querySelector(".student_table"),
  865. });
  866. let params = {
  867. courseId: this.id,
  868. };
  869. this.ajax
  870. .get(this.$store.state.api + "selectCourseDetail", params)
  871. .then((res) => {
  872. loading.close();
  873. // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
  874. this.courseDetail = res.data[0][0];
  875. var a = res.data[0];
  876. var b = res.data[1];
  877. var c = res.data[2];
  878. var d = res.data[3];
  879. for (var i = 0; i < b.length; i++) {
  880. // if (!this.id) {
  881. // this.courseType[b[i].id] = [];
  882. // }
  883. for (var j = 0; j < a.length; j++) {
  884. if (b[i].id == a[j].pid) {
  885. if (!this.courseTypeJson[b[i].name]) {
  886. this.courseType.push(b[i].name);
  887. this.courseTypeJson[b[i].name] = [];
  888. }
  889. this.courseTypeJson[b[i].name].push(a[j].name);
  890. }
  891. }
  892. }
  893. for (var k = 0; k < c.length; k++) {
  894. this.Tname.push(c[k].name);
  895. }
  896. console.log(this.courseTypeJson.length);
  897. this.aStudentName = res.data[2];
  898. this.chapInfo = JSON.parse(this.courseDetail.chapters);
  899. for (var z = 0; z < this.chapInfo.length; z++) {
  900. this.rw += this.chapInfo[z].chapterInfo[0].taskJson.length;
  901. }
  902. let _chapters = JSON.parse(a[0].chapters);
  903. let _works = res.data[3];
  904. let _sCont = res.data[4];
  905. let _comment = res.data[5];
  906. let _chaptersJson = {
  907. chapterState: _chapters,
  908. state: {
  909. stage: _chapters.length,
  910. finish: 0,
  911. learing: 0,
  912. },
  913. tool: [],
  914. chapter: [],
  915. time: {},
  916. startTime: _works.length ? _works[0].time : "",
  917. work: [],
  918. studentCount: _sCont[0].usercount,
  919. };
  920. let timeAarry = [];
  921. for (var j = 0; j < _works.length; j++) {
  922. timeAarry.push(_works[j].vtime);
  923. }
  924. timeAarry.forEach((item) => {
  925. _chaptersJson.time[item] = _chaptersJson.time[item] + 1 || 1;
  926. });
  927. for (var i = 0; i < _chapters.length; i++) {
  928. _chaptersJson.chapterState[i].isFinsh = false;
  929. // _chaptersJson.tool[i] = []
  930. _chaptersJson.tool[i] = { array: [], name: _chapters[i].dyName };
  931. _chaptersJson.chapter[i] = [];
  932. _chaptersJson.work[i] = {
  933. name: _chapters[i].dyName,
  934. chapter: [],
  935. time: "",
  936. };
  937. for (var j = 0; j < _works.length; j++) {
  938. if (i == _works[j].stage) {
  939. _chaptersJson.chapterState[i].isFinsh = true;
  940. _chaptersJson.work[i].time = _works[j].time;
  941. _chaptersJson.state.finish++;
  942. break;
  943. }
  944. }
  945. let el = _chapters[i].chapterInfo[0].taskJson;
  946. for (var z = 0; z < el.length; z++) {
  947. // _chaptersJson.tool[i][z] = [];
  948. _chaptersJson.tool[i].array[z] = { array: [], name: el[z].task };
  949. _chaptersJson.chapter[i][z] = [];
  950. _chaptersJson.work[i].chapter[z] = {
  951. name: el[z].task,
  952. task: [],
  953. isWork: false,
  954. };
  955. if (d.length > 0) {
  956. _chaptersJson.work[i].chapter[z].isWork = true;
  957. }
  958. _chaptersJson.work[i].is = false;
  959. let tools = el[z].toolChoose;
  960. for (var k = 0; k < tools.length; k++) {
  961. _chaptersJson.work[i].chapter[z].task[k] = {
  962. tool: tools[k].tool[0],
  963. works: [],
  964. likeCount: 0,
  965. commentCount: 0,
  966. score: 0,
  967. isScore: 0,
  968. };
  969. for (var j = 0; j < _works.length; j++) {
  970. if (
  971. i == _works[j].stage &&
  972. z == _works[j].task &&
  973. k == _works[j].tool
  974. ) {
  975. _chaptersJson.work[i].chapter[z].task[k].works.push(
  976. _works[j]
  977. );
  978. if (_works[j].score) {
  979. _chaptersJson.work[i].chapter[z].task[k].score +=
  980. JSON.parse(_works[j].score).wScore;
  981. _chaptersJson.work[i].chapter[z].task[k].isScore++;
  982. }
  983. }
  984. }
  985. for (var j = 0; j < _comment.length; j++) {
  986. if (
  987. i == _comment[j].stage &&
  988. z == _comment[j].task &&
  989. k == _comment[j].tool
  990. ) {
  991. if (_comment[j].cType == 1) {
  992. _chaptersJson.work[i].chapter[z].task[k].likeCount++;
  993. }
  994. if (_comment[j].cType == 2) {
  995. _chaptersJson.work[i].chapter[z].task[k].commentCount++;
  996. }
  997. }
  998. }
  999. // if (_chaptersJson.chapter[i][z].indexOf(tools[k].tool[0]) == -1) {
  1000. // _chaptersJson.tool[i][z].push(tools[k].tool[0])
  1001. // }
  1002. _chaptersJson.chapter[i][z][k] = { tool: tools[k].tool[0] };
  1003. // _chaptersJson.tool[i][z][k] = { tool: tools[k].tool[0] };
  1004. _chaptersJson.tool[i].array[z].array[k] = {
  1005. tool: tools[k].tool[0],
  1006. };
  1007. }
  1008. }
  1009. }
  1010. _chaptersJson.state.learing =
  1011. _chaptersJson.state.stage - _chaptersJson.state.finish;
  1012. this.chaptersJson = _chaptersJson;
  1013. // debugger
  1014. })
  1015. .catch((err) => {
  1016. loading.close();
  1017. console.error(err);
  1018. });
  1019. },
  1020. getUser() {
  1021. let params = { uid: this.userid };
  1022. this.ajax
  1023. .get(this.$store.state.api + "getUser", params)
  1024. .then((res) => {
  1025. this.userinfo = res.data[0][0];
  1026. })
  1027. .catch((err) => {
  1028. console.error(err);
  1029. });
  1030. },
  1031. // getSName() {
  1032. // let params = {
  1033. // uid: JSON.stringify(this.courseDetail.course_student),
  1034. // };
  1035. // this.ajax
  1036. // .get(this.$store.state.api + "selectSName", params)
  1037. // .then((res) => {
  1038. // this.aStudentName = res.data[0];
  1039. // })
  1040. // .catch((err) => {
  1041. // console.error(err);
  1042. // });
  1043. // },
  1044. },
  1045. created() {
  1046. this.getCourseDetail();
  1047. this.getUser();
  1048. document.scrollingElement.scrollTop = 0;
  1049. // this.getSName();
  1050. },
  1051. };
  1052. </script>
  1053. <style scoped>
  1054. @media screen and (max-width: 1024px) {
  1055. .Tname {
  1056. width: 500px;
  1057. white-space: nowrap;
  1058. overflow: hidden;
  1059. text-overflow: ellipsis;
  1060. }
  1061. }
  1062. .body_student {
  1063. margin: 10px auto;
  1064. width: 98%;
  1065. height: 100%;
  1066. }
  1067. .student_head {
  1068. width: 100%;
  1069. background: #fff;
  1070. height: 30%;
  1071. position: relative;
  1072. }
  1073. .wheel {
  1074. width: 250px;
  1075. max-height: 146px;
  1076. display: flex;
  1077. align-items: center;
  1078. }
  1079. .man {
  1080. width: 16px;
  1081. height: 16px;
  1082. }
  1083. .wheel > img,
  1084. .man > img {
  1085. width: 100%;
  1086. height: 100%;
  1087. }
  1088. .box_course {
  1089. display: flex;
  1090. padding: 25px 0 20px 60px;
  1091. }
  1092. .right_box {
  1093. display: flex;
  1094. flex-direction: column;
  1095. margin-left: 30px;
  1096. align-items: flex-start;
  1097. width: calc(100% - 350px);
  1098. }
  1099. .right_box_title {
  1100. font-size: 23px;
  1101. max-width: calc(100% - 190px);
  1102. white-space: nowrap;
  1103. overflow: hidden;
  1104. text-overflow: ellipsis;
  1105. }
  1106. .people {
  1107. display: flex;
  1108. margin-top: 20px;
  1109. }
  1110. .person {
  1111. margin-left: 10px;
  1112. /* line-height: 18px; */
  1113. }
  1114. .now_study {
  1115. width: 150px;
  1116. height: 35px;
  1117. color: #fff;
  1118. background: #4a9eed;
  1119. text-align: center;
  1120. line-height: 35px;
  1121. border-radius: 5px;
  1122. font-size: 13px;
  1123. cursor: pointer;
  1124. margin-top: 30px;
  1125. }
  1126. .choose_who {
  1127. display: flex;
  1128. margin: 15px 0 0 25px;
  1129. }
  1130. .who_choose {
  1131. height: 28px;
  1132. cursor: pointer;
  1133. }
  1134. .choose_who > div:nth-child(2) {
  1135. margin-left: 35px;
  1136. }
  1137. .choose {
  1138. border-bottom: 5px solid #4a9eed;
  1139. color: #4a9eed;
  1140. }
  1141. .student_body {
  1142. display: flex;
  1143. }
  1144. .student_body,
  1145. .right {
  1146. width: 100%;
  1147. margin: 10px auto;
  1148. min-height: 688px;
  1149. }
  1150. .nav {
  1151. margin: auto 25px;
  1152. width: 80%;
  1153. padding-top: 5px;
  1154. text-indent: 25px;
  1155. }
  1156. .pic {
  1157. width: 100%;
  1158. display: flex;
  1159. flex-direction: row;
  1160. flex-wrap: wrap;
  1161. height: 100%;
  1162. justify-content: space-evenly;
  1163. }
  1164. .Img {
  1165. /*width: 30%; */
  1166. width: 300px;
  1167. margin: 20px 50px;
  1168. margin: 20px 10px;
  1169. border: 1px solid #dbdbdb;
  1170. border-radius: 5px;
  1171. overflow: hidden;
  1172. }
  1173. .Img > img {
  1174. width: 100%;
  1175. height: 100%;
  1176. }
  1177. .student_body_one,
  1178. .right_one {
  1179. width: 100%;
  1180. margin: 0 auto;
  1181. background: #fff;
  1182. margin-top: 10px;
  1183. min-height: 688px;
  1184. }
  1185. .student {
  1186. width: 85%;
  1187. display: flex;
  1188. flex-direction: row;
  1189. flex-wrap: wrap;
  1190. justify-content: flex-start;
  1191. margin: auto 10px;
  1192. }
  1193. .student > div {
  1194. width: 12%;
  1195. height: 35px;
  1196. background: #e3759a;
  1197. text-align: center;
  1198. border: 1px solid #e3759a;
  1199. border-radius: 5px;
  1200. color: #fff;
  1201. line-height: 35px;
  1202. margin: 10px;
  1203. }
  1204. .dialog_change >>> .el-dialog {
  1205. border-radius: 5px;
  1206. }
  1207. .dialog_change >>> .el-dialog__header {
  1208. background: #303030;
  1209. height: 36px;
  1210. line-height: 36px;
  1211. padding-left: 10px;
  1212. padding: 0px 10px 0px;
  1213. }
  1214. .dialog_change >>> .el-dialog__headerbtn {
  1215. top: 10px !important;
  1216. right: 10px !important;
  1217. }
  1218. .dialog_change >>> .el-dialog__title {
  1219. color: #fff;
  1220. font-size: 14px;
  1221. line-height: 5px;
  1222. }
  1223. .dialog_change >>> .el-dialog__body {
  1224. background: #f5f5f5;
  1225. }
  1226. .blue_box {
  1227. align-items: center;
  1228. display: flex;
  1229. flex-direction: column;
  1230. justify-content: center;
  1231. }
  1232. .blue_box,
  1233. .blue_box_one {
  1234. width: 30%;
  1235. height: 100px;
  1236. text-align: center;
  1237. color: #fff;
  1238. background-image: linear-gradient(90deg, #477cd7, #65b9fc);
  1239. border-radius: 15px;
  1240. margin: 15px 0 15px 15px;
  1241. cursor: pointer;
  1242. }
  1243. .blue_box_one {
  1244. width: 200px;
  1245. height: 200px;
  1246. background-image: linear-gradient(90deg, #477cd7, #65b9fc);
  1247. display: flex;
  1248. flex-direction: column;
  1249. flex-wrap: nowrap;
  1250. align-items: center;
  1251. justify-content: center;
  1252. }
  1253. .blue_box_one > div {
  1254. margin: 5px 0;
  1255. }
  1256. .blue_box_one > div:nth-child(1) {
  1257. font-size: 20px;
  1258. font-weight: bold;
  1259. }
  1260. .blue_box > div:nth-child(2) {
  1261. margin-top: 10px;
  1262. }
  1263. .blue_box_one > div:nth-child(2) {
  1264. white-space: nowrap;
  1265. text-overflow: ellipsis;
  1266. overflow: hidden;
  1267. word-break: break-all;
  1268. width: 100%;
  1269. text-align: center;
  1270. max-width: calc(100% - 85px);
  1271. margin: 0 auto;
  1272. }
  1273. .return {
  1274. background: #205cc6;
  1275. width: 70px;
  1276. height: 30px;
  1277. color: #fff;
  1278. text-align: center;
  1279. line-height: 32px;
  1280. margin-right: 20px;
  1281. cursor: pointer;
  1282. border-radius: 5px;
  1283. position: absolute;
  1284. right: 0;
  1285. top: 24px;
  1286. font-size: 14px;
  1287. }
  1288. .return > img {
  1289. width: 100%;
  1290. height: 100%;
  1291. }
  1292. .cType {
  1293. display: flex;
  1294. flex-direction: row;
  1295. justify-content: center;
  1296. align-items: center;
  1297. margin-top: 20px;
  1298. }
  1299. .cType > div > span {
  1300. font-size: 18px;
  1301. }
  1302. .type_children + .type_children {
  1303. margin-left: 10px;
  1304. }
  1305. .all_choose {
  1306. margin-right: 10px;
  1307. max-width: 250px;
  1308. white-space: nowrap;
  1309. overflow: hidden;
  1310. text-overflow: ellipsis;
  1311. }
  1312. .rightT {
  1313. display: flex;
  1314. flex-direction: row;
  1315. flex-wrap: nowrap;
  1316. align-items: center;
  1317. width: calc(100% - 20px);
  1318. }
  1319. .jd {
  1320. background: #4a9eed;
  1321. margin-left: 15px;
  1322. border-radius: 10px;
  1323. color: #fff;
  1324. width: 70px;
  1325. height: 25px;
  1326. text-align: center;
  1327. line-height: 25px;
  1328. }
  1329. .sLeft {
  1330. width: 14%;
  1331. margin-right: 10px;
  1332. background: rgb(255, 255, 255);
  1333. padding: 20px 15px 0 15px;
  1334. box-sizing: border-box;
  1335. border-radius: 10px;
  1336. }
  1337. .courseT {
  1338. border-left: 3px solid #2e66c9;
  1339. padding-left: 5px;
  1340. color: #2e66c9;
  1341. font-weight: bold;
  1342. }
  1343. .courseTd {
  1344. padding-top: 15px;
  1345. height: 700px;
  1346. overflow: auto;
  1347. word-break: break-word;
  1348. }
  1349. .courseTd::-webkit-scrollbar {
  1350. /*滚动条整体样式*/
  1351. width: 6px;
  1352. /*高宽分别对应横竖滚动条的尺寸*/
  1353. height: 6px;
  1354. }
  1355. /*定义滚动条轨道 内阴影+圆角*/
  1356. .courseTd::-webkit-scrollbar {
  1357. border-radius: 10px;
  1358. background-color: #eee;
  1359. }
  1360. /*定义滑块 内阴影+圆角*/
  1361. .courseTd::-webkit-scrollbar-thumb {
  1362. border-radius: 10px;
  1363. -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  1364. background-color: rgba(0, 0, 0, 0.1);
  1365. }
  1366. .rightTd,
  1367. .noBRight {
  1368. width: calc(100% - 14% - 10px);
  1369. background: #fff;
  1370. display: flex;
  1371. flex-direction: row;
  1372. flex-wrap: wrap;
  1373. align-content: flex-start;
  1374. align-items: center;
  1375. justify-content: flex-start;
  1376. }
  1377. .noBRight {
  1378. width: 100%;
  1379. }
  1380. .Tname {
  1381. margin-left: 40px;
  1382. word-break: break-all;
  1383. }
  1384. .detail {
  1385. width: 100%;
  1386. padding: 15px;
  1387. box-sizing: border-box;
  1388. }
  1389. .statebox {
  1390. display: flex;
  1391. align-items: center;
  1392. box-sizing: border-box;
  1393. margin-left: 30px;
  1394. }
  1395. .statebox div {
  1396. padding: 10px 20px;
  1397. border-radius: 5px;
  1398. background: #fff;
  1399. display: flex;
  1400. align-items: center;
  1401. }
  1402. .statebox div + div {
  1403. margin-left: 20px;
  1404. }
  1405. .statebox div span {
  1406. font-size: 16px;
  1407. display: flex;
  1408. align-items: center;
  1409. }
  1410. .statebox div span + span {
  1411. margin-left: 10px;
  1412. color: #1463eb;
  1413. }
  1414. .p_tool_box {
  1415. display: flex;
  1416. flex-wrap: wrap;
  1417. background: rgb(217, 227, 239);
  1418. /* color: #fff; */
  1419. padding: 0 15px 10px;
  1420. align-items: center;
  1421. justify-content: space-evenly;
  1422. border-radius: 5px;
  1423. height: 200px;
  1424. overflow: auto;
  1425. max-width: 150px;
  1426. }
  1427. .p_tool {
  1428. display: flex;
  1429. margin-top: 10px;
  1430. }
  1431. .p_tool > div {
  1432. display: flex;
  1433. flex-direction: column;
  1434. align-items: center;
  1435. min-width: 60px;
  1436. }
  1437. .p_tool > div img {
  1438. width: 50px;
  1439. height: 50px;
  1440. }
  1441. .p_tool > div > div {
  1442. margin-top: 5px;
  1443. font-size: 12px;
  1444. }
  1445. .p_tool_box2 {
  1446. padding: 10px 15px;
  1447. }
  1448. .p_tool2 {
  1449. margin-right: 20px;
  1450. display: flex;
  1451. flex-direction: column;
  1452. align-items: flex-start;
  1453. /* margin-bottom: 10px; */
  1454. }
  1455. .p_tool2 > div:nth-child(1) {
  1456. margin-bottom: 10px;
  1457. }
  1458. .toolBigBox {
  1459. display: flex;
  1460. flex-direction: column;
  1461. }
  1462. .toolSta {
  1463. display: flex;
  1464. margin: 20px 0 0;
  1465. }
  1466. .toolSta > div {
  1467. display: flex;
  1468. }
  1469. .toolSta > div + div {
  1470. margin-left: 50px;
  1471. }
  1472. .toolSta > div > div:nth-child(1) {
  1473. margin: 10px 10px 0 0;
  1474. }
  1475. .blueBtn {
  1476. background: rgb(79, 140, 223);
  1477. color: #fff;
  1478. display: flex;
  1479. padding: 10px 15px;
  1480. /* min-width: 150px; */
  1481. min-width: 165px;
  1482. font-size: 16px;
  1483. align-items: center;
  1484. border-radius: 5px;
  1485. }
  1486. .toolSta > div > div:nth-child(2) > div + div {
  1487. margin-top: 10px;
  1488. }
  1489. .toolSta > div > div:nth-child(2) > div > div + div {
  1490. margin: 0 20px;
  1491. }
  1492. .p_tool2 .toolbox {
  1493. display: flex;
  1494. align-items: center;
  1495. margin-top: 10px;
  1496. }
  1497. .p_tool2 .toolbox > div {
  1498. font-size: 16px;
  1499. font-weight: bold;
  1500. }
  1501. .checkBox {
  1502. display: flex;
  1503. padding: 20px 0 0 20px;
  1504. box-sizing: border-box;
  1505. width: 100%;
  1506. }
  1507. .checkBox span {
  1508. padding: 0 10px 5px;
  1509. cursor: pointer;
  1510. font-size: 18px;
  1511. }
  1512. .checkBox span + span {
  1513. margin-left: 20px;
  1514. }
  1515. .checkBox .active {
  1516. border-bottom: 2px solid rgb(75, 151, 229);
  1517. cursor: pointer;
  1518. }
  1519. .detail_box {
  1520. background-color: rgb(231, 240, 247);
  1521. padding: 15px 20px;
  1522. box-sizing: border-box;
  1523. width: 100%;
  1524. }
  1525. .detail_box + .detail_box {
  1526. margin-top: 20px;
  1527. }
  1528. .detail_box .title {
  1529. display: flex;
  1530. align-items: center;
  1531. }
  1532. .detail_box .title > span:nth-child(1) {
  1533. font-size: 20px;
  1534. display: flex;
  1535. align-items: center;
  1536. }
  1537. .detail_box .box {
  1538. margin-top: 20px;
  1539. background-color: #fff;
  1540. padding: 15px 20px;
  1541. border-radius: 5px;
  1542. /* width: 100%; */
  1543. box-sizing: border-box;
  1544. overflow: auto;
  1545. }
  1546. .progress {
  1547. display: -webkit-box;
  1548. display: -ms-flexbox;
  1549. width: 100%;
  1550. overflow: auto;
  1551. padding: 15px 0;
  1552. }
  1553. .chapter {
  1554. margin-right: 30px;
  1555. min-width: 180px;
  1556. }
  1557. .chapter + .chapter {
  1558. padding-left: 10px;
  1559. border-left: 1px solid rgb(220, 220, 220);
  1560. }
  1561. .chapter .stage {
  1562. width: 100%;
  1563. color: #fff;
  1564. background: linear-gradient(90deg, #477cd7, #65b9fc);
  1565. border-radius: 5px;
  1566. height: 50px;
  1567. line-height: 50px;
  1568. font-size: 18px;
  1569. text-align: center;
  1570. min-width: 180px;
  1571. }
  1572. .chapter .task {
  1573. display: flex;
  1574. width: 100%;
  1575. min-width: 180px;
  1576. }
  1577. .chapter .task .taskBox {
  1578. min-width: 180px;
  1579. height: 100%;
  1580. }
  1581. .chapter .task .taskBox + .taskBox {
  1582. margin-left: 10px;
  1583. }
  1584. .chapter .task .taskBox .taskName {
  1585. text-align: center;
  1586. margin: 10px 0;
  1587. display: flex;
  1588. flex-direction: row;
  1589. flex-wrap: nowrap;
  1590. align-items: center;
  1591. min-width: 180px;
  1592. width: 100%;
  1593. }
  1594. .toolIcon::before {
  1595. content: "";
  1596. width: 26px;
  1597. height: 26px;
  1598. display: inline-block;
  1599. background-image: url(../assets/icon/toolion.png);
  1600. background-size: 100% 100%;
  1601. }
  1602. .toolIcon::before {
  1603. content: "";
  1604. width: 26px;
  1605. height: 26px;
  1606. display: inline-block;
  1607. background-image: url(../assets/icon/toolion.png);
  1608. background-size: 100% 100%;
  1609. }
  1610. .taskIcon::before {
  1611. content: "";
  1612. width: 26px;
  1613. height: 26px;
  1614. display: inline-block;
  1615. background-image: url(../assets/icon/task.png);
  1616. background-size: 100% 100%;
  1617. }
  1618. .finishIcon::before {
  1619. content: "";
  1620. width: 26px;
  1621. height: 26px;
  1622. display: inline-block;
  1623. background-image: url(../assets/icon/finish.png);
  1624. background-size: 100% 100%;
  1625. }
  1626. .learningIcon::before {
  1627. content: "";
  1628. width: 22px;
  1629. height: 22px;
  1630. display: inline-block;
  1631. background-image: url(../assets/icon/learning.png);
  1632. background-size: 100% 100%;
  1633. }
  1634. .frequencyIcon::before {
  1635. content: "";
  1636. width: 26px;
  1637. height: 26px;
  1638. display: inline-block;
  1639. background-image: url(../assets/icon/frequency.png);
  1640. background-size: 100% 100%;
  1641. }
  1642. .timeIcon::before {
  1643. content: "";
  1644. width: 26px;
  1645. height: 26px;
  1646. display: inline-block;
  1647. background-image: url(../assets/icon/time.png);
  1648. background-size: 100% 100%;
  1649. }
  1650. .chapter_time_box {
  1651. border-left: 5px solid #f0f0f0;
  1652. padding: 0 30px;
  1653. box-sizing: border-box;
  1654. margin-top: 35px;
  1655. }
  1656. .c_box {
  1657. padding-top: 40px;
  1658. position: relative;
  1659. margin-top: 45px;
  1660. }
  1661. .c_box .stage_box {
  1662. display: flex;
  1663. align-items: center;
  1664. position: absolute;
  1665. top: -20px;
  1666. left: -45px;
  1667. }
  1668. .c_box .stage_box .yuan {
  1669. width: 25px;
  1670. height: 25px;
  1671. background: rgb(244, 244, 244);
  1672. border-radius: 25px;
  1673. display: flex;
  1674. align-items: center;
  1675. justify-content: center;
  1676. margin-right: 10px;
  1677. }
  1678. .c_box .stage_box .yuan::before {
  1679. content: "";
  1680. width: 15px;
  1681. height: 15px;
  1682. background: rgb(59, 149, 238);
  1683. border-radius: 25px;
  1684. }
  1685. .c_box .stage_box .stage {
  1686. background: linear-gradient(90deg, #477cd7, #65b9fc);
  1687. border-radius: 5px;
  1688. height: 50px;
  1689. line-height: 50px;
  1690. font-size: 18px;
  1691. color: #fff;
  1692. width: fit-content;
  1693. padding: 0 20px;
  1694. }
  1695. .s_up {
  1696. cursor: pointer;
  1697. transition: all 0.5s;
  1698. }
  1699. .s_up img {
  1700. width: 35px;
  1701. }
  1702. .s_up2 {
  1703. transform: rotate(90deg);
  1704. }
  1705. .lineBox {
  1706. width: 5px;
  1707. height: 20px;
  1708. background-image: linear-gradient(180deg, #3c65ba, #a1c6ec);
  1709. margin-right: 5px;
  1710. }
  1711. .disCss {
  1712. display: flex;
  1713. flex-direction: row;
  1714. flex-wrap: nowrap;
  1715. align-items: center;
  1716. }
  1717. .disCss > div {
  1718. margin: 10px 10px 0 0;
  1719. }
  1720. .titleCss {
  1721. text-align: center;
  1722. max-width: 100px;
  1723. white-space: nowrap;
  1724. overflow: hidden;
  1725. text-overflow: ellipsis;
  1726. word-break: break-word;
  1727. margin-left: 10px;
  1728. }
  1729. .navIndex {
  1730. border-bottom: 1px solid #d7d7d7;
  1731. padding-bottom: 5px;
  1732. background: #96d1ff;
  1733. width: 55px;
  1734. min-width: 55px;
  1735. border-radius: 5px;
  1736. color: #fff;
  1737. text-align: center;
  1738. height: 20px;
  1739. line-height: 26px;
  1740. font-size: 14px;
  1741. }
  1742. </style>