|
|
@@ -0,0 +1,1442 @@
|
|
|
+<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">展示课件</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"
|
|
|
+ ></pdf>
|
|
|
+ </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="
|
|
|
+ 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' : ''"
|
|
|
+ >A</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(2)"
|
|
|
+ :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
|
|
|
+ >B</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(3)"
|
|
|
+ :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
|
|
|
+ >C</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ @click="isChooseActive(4)"
|
|
|
+ :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
|
|
|
+ >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].tools && tools[ppage].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].tools && tools[ppage].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].tools && tools[ppage].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].tools && tools[ppage].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].tools && tools[ppage].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>
|
|
|
+ </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
|
|
|
+ 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
|
|
|
+ style="width: 100%; height: 100%; border: none"
|
|
|
+ src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
|
|
|
+ ref="mind"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <div v-if="toolsList[0].tools[howTools] == 6" class="tools_child_box">
|
|
|
+ <div class="tools_title">
|
|
|
+ <span>协同文档</span>
|
|
|
+ <div>
|
|
|
+ <img src="../assets/full.png" class="full" @click="fullTools" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <iframe
|
|
|
+ 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
|
|
|
+ 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">返回</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="nextStepOne"
|
|
|
+ style="float: right"
|
|
|
+ @click="getImg"
|
|
|
+ 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" style="padding: 0 0 0 25px">
|
|
|
+ <div>
|
|
|
+ <div class="score_box">
|
|
|
+ <span>自我评价</span>
|
|
|
+ <el-rate v-model="rateList.ca"></el-rate>
|
|
|
+ </div>
|
|
|
+ <div class="score_box">
|
|
|
+ <span>他人评价</span>
|
|
|
+ <el-rate v-model="rateList.sia"></el-rate>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div style="padding-bottom: 15px; sont-size: 14px">备注</div>
|
|
|
+ <div class="bz">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入备注…"
|
|
|
+ :rows="6"
|
|
|
+ resize="none"
|
|
|
+ v-model="rateList.content"
|
|
|
+ ></el-input>
|
|
|
+ </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="dialogVisible = true">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="blackBottomB"></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>
|
|
|
+ <div v-html="iframeInnerHtml" ref="iframeIh" class="iframeBox"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pdf from "./components/pdf";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+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_202208231345451661233676307.pdf",
|
|
|
+ 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,
|
|
|
+ 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: [
|
|
|
+ {
|
|
|
+ upImg: [],
|
|
|
+ upVedio: [],
|
|
|
+ upIntro: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ noneBtnImg: false,
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0,
|
|
|
+ typeC: [],
|
|
|
+ toolCount: 0,
|
|
|
+ tools: [
|
|
|
+ "",
|
|
|
+ "",
|
|
|
+ { tools: [9] }, //选择题
|
|
|
+ "", //倒计时
|
|
|
+ "", //问答题
|
|
|
+ "", //问答题
|
|
|
+ { tools: [3] }, //思维导图/电子白板
|
|
|
+ { tools: [12] }, //选人回答
|
|
|
+ "", //倒计时、分小组
|
|
|
+ { tools: [3] }, //思维导图/电子白板/思维网格
|
|
|
+ { tools: [14] }, //查看作业
|
|
|
+ { tools: [14] }, //查看作业
|
|
|
+ "", //查看作业
|
|
|
+ //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
|
|
|
+ ],
|
|
|
+ rateList: {
|
|
|
+ ca: 0,
|
|
|
+ sia: 0,
|
|
|
+ content: "",
|
|
|
+ },
|
|
|
+ imgUrl: "",
|
|
|
+ imgFile: "",
|
|
|
+ imgFileUp: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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.isAnswer == true) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ 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.steps = 2;
|
|
|
+ this.isAnswer = true;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ } else {
|
|
|
+ this.$message.error("至少选择一个答案！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clean(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.upload[0].upImg.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].upImg;
|
|
|
+ } else if (type == 2) {
|
|
|
+ var _tmp = this.upload[0].upVedio;
|
|
|
+ } else if (type == 100) {
|
|
|
+ var _tmp = this.imgFileUp;
|
|
|
+ }
|
|
|
+ this.noneBtnImg = _tmp.length >= 1;
|
|
|
+ },
|
|
|
+ beforeUpload1(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ 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() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[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 {
|
|
|
+ if (type == 1) {
|
|
|
+ _this.upload[0].upImg.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ _this.addSWork();
|
|
|
+ } else if (type == 2) {
|
|
|
+ _this.upload[0].upVedio.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ }
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeUpload2(event) {
|
|
|
+ var file = event;
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addWork() {
|
|
|
+ if (this.upload[0].upImg.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;
|
|
|
+ }
|
|
|
+ if (this.isNoHomeWork == true) {
|
|
|
+ this.$confirm(
|
|
|
+ "您已经提交了该作业了，如果您再提交将覆盖上次提交的作业！",
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ this.addSWork();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ this.addSWork();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addSWork() {
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.cid,
|
|
|
+ upload: JSON.stringify(this.upload),
|
|
|
+ // upload: JSON.stringify(this.imgFileUp),
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "insertSWork", params)
|
|
|
+ .then((res) => {
|
|
|
+ // this.isNoHomeWork = true;
|
|
|
+ // this.dialogVisible = true;
|
|
|
+ // this.selectSWork(); // this.upload = res.data[0][0].upload;
|
|
|
+ this.$message({
|
|
|
+ message: "截图上传成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("截图上传失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectSWork() {
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.cid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectSWork", params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length > 0) {
|
|
|
+ this.isNoHomeWork = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("暂无作业");
|
|
|
+ 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 +
|
|
|
+ "'" +
|
|
|
+ ")\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() {},
|
|
|
+ howPage(page) {
|
|
|
+ if (!this.pageTotal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (page == this.pageTotal) {
|
|
|
+ this.isBlock = 3;
|
|
|
+ } else {
|
|
|
+ this.isBlock = 0;
|
|
|
+
|
|
|
+ if (tools[page - 1].tools && 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] == 14 || 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ setPage() {
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectPptPage", "")
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data[0].length > 0) {
|
|
|
+ if (this.ppage == res.data[0][0].page) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.ppage = res.data[0][0].page;
|
|
|
+ console.log(1);
|
|
|
+ this.howPage(this.ppage);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // this.$message.error("查询失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPageTotal(total) {
|
|
|
+ this.pageTotal = 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/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/aws-sdk-2.235.1.min.js";
|
|
|
+ const script3 = document.createElement("script");
|
|
|
+ script3.type = "text/javascript";
|
|
|
+ script3.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
|
|
|
+ const script4 = document.createElement("script");
|
|
|
+ script4.type = "text/javascript";
|
|
|
+ script4.src = "https://pbl.cocorobo.cn/pbl-student-table/dist/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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ // window.removeEventListener("message");
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.selectSWork();
|
|
|
+ let _this = this;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ _this.setPage();
|
|
|
+ }, 1000);
|
|
|
+ // window.addEventListener("message", function (e) {
|
|
|
+ // // 监听 message 事件
|
|
|
+ // if (e.data.type && e.data.type == "shishi_canvas") {
|
|
|
+ // console.log(e.data.data);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+};
|
|
|
+</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%;
|
|
|
+}
|
|
|
+
|
|
|
+.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: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ 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% - 90px);
|
|
|
+}
|
|
|
+
|
|
|
+.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%;
|
|
|
+}
|
|
|
+</style>
|
