From 94da5161fcc39a88e0337e67573a3dd96691b39c Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期四, 06 六月 2024 17:11:12 +0800
Subject: [PATCH] 试卷管理和试卷模板ui
---
src/views/Manage/TestPaper/TestPaperGeneration.vue | 1024 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 758 insertions(+), 266 deletions(-)
diff --git a/src/views/Manage/TestPaper/TestPaperGeneration.vue b/src/views/Manage/TestPaper/TestPaperGeneration.vue
index 3b9bbc4..85c3081 100644
--- a/src/views/Manage/TestPaper/TestPaperGeneration.vue
+++ b/src/views/Manage/TestPaper/TestPaperGeneration.vue
@@ -3,301 +3,793 @@
<div class="c">
<div class="bg">
<div class="main">
- <!-- 甯﹁繑鍥炵殑鏍囬 -->
- <TitleIndex title="璇曞嵎鐢熸垚" />
- <div class="content">
- <!-- 鎼滅储 -->
- <div>
- <el-form
- :inline="true"
- :model="formLabelAlign"
- class="demo-form-inline"
- label-width="80px"
+ <div class="paper-main">
+ <div class="paper-content">
+ <!-- 璇曢 -->
+ <div
+ ref="paperContent"
+ class="paper-left"
>
- <el-form-item>
- <el-input
- v-model="formLabelAlign.type"
- placeholder="棰樼洰鍚�"
- ></el-input>
- </el-form-item>
- <el-form-item>
- <el-select
- v-model="formLabelAlign.region"
- placeholder="棰樼洰绫诲瀷"
+ <div
+ class="subject"
+ v-for="item in convertDatas"
+ :key="item.id"
+ >
+ <div class="subject-title">
+ <h2>{{ item.name }}</h2>
+ <span>锛堝叡 {{ item.count }} 棰橈紝鍚堣 {{ item.totalScore }} 鍒嗭級</span>
+ </div>
+ <el-card
+ class="box-card"
+ v-for="(sub,index) in item.childs"
+ :id="item.code+(index+1)"
+ :key="sub.id"
>
- <el-option
- label="鍏ㄩ儴棰樼洰"
- value="shanghai"
- ></el-option>
- <el-option
- label="閫夋嫨棰�"
- value="shanghai"
- ></el-option>
- <el-option
- label="鍒ゆ柇棰�"
- value="beijing"
- ></el-option>
- <el-option
- label="绠�鍗曢"
- value="beijing"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-select
- v-model="formLabelAlign.region"
- placeholder="鍏ㄩ儴绉戠洰"
- >
- <el-option
- label="鍏ㄩ儴绉戠洰"
- value="shanghai"
- ></el-option>
- <el-option
- label="璇枃"
- value="beijing"
- ></el-option>
- <el-option
- label="鏁板"
- value="beijing"
- ></el-option>
- </el-select>
- </el-form-item>
+ <div
+ slot="header"
+ class="clearfix"
+ >
+ <el-tag
+ effect="dark"
+ style="margin-right:10px"
+ > {{ sub.no }}
+ </el-tag>
+ <span>{{ sub.subject }}</span>
+ <span>({{ sub.totalScore }}鍒�)</span>
+ <div
+ v-if="type===2 || type===3"
+ style="float: right; padding: 3px 0"
+ >
+ <el-radio-group v-model="sub.isHook">
+ <el-radio-button
+ :disabled="disabledRead"
+ :label="1"
+ @change.native="isHookButtionCheck(sub)"
+ ><i class="el-icon-check"/></el-radio-button>
+ <el-radio-button
+ :disabled="disabledRead"
+ :label="2"
+ @change.native="isHookButtionCheck(sub)"
+ ><i class="el-icon-close"/></el-radio-button>
+ </el-radio-group>
+ <div
+ v-if="sub.type===1 ||sub.type===2||sub.type===3"
+ style="display: inline;"
+ >
+ <el-input
+ :disabled="true"
+ v-model="sub.score"
+ style="width:50px"
+ ></el-input>
+ <span>鍒�</span>
+ </div>
+ <div
+ v-else
+ style="display: inline;"
+ >
+ <el-input
+ :disabled="disabledRead"
+ v-model="sub.score"
+ style="width:50px"
+ ></el-input>
+ <span>鍒�</span>
+ </div>
- <el-form-item label="">
- <el-button
- style="width:100px;"
- type="primary"
- size="small"
- >鏌ヨ</el-button>
- </el-form-item>
- </el-form>
+ </div>
+ </div>
+ <el-radio-group
+ v-if="sub.type===1"
+ v-model="sub.examineAnswer"
+ >
+ <el-radio
+ :disabled="disabledAnswer"
+ v-for="o in sub.answers"
+ :key="o.id"
+ :label="o.no"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >{{ o.no }}.{{ o.answer }}
+ </el-radio>
+ </el-radio-group>
+ <el-checkbox-group
+ v-if="sub.type===2"
+ v-model="sub.examineAnswer"
+ >
+ <el-checkbox
+ :disabled="disabledAnswer"
+ v-for="o in sub.answers"
+ :key="o.id"
+ :label="o.no"
+ class="answer-checkbox"
+ @change="answerButtionCheck($event,item,sub)"
+ >{{ o.no }}.{{ o.answer }}
+ </el-checkbox>
+ </el-checkbox-group>
+ <el-radio-group
+ v-if="sub.type===3"
+ v-model="sub.examineAnswer"
+ >
+ <el-radio
+ :disabled="disabledAnswer"
+ label="瀵�"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >瀵�
+ </el-radio>
+ <el-radio
+ :disabled="disabledAnswer"
+ label="閿�"
+ class="answer-radio"
+ @change="answerButtionCheck($event,item,sub)"
+ >閿�
+ </el-radio>
+ </el-radio-group>
+ <el-input
+ :disabled="disabledAnswer"
+ v-if="sub.type===4"
+ type="textarea"
+ :rows="2"
+ v-model="sub.examineAnswer"
+ resize="none"
+ maxlength="150"
+ @blur="answerButtionCheck($event,item,sub)"
+ ></el-input>
+ <el-input
+ :disabled="disabledAnswer"
+ v-if="sub.type===5"
+ type="textarea"
+ :rows="10"
+ v-model="sub.examineAnswer"
+ resize="none"
+ maxlength="2000"
+ @blur="answerButtionCheck($event,item,sub)"
+ ></el-input>
+ <div
+ v-if="type!==1"
+ class="subject-remark"
+ >
+ <div class="item">
+ <span class="title">鑰冪敓绛旀锛�</span>
+ <span>{{ converAnswerStr(sub.examineAnswer) }}</span>
+ </div>
+ <div class="item">
+ <span class="title">姝ｇ‘绛旀锛�</span>
+ <span>{{ converAnswerStr(sub.correctAnswer) }}</span>
+ </div>
+ <div class="item">
+ <span class="title">鑰冪敓绛旀锛�</span>
+ <span>{{ sub.answerAnalysis }}</span>
+ </div>
+ </div>
+ </el-card>
+ </div>
+ </div>
+ <!-- 绛旈鍗� -->
+ <div
+ ref="paperLeft"
+ class="paper-right"
+ >
+ <div class="paper-title">
+ <h1><i class="el-icon-s-grid"></i>绛旈鍗�
+ <span class="downTime"><i
+ class="el-icon-alarm-clock"
+ style=" color: #000; font-weight: bold; font-size: 24px;margin-right: 10px;"
+ ></i>{{ hour ? hourString + ':' + minuteString + ':' + secondString : minuteString + ':' + secondString }}</span>
+ </h1>
+ </div>
+ <el-collapse v-model="answerCardActiveName">
+ <el-collapse-item
+ v-for="item in convertDatas"
+ :key="item.id"
+ :name="item.code"
+ >
+ <template slot="title">
+ <h2>{{ item.name }}</h2>
+ <span>鍏眥{ item.count }}棰�</span>
+ </template>
+ <el-button
+ class="answer-button"
+ circle
+ size="small"
+ v-for="index of item.count"
+ :key="index"
+ :id="'answer'+item.code+index"
+ @click.native="jump(item.code+index)"
+ >{{ index }}
+ </el-button>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+
</div>
- <!-- 琛ㄦ牸 -->
- <el-table
- :row-style="{height:'38px'}"
- :cell-style="{padding: '0'}"
- ref="multipleTable"
- :data="tableData"
- tooltip-effect="dark"
- style="width: 100%"
- @selection-change="handleSelectionChange"
- border
- >
- <el-table-column
- align="center"
- type="selection"
- width="55"
- >
- </el-table-column>
- <el-table-column
- prop="title"
- label="棰樼洰鍚�"
- align="center"
- width="220"
- min-width="180"
- >
- </el-table-column>
- <el-table-column
- prop="type"
- label="棰樼洰绫诲瀷"
- align="center"
- width="120"
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="subject"
- label="绉戠洰"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="score"
- label="鍒嗗��"
- show-overflow-tooltip
- >
- </el-table-column>
- <el-table-column
- align="center"
- prop="reference"
- label="鍙傝�冪瓟妗�"
- show-overflow-tooltip
- >
- </el-table-column>
- </el-table>
- <div style="margin-top: 20px;text-align: center;">
- <el-button type="primary">鐢熸垚璇曞嵎</el-button>
- </div>
- <div
- class="block"
- style="display: flex; margin-top: 40px;"
- >
- <el-pagination
- style="margin:auto"
- background
- :page-size="10"
- layout="prev, pager, next, jumper"
- :total="100"
- >
- </el-pagination>
+ <div class="paper-footer">
+ <el-button
+ v-if="type===1"
+ type="success"
+ @click.native="btnClick('handPaper')"
+ >浜ゅ嵎
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaper')"
+ >闃呭嵎
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaperUpper')"
+ >涓婁竴涓�
+ </el-button>
+ <el-button
+ v-if="type===2"
+ type="success"
+ @click.native="btnClick('readPaperNext')"
+ >涓嬩竴涓�
+ </el-button>
</div>
</div>
-
</div>
-
</div>
-
</div>
</template>
<script>
export default {
+ name: "examinationPaper",
+ props: {
+ //璇曞嵎绫诲瀷 1 鑰冭瘯 2 闃呭嵎 3 鏌ョ湅
+ type: {
+ type: Number,
+ default: 2,
+ },
+ //鏁版嵁婧�
+ dataSource: {
+ type: Object,
+ default: () => {
+ return {
+ //璇曞嵎ID
+ paperId: "",
+ //璇曞嵎鍚嶇О
+ paperName: "",
+ //鑰冪敓ID
+ examineId: "",
+ //鑰冪敓鍚嶇О
+ examineName: "",
+ //鍒嗘暟
+ score: null,
+ //鑰冭瘯鏃堕暱(鍒嗛挓)
+ examDuration: null,
+ //浜ゅ嵎鏃堕棿
+ submissionTime: "",
+ //棰樼洰闆嗗悎
+ list: [
+ {
+ //棰樼洰绫诲瀷 1.鍗曢�夐 2.澶氶�夐 3.鍒ゆ柇棰� 4.濉┖棰� 5.绠�绛旈
+ type: null,
+ //棰樺彿
+ no: null,
+ //棰樼洰
+ subject: "",
+ //棰樼洰鎬诲垎
+ totalScore: null,
+ //绛旀闆嗗悎
+ answers: [
+ {
+ //绛旀搴忓彿
+ no: "",
+ //绛旀
+ answer: "",
+ },
+ ],
+ //鑰冪敓绛旀
+ examineAnswer: null,
+ //姝ｇ‘绛旀
+ correctAnswer: null,
+ //绛旀瑙ｆ瀽
+ answerAnalysis: "",
+ //鏄惁瀵归敊 1.瀵� 2.閿�
+ isHook: null,
+ //寰楀垎
+ score: null,
+ },
+ ],
+ };
+ },
+ },
+ },
data() {
return {
- formLabelAlign: {
- type: "",
- user: "",
- region: "",
- },
- tableData: [
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- {
- // 閫夋嫨
- isChoice: false,
- // 棰樼洰鍚嶇О
- title: "绉嬫ⅷ鑶�",
- type: "鍒ゆ柇棰�",
- subject: "璇枃",
- score: "1",
- reference: "A",
- },
- ],
- //鎻愪氦鎸夐挳
- multipleSelection: [],
+ //鍊掕灏忔椂
+ hour: "",
+ //鍊掕鍒嗛挓
+ minute: "",
+ //鍊掕绉�
+ second: "",
+ //璁℃椂鍣�
+ promiseTimer: "",
+ //鏁版嵁婧�
+ tempDataSource: {},
+ //绛旈鍗℃縺娲婚」
+ answerCardActiveName: [],
+ //缁勮鍚庢暟鎹泦
+ convertDatas: [],
+ //绂佹绛旈
+ disabledAnswer: false,
+ //绂佹闃呭嵎
+ disabledRead: false,
};
+ },
+ watch: {
+ dataSource(newValue, oldValue) {
+ Object.assign(this.tempDataSource, newValue);
+ this.convertData();
+ },
+ },
+ created() {
+ Object.assign(this.tempDataSource, this.dataSource);
+ this.convertData();
+ if (this.type === 2) {
+ this.disabledAnswer = true;
+ }
+ if (this.type === 3) {
+ this.disabledAnswer = true;
+ this.disabledRead = true;
+ }
+ },
+ computed: {
+ hourString() {
+ return this.hour < 10 ? "0" + this.hour : "" + this.hour;
+ },
+ minuteString() {
+ return this.minute < 10 ? "0" + this.minute : "" + this.minute;
+ },
+ secondString() {
+ return this.second < 10 ? "0" + this.second : "" + this.second;
+ },
+ },
+ mounted() {
+ if (this.type === 1) {
+ let remainTime = this.dataSource.examDuration * 60;
+ if (remainTime > 0) {
+ this.hour = Math.floor((remainTime / 3600) % 24);
+ this.minute = Math.floor((remainTime / 60) % 60);
+ this.second = Math.floor(remainTime % 60);
+ this.countDowm();
+ }
+ }
+
+ if (this.type === 2 || this.type === 3) {
+ this.convertDatas.forEach((t) => {
+ t.childs.forEach((c) => {
+ this.answerButtionCheck(c.examineAnswer, t, c);
+ });
+ });
+ }
},
methods: {
// 杩斿洖涓婁竴涓〉闈�
goBack() {
this.$router.back();
},
- //鎻愪氦鎸夐挳
- onSubmit() {
- console.log("submit!");
+ /**
+ * 鎸夐挳鐐瑰嚮浜嬩欢
+ */
+ btnClick(type) {
+ console.log(this.tempDataSource);
+ switch (type) {
+ //浜ゅ嵎
+ case "handPaper":
+ this.$emit("PaperHand", this.tempDataSource);
+ break;
+ //闃呭嵎
+ case "readPaper":
+ this.$emit("paperRead", this.tempDataSource);
+ break;
+ //闃呭嵎 涓婁竴涓�
+ case "readPaperUpper":
+ this.$emit("paperReadUpper");
+ break;
+ //闃呭嵎 涓嬩竴涓�
+ case "readPaperNext":
+ this.$emit("paperReadNext");
+ break;
+ }
},
- // 淇敼琛ㄥ崟澶撮儴鐨勯鑹�
- getRowClass() {
- return "background:#d2d3d6";
+ /**
+ * 閿氱偣瀹氫綅
+ */
+ // 杩欏効灏辨槸瀹氫綅
+ jump(postion) {
+ console.log("postion", postion);
+ let jump = this.$refs.paperContent.querySelectorAll("#" + postion);
+ // 鑾峰彇闇�瑕佹粴鍔ㄧ殑璺濈
+ // 鐖剁洅瀛愬埌娴忚鍣ㄩ《閮ㄧ殑璺濈
+ let subjectTitleTop = this.$refs.paperContent.offsetTop;
+ // 瀵瑰簲鐨勫厓绱犲埌娴忚鍣ㄩ《閮ㄧ殑璺濈
+ let total = jump[0].offsetTop;
+ //瀹炵幇form閿氱偣瀹氫綅锛堜娇鐢ㄥ綋鍓嶈窛绂诲噺鍘荤埗鍏冪礌鍒伴《閮ㄨ窛绂伙級
+ this.$refs.paperContent.scrollTop = total - subjectTitleTop;
},
-
- // 閫夋嫨
- handleSelectionChange(val) {
+ /**
+ *瀵归敊閫夋嫨
+ */
+ isHookButtionCheck(val) {
console.log(val, "val");
- this.multipleSelection = val;
+ if (val.type === 1 || val.type === 2 || val.type === 3) {
+ if (val.isHook === 1) {
+ val.score = val.totalScore;
+ }
+ if (val.isHook === 2) {
+ val.score = 0;
+ }
+ }
+ },
+ /**
+ *绛旈鍗￠�変腑
+ */
+ answerButtionCheck(value, parent, child) {
+ console.log(value, parent, child);
+ let answerId = "answer" + parent.code + child.no;
+ let but = this.$refs.paperLeft.querySelectorAll("#" + answerId);
+ if (but.length > 0) {
+ if (but[0].className.indexOf("answer-button-check") > -1) {
+ if (child.examineAnswer && child.examineAnswer.length == 0) {
+ but[0].classList.remove("answer-button-check");
+ }
+ } else {
+ if (child.examineAnswer && child.examineAnswer.length > 0) {
+ but[0].classList.add("answer-button-check");
+ }
+ }
+ }
+ },
+ /**
+ * 杞崲绛旀
+ */
+ converAnswerStr(answer) {
+ if (answer instanceof Array) {
+ return answer.join(" ");
+ }
+ return answer;
+ },
+ /**
+ * 杞崲鏁版嵁
+ */
+ convertData() {
+ let sorted = this.groupBy(this.tempDataSource.list, function (item) {
+ return [item.type];
+ });
+ this.convertDatas = [];
+ this.answerCardActiveName = [];
+ this.orderBy(sorted, "key", "asc");
+ sorted.forEach((item) => {
+ let totalScore = 0;
+ item.value.forEach((t) => {
+ totalScore += t.totalScore;
+ });
+ switch (item.key) {
+ case "[1]":
+ this.convertDatas.push({
+ name: "鍗曢�夐",
+ code: "Single",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Single");
+ break;
+ case "[2]":
+ this.convertDatas.push({
+ name: "澶氶�夐",
+ code: "Multiple",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Multiple");
+ break;
+ case "[3]":
+ this.convertDatas.push({
+ name: "鍒ゆ柇棰�",
+ code: "Judgment",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Judgment");
+ break;
+ case "[4]":
+ this.convertDatas.push({
+ name: "濉┖棰�",
+ code: "Blank",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Blank");
+ break;
+ case "[5]":
+ this.convertDatas.push({
+ name: "绠�绛旈",
+ code: "Answer",
+ count: item.value.length,
+ totalScore: totalScore,
+ childs: item.value,
+ });
+ this.answerCardActiveName.push("Answer");
+ break;
+ }
+ });
+ console.log(this.convertDatas);
+ },
+ /**
+ * 鎺掑簭
+ * @param {} datas 鏁扮粍
+ * @param {} col 鍒�
+ * @param {} type 绫诲瀷 desc,asc
+ * @returns {}
+ */
+ orderBy(datas, col, type) {
+ let m;
+ for (let i = 0; i < datas.length; i++) {
+ for (let k = 0; k < datas.length; k++) {
+ if (type === "asc") {
+ if (datas[i][col] < datas[k][col]) {
+ m = datas[k];
+ datas[k] = datas[i];
+ datas[i] = m;
+ }
+ } else if (type === "desc") {
+ if (datas[i][col] > datas[k][col]) {
+ m = datas[k];
+ datas[k] = datas[i];
+ datas[i] = m;
+ }
+ }
+ }
+ }
+ return datas;
+ },
+ /**
+ * 鍒嗙粍
+ * @param array 鏁版嵁闆�
+ * @param f 鍑芥暟
+ * let sorted = groupBy(list, function(item){ return [item.name];});
+ */
+ groupBy(array, f) {
+ const groups = {};
+ const keyValues = [];
+ array.forEach(function (o) {
+ const group = JSON.stringify(f(o));
+ groups[group] = groups[group] || [];
+ groups[group].push(o);
+ });
+ Object.keys(groups).map(function (group) {
+ return keyValues.push({key: group, value: groups[group]});
+ });
+ return keyValues;
+ },
+ /**
+ * 鍊掕鏃�
+ */
+ countDowm() {
+ let self = this;
+ clearInterval(this.promiseTimer);
+ this.promiseTimer = setInterval(function () {
+ if (self.hour === 0 && self.minute === 0 && self.second === 0) {
+ self.disabledAnswer = true;
+ }
+ if (self.hour === 0) {
+ if (self.minute !== 0 && self.second === 0) {
+ self.second = 59;
+ self.minute -= 1;
+ } else if (self.minute === 0 && self.second === 0) {
+ self.second = 0;
+ self.$emit("countDowmEnd", true);
+ clearInterval(self.promiseTimer);
+ } else {
+ self.second -= 1;
+ }
+ } else {
+ if (self.minute !== 0 && self.second === 0) {
+ self.second = 59;
+ self.minute -= 1;
+ } else if (self.minute === 0 && self.second === 0) {
+ self.hour -= 1;
+ self.minute = 59;
+ self.second = 59;
+ } else {
+ self.second -= 1;
+ }
+ }
+ }, 1000);
},
},
};
</script>
-<style scoped lang="scss">
-.flex {
- display: flex;
-}
-// 鍐呭
-.content {
- width: 1262px;
- margin-bottom: 80px;
- background-color: #fff;
- padding: 20px 40px;
+
+<style lang="scss" scoped>
+.main {
+ width: 1227px;
+ background: white;
+ box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
+ padding: 32px 40px 0 40px;
+}
+
+.paper-main {
+ overflow: hidden;
+
+ .paper-header {
+ width: 100%;
+ height: 60px;
+ background-color: #f7f7f7;
+ position: absolute;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .paper-content {
+ display: flex;
+ // margin-top: 60px;
+ .paper-left {
+ flex: 1;
+ padding: 10px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ border: 1px solid #e4e4e4;
+ border-top: none;
+ height: 580px;
+ }
+
+ .paper-right {
+ height: 580px;
+ width: 300px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ box-sizing: border-box;
+ padding: 10px;
+ border: 1px solid #e4e4e4;
+ border-top: none;
+ }
+ }
+}
+
+.paper-footer {
+ line-height: 60px;
+ overflow: hidden;
+ box-sizing: border-box;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+.paper-title {
+ padding-left: 10px;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ /* background: #f7f7f7; */
+}
+
+.paper-title h1 {
+ font-size: 1.2em;
+ margin: 0;
+}
+
+.downTime {
+ color: rgb(230, 93, 110);
+ font-size: 24px;
+ font-weight: bold;
+ float: right;
+ line-height: 1em;
+}
+
+.answer-button {
+ padding: 0px;
+ color: #0a0a0a;
+ /* background-color: #ffffff; */
+ border-color: #e4e4e4;
+ margin-left: 10px;
+ width: 30px;
+ height: 30px;
+}
+
+.answer-button:hover {
+ /* background: #ecf1ef; */
+ border-color: #e4e4e4;
+ color: #0a0a0a;
+}
+
+.answer-button-check {
+ background: #13ce66;
+ border-color: #30b08f;
+}
+
+// 鍗曢�夋牱寮�
+.answer-radio {
+ display: list-item;
+ margin: 5px 0px;
+ list-style: none;
+}
+
+// 澶氶�夋牱寮�
+.answer-checkbox {
+ display: list-item;
+ margin: 5px 0px;
+ list-style: none;
+}
+
+.subject-title {
+ padding-left: 10px;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ /* background: #f7f7f7; */
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.subject-title h2 {
+ font-size: 16px;
+ display: inline-block;
+}
+
+.subject-title span {
+ font-size: 16px;
+ display: inline-block;
+}
+
+.subject-remark {
+ /* background: #f7f7f7; */
+}
+
+.subject-remark .item {
+ display: block;
+ padding: 5px;
+}
+
+.subject-remark .title {
+ font-weight: bold;
+}
+
+.el-radio > > > .el-radio__input.is-checked .el-radio__inner {
+ background-color: #13ce66;
+ border-color: #13ce66;
+}
+
+.el-radio-button > > > .el-radio-button__inner {
+ padding: 10px;
+}
+
+.el-collapse-item h2 {
+ width: 150px;
+ font-size: 14px;
+ display: inline-block;
+}
+
+.el-form--label-top > > > .el-form-item__label {
+ float: none;
+ display: inline-block;
+ text-align: left;
+ padding: 0px;
+}
+
+.el-card {
+ margin: 10px;
+}
+
+.el-card > > > .el-card__header {
+ /* background-color: #ffffff; */
+ padding: 0px 10px;
+ line-height: 35px;
+ font-size: 16px;
+}
+
+.el-card > > > .el-card__body {
+ padding: 5px 20px;
}
</style>
--
Gitblit v1.8.0