fix: 修改布局

src/views/EvalPage/EditExam.vue

@@ -1,17 +1,17 @@
 <template>
-  <el-row v-if="!showQuestionList" :gutter="20" type="flex" justify="space-between">
+  <el-row v-if="!showQuestionList" class="box1">
     <el-col :span="20" class="box">
       <el-card class="box-card" v-if="examInfo">
         <template #header>
-          <div class="card-header" v-if="paperQuestionsSet" style="font-size: 20px">
+          <div class="card-header" v-if="paperQuestionsSet" style="font-size: 17px">
             评测「{{ examInfo.examName }}」
           </div>
-          <div class="card-header" v-else style="font-size: 20px">
+          <div class="card-header" v-else style="font-size: 17px">
             评测「{{ examInfo.examName }}」创建成功 请设置试卷内容
           </div>
         </template>
-        <el-row>评测ID: {{ examInfo.examId }}</el-row>
-        <el-row>
+        <el-row class="text">评测ID: {{ examInfo.examId }}</el-row>
+        <el-row class="text">
           <el-col :span="12">
             评测邀请码：{{
               examInfo.inviteCode ? examInfo.inviteCode : '无'
@@ -21,7 +21,7 @@
             当前难度值：{{ examInfo.difficulty }}
           </el-col>
         </el-row>
-        <el-row>
+        <el-row class="text">
           <el-col :span="12">
             开始时间：{{ examInfo.startTime }}
           </el-col>
@@ -33,29 +33,19 @@
     </el-col>
     <el-col v-if="!paperQuestionsSet" :span="20" class="box">
       <el-card class="box-card">
-        <span style="font-size: 20px">样卷选择</span>
+        <span style="font-size: 17px">样卷选择</span>
         <el-divider></el-divider>
         <el-tabs v-model="tab" v-if="examSamples[0]" class="demo-tabs">
-          <el-tab-pane v-for="sample in examSamples" :key="sample.id" :name="sample.id"
-                       :label="'样卷'+sample.id">
+          <el-tab-pane v-for="sample in examSamples" :key="sample.id" :name="sample.id" :label="'样卷' + sample.id">
             <div v-if="!fetching">
-              <exam-questions-info
-                  :exam-questions="sampleQuestions[tab-1]"
-                  :examId="this.examInfo.examId"
-              ></exam-questions-info>
+              <exam-questions-info :exam-questions="sampleQuestions[tab - 1]"
+                :examId="this.examInfo.examId"></exam-questions-info>
             </div>
             <el-row justify="center">
-              <el-button
-                  type="primary"
-                  style="float:right"
-                  @click="onSelectSample(sample.id)"
-              >
+              <el-button type="primary" style="float:right" @click="onSelectSample(sample.id)">
                 选择此试卷
               </el-button>
-              <el-button
-                  style="float: left"
-                  @click="showQuestionList = true"
-              >
+              <el-button style="float: left" @click="showQuestionList = true">
                 基于样卷调整试题
               </el-button>
             </el-row>
@@ -67,63 +57,39 @@
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
-            <span style="font-size: 20px">试卷内容</span>
-            <el-button
-                v-if="fetching & hide"
-                @click="onClickHideButton()"
-                round
-                style="float: right"
-            >
+            <span style="font-size: 17px">试卷内容</span>
+            <el-button v-if="fetching & hide" @click="onClickHideButton()" round style="float: right">
               <el-icon class="el-icon--right">
-                <ArrowUp/>
+                <ArrowUp />
               </el-icon>
             </el-button>
-            <el-button
-                v-if="fetching & !hide"
-                @click="onClickShowButton()"
-                round
-                style="float: right"
-            >
+            <el-button v-if="fetching & !hide" @click="onClickShowButton()" round style="float: right">
               <el-icon class="el-icon--right">
-                <ArrowDown/>
+                <ArrowDown />
               </el-icon>
             </el-button>
             <!--          响应事件是？-->
-            <el-button
-                v-if="!fetching"
-                type="primary"
-                style="float: right"
-                @click="showQuestionList = true"
-            >
+            <el-button v-if="!fetching" type="primary" style="float: right" @click="showQuestionList = true">
               调整试题
             </el-button>
           </div>
         </template>
 
-        <exam-questions-info
-            v-show="showQuestionInfo"
-            :exam-questions="examQuestions"
-            :examId="this.examInfo.examId"
-        ></exam-questions-info>
+        <exam-questions-info v-show="showQuestionInfo" :exam-questions="examQuestions"
+          :examId="this.examInfo.examId"></exam-questions-info>
       </el-card>
     </el-col>
   </el-row>
-  <question-list
-      v-if="showQuestionList"
-      :sample-questions="curQuestions"
-      :question-and-score="curQuestionAndScore"
-      :exam-id="this.examInfo.examId"
-      :from-edit-page="true"
-      @leave="showQuestionList = false"
-  ></question-list>
+  <question-list v-if="showQuestionList" :sample-questions="curQuestions" :question-and-score="curQuestionAndScore"
+    :exam-id="this.examInfo.examId" :from-edit-page="true" @leave="showQuestionList = false"></question-list>
 </template>
 
 <script>
 
 import ExamQuestionsInfo from "@/views/EvalPage/ExamQuestionsInfo.vue";
 import QuestionList from "@/views/EvalPage/QuestionList.vue";
-import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
-import {ElMessage} from "element-plus";
+import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
 
 export default {
   name: "EditExam",
@@ -154,14 +120,14 @@ export default {
       if (this.paperQuestionsSet) {
         return this.examQuestionAndScore;
       }
-      return this.examSamples[this.tab-1].questionAndScore;
+      return this.examSamples[this.tab - 1].questionAndScore;
     },
 
     curQuestions() {
       if (this.paperQuestionsSet) {
         return this.examQuestions;
       }
-      return this.sampleQuestions[this.tab-1];
+      return this.sampleQuestions[this.tab - 1];
     },
 
   },
@@ -169,36 +135,36 @@ export default {
   created() {
     this.getExamInfo();
     this.$apis.getExamQuestions(this.examInfo.examId ?? "").then(
-        _res => {
-          if (_res.data.data.result) {
-            this.paperQuestionsSet = true;
-          }
-          this.examQuestionAndScore = _res.data.data.result.questionAndScore;
-          const questionsIds = Object.keys(_res.data.data.result.questionAndScore);
-          const questionsPromises = [];
-          this.fetching = true;
-          questionsIds.forEach((value, index) => {
-            questionsPromises[index] = this.$apis.getQuestionInfo(value);
-          });
-          Promise.all(questionsPromises)
-              .then(reps => {
-                this.examQuestions = reps.map((value) => {
-                  return value.data.data.result;
-                });
-              })
-              .catch((error) => {
-                console.log("题目获取失败");
-              })
-              .finally(() => {
-                this.fetching = false;
-              });
+      _res => {
+        if (_res.data.data.result) {
+          this.paperQuestionsSet = true;
         }
+        this.examQuestionAndScore = _res.data.data.result.questionAndScore;
+        const questionsIds = Object.keys(_res.data.data.result.questionAndScore);
+        const questionsPromises = [];
+        this.fetching = true;
+        questionsIds.forEach((value, index) => {
+          questionsPromises[index] = this.$apis.getQuestionInfo(value);
+        });
+        Promise.all(questionsPromises)
+          .then(reps => {
+            this.examQuestions = reps.map((value) => {
+              return value.data.data.result;
+            });
+          })
+          .catch((error) => {
+            console.log("题目获取失败");
+          })
+          .finally(() => {
+            this.fetching = false;
+          });
+      }
     ).catch(() => {
       this.$apis.getSamplePaper().then(
-          _res => {
-            this.examSamples = _res.data.data.result;
-            this.fetchQuestionInfo(0);
-          });
+        _res => {
+          this.examSamples = _res.data.data.result;
+          this.fetchQuestionInfo(0);
+        });
     });
   },
 
@@ -225,7 +191,7 @@ export default {
         this.fetching = true;
         let questionsPromises = [];
         let questionsIds = Object.entries(
-            this.examSamples[val].questionAndScore
+          this.examSamples[val].questionAndScore
         );
         questionsPromises = questionsIds.map((val) => {
           return this.$apis.getQuestionInfo(val[0]);
@@ -241,20 +207,20 @@ export default {
 
     onSelectSample(sampleId) {
       this.$apis.setExamPaperFromSample(this.examInfo.examId ?? "", sampleId).then(
-          () => {
-            ElMessage({
-              message: "设置样卷成功",
-              type: "success",
+        () => {
+          ElMessage({
+            message: "设置样卷成功",
+            type: "success",
+          });
+          setTimeout(() => {
+            this.$router.push({
+              name: "teacher-examDetails",
+              params: {
+                examId: this.examInfo.examId,
+              }
             });
-            setTimeout(() => {
-              this.$router.push({
-                name: "teacher-examDetails",
-                params: {
-                  examId: this.examInfo.examId,
-                }
-              });
-            }, 1000);
-          }
+          }, 1000);
+        }
       ).catch(() => {
         ElMessage.error("设置样卷失败");
       });
@@ -287,14 +253,24 @@ export default {
 }
 
 .box {
-  height: 80%;
+  height: 100%;
   /*overflow-y: auto;*/
   display: flex;
   flex-direction: column;
-  margin-left: 150px;
+  margin-top: 10px;
+}
+
+.box1 {
+  display: flex;
+  justify-content: center;
 }
 
 .el-card {
   margin-bottom: 20px;
 }
+
+.text {
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+}
 </style>

src/views/EvalPage/ExamQuestionsInfo.vue

@@ -1,48 +1,37 @@
 <template>
   <div>
     <div v-for="question in examQuestions" :key="question.id">
-      <el-divider/>
-      <el-row>
-        <el-col :span="2">
+      <el-divider />
+      <el-row :gutter="10">
+        <el-col :span="1" class="box">
           <el-tag v-if="!analysis">
             {{ examQuestions.indexOf(question) + 1 }}
           </el-tag>
-          <el-tag v-else :type="submitAnswers.get(question.id) === question.answer.replace(/[;]/gi, '') ? 'success' : 'danger' ">
-            {{ examQuestions.indexOf(question) + 1 }}
+          <el-tag v-else
+            :type="submitAnswers.get(question.id) === question.answer.replace(/[;]/gi, '') ? 'success' : 'danger'">
+            {{ examQuestions.indexOf(question) + 1 }} "
           </el-tag>
         </el-col>
-        <el-col :span="18">
-          <markdown-text
-              :raw="question.stem + mergeOptions(question.options)"
-              style="height: 100%;width: 100%"
-          ></markdown-text>
+        <el-col :span="18" class="box1">
+          <markdown-text :raw="question.stem + mergeOptions(question.options)" class="text"></markdown-text>
         </el-col>
-        <el-col :span="4">
-          <el-card v-if="question.keyPoints">
+        <el-col :span="4" class="box">
+          <el-card v-if="question.keyPoints" shadow="hover" class="text" style="width:150px;height: :100px;">
             关键词: {{ question.keyPoints }}
           </el-card>
         </el-col>
       </el-row>
       <el-row v-if="analysis && question.type !== 'code'">
         <el-col>
-          <markdown-text
-              :raw="question.analysis"
-              style="height: 100%;width: 100%"
-          ></markdown-text>
+          <markdown-text :raw="question.analysis" style="height: 100%;width: 100%"></markdown-text>
         </el-col>
-        <el-col
-            v-if="question.type !== 'short_answer'"
-        >
+        <el-col v-if="question.type !== 'short_answer'">
           我的答案：
-          <el-tag
-              :type="
-              submitAnswers.get(question.id) ===
+          <el-tag :type="submitAnswers.get(question.id) ===
               question.answer.replace(/[;]/gi, '')
-                ? 'success'
-                : 'danger'
-            "
-              v-if="submitAnswers.size > 0"
-          >
+              ? 'success'
+              : 'danger'
+            " v-if="submitAnswers.size > 0">
             {{ submitAnswers.get(question.id) }}
           </el-tag>
           正确答案：
@@ -60,7 +49,7 @@
 import MarkdownText from "@/views/EvalPage/MarkdownText.vue";
 export default {
   name: "ExamQuestionsInfo",
-  components: {MarkdownText},
+  components: { MarkdownText },
   props: {
     examQuestions: {
       type: Array,
@@ -79,7 +68,7 @@ export default {
   },
 
   methods: {
-    mergeOptions(options){
+    mergeOptions(options) {
       if (!options) {
         return "";
       }
@@ -101,14 +90,14 @@ export default {
           this.submitAnswers = new Map();
           records.forEach((val) => {
             this.submitAnswers.set(
-                val.questionId,
-                val.submitAnswer === ""
-                    ? "无"
-                    : val.submitAnswer === "t"
-                        ? "true"
-                        : val.submitAnswer === "f"
-                            ? "false"
-                            : val.submitAnswer.replace(/[;]/gi, "")
+              val.questionId,
+              val.submitAnswer === ""
+                ? "无"
+                : val.submitAnswer === "t"
+                  ? "true"
+                  : val.submitAnswer === "f"
+                    ? "false"
+                    : val.submitAnswer.replace(/[;]/gi, "")
             );
           });
         } else {
@@ -122,7 +111,7 @@ export default {
   },
 
   mounted() {
-    if(this.analysis){
+    if (this.analysis) {
       this.fetchAnswers();
     }
   }
@@ -130,5 +119,19 @@ export default {
 </script>
 
 <style scoped>
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box1 {
+  display: flex;
+  align-items: center;
+}
 
+.text {
+  font-family: Roboto, sans-serif;
+  font-size: 14px;
+}
 </style>

src/views/EvalPage/MarkdownText.vue

@@ -28,11 +28,13 @@ export default {
   word-break: break-all;
   white-space: pre-wrap;
   margin-top: 16px;
+
   p {
     margin-bottom: 0;
   }
+
   img {
-    max-width: 100%;
+    max-width: 80%;
   }
 }
 </style>

src/views/EvalPage/QuestionList.vue

@@ -1,25 +1,27 @@
 <template>
-  <el-row :gutter="20" type="flex" justify="space-between">
+  <el-row class="box1">
     <el-col :span="20" class="box">
       <el-card class="box-card">
-        <span style="font-size: 20px">已选题目</span>
+        <span style="font-size: 17px">已选题目</span>
         <el-divider></el-divider>
         <el-table ref="selectedQuestionsTable" :data="selectedQuestions" style="width: 100%" empty-text="空"
           :row-key="getRowKeys">
           <el-table-column label="分值" width="100">
             <template #default="scope">
-              <span>{{ scope.row.score }}</span>
-              <el-icon @click="increasePoints(scope.row)">
-                <ArrowUp />
-              </el-icon>
-              <el-icon @click="decreasePoints(scope.row)">
-                <ArrowDown />
-              </el-icon>
+              <span style="float: left; color: #71bbdb ">{{ scope.row.score }}</span>
+              <span class="box2">
+                <el-icon @click="increasePoints(scope.row)">
+                  <CaretTop />
+                </el-icon>
+                <el-icon @click="decreasePoints(scope.row)">
+                  <CaretBottom />
+                </el-icon>
+              </span>
             </template>
           </el-table-column>
           <el-table-column label="操作" width="100">
             <template #default="scope">
-              <el-icon @click="deleteItem(scope.$index, scope.row)">
+              <el-icon @click="deleteItem(scope.$index, scope.row)" :size="20">
                 <DeleteFilled />
               </el-icon>
             </template>
@@ -38,10 +40,10 @@
     </el-col>
     <el-col :span="20" class="box">
       <el-card class="box-card">
-        <span style="font-size: 20px">试题列表</span>
+        <span style="font-size: 17px">试题列表</span>
         <el-divider></el-divider>
-        <el-row>
-          <el-col :span="8">
+        <el-row style="justify-content:right;">
+          <el-col :span="5">
             <el-input v-model="stem" class="w-50 m-2" size="small" placeholder="根据题目内容查找" @input="onSearch">
               <template #prefix>
                 <el-icon>
@@ -50,25 +52,6 @@
               </template>
             </el-input>
           </el-col>
-          <el-col :span="8">
-
-            <el-input v-model="tags" class="w-50 m-2" placeholder="根据标签查找" size="small" @input="onSearch">
-              <template #prefix>
-                <el-icon>
-                  <Search />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-col>
-          <el-col :span="8">
-            <el-input v-model="knowledgeName" class="w-50 m-2" placeholder="根据关键词查找" size="small" @input="onSearch">
-              <template #prefix>
-                <el-icon>
-                  <Search />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-col>
         </el-row>
         <el-table ref="questionsTable" :data="expanded" :row-key="getRowKeys" style="width: 100%" @select="handleSelect"
           @select-all="handleSelectAll">
@@ -262,13 +245,25 @@ export default {
 
 <style scoped>
 .box {
-  height: 80%;
+  height: 100%;
   /*overflow-y: auto;*/
   display: flex;
   flex-direction: column;
-  margin-left: 150px;
+  margin-top: 10px;
 }
 
+.box1 {
+  display: flex;
+  justify-content: center;
+}
+
+.box2 {
+  display: flex;
+  flex-direction: column;
+  margin-top: -3px;
+}
+
+
 .el-card {
   margin-bottom: 20px;
 }