12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561 |
- <template>
- <div
- style="
- background: rgb(230, 234, 240);
- width: 100%;
- margin: 0;
- position: relate;
- height: 100%;
- "
- >
- <div class="blackBottom">
- <div
- style="
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: stretch;
- padding-left: 10px;
- "
- >
- <div class="logoLive">
- <img src="../assets/icon/logo.png" alt />
- </div>
- <div style="color: #fff; line-height: 45px; padding-left: 15px">
- introduce a festival (Final)
- </div>
- </div>
- </div>
- <div class="isNoOther">
- <div
- class="imgMiddle"
- :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'"
- v-show="!full"
- >
- <pdf
- :pdfUrl="pdfUrl"
- style="width: 100%; height: 100%"
- :ppage="ppage"
- @getPageTotal="getPageTotal"
- @getWidth="getWidth"
- ></pdf>
- <div
- class="workd_media"
- style="height: 100%"
- v-if="videoBlock == 6"
- :style="{ width: Vwidth }"
- >
- <video-player
- class="video-player vjs-custom-skin"
- :playsinline="true"
- :options="playerO[0]"
- ref="zVideo"
- @play="onPlayerPlay($event)"
- style="width: 100%; height: 100%"
- ></video-player>
- </div>
- <div class="video_wrapper" v-if="videoBlock == 6"></div>
- </div>
- <div
- style="
- background: #d0d6e4;
- width: 40%;
- height: 100%;
- max-width: 40%;
- overflow: auto;
- "
- :class="{ fullStyle: full }"
- v-if="isBlock > 0"
- >
- <div
- style="
- background: #fff;
- width: 96%;
- margin: 10px auto;
- height: 96%;
- position: relative;
- "
- >
- <div
- style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
- v-if="isBlock == 3"
- >
- 课堂评价
- </div>
- <div
- style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
- v-if="isBlock == 8"
- >
- 根据题目选择对应的答案
- </div>
- <div
- style="
- margin-left: 25px;
- border-bottom: 3px solid #2c83ee;
- width: 70px;
- padding-bottom: 3px;
- text-align: center;
- padding-top: 15px;
- "
- v-if="isBlock == 1"
- >
- 开始答题
- </div>
- <div class="answerBox" v-if="isBlock == 1">
- <div class="answerBox">
- <div
- style="
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- "
- v-for="item in 1"
- :key="item"
- >
- <div class="choose_style">
- <span
- @click="isChooseActive(1)"
- :class="typeC.indexOf(1) != -1 ? 'isChoose' : ''"
- v-if="
- tools[ppage - 1].choice && tools[ppage - 1].choice > 0
- "
- >A</span
- >
- <span
- @click="isChooseActive(2)"
- :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
- v-if="
- tools[ppage - 1].choice && tools[ppage - 1].choice > 1
- "
- >B</span
- >
- <span
- @click="isChooseActive(3)"
- :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
- v-if="
- tools[ppage - 1].choice && tools[ppage - 1].choice > 2
- "
- >C</span
- >
- <span
- @click="isChooseActive(4)"
- :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
- v-if="
- tools[ppage - 1].choice && tools[ppage - 1].choice > 3
- "
- >D</span
- >
- </div>
- <el-button style="margin: 0 auto" @click="showMember(item)"
- >提交</el-button
- >
- </div>
- </div>
- </div>
- <div
- class="answerBox tools_box"
- v-if="isBlock == 4"
- style="padding: 10px 0 0 25px; width: 100%; max-width: 100%"
- >
- <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
- <div
- style="
- margin: 20px 0 20px 0;
- border-bottom: 4px solid #3e86f3;
- width: 75px;
- text-align: center;
- padding-bottom: 3px;
- "
- >
- 选择工具
- </div>
- <div
- style="
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- width: 100%;
- justify-content: flex-start;
- align-items: center;
- "
- >
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(1) != -1
- "
- @click="checkTools(1)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/secondToolList/whiteBoard.png" alt />
- <div>电子白板</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(3) != -1
- "
- @click="checkTools(3)"
- class="toolCss"
- >
- <div class="toolImg">
- <img
- src="../assets/icon/secondToolList/mindMapping.png"
- alt
- />
- <div>思维导图</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(28) != -1
- "
- @click="checkTools(28)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/thirdToolList/translation.png" alt />
- <div>翻译</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(4) != -1
- "
- @click="checkTools(4)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/thirdToolList/ask.png" alt />
- <div>问卷调查</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(6) != -1
- "
- @click="checkTools(6)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/secondToolList/doc.png" alt />
- <div>协同文档</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(7) != -1
- "
- @click="checkTools(7)"
- class="toolCss"
- >
- <div class="toolImg">
- <img
- src="../assets/icon/secondToolList/mindNetwork.png"
- alt
- />
- <div>思维网格</div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(16) != -1
- "
- @click="addImg($event)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/firstToolList/myMessage.png" alt />
- <div>
- 上传文件
- <input
- type="file"
- accept="image/*"
- capture="camera"
- style="display: none"
- @change="beforeUpload1($event, 1)"
- />
- </div>
- </div>
- </div>
- <div
- v-if="
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(29) != -1
- "
- @click="addImg($event)"
- class="toolCss"
- >
- <div class="toolImg">
- <img src="../assets/icon/firstToolList/myMessage.png" alt />
- <div>
- 上传视频
- <input
- type="file"
- accept="video/mp4, video/quicktime, video/x-msvideo"
- capture="camera"
- style="display: none"
- @change="beforeUpload1($event, 2)"
- />
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- class="answerBox"
- style="height: 100%"
- v-if="isBlock == 2"
- ref="qrcodePicture"
- >
- <div style="height: 100%; width: 100%">
- <div v-if="toolCount == 1" class="tools_child_box">
- <div class="tools_title">
- <span>电子白板</span>
- <div>
- <img
- src="../assets/full.png"
- class="full"
- @click="fullTools"
- />
- </div>
- </div>
- <iframe
- webkitallowfullscreen
- mozallowfullscreen
- allowfullscreen
- style="width: 100%; height: 100%; border: none"
- src="https://iwb.cocorobo.cn/"
- ref="whiteBoard"
- ></iframe>
- </div>
- <div v-if="toolCount == 3" class="tools_child_box">
- <div class="tools_title">
- <span>思维导图</span>
- <div>
- <img
- src="../assets/full.png"
- class="full"
- @click="fullTools"
- />
- </div>
- </div>
- <iframe
- webkitallowfullscreen
- mozallowfullscreen
- allowfullscreen
- style="width: 100%; height: 100%; border: none"
- src="//cloud.cocorobo.cn/kityminder-editor/dist/index.html"
- ref="mind"
- ></iframe>
- </div>
- <div v-if="toolCount == 28" class="tools_child_box">
- <div class="tools_title">
- <span>翻译</span>
- <div>
- <img
- src="../assets/full.png"
- class="full"
- @click="fullTools"
- />
- </div>
- </div>
- <iframe
- webkitallowfullscreen
- mozallowfullscreen
- allowfullscreen
- style="width: 100%; height: 100%; border: none"
- src="//dict.youdao.com/"
- ref="mind"
- ></iframe>
- </div>
- <div v-if="toolCount == 6" class="tools_child_box">
- <div class="tools_title">
- <span>协同文档</span>
- <div>
- <img
- src="../assets/full.png"
- class="full"
- @click="fullTools"
- />
- </div>
- </div>
- <iframe
- webkitallowfullscreen
- mozallowfullscreen
- allowfullscreen
- style="width: 100%; height: 100%; border: none"
- src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
- ></iframe>
- </div>
- <div v-if="toolCount == 7" class="tools_child_box">
- <div class="tools_title">
- <span>思维网格</span>
- <div>
- <img
- src="../assets/full.png"
- class="full"
- @click="fullTools"
- />
- </div>
- </div>
- <iframe
- webkitallowfullscreen
- mozallowfullscreen
- allowfullscreen
- style="width: 100%; height: 100%; border: none"
- src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
- ref="grid"
- ></iframe>
- </div>
- <div
- id="shishi_loading"
- style="
- width: 100%;
- height: 100%;
- background: #0000008f;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 99999999999999;
- display: none;
- justify-content: center;
- align-items: center;
- "
- >
- <div
- style="
- color: #fff;
- padding: 15px;
- background: #00000070;
- border-radius: 5px;
- font-size: 18px;
- display: flex;
- align-items: center;
- "
- >
- <img
- src="https://pbl.cocorobo.cn/pbl-student-table/dist/js/loading.gif"
- alt
- style="width: 26px; margin-right: 10px"
- />
- <span>上传中...</span>
- </div>
- </div>
- <!-- <div class="nextStepBox">
- <div class="nextStepOne" @click="(isBlock = 4), (full = false)">
- 返回
- </div>
- </div> -->
- <div
- class="nextStepOne"
- style="float: right"
- @click="addJtWork(4)"
- v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
- >
- 截图
- </div>
- <!-- <div
- class="nextStepOne"
- style="float: right"
- @click="addImg($event)"
- v-if="toolCount == 1 || toolCount == 3 || toolCount == 7"
- >
- 上传文件
- <input
- type="file"
- accept="image/png, image/gif, image/jpeg"
- style="display: none"
- @change="beforeUpload1($event, 1)"
- />
- </div>-->
- </div>
- </div>
- <div
- class="answerBox"
- v-if="
- isBlock == 3 &&
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(14) != -1
- "
- style="padding: 0 0 0 25px"
- >
- <div>
- <div
- class="score_box"
- v-for="(ra, raIndex) in tools[ppage - 1].rateArray"
- :key="raIndex"
- >
- <span>{{ ra }} </span>
- <el-rate v-model="rateList[raIndex]"></el-rate>
- </div>
- </div>
- <span
- slot="footer"
- class="dialog-footer sztFooter"
- style="
- padding: 0 0 30px 0px;
- position: absolute;
- right: 20px;
- bottom: 0;
- "
- >
- <!-- <el-button @click="isBlock = 0">取消</el-button> -->
- <el-button type="primary" @click="addWork(6)">确定</el-button>
- </span>
- </div>
- <div
- class="answerBox"
- v-if="
- isBlock == 8 &&
- tools[ppage - 1].tools &&
- tools[ppage - 1].tools.indexOf(27) != -1
- "
- style="padding: 0 0 0 25px"
- >
- <div>
- <div
- v-for="(tk, tIndex) in tools[ppage - 1].choice"
- :key="tIndex"
- class="tkCss"
- >
- <div style="margin-right: 10px; font-size: 18px">
- {{ tIndex + 1 }}、
- </div>
- <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案">
- <el-option
- v-for="(tkA, tkAIndex) in tools[ppage - 1].tkAnswerBox"
- :key="tkAIndex"
- :label="tkA"
- :value="tkA"
- ></el-option>
- </el-select>
- <span
- v-if="tiankongAnswer.length && isNoHomeWork"
- class="tiankongAnswer"
- :class="{
- tfalse: tiankongAnswer[tIndex] != tkAnswer[tIndex],
- }"
- >正确答案:{{ tiankongAnswer[tIndex] }}</span
- >
- </div>
- </div>
- <span
- slot="footer"
- class="dialog-footer sztFooter"
- style="
- padding: 0 0 30px 0px;
- position: absolute;
- right: 20px;
- bottom: 0;
- "
- >
- <!-- <el-button @click="isBlock = 0">取消</el-button> -->
- <el-button type="primary" @click="addWork(5)">提交</el-button>
- </span>
- </div>
- <div
- class="answerBox"
- v-if="isBlock == 5"
- style="padding: 10px 0 0 25px"
- >
- <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
- <div
- style="
- margin: 20px 0 20px 0;
- border-bottom: 4px solid #3e86f3;
- width: 75px;
- text-align: center;
- padding-bottom: 3px;
- "
- >
- 选择附件
- </div>
- <div
- style="
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- width: 100%;
- justify-content: flex-start;
- align-items: center;
- "
- >
- <div
- v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
- class="fileBox"
- >
- <div
- class="fileListCss"
- v-for="(v, vIndex) in videoList"
- :key="vIndex"
- >
- <div class="fileCss" @click="playVideo(v.src, vIndex)">
- <img src="../assets/uploadMp4.png" alt />
- </div>
- <div>{{ v.name }}</div>
- </div>
- <div
- class="fileListCss"
- v-for="(f, fIndex) in fileList"
- :key="fIndex"
- >
- <div class="fileCss" @click="openFile(f.src)">
- <img src="../assets/file.png" alt />
- </div>
- <div>{{ f.name }}</div>
- </div>
- </div>
- </div>
- <!-- <div class="nextStepBox">
- <div class="nextStepOne" @click="isBlock = 0">关闭</div>
- </div>-->
- </div>
- <!-- <div class="answerBox" :class="{ fullStyle: full }" v-if="isBlock == 6">
- <div style="height: 70%; width: 100%">
- <div class="wheel">
- <div class="workd_media" style="height: 100%">
- <video-player
- class="video-player vjs-custom-skin"
- :playsinline="true"
- :options="playerO[0]"
- @play="onPlayerPlay($event)"
- style="width: 90%; height: 100%; margin: 0 0 0 30px"
- ></video-player>
- </div>
- </div>
- </div>
- </div>-->
- <div
- class="answerBox"
- style="height: 100%"
- :class="{ fullStyle: full }"
- v-if="isBlock == 7"
- >
- <div style="height: 70%; width: 100%">
- <div class="wheel" style="height: 520px; width: 100%">
- <iframe
- style="width: 100%; height: 100%; border: none"
- :src="pptImgUrl"
- ></iframe>
- </div>
- <div class="nextStepBox" style="margin-top: 5%">
- <div class="nextStepOne" @click="isBlock = 5">返回</div>
- </div>
- </div>
- </div>
- <div
- class="answerBox"
- :class="{ fullStyle: full }"
- v-if="isBlock == 9"
- >
- <div style="height: 70%; width: 100%">
- <div class="wheel">
- <div style="height: 100%">
- <audio
- style="margin: 0 auto; display: block"
- :src="audioUrl"
- controls="controls"
- ref="audio"
- >
- Your browser does not support the audio element.
- </audio>
- </div>
- </div>
- <!-- <div class="nextStepBox" style="margin-top: 5%">
- <div class="nextStepOne" @click="isBlock = 0">关闭</div>
- </div>-->
- </div>
- </div>
- <div
- class="answerBox"
- :class="{ fullStyle: full }"
- v-if="isBlock == 10"
- >
- <div style="height: 70%; width: 100%">
- <div class="wheel">
- <div style="height: 100%">
- <el-button type="primary" @click="startRecorder()">{{
- !isRecord ? "开始录音" : "结束录音"
- }}</el-button>
- <el-button type="primary" @click="playRecorder()">{{
- !isPlayerRecord ? "录音播放" : "停止播放"
- }}</el-button>
- <el-button type="primary" @click="getMp3Data()"
- >上传录音</el-button
- >
- <div
- style="
- margin: 10px auto 0;
- display: flex;
- align-items: center;
- "
- v-if="LuAudioUrl"
- >
- <span>已上传录音:</span>
- <audio :src="LuAudioUrl" controls="controls" ref="audio">
- Your browser does not support the audio element.
- </audio>
- </div>
- </div>
- </div>
- <!-- <div class="nextStepBox" style="margin-top: 5%">
- <div class="nextStepOne" @click="isBlock = 0">关闭</div>
- </div>-->
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="blackBottomB" v-if="false">
- <!-- <div
- class="nextStepOne"
- style="float: right"
- @click="addImg($event)"
- v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(16) != -1"
- >
- 上传文件
- <input
- type="file"
- accept="image/png, image/gif, image/jpeg"
- style="display: none"
- @change="beforeUpload1($event, 1)"
- />
- </div>
- <div
- class="nextStepOne"
- style="float: right"
- @click="addImg($event)"
- v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(29) != -1"
- >
- 上传视频
- <input
- type="file"
- accept="video/mp4, video/quicktime, video/x-msvideo"
- style="display: none"
- @change="beforeUpload1($event, 2)"
- />
- </div>-->
- </div>
- <div v-if="proVisible" class="mask">
- <div class="progressBox">
- <div class="lbox">
- <img src="../assets/loading.gif" />上传中,请稍后
- </div>
- <el-progress
- :text-inside="true"
- :stroke-width="20"
- :percentage="progress"
- style="width: 80%"
- ></el-progress>
- </div>
- </div>
- <el-dialog
- :visible.sync="dialogVisible"
- :append-to-body="true"
- width="500px"
- :before-close="handleClose"
- class="dialog_diy"
- >
- <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
- 提交成功
- </div>
- <div
- style="
- width: 200px;
- background: #4d8ae0;
- height: 35px;
- margin: 0 auto;
- text-align: center;
- line-height: 35px;
- color: #fff;
- border-radius: 5px;
- cursor: pointer;
- "
- @click="dialogVisible = false"
- >
- 确定
- </div>
- </el-dialog>
- <el-dialog
- :visible.sync="dialogVisiblePick"
- :append-to-body="true"
- width="500px"
- class="dialog_diy"
- :close-on-click-modal="false"
- >
- <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
- 你被老师点名起来回答了!!!
- </div>
- <div
- style="
- width: 200px;
- background: #4d8ae0;
- height: 35px;
- margin: 0 auto;
- text-align: center;
- line-height: 35px;
- color: #fff;
- border-radius: 5px;
- cursor: pointer;
- "
- @click="pick2"
- >
- 确定
- </div>
- </el-dialog>
- <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
- </div>
- </template>
- <script>
- import pdf from "./components/pdf";
- import html2canvas from "html2canvas";
- import Recorder from "js-audio-recorder";
- const lamejs = require("lamejs");
- const recorder = new Recorder({
- sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
- sampleRate: 48000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
- numChannels: 1, // 声道,支持 1 或 2, 默认是1
- // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换,默认是false
- });
- // 绑定事件-打印的是当前录音数据
- recorder.onprogress = function (params) {
- // console.log('--------------START---------------')
- // console.log('录音时长(秒)', params.duration);
- // console.log('录音大小(字节)', params.fileSize);
- // console.log('录音音量百分比(%)', params.vol);
- // console.log('当前录音的总数据([DataView, DataView...])', params.data);
- // console.log('--------------END---------------')
- };
- export default {
- components: {
- pdf,
- },
- data() {
- return {
- iframeInnerHtml: "",
- pdfUrl:
- "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E4%B8%8A%E8%AF%BE%E8%AF%BE%E4%BB%B6---%E4%BA%94%E4%B8%8Bintroduce%20a%20festival%20%28Final%20%29%281%291661829428281.pdf",
- pptImgUrl: "",
- ppage: 2,
- full: false,
- pageTotal: 0,
- howTools: 0,
- toolsList: [],
- timer: null,
- isLoading: false,
- formLabelWidth: "100px",
- userid: this.$route.query.userid,
- cid: this.$route.query.courseId,
- oid: this.$route.query.oid,
- mr: require("../assets/kc1.png"),
- timu: [],
- dialogVisible: false,
- dialogVisiblePick: false,
- answerBox: "",
- isNoHomeWork: false,
- answer: [
- { name: "A.1568" },
- { name: "B.720" },
- { name: "C.1728" },
- { name: "D.480" },
- ],
- steps: 0,
- isBlock: 0,
- isNext: false,
- isAnswer: false,
- upload: [
- {
- url: "",
- },
- ],
- noneBtnImg: false,
- proVisible: false,
- progress: 0,
- typeC: [],
- toolCount: 0,
- tools: [
- {}, //tools: [30]
- // {
- // file: [
- // {
- // name: "音频1.MP3",
- // src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E6%9F%B3%E8%BD%BB%E9%A2%82%20-%20%E6%BA%AF%EF%BC%88%E9%92%A2%E7%90%B4%E7%89%88%EF%BC%891661673251415.mp3",
- // },
- // ],
- // }
- "",
- {
- file: [
- {
- name: "视频1.mp4",
- src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
- },
- ],
- },
- "", //问答题
- { tools: [9], choice: 3, answer: [2, 3] },
- { tools: [9], choice: 3, answer: [2] }, //协同文档
- { tools: [9], choice: 3, answer: [3] }, //思维导图
- { tools: [9], choice: 3, answer: [1] },
- { tools: [9], choice: 3, answer: [2] },
- { tools: [12] },
- {
- tools: [27],
- answer: [
- "Time",
- "Weather",
- "Activities before the festival",
- "Activities during the festival",
- "Food",
- "Reason",
- "Feelings",
- ],
- choice: 7,
- tkAnswerBox: [
- "Feelings",
- "Weather",
- "Activities before the festival",
- "Origin",
- "Food",
- "Time",
- "Activities during the festival",
- "Reason",
- ],
- },
- {
- file: [
- {
- name: "视频2.mp4",
- src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
- },
- ],
- },
- { tools: [9] },
- { tools: [3] },
- { tools: [16] },
- {
- tools: [14],
- rateArray: [
- "聚焦主题",
- "有开头结尾",
- "语言正确,流畅",
- "书写规范,美观",
- ],
- },
- "",
- "",
- { tools: [29] },
- "",
- "",
- //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
- ],
- rateList: [],
- tkAnswerBox: [],
- tkAnswer: [],
- imgUrl: "",
- imgFile: "",
- imgFileUp: [],
- videoList: [],
- videoList2: [],
- audioUrl: "",
- fileList: [],
- playerOptions: {
- playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
- autoplay: false, //如果true,浏览器准备好时开始回放。
- muted: false, // 默认情况下将会消除任何音频。
- loop: false, // 导致视频一结束就重新开始。
- preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
- language: "zh-CN",
- aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
- fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
- sources: [
- {
- type: "video/mp4", //这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目 || "video/ogg"|| "video/webm"
- src: "", //url地址require("../../assets/media/aaa.mp4")
- },
- ],
- // poster: require("../../assets/tu31.png"), //你的封面地址
- // poster: dataRes.imgUrl, //你的封面地址
- notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
- controlBar: {
- timeDivider: true, //当前时间和持续时间的分隔符
- durationDisplay: true, //显示持续时间
- remainingTimeDisplay: false, //是否显示剩余时间功能
- fullscreenToggle: true, //全屏按钮
- },
- },
- playerO: {},
- videoindex: 0,
- videoBlock: 0,
- Vwidth: 0,
- tiankongAnswer: [],
- LuAudioUrl: "",
- isRecord: false,
- isPlayerRecord: false,
- handle: {},
- };
- },
- methods: {
- // 开始录音
- startRecorder() {
- let _this = this;
- if (!_this.isRecord) {
- recorder.destroy(); // 销毁录音
- _this.isRecord = true;
- recorder.start().then(
- () => {},
- (error) => {
- _this.$message.error(`${error.name} : ${error.message}`);
- // 出错了
- console.log(`${error.name} : ${error.message}`);
- }
- );
- } else {
- _this.isRecord = false;
- recorder.stop(); // 结束录音
- }
- },
- // 录音播放
- playRecorder() {
- if (!recorder.fileSize) {
- return;
- }
- if (!this.isPlayerRecord) {
- this.isPlayerRecord = true;
- recorder.play();
- } else {
- this.isPlayerRecord = false;
- recorder.stopPlay(); // 停止录音播放
- }
- recorder.onplayend = () => {
- this.isPlayerRecord = false;
- console.log("onplayend");
- };
- },
- /**
- * 文件格式转换 wav-map3
- * */
- getMp3Data() {
- if (!recorder.fileSize) {
- this.$message.error("请录音后在上传语音");
- return;
- }
- const mp3Blob = this.convertToMp3(recorder.getWAV());
- let audioFile = this.dataURLtoAudio(mp3Blob, "音频");
- console.log(audioFile);
- this.beforeUpload1(audioFile, 3);
- // recorder.download(mp3Blob, "recorder", "mp3");
- },
- convertToMp3(wavDataView) {
- // 获取wav头信息
- const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息,毕竟有对应的config配置
- const { channels, sampleRate } = wav;
- const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
- // 获取左右通道数据
- const result = recorder.getChannelData();
- const buffer = [];
- const leftData =
- result.left &&
- new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
- const rightData =
- result.right &&
- new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
- const remaining = leftData.length + (rightData ? rightData.length : 0);
- const maxSamples = 1152;
- for (let i = 0; i < remaining; i += maxSamples) {
- const left = leftData.subarray(i, i + maxSamples);
- let right = null;
- let mp3buf = null;
- if (channels === 2) {
- right = rightData.subarray(i, i + maxSamples);
- mp3buf = mp3enc.encodeBuffer(left, right);
- } else {
- mp3buf = mp3enc.encodeBuffer(left);
- }
- if (mp3buf.length > 0) {
- buffer.push(mp3buf);
- }
- }
- const enc = mp3enc.flush();
- if (enc.length > 0) {
- buffer.push(enc);
- }
- return new Blob(buffer, { type: "audio/mp3" });
- },
- dataURLtoAudio(blob, filename) {
- return new File([blob], filename, { type: "audio/mp3" });
- },
- change(val) {
- console.log(val);
- },
- goTo(path) {
- this.$router.push(path);
- },
- tableRowClassName({ row, rowIndex }) {
- if ((rowIndex + 1) % 2 === 0) {
- return "even_row";
- } else {
- return "";
- }
- },
- jump(cid) {
- window.parent.postMessage({ cid: cid, type: "1" }, "*");
- },
- handleCurrentChange(val) {
- // console.log(`当前页: ${val}`);
- this.page = val;
- },
- init() {},
- handleClose(done) {
- done();
- },
- handleRemove(file, fileList) {
- console.log(file, fileList);
- },
- onExceed() {
- this.$message.error("课程海报仅支持上传一张,请删除后再进行上传");
- },
- //uuid生成
- guid() {
- return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
- /[xy]/g,
- function (c) {
- var r = (Math.random() * 16) | 0,
- v = c == "x" ? r : (r & 0x3) | 0x8;
- return v.toString(16);
- }
- );
- },
- time() {
- if (!this.now) {
- this.now = new Date().getTime();
- return true;
- } else {
- let time = new Date().getTime();
- if (time - this.now > 3000) {
- this.now = time;
- return true;
- } else {
- return false;
- }
- }
- },
- // answerWork() {
- // this.steps++;
- // },
- addTool(t) {
- if (t == 1) {
- window.parent.postMessage({ tools: "1" }, "*");
- } else if (t == 3) {
- window.parent.postMessage({ tools: "3" }, "*");
- } else if (t == 7) {
- window.parent.postMessage({ tools: "7" }, "*");
- }
- },
- answerQue() {
- this.dialogVisible = true;
- },
- isChooseActive(t) {
- if (this.typeC.length == 0) {
- this.typeC.push(t);
- } else {
- if (this.typeC.indexOf(t) != -1) {
- this.typeC.splice(this.typeC.indexOf(t), 1);
- } else {
- this.typeC.push(t);
- }
- }
- },
- showMember(i) {
- if (this.typeC.length > 0) {
- this.addWork(1);
- } else {
- this.$message.error("至少选择一个答案!");
- }
- },
- clean(type) {
- if (type == 1) {
- this.upload[0].url.splice(0, 1);
- } else if (type == 2) {
- this.upload[0].upVedio.splice(0, 1);
- }
- },
- addImg(e) {
- var el = e.currentTarget;
- el.getElementsByTagName("input")[0].click();
- },
- imgChange(file, fileList, type) {
- if (type == 1) {
- var _tmp = this.upload[0].url;
- } else if (type == 2) {
- // var _tmp = this.upload[0].upVedio;
- var _tmp = this.upload[0].url;
- } else if (type == 100) {
- var _tmp = this.imgFileUp;
- }
- this.noneBtnImg = _tmp.length >= 1;
- },
- beforeUpload1(event, type) {
- var file;
- if (type == 3) {
- file = event;
- } else {
- file = event.target.files[0];
- }
- var credentials = {
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
- secretAccessKey: "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",
- }; //秘钥形式的登录上传
- window.AWS.config.update(credentials);
- window.AWS.config.region = "cn-northwest-1"; //设置区域
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
- var _this = this;
- if (file) {
- _this.progress = 0;
- _this.proVisible = true;
- var params = {
- Key:
- file.name.split(".")[0] +
- new Date().getTime() +
- "." +
- file.name.split(".")[file.name.split(".").length - 1],
- ContentType: file.type,
- Body: file,
- "Access-Control-Allow-Credentials": "*",
- ACL: "public-read",
- }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
- var options = {
- partSize: 2048 * 1024 * 1024,
- queueSize: 2,
- leavePartsOnError: true,
- };
- bucket
- .upload(params, options)
- .on("httpUploadProgress", function (evt) {
- //这里可以写进度条
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
- _this.progress = parseInt((evt.loaded * 80) / evt.total);
- })
- .send(function (err, data) {
- _this.progress = 100;
- setTimeout(() => {
- _this.proVisible = false;
- }, 1000);
- if (err) {
- var a = _this.$refs.upload1.uploadFiles;
- a.splice(a.length - 1, a.length);
- _this.$message.error("上传失败");
- } else {
- _this.upload[0].url = "";
- if (type == 1) {
- _this.upload[0].url = data.Location;
- _this.imgChange(null, null, type);
- _this.addWork(4);
- } else if (type == 2) {
- _this.upload[0].url = data.Location;
- _this.imgChange(null, null, type);
- _this.addWork(7);
- } else if (type == 3) {
- _this.LuAudioUrl = data.Location;
- _this.addWork(8);
- }
- console.log(data.Location);
- }
- });
- }
- },
- beforeUpload2(event) {
- var file = event;
- var credentials = {
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
- secretAccessKey: "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",
- }; //秘钥形式的登录上传
- window.AWS.config.update(credentials);
- window.AWS.config.region = "cn-northwest-1"; //设置区域
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
- var _this = this;
- _this.progress = 0;
- _this.proVisible = true;
- if (file) {
- var params = {
- Key: file.name.split(".")[0] + new Date().getTime() + "." + "png",
- ContentType: file.type,
- Body: file,
- "Access-Control-Allow-Credentials": "*",
- ACL: "public-read",
- }; //key可以设置为桶的相抵路径,Body为文件, ACL最好要设置
- var options = {
- partSize: 2048 * 1024 * 1024,
- queueSize: 2,
- leavePartsOnError: true,
- };
- bucket
- .upload(params, options)
- .on("httpUploadProgress", function (evt) {
- //这里可以写进度条
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
- _this.progress = parseInt((evt.loaded * 80) / evt.total);
- })
- .send(function (err, data) {
- _this.progress = 100;
- setTimeout(() => {
- _this.proVisible = false;
- }, 1000);
- if (err) {
- var a = _this.$refs.upload1.uploadFiles;
- a.splice(a.length - 1, a.length);
- _this.$message.error("上传失败");
- } else {
- _this.imgFileUp.push({
- name: file.name,
- url: data.Location,
- uid: file.uid,
- });
- _this.imgChange(null, null, type);
- console.log(data.Location);
- }
- });
- }
- },
- addJtWork(type) {
- if (this.isNoHomeWork == true || this.isAnswer == true) {
- this.$confirm(
- "您已经提交了该作业了,如果您再提交将覆盖上次提交的作业!",
- "提示",
- {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }
- )
- .then(() => {
- this.getImg();
- this.addSWork(type);
- })
- .catch(() => {});
- } else {
- this.getImg();
- // this.addSWork(type);
- }
- },
- addWork(type) {
- if (type == 5) {
- if (this.tkAnswer.length == 0) {
- this.$message.error("请选择对应的答案");
- return;
- }
- }
- // else if (this.upload[0].upVedio.length == 0) {
- // this.$message.error("请上传视频");
- // return;
- // }
- // else if (this.upload[0].upIntro == "") {
- // this.$message.error("请填写简要描述");
- // return;
- // }
- var _str = "";
- if (type == 6) {
- _str = "您已经提交了评价了,如果您再提交将覆盖上次提交的评价!";
- } else {
- _str = "您已经提交了该作业了,如果您再提交将覆盖上次提交的作业!";
- }
- if (this.isNoHomeWork == true || this.isAnswer == true) {
- this.$confirm(_str, "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(() => {
- this.addSWork(type);
- })
- .catch(() => {});
- } else {
- this.addSWork(type);
- }
- },
- addSWork(type) {
- var a;
- if (type == 4 || type == 7) {
- a = this.upload[0].url;
- } else if (type == 6) {
- a = JSON.stringify(this.rateList);
- } else if (type == 1) {
- a = JSON.stringify(this.typeC);
- } else if (type == 5) {
- a = JSON.stringify(this.tkAnswer);
- } else {
- a = this.LuAudioUrl;
- }
- let params = {
- uid: this.userid,
- cid: this.cid,
- p: this.ppage - 1,
- t: type,
- upload: a,
- // upload: JSON.stringify(this.imgFileUp),
- };
- this.ajax
- .get(this.$store.state.api + "insertSWork", params)
- .then((res) => {
- // this.isNoHomeWork = true;
- // this.dialogVisible = true;
- // this.upload = res.data[0][0].upload;
- this.$message({
- message: "提交成功",
- type: "success",
- });
- this.selectSWork();
- if (this.tools[this.ppage - 1].tools.indexOf(12) != -1) {
- this.pick();
- this.isBlock = 0;
- }
- })
- .catch((err) => {
- this.$message.error("提交成功");
- console.error(err);
- });
- },
- selectSWork() {
- let _type = 0;
- if (this.tools[this.ppage - 1].tools) {
- if (
- this.tools[this.ppage - 1].tools.indexOf(1) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(6) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(7) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(10) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(16) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(13) != -1
- ) {
- _type = 4;
- } else if (this.tools[this.ppage - 1].tools.indexOf(9) != -1) {
- _type = 1;
- } else if (this.tools[this.ppage - 1].tools.indexOf(27) != -1) {
- _type = 5;
- } else if (this.tools[this.ppage - 1].tools.indexOf(14) != -1) {
- _type = 6;
- } else if (this.tools[this.ppage - 1].tools.indexOf(29) != -1) {
- _type = 7;
- } else if (
- this.tools[this.ppage - 1].tools.indexOf(30) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(12) != -1
- ) {
- _type = 8;
- }
- }
- this.isAnswer = false;
- this.isNoHomeWork = false;
- let params = {
- uid: this.userid,
- cid: this.cid,
- p: this.ppage - 1,
- type: _type,
- };
- this.ajax
- .get(this.$store.state.api + "selectSWork", params)
- .then((res) => {
- if (res.data[0].length > 0) {
- if (res.data[0][0].type == 1) {
- this.isAnswer = true;
- this.typeC = JSON.parse(res.data[0][0].upload);
- } else if (res.data[0][0].type == 5) {
- this.isNoHomeWork = true;
- this.tkAnswer = JSON.parse(res.data[0][0].upload);
- } else if (res.data[0][0].type == 4 || res.data[0][0].type == 7) {
- this.isNoHomeWork = true;
- this.upload[0].url = res.data[0][0].upload;
- } else if (res.data[0][0].type == 6) {
- this.isNoHomeWork = true;
- this.rateList = JSON.parse(res.data[0][0].upload);
- } else if (res.data[0][0].type == 8) {
- this.isNoHomeWork = true;
- this.LuAudioUrl = res.data[0][0].upload;
- }
- }
- })
- .catch((err) => {
- console.log("暂无作业");
- console.error(err);
- });
- },
- getImg() {
- var iframeHtml;
- let iframeBody;
- if (this.toolCount == 1) {
- iframeHtml = this.$refs.whiteBoard;
- } else if (this.toolCount == 3) {
- iframeHtml = this.$refs.mind;
- } else if (this.toolCount == 7) {
- iframeHtml = this.$refs.grid;
- }
- iframeBody = iframeHtml.contentWindow.document.body;
- this.iframeInnerHtml = iframeBody.innerHTML;
- var iframeIh = this.$refs.iframeIh;
- iframeIh.innerHTML = this.iframeInnerHtml;
- this.$forceUpdate();
- console.log(iframeIh);
- // var iframeHtml = this.$refs.whiteBoard;
- document.getElementById("shishi_loading").style.display = "flex";
- var _ajs = iframeHtml.contentWindow.document.createElement("script");
- _ajs.type = "text/javascript";
- _ajs.innerHTML =
- 'var _js = document.createElement("script");\n' +
- '_js.type="text/javascript";\n' +
- '_js.src="https://html2canvas.hertzen.com/dist/html2canvas.min.js";\n' +
- "_js.onload = function(){\n" +
- ' var a = document.getElementsByTagName("img")\n' +
- ' for(var i = 0;i<a.length;i++){a[i].crossOrigin="anonymous"}\n' +
- " html2canvas(document.body).then(canvas => {\n" +
- ' var base64Url = canvas.toDataURL("image/png");\n' +
- 'var base64 = "<img src=" + base64Url + " />"\n' +
- 'var file = dataURLtoFile_shishi(base64Url, "截图")\n' +
- "beforeUpload_shishi(file," +
- "'" +
- this.userid +
- "'" +
- ", " +
- "'" +
- this.cid +
- "'" +
- ", " +
- "'" +
- (this.ppage - 1) +
- "'" +
- ", " +
- "'4'" +
- ")\n" +
- " });\n" +
- "}\n" +
- "document.head.appendChild(_js);\n";
- iframeHtml.contentWindow.document.head.appendChild(_ajs);
- // iframeHtml.contentWindow.jietu_shishi(this.userid, this.cid);
- // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
- // html2canvas(iframeBody, {
- // allowTaint: true,
- // backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色(null)
- // useCORS: true, //支持图片跨域
- // scale: 1, //设置放大的倍数
- // }).then((canvas) => {
- // // 把生成的base64位图片上传到服务器,生成在线图片地址
- // let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
- // this.imgUrl = url; //将图片下载到本地
- // let a = document.createElement("a"); // 生成一个a元素
- // let event = new MouseEvent("click"); // 创建一个单击事件
- // a.download = "作业"; // 设置图片名称没有设置则为默认
- // a.href = this.imgUrl; // 将生成的URL设置为a.href属性
- // a.dispatchEvent(event); // 触发a的单击事件
- // let file = this.dataURLtoFile(url, "作业");
- // this.imgFile = file;
- // this.beforeUpload2(this.imgFile);
- // this.addSWork();
- // console.log(this.imgFile);
- // });
- },
- dataURLtoFile(dataurl, filename) {
- let arr = dataurl.split(","),
- mime = arr[0].match(/:(.*?);/)[1],
- bstr = atob(arr[1]),
- n = bstr.length,
- u8arr = new Uint8Array(n);
- while (n--) {
- u8arr[n] = bstr.charCodeAt(n);
- }
- return new File([u8arr], filename, { type: mime });
- },
- search() {},
- selectFile() {
- this.fileList = [];
- this.videoList = [];
- this.videoList2 = [];
- var a = ["PDF", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
- var b = this.tools[this.ppage - 1].file;
- for (var i = 0; i < b.length; i++) {
- if (
- a.indexOf(
- b[i].src
- .split(".")
- [b[i].src.split(".").length - 1].toLocaleUpperCase()
- ) != -1
- ) {
- this.fileList.push(b[i]);
- } else if (
- b[i].src
- .split(".")
- [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
- ) {
- this.videoList2.push(b[i]);
- } else {
- this.videoList.push(b[i]);
- }
- }
- if (this.videoList.length) {
- this.playVideo();
- } else if (this.videoList2.length) {
- this.playVideo2();
- } else {
- this.videoBlock = 0;
- }
- },
- openFile(u) {
- this.pptImgUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + u;
- this.isBlock = 7;
- },
- playVideo() {
- var d = JSON.parse(JSON.stringify(this.playerOptions));
- // for (var i = 0; i < this.videoList.length; i++) {
- d.sources[0].src = this.videoList[0].src;
- this.playerO[0] = d;
- // this.videoindex = i;
- // }
- // this.isBlock = 6;
- this.videoBlock = 6;
- },
- playVideo2() {
- this.audioUrl = this.videoList2[0].src;
- this.isBlock = 9;
- },
- switchVideo(media) {
- this.playerO = {};
- this.playerOptions.poster = "";
- this.playerOptions.sources[0].src = media;
- this.playerO = this.playerOptions;
- },
- onPlayerPlay() {},
- howPage(page) {
- if (!this.pageTotal) {
- return;
- }
- if (page == this.pageTotal) {
- // this.isBlock = 3;
- } else {
- this.isBlock = 0;
- if (
- this.tools[page - 1].tools &&
- this.tools[page - 1].tools.indexOf(9) != -1
- ) {
- this.isBlock = 1;
- }
- // if (this.ppage > 3) {
- // this.isBlock = 2;
- // }
- this.full = false;
- this.howTools = 0;
- this.toolCount = 0;
- if (this.tools[page - 1].tools && this.tools[page - 1].tools[0] == 12) {
- this.isBlock = 0;
- }
- if (
- this.tools[page - 1].tools &&
- (this.tools[page - 1].tools.indexOf(1) != -1 ||
- this.tools[page - 1].tools.indexOf(3) != -1 ||
- this.tools[page - 1].tools.indexOf(7) != -1)
- ) {
- this.isBlock = 4;
- }
- if (
- this.tools[page - 1].tools &&
- this.tools[page - 1].tools.length > 1
- ) {
- this.isBlock = 4;
- }
- if (this.tools[page - 1].tools && !this.tools[page - 1].tools.length) {
- this.isBlock = 0;
- }
- if (
- this.tools[this.ppage - 1].tools &&
- this.tools[this.ppage - 1].tools.indexOf(14) != -1
- ) {
- this.isBlock = 3;
- } else if (
- this.tools[this.ppage - 1].tools &&
- (this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(3) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(6) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(7) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(10) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(16) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(29) != -1 ||
- this.tools[this.ppage - 1].tools.indexOf(13) != -1)
- ) {
- if (this.tools[this.ppage - 1].tools.indexOf(1) != -1) {
- // this.toolCount = 1;
- this.checkTools(1);
- } else if (this.tools[this.ppage - 1].tools.indexOf(3) != -1) {
- this.checkTools(3);
- } else if (this.tools[this.ppage - 1].tools.indexOf(28) != -1) {
- this.checkTools(28);
- } else if (this.tools[this.ppage - 1].tools.indexOf(4) != -1) {
- this.checkTools(4);
- } else if (this.tools[this.ppage - 1].tools.indexOf(6) != -1) {
- this.checkTools(6);
- } else if (this.tools[this.ppage - 1].tools.indexOf(7) != -1) {
- this.checkTools(7);
- }
- // this.isBlock = 2;
- } else if (
- this.tools[this.ppage - 1].file &&
- this.tools[this.ppage - 1].file.length
- ) {
- this.selectFile();
- } else if (
- this.tools[this.ppage - 1].tools &&
- this.tools[this.ppage - 1].tools.indexOf(27) != -1
- ) {
- if (this.tools[this.ppage - 1].answer) {
- this.tiankongAnswer = this.tools[this.ppage - 1].answer;
- }
- this.isBlock = 8;
- }
- if (this.tools[page - 1].tools && this.tools[page - 1].tools[0] == 30) {
- this.isBlock = 10;
- }
- if (
- this.tools[this.ppage - 1].file &&
- this.tools[this.ppage - 1].file.length
- ) {
- } else {
- this.videoBlock = 0;
- }
- }
- this.selectSWork();
- },
- pick() {
- this.handle.type = 0;
- this.handle.userid = "";
- let params = [
- {
- h: JSON.stringfy(this.handle),
- cid: this.cid,
- },
- ];
- this.ajax
- .post(this.$store.state.api + "updatePptPage", params)
- .then((res) => {
- // this.dialogVisiblePick = false;
- let mindinfo = this.setInfo(
- this.cid,
- "us.mindNetwork",
- this.handle,
- "update",
- this.userid
- );
- this.updateSocket(mindinfo);
- })
- .catch((err) => {
- console.error(err);
- });
- },
- pick2() {
- this.dialogVisiblePick = false;
- this.isBlock = 10;
- },
- setPage() {
- let params = {
- id: this.cid,
- };
- this.ajax
- .get(this.$store.state.api + "selectPptPage", params)
- .then((res) => {
- if (res.data[0].length > 0) {
- let _res = JSON.parse(res.data[0][0].page);
- this.handle = _res;
- if (
- _res.type == 2 &&
- _res.userid == this.userid &&
- this.isBlock != 10 &&
- this.tools[_res.page - 1].tools.indexOf(12) != -1
- ) {
- this.dialogVisiblePick = true;
- }
- if (_res.type == 1 && this.videoList.length) {
- let handle = _res;
- let a = this.$refs.zVideo;
- if (handle.isPlay == 1) {
- a.player.play();
- } else if (handle.isPlay == 2) {
- a.player.pause();
- }
- } else if (this.$refs.zVideo) {
- this.$refs.zVideo.player.pause();
- }
- if (this.ppage == _res.page && this.isBlock !== 0) {
- return;
- } else {
- this.ppage = _res.page;
- // this.ppage = 1;
- // this.ppage = 11;
- this.typeC = [];
- this.isAnswer = false;
- this.howPage(this.ppage);
- }
- }
- })
- .catch((err) => {
- // this.$message.error("查询失败");
- console.error(err);
- });
- },
- getPageTotal(total) {
- this.pageTotal = total;
- },
- getWidth(total) {
- this.Vwidth = total;
- },
- fullTools() {
- this.full = !this.full;
- },
- checkTools(tcount) {
- this.isBlock = 2;
- this.toolCount = tcount;
- let _this = this;
- _this.$nextTick(() => {
- setTimeout(() => {
- const script1 = document.createElement("script");
- script1.type = "text/javascript";
- script1.src =
- "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jquery-3.6.0.min.js";
- const script2 = document.createElement("script");
- script2.type = "text/javascript";
- script2.src =
- "https://pbl.cocorobo.cn/pbl-student-table/dist/js/aws-sdk-2.235.1.min.js";
- const script3 = document.createElement("script");
- script3.type = "text/javascript";
- script3.src =
- "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
- const script4 = document.createElement("script");
- script4.type = "text/javascript";
- script4.src =
- "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";
- if (_this.toolCount == 1) {
- _this.$refs.whiteBoard.onload = () => {
- _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
- script1
- );
- _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
- script2
- );
- // _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script3);
- _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
- script4
- );
- };
- } else if (_this.toolCount == 3) {
- _this.$refs.mind.onload = () => {
- _this.$refs.mind.contentWindow.document.body.appendChild(script1);
- _this.$refs.mind.contentWindow.document.body.appendChild(script2);
- // _this.$refs.mind.contentWindow.document.body.appendChild(script3);
- _this.$refs.mind.contentWindow.document.body.appendChild(script4);
- };
- } else if (_this.toolCount == 7) {
- _this.$refs.grid.onload = () => {
- _this.$refs.grid.contentWindow.document.body.appendChild(script1);
- _this.$refs.grid.contentWindow.document.body.appendChild(script2);
- // _this.$refs.grid.contentWindow.document.body.appendChild(script3);
- _this.$refs.grid.contentWindow.document.body.appendChild(script4);
- };
- }
- }, 0);
- });
- },
- getData() {
- let params = {
- id: this.cid,
- };
- this.ajax
- .get(this.$store.state.api + "getRealTimeClassById", params)
- .then((r) => {
- let res = r.data[0][0];
- this.pdfUrl = res.url;
- this.tools = JSON.parse(res.content);
- })
- .catch((err) => {
- // this.$message.error("查询失败");
- console.error(err);
- });
- },
- setData() {
- let _this = this;
- this.timer = setInterval(() => {
- _this.setPage();
- }, 1000);
- },
- getRealTimeClass() {
- let params = [
- {
- type: "getRealTimeClass",
- docid: this.cid,
- pageid: window.parent.US.pageId,
- userid: this.userid,
- post: "1",
- },
- ];
- this.ajax
- .post(this.$store.state.socket, params)
- .then((res) => {
- if (res.data[0].length) {
- let _res = {};
- try {
- _res = JSON.parse(res.data[0][0].page);
- } catch (error) {
- _res = res.data[0][0].page;
- }
- this.setPptData(_res)
- }
- console.log(res);
- })
- .catch((err) => {
- console.error(err);
- });
- },
- setPptData(res) {
- let _res = res
- this.handle = _res;
- if (
- _res.type == 2 &&
- _res.userid == this.userid &&
- this.isBlock != 10 &&
- this.tools[_res.page - 1].tools.indexOf(12) != -1
- ) {
- this.dialogVisiblePick = true;
- }
- if (_res.type == 1 && this.videoList.length) {
- let handle = _res;
- let a = this.$refs.zVideo;
- if (handle.isPlay == 1) {
- a.player.play();
- } else if (handle.isPlay == 2) {
- a.player.pause();
- }
- } else if (this.$refs.zVideo) {
- this.$refs.zVideo.player.pause();
- }
- if (this.ppage == _res.page && this.isBlock !== 0) {
- return;
- } else {
- this.ppage = _res.page;
- // this.ppage = 1;
- // this.ppage = 11;
- this.typeC = [];
- this.isAnswer = false;
- this.howPage(this.ppage);
- }
- },
- setInfo(id, navid, content, type, userid) {
- var _data = {
- "us.realTimeClass": [
- {
- sendId: userid, //发送人id
- receiveId: id, //文件id
- type: navid, //消息类型
- messageInfo: {
- id: id, //操作ID
- type: type, //类型
- content: content, //内容
- docId: id, //文档id
- pageId: top.US.pageId, //当前页面id
- },
- },
- ],
- };
- return _data;
- },
- updateSocket(mindinfo) {
- let params = [
- {
- type: "send",
- mindinfo: encodeURIComponent(
- encodeURIComponent(JSON.stringify(mindinfo))
- ),
- post: 1,
- },
- ];
- this.ajax
- .post(this.$store.state.socket, params)
- .then((res) => {
- console.log(res);
- })
- .catch((err) => {
- console.error(err);
- });
- },
- },
- beforeDestroy() {
- clearInterval(this.timer);
- this.timer = null;
- window.removeEventListener("message");
- },
- created() {
- this.getData();
- this.getRealTimeClass()
- let _this = this;
- window.addEventListener("message", function (e) {
- // 监听 message 事件
- if (
- e.data.type &&
- e.data.type == "realTimeClass_update" &&
- e.data.info.docId == _this.cid
- ) {
- // _this.data[e.data.info.id] = e.data.info.content;
- this.setPptData(e.data.info.content)
- }
- _this.$forceUpdate();
- });
- },
- };
- </script>
- <style scoped>
- .dialog_diy >>> .el-dialog__header {
- background: #3d67bc !important;
- padding: 15px 20px;
- }
- .dialog_diy >>> .el-dialog__title {
- color: #fff;
- }
- .dialog_diy >>> .el-dialog__headerbtn {
- top: 9px;
- }
- .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
- color: #fff;
- }
- .dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
- color: #fff;
- }
- .blackBottom {
- background: rgb(0, 0, 0);
- height: 45px;
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: space-between;
- }
- .imgMiddle {
- width: 100%;
- position: relative;
- height: 100%;
- }
- .imgMiddle > img,
- .imghalf > img,
- .szt > img,
- .uploadImg > img,
- .uploadVedio > img,
- .uploadImgPic > img,
- .logoLive > img,
- .close > img,
- .deleteWord > img {
- width: 100%;
- height: 100%;
- }
- .deleteWord {
- width: 22px !important;
- height: 22px;
- position: absolute;
- right: -5px;
- top: -5px;
- cursor: pointer;
- }
- .blackBottomB {
- position: sticky;
- bottom: 0px;
- left: 0px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-content: center;
- justify-content: space-between;
- align-items: center;
- background: rgb(0, 0, 0);
- height: 45px;
- width: 100%;
- }
- .blackBottomB > div:nth-child(1) {
- margin-left: 10px !important;
- }
- .blackButton {
- color: #fff;
- background: #066ebe;
- width: 100px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- margin: 0 25px;
- border-radius: 5px;
- font-size: 15px;
- cursor: pointer;
- }
- .isNoOther {
- width: 100%;
- display: flex;
- height: calc(100% - 45px);
- }
- .imghalf {
- width: 60% !important;
- }
- .answerBox {
- padding: 25px;
- overflow: auto;
- height: 70%;
- box-sizing: border-box;
- }
- .answerTimuBox {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: space-between;
- padding-bottom: 15px;
- }
- .memberBox {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- }
- .memberBox > div {
- background: rgb(240, 185, 204);
- width: 120px;
- color: #fff;
- height: 40px;
- text-align: center;
- line-height: 40px;
- border-radius: 5px;
- margin: 0 15px 15px 0;
- cursor: pointer;
- }
- .viewSta {
- background: rgb(97, 97, 97);
- color: #bebebe;
- margin: 20% auto 20px;
- width: 300px;
- height: 40px;
- text-align: center;
- line-height: 40px;
- border-radius: 5px;
- cursor: pointer;
- }
- .szt {
- width: 450px;
- margin: 20px auto;
- }
- .sztFooter {
- padding: 20px 10px 50px 0;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
- }
- .timuButton {
- background: #649ef2;
- width: 75px;
- height: 27px;
- line-height: 27px;
- text-align: center;
- border-radius: 5px;
- color: #fff;
- margin-right: 20px;
- display: inline-block;
- }
- .anserBoxCss {
- margin: 30px 0 20px 0;
- }
- .anserBoxCss >>> .el-radio__label {
- font-size: 18px;
- }
- .anserBoxCss >>> .el-radio__inner {
- border-radius: 0px !important;
- }
- .nextStepBox {
- display: flex;
- justify-content: center;
- margin-top: 10px;
- }
- .nextStepOne {
- background: #6b92c9;
- color: #fff;
- width: 110px;
- text-align: center;
- height: 35px;
- line-height: 35px;
- font-size: 14px;
- border-radius: 5px;
- cursor: pointer;
- }
- .nextStepOne,
- .nextStepOne {
- margin-left: 10px;
- }
- .toolList {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-items: center;
- }
- .tools {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-right: 20px;
- }
- .tools > div:nth-child(1) {
- width: 60px;
- }
- .tools > div:nth-child(1) > img {
- width: 100%;
- height: 100%;
- }
- .uploadImg {
- width: 100px;
- margin: 10px 0 0 15px;
- cursor: pointer;
- }
- .upImg {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: center;
- color: rgb(182, 182, 182);
- font-size: 20px;
- }
- .binfo_input {
- font: inherit;
- color: currentColor;
- width: 100%;
- margin: 0;
- padding: 15px 14px;
- display: block;
- min-width: 0;
- outline: none;
- box-sizing: content-box;
- background: none;
- -webkit-tap-highlight-color: transparent;
- border: 1px solid rgba(0, 0, 0, 0.23);
- border-radius: 4px;
- box-sizing: border-box;
- resize: none;
- }
- .binfo_input:focus-visible {
- border: 1px solid rgba(61, 103, 188);
- }
- .hengCss {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- padding: 5px 0 0 20px;
- }
- .uploadImgPic {
- width: 100px;
- height: 100px;
- position: relative;
- margin: 0 20px 0 0;
- }
- .uploadImgPic > div {
- width: 100px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .mask {
- background-color: rgba(0, 0, 0, 0);
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 20000;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .progressBox {
- width: 500px;
- height: 180px;
- background: #fff;
- border-radius: 10px;
- box-shadow: 0 0 6px 1px #bfbfbf;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
- .progressBox .lbox {
- height: 100px;
- font-size: 19px;
- display: flex;
- align-items: center;
- }
- .progressBox .lbox img {
- width: 40px;
- margin-right: 20px;
- }
- .progressBox >>> .el-progress-bar__outer {
- background-color: #d1dfff !important;
- }
- .progressBox .lbox {
- height: 100px;
- font-size: 19px;
- display: flex;
- align-items: center;
- }
- .progressBox .lbox img {
- width: 40px;
- margin-right: 20px;
- }
- .logoLive {
- width: 35px;
- }
- .choose_style {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- margin: 10px 0 30px;
- }
- .choose_style span {
- background: #f8f9ff;
- color: #677fff;
- border: 1px solid #95b5ff;
- padding: 15px 20px;
- font-size: 25px;
- border-radius: 18px;
- cursor: pointer;
- }
- .choose_style span + span {
- margin-left: 25px;
- }
- .isChoose {
- color: #fff !important;
- background: #5e78fa !important;
- }
- .close {
- position: absolute;
- right: 10px;
- top: 10px;
- width: 20px;
- cursor: pointer;
- }
- .score_box {
- font-size: 14px;
- }
- .score_box >>> .el-rate {
- margin: 10px 0 20px 0;
- }
- .score_box >>> .el-rate__icon {
- font-size: 23px;
- }
- .bz >>> .el-textarea__inner {
- width: 80%;
- background: #f9f9f9;
- border: 1px solid #afafaf;
- border-radius: 0px;
- }
- .tools_title {
- background: #000;
- position: absolute;
- width: 100%;
- top: 0;
- left: 0;
- display: flex;
- align-items: center;
- height: 40px;
- justify-content: space-between;
- padding: 0 15px;
- box-sizing: border-box;
- }
- .tools_title span {
- color: #fff;
- }
- .tools_title div {
- display: flex;
- align-items: center;
- }
- .full,
- .closeImg {
- height: 22px;
- cursor: pointer;
- }
- .tools_title img,
- img {
- margin-left: 10px;
- }
- .tools_box {
- width: 38.5%;
- max-width: 38.5%;
- overflow: auto;
- background: rgb(255, 255, 255);
- height: 91.5%;
- position: relative;
- margin: 10px 15px;
- }
- .tools_child_box {
- width: 100%;
- height: calc(90% - 40px);
- padding-top: 40px;
- }
- .fullStyle {
- width: 100% !important;
- max-width: 100% !important;
- }
- .toolCss {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- width: calc(100% / 6);
- align-items: center;
- text-align: center;
- }
- .toolImg {
- width: 70px;
- height: 70px;
- cursor: pointer;
- }
- .toolImg > img {
- width: 100%;
- height: 100%;
- margin: 0 !important;
- }
- .toolImg > div {
- font-size: 14px;
- }
- .iframeBox {
- overflow: auto;
- position: absolute;
- top: 0;
- z-index: -2;
- width: 100%;
- height: 100%;
- }
- .fileBox {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- justify-content: flex-start;
- align-content: center;
- width: 100%;
- }
- .fileListCss {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- align-items: center;
- margin: 0 15px 15px 0;
- }
- .fileCss {
- width: 70px;
- height: 70px;
- cursor: pointer;
- margin: 0 0 10px 0;
- }
- .fileCss > img {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- .wheel {
- width: 100%;
- height: 100%;
- }
- .video-player >>> .video-js {
- height: 100%;
- }
- .tkCss {
- display: flex;
- flex-direction: row;
- align-items: center;
- flex-wrap: nowrap;
- margin-bottom: 15px;
- }
- .workd_media {
- /* width: 1497.42px; */
- /* width: auto; */
- height: 100%;
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- z-index: 999;
- }
- .tiankongAnswer {
- margin-left: 10px;
- color: #1834c0;
- }
- .tfalse {
- color: rgb(189, 30, 30) !important;
- }
- .video_wrapper {
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 99999;
- background: #fff;
- background: transparent;
- top: 0;
- }
- </style>
|