|
|
@@ -0,0 +1,791 @@
|
|
|
+<template>
|
|
|
+ <div class="workPage" v-loading="loading">
|
|
|
+ <!-- <div class="wp_tool wp_tool15" v-if="workData && workData.type == 15">
|
|
|
+ <div class="wp_t15_title">{{ workData.json.answerQ }}</div>
|
|
|
+ <span class="wp_type">问答题</span>
|
|
|
+ <div class="wp_tl15_inputArea">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="7"
|
|
|
+ placeholder="请在此输入您的答案..."
|
|
|
+ resize="none"
|
|
|
+ v-model="workData.json.answer"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="wp_tl15_uploadFileArea">
|
|
|
+ <div
|
|
|
+ class="wp_tl_btn"
|
|
|
+ @click="uploadImage()"
|
|
|
+ v-loading="loadingUploadFile"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ t="1755158440992"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="8270"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M924 1024H100A100 100 0 0 1 0 924V638a40 40 0 0 1 80 0v286a20 20 0 0 0 20 20h824a20 20 0 0 0 20-20V638a40 40 0 0 1 80 0v286a100 100 0 0 1-100 100zM784 352a40 40 0 0 1-28-12L512 97 268 340a40 40 0 0 1-57-57L484 12a40 40 0 0 1 57 0l271 272a40 40 0 0 1-28 68z"
|
|
|
+ fill="#474747"
|
|
|
+ p-id="8271"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M512 788a40 40 0 0 1-40-40V57a40 40 0 0 1 80 0v691a40 40 0 0 1-40 40z"
|
|
|
+ fill="#474747"
|
|
|
+ p-id="8272"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <span>上传图片</span>
|
|
|
+ </div>
|
|
|
+ <span>支持JPG、PNG格式，最大5MB</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="wp_tl15_fileList">
|
|
|
+ <div
|
|
|
+ class="wp_tl15_fileList_item"
|
|
|
+ v-for="(item, index) in workData.json.fileList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <img :src="item.url" alt="" @click="previewImage(item)" />
|
|
|
+ <svg
|
|
|
+ @click="deleteFile(index)"
|
|
|
+ t="1755162206922"
|
|
|
+ class="icon"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="9357"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"
|
|
|
+ fill="#d81e06"
|
|
|
+ p-id="9358"
|
|
|
+ ></path>
|
|
|
+ <path
|
|
|
+ d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"
|
|
|
+ fill="#d81e06"
|
|
|
+ p-id="9359"
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="wp_tool wp_tool45" v-if="workData && workData.type == 45">
|
|
|
+ <div class="wp_t45_title">练一练</div>
|
|
|
+ <div
|
|
|
+ class="s_b_m_toolItem"
|
|
|
+ v-for="(item, index) in workData.json.testJson"
|
|
|
+ :key="index + '_' + workData.id"
|
|
|
+ >
|
|
|
+ <div class="s_b_m_ti_title">
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ <svg
|
|
|
+ width="16"
|
|
|
+ height="16"
|
|
|
+ viewBox="0 0 16 16"
|
|
|
+ fill="none"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="M15.3536 8.35355C15.5488 8.15829 15.5488 7.84171 15.3536 7.64645L12.1716 4.46447C11.9763 4.2692 11.6597 4.2692 11.4645 4.46447C11.2692 4.65973 11.2692 4.97631 11.4645 5.17157L14.2929 8L11.4645 10.8284C11.2692 11.0237 11.2692 11.3403 11.4645 11.5355C11.6597 11.7308 11.9763 11.7308 12.1716 11.5355L15.3536 8.35355ZM1 8.5H15V7.5H1V8.5Z"
|
|
|
+ fill="#3681FC"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <span
|
|
|
+ ><span
|
|
|
+ v-html="
|
|
|
+ renderedFormula(
|
|
|
+ `<span style='color: #3681FC;''>${
|
|
|
+ item.type == 1 ? '(单选题)：' : '(多选题)：'
|
|
|
+ }</span>${item.teststitle}`
|
|
|
+ )
|
|
|
+ "
|
|
|
+ ></span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="s_b_m_ti_option"
|
|
|
+ v-for="(item2, index2) in item.checkList"
|
|
|
+ @click="chooseAnswer(index, index2)"
|
|
|
+ :key="index + '_' + index2 + 'index2T'"
|
|
|
+ :class="{
|
|
|
+ s_b_m_ti_o_choice:
|
|
|
+ item.type == '1'
|
|
|
+ ? workData.json.testJson[index].userAnswer === index2
|
|
|
+ : workData.json.testJson[index].userAnswer.includes(index2)
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="s_b_m_ti_o_btn">
|
|
|
+ <span class="s_b_m_ti_o_btn1" v-if="item.type == 1">
|
|
|
+ <span
|
|
|
+ v-if="workData.json.testJson[index].userAnswer === index2"
|
|
|
+ ></span>
|
|
|
+ </span>
|
|
|
+ <span class="s_b_m_ti_o_btn2" v-else>
|
|
|
+ <span
|
|
|
+ v-if="workData.json.testJson[index].userAnswer.includes(index2)"
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <span>
|
|
|
+ <img
|
|
|
+ v-if="item2.imgType && item2.imgType === 1"
|
|
|
+ :src="item2.src"
|
|
|
+ alt=""
|
|
|
+ @click.stop="$hevueImgPreview(item2.src)"
|
|
|
+ />
|
|
|
+ <span v-else>{{ item2 }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <questionsAndAnswers ref="questionsAndAnswersRef" v-if="workData.type === '15'" :workData="workData" @changeWorkData="changeWorkData"/>
|
|
|
+ <choiceQuestion ref="choiceQuestionRef" v-if="workData.type === '45'" :workData="workData" @changeWorkData="changeWorkData"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import katex from "katex";
|
|
|
+import "katex/dist/katex.min.css";
|
|
|
+import questionsAndAnswers from "./components/questionsAndAnswers.vue";
|
|
|
+import choiceQuestion from "./components/choiceQuestion.vue";
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ questionsAndAnswers,
|
|
|
+ choiceQuestion
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: this.$route.query.id,
|
|
|
+ courseid: this.$route.query.courseid,
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ role: this.$route.query.role,
|
|
|
+ stage: this.$route.query.stage,
|
|
|
+ task: this.$route.query.task,
|
|
|
+ tool: this.$route.query.tool,
|
|
|
+ type: "",
|
|
|
+ cid: this.$route.query.cid,
|
|
|
+ workData: {},
|
|
|
+ loadingUploadFile: false,
|
|
|
+ studentWork: null,
|
|
|
+ loading: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ workData: {
|
|
|
+ deep: true,
|
|
|
+ handler(newValue) {
|
|
|
+ if (newValue) {
|
|
|
+ this.setWorkDataToWindow();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ renderedFormula() {
|
|
|
+ return function(val) {
|
|
|
+ try {
|
|
|
+ // 判断是否含有HTML标签，<tag ...>...</tag>
|
|
|
+ const hasTag = /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g.test(
|
|
|
+ val
|
|
|
+ );
|
|
|
+ if (!hasTag) {
|
|
|
+ val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, "");
|
|
|
+
|
|
|
+ // 纯文本，整体渲染
|
|
|
+ try {
|
|
|
+ return katex.renderToString(val.trim(), {
|
|
|
+ throwOnError: false,
|
|
|
+ strict: false,
|
|
|
+ output: "htmlAndMathml"
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ return val; // 渲染失败原样输出
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 有标签，对每个标签内容渲染
|
|
|
+ return val.replace(
|
|
|
+ /<([a-zA-Z][\w\-]*)([^>]*)>([\s\S]*?)<\/\1>/g,
|
|
|
+ (match, tag, attrs, inner) => {
|
|
|
+ let html;
|
|
|
+ val = val.trim().replace(/[\u200B-\u200D\uFEFF]/g, "");
|
|
|
+ try {
|
|
|
+ html = katex.renderToString(inner.trim(), {
|
|
|
+ throwOnError: false,
|
|
|
+ strict: false,
|
|
|
+ output: "htmlAndMathml"
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ html = inner;
|
|
|
+ }
|
|
|
+ return `<${tag}${attrs}>${html}</${tag}>`;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error("KaTeX渲染错误:", e);
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getWorkData() {
|
|
|
+ if (!this.id) return console.log("无作业id");
|
|
|
+ let params = {
|
|
|
+ id: this.id
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "select_workPageById", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data[0];
|
|
|
+ if (_data.length) {
|
|
|
+ _data = _data[0];
|
|
|
+ _data.json = JSON.parse(_data.json);
|
|
|
+ if (_data.type == 15) {
|
|
|
+ _data.json.answer = "";
|
|
|
+ _data.json.fileList = [];
|
|
|
+ } else if (_data.type == 45) {
|
|
|
+ _data.json.testJson.forEach(item => {
|
|
|
+ if (item.type == "2") {
|
|
|
+ item.userAnswer = [];
|
|
|
+ } else if (item.type == "1") {
|
|
|
+ item.userAnswer = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.workData = _data;
|
|
|
+ this.studentWorkToWorkData();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setWorkDataToWindow() {
|
|
|
+ if (this.workData.json) {
|
|
|
+ window.workData = JSON.parse(JSON.stringify(this.workData));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadImage() {
|
|
|
+ if (this.loadingUploadFile) return;
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.type = "file";
|
|
|
+ input.accept = "image/jpeg,image/png";
|
|
|
+ input.click();
|
|
|
+ input.onchange = e => {
|
|
|
+ let file = e.target.files[0];
|
|
|
+ if (file) {
|
|
|
+ if (file.size > 5 * 1024 * 1024) {
|
|
|
+ // 5MB
|
|
|
+ return this.$message.error("图片大小不能超过5MB");
|
|
|
+ }
|
|
|
+ let _type = file.type;
|
|
|
+ let _size = file.size;
|
|
|
+ this.loadingUploadFile = true;
|
|
|
+ this.uploadFile(file).then(res => {
|
|
|
+ let _file = {
|
|
|
+ name: file.name,
|
|
|
+ url: res.Location,
|
|
|
+ type: _type,
|
|
|
+ size: _size,
|
|
|
+ uploadTime: new Date().getTime()
|
|
|
+ };
|
|
|
+ if (["15"].includes(this.workData.type)) {
|
|
|
+ this.workData.json.fileList.push(_file);
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ this.loadingUploadFile = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ uploadFile(file) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ 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;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ 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) + '%');
|
|
|
+ })
|
|
|
+ .send(function(err, data) {
|
|
|
+ if (err) {
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ resolve(null);
|
|
|
+ } else {
|
|
|
+ resolve(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //预览图片
|
|
|
+ previewImage(url) {
|
|
|
+ this.$hevueImgPreview(url);
|
|
|
+ },
|
|
|
+ deleteFile(index) {
|
|
|
+ this.workData.json.fileList.splice(index, 1);
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ submitWork(task) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ let params = [];
|
|
|
+ if (this.workData.type == "15") {
|
|
|
+ //问答题
|
|
|
+ params.push({
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.courseid,
|
|
|
+ stage: 0,
|
|
|
+ task: task,
|
|
|
+ tool: 0,
|
|
|
+ atool: "15",
|
|
|
+ content: encodeURIComponent(JSON.stringify(this.workData.json)),
|
|
|
+ type: "3"
|
|
|
+ });
|
|
|
+ } else if (this.workData.type == "45") {
|
|
|
+ //选择题
|
|
|
+ params.push({
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.courseid,
|
|
|
+ stage: 0,
|
|
|
+ task: task,
|
|
|
+ tool: 0,
|
|
|
+ atool: "45",
|
|
|
+ content: encodeURIComponent(JSON.stringify(this.workData.json)),
|
|
|
+ type: "8"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ ["3", "8"].includes(params[0].type) &&
|
|
|
+ params[0].uid &&
|
|
|
+ params[0].cid
|
|
|
+ ) {
|
|
|
+ this.loading = true;
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "addCourseWorks_workPage", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data[0];
|
|
|
+ this.loading = false;
|
|
|
+ if (_data.length > 0) {
|
|
|
+ let _id = _data[0].id;
|
|
|
+ resolve(_id);
|
|
|
+ } else {
|
|
|
+ resolve("");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ resolve("");
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //选择题选择
|
|
|
+ chooseAnswer(index, index2) {
|
|
|
+ if (this.workData.json.testJson[index].type == "1") {
|
|
|
+ this.workData.json.testJson[index].userAnswer = index2;
|
|
|
+ } else if (this.workData.json.testJson[index].type == "2") {
|
|
|
+ if (this.workData.json.testJson[index].userAnswer.includes(index2)) {
|
|
|
+ this.workData.json.testJson[index].userAnswer.splice(
|
|
|
+ this.workData.json.testJson[index].userAnswer.indexOf(index2),
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.workData.json.testJson[index].userAnswer.push(index2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取已经提交的作业
|
|
|
+ getSubmitWork() {
|
|
|
+ if (
|
|
|
+ this.userid &&
|
|
|
+ this.courseid &&
|
|
|
+ this.stage &&
|
|
|
+ this.task &&
|
|
|
+ this.tool
|
|
|
+ ) {
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ cid: this.courseid,
|
|
|
+ stage: this.stage,
|
|
|
+ task: this.task,
|
|
|
+ tool: this.tool
|
|
|
+ };
|
|
|
+ this.loading = true;
|
|
|
+ this.ajax
|
|
|
+ .get(
|
|
|
+ this.$store.state.api + "select_courseWorks_workPageData",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data[0];
|
|
|
+ this.loading = false;
|
|
|
+ if (_data.length) {
|
|
|
+ _data = _data[0];
|
|
|
+ if (["15", "45"].includes(_data.atool)) {
|
|
|
+ let _work = JSON.parse(decodeURIComponent(_data.content));
|
|
|
+ this.studentWork = _work;
|
|
|
+ this.studentWorkToWorkData();
|
|
|
+ }else{
|
|
|
+ console.log("工具不一致")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.loading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ studentWorkToWorkData() {
|
|
|
+ if (this.studentWork && this.workData) {
|
|
|
+ console.log("studentWork", this.studentWork);
|
|
|
+ console.log("workData", this.workData);
|
|
|
+
|
|
|
+ let _work = JSON.parse(JSON.stringify(this.studentWork));
|
|
|
+ if (this.workData.type == "15") {
|
|
|
+ this.workData.json.answer = _work.answer;
|
|
|
+ this.workData.json.fileList = _work.fileList;
|
|
|
+ } else if (this.workData.type == "45") {
|
|
|
+ this.workData.json.testJson.forEach((item, index) => {
|
|
|
+ if (
|
|
|
+ item.type == _work.testJson[index].type &&
|
|
|
+ item.teststitle == _work.testJson[index].teststitle &&
|
|
|
+ JSON.stringify(item.checkList) ==
|
|
|
+ JSON.stringify(_work.testJson[index].checkList)
|
|
|
+ ) {
|
|
|
+ this.workData.json.testJson[index].userAnswer =
|
|
|
+ _work.testJson[index].userAnswer;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //更新workData
|
|
|
+ changeWorkData(newValue){
|
|
|
+ console.log("changeWorkData",newValue)
|
|
|
+ this.workData.json = JSON.parse(newValue)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getWorkData();
|
|
|
+ this.getSubmitWork();
|
|
|
+ window.submitWork = this.submitWork;
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.workPage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tool {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 40px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_t15_title {
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: 300;
|
|
|
+ margin: 20px 0;
|
|
|
+ max-width: 50%;
|
|
|
+ min-width: 300px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_type {
|
|
|
+ margin: 20px 0;
|
|
|
+ font-size: 1em;
|
|
|
+ color: #7b7b7b;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_inputArea {
|
|
|
+ width: 50%;
|
|
|
+ min-width: 300px;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_inputArea >>> textarea {
|
|
|
+ border-color: #ececec;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-shadow: 0 0 10px #ececec;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_inputArea >>> textarea::placeholder {
|
|
|
+ color: #7f7f7f;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_uploadFileArea {
|
|
|
+ width: 50%;
|
|
|
+ min-width: 300px;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl_btn {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ padding: 12px 16px;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px dashed #e5e5e5;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #474747;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl_btn:hover {
|
|
|
+ background-color: #ececec;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl_btn > svg {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_uploadFileArea > span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #686868;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_fileList {
|
|
|
+ width: 50%;
|
|
|
+ min-width: 300px;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_fileList_item {
|
|
|
+ width: 150px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_fileList_item:hover > svg {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_fileList_item > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 10px #ececec;
|
|
|
+ margin: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_tl15_fileList_item > svg {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: -20px;
|
|
|
+ top: 1px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 选择题 */
|
|
|
+
|
|
|
+.wp_tool45 {
|
|
|
+ width: 60%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.wp_t45_title {
|
|
|
+ font-size: 3em;
|
|
|
+ font-weight: 300;
|
|
|
+ margin: 20px 0 40px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_toolItem {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_option {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 15px 15px 15px 15px;
|
|
|
+ display: flex;
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+ background-color: #f3f7fd;
|
|
|
+ border-radius: 30px;
|
|
|
+ margin: 10px 0 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_option > span > img {
|
|
|
+ max-height: 150px;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn {
|
|
|
+ width: 20px;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn > span {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #3681fc;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn > span > span {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #3681fc;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn1 {
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn1 > span::after {
|
|
|
+ content: "";
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn2 {
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_btn2 > span::after {
|
|
|
+ content: "";
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_o_choice {
|
|
|
+ border: solid 1px #3681fc;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > span:nth-of-type(1) {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3681fc;
|
|
|
+ min-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: -3px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > svg {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ min-width: 30px;
|
|
|
+ min-height: 30px;
|
|
|
+ margin: 0 10px 0 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > span:nth-of-type(2) {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: #1f1f1f;
|
|
|
+}
|
|
|
+
|
|
|
+.s_b_m_ti_title > div {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+/* 选择题 */
|
|
|
+</style>
|
SanHQin
