细分页面ui调整

src/modules/portal/views/Login.vue

@@ -93,10 +93,8 @@ export default {
       this.$router.push(this.$route.hash.slice(1));
       return;
     }
-    // TODO:临时修改
-    this.loginInfo.domain = "test.ecs.qmth.com.cn";
-    // this.loginInfo.domain =
-    //   window.location.hostname.split(".")[0] + ".ecs.qmth.com.cn";
+    this.loginInfo.domain =
+      window.location.hostname.split(".")[0] + ".ecs.qmth.com.cn";
     sessionStorage.clear();
     var params = this.$route.query;
 

src/modules/questions/views/CheckDuplicateInfo.vue

@@ -1,42 +1,40 @@
 <template>
   <div v-loading="loading" class="part-box">
-    <div class="part-page">
-      <el-radio-group
-        v-model="duplicateQuestionIndex"
+    <div class="part-box-header">
+      <h1 class="part-box-title">试题详情</h1>
+      <div>
+        <el-button type="primary" @click="retain">保留</el-button>
+        <el-button type="danger" plain @click="deleteQues">删除</el-button>
+        <el-button type="danger" plain @click="ignore">跳过</el-button>
+        <el-button type="danger" plain @click="back">返回</el-button>
+      </div>
+    </div>
+    <div class="part-page margin-tb-20">
+      <el-button
+        v-for="(city, index) in duplicateQuestions"
+        :key="index"
+        type="danger"
+        :plain="duplicateQuestionIndex !== index"
         size="mini"
-        @change="selChange"
+        @click="selChange(index)"
+        >{{ index + 1 }}</el-button
       >
-        <el-radio-button
-          v-for="(city, index) in duplicateQuestions"
-          :key="index"
-          :label="index + 1"
-        ></el-radio-button>
-      </el-radio-group>
     </div>
-    <div class="box-justify">
-      <div style="width: 49%">
-        <QuestionInfo :question="curQuestion"></QuestionInfo>
-      </div>
-      <div style="width: 49%">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <QuestionInfo
+          :question="curQuestion"
+          style="height: 100%"
+        ></QuestionInfo>
+      </el-col>
+      <el-col :span="12">
         <QuestionInfo
           :question="duplicateQuestion"
           info-type="right"
+          style="height: 100%"
         ></QuestionInfo>
-      </div>
-    </div>
-    <div
-      style="
-        display: flex;
-        justify-content: center;
-        margin-top: 10px;
-        margin-bottom: 10px;
-      "
-    >
-      <el-button type="primary" size="mini" @click="retain">保留</el-button>
-      <el-button type="danger" size="mini" @click="deleteQues">删除</el-button>
-      <el-button type="primary" size="mini" @click="ignore">跳过</el-button>
-      <el-button type="primary" size="mini" @click="back">返回</el-button>
-    </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
@@ -57,7 +55,7 @@ export default {
       curQuestion: {},
       duplicateQuestion: {},
       duplicateQuestions: [],
-      duplicateQuestionIndex: 1,
+      duplicateQuestionIndex: 0,
     };
   },
   computed: {
@@ -202,7 +200,8 @@ export default {
         });
     },
     selChange(val) {
-      this.duplicateQuestion = this.duplicateQuestions[val - 1];
+      this.duplicateQuestion = this.duplicateQuestions[val];
+      this.duplicateQuestionIndex = val;
     },
     async queryData() {
       this.$http
@@ -220,4 +219,3 @@ export default {
   },
 };
 </script>
-<style scoped></style>

src/modules/questions/views/CheckDuplicateList.vue

@@ -119,12 +119,12 @@
         </el-table-column>
         <el-table-column label="题干">
           <template slot-scope="scope">
-            <span
-              class="row_quesBody"
+            <div
+              class="row-question-body"
+              title="点击查看试题"
               @click="prevViewQues(scope.row)"
               v-html="scope.row.quesBody"
-            >
-            </span>
+            ></div>
           </template>
         </el-table-column>
         <el-table-column label="题型大类" width="100">
@@ -152,7 +152,7 @@
             <span>{{ scope.row.creator }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="195" fixed="right">
+        <el-table-column label="操作" width="190" fixed="right">
           <template slot-scope="scope">
             <div class="operate_left">
               <el-button
@@ -165,13 +165,14 @@
               </el-button>
               <el-dropdown class="button_left">
                 <el-button type="primary" size="mini" plain>
-                  快速审核<i class="el-icon-arrow-down el-icon--right"></i>
+                  快速审核<i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="success"
+                      plain
                       @click="retainQuestion(scope.row.id)"
                     >
                       保留
@@ -181,6 +182,7 @@
                     <el-button
                       size="mini"
                       type="danger"
+                      plain
                       @click="deleteQuestion(scope.row.id)"
                     >
                       删除
@@ -642,12 +644,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.select_width {
-  width: 150px;
-}
-.row_quesBody >>> p {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-</style>

src/modules/questions/views/EditPaper.vue

@@ -72,7 +72,7 @@
                   type="primary"
                   plain
                   @click="exportPaperAnswer()"
-                  ><i class="el-icon-download"></i>导出答案</el-button
+                  >导出答案</el-button
                 >
               </el-dropdown-item>
               <el-dropdown-item>
@@ -81,7 +81,7 @@
                   size="small"
                   plain
                   @click="openAnswerDialog"
-                  ><i class="el-icon-upload2"></i>导入答案
+                  >导入答案
                 </el-button>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -580,7 +580,7 @@
     >
       <el-form :model="quesModel" label-position="right" label-width="80px">
         <el-row :gutter="10">
-          <el-col :xs="10" :sm="10" :md="10" :lg="10">
+          <el-col :span="12">
             <el-form-item label="题型">
               <el-select
                 v-model="quesModel.questionType"
@@ -597,7 +597,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :xs="10" :sm="10" :md="10" :lg="10">
+          <el-col :span="12">
             <el-form-item label="分值">
               <el-input-number
                 v-model="quesModel.score"
@@ -608,10 +608,7 @@
               ></el-input-number>
             </el-form-item>
           </el-col>
-        </el-row>
-        <!-- create by  weiwenhai 添加难度，公开度，试题属性 -->
-        <el-row :gutter="10">
-          <el-col :xs="10" :sm="10" :md="10" :lg="10">
+          <el-col :span="12">
             <el-form-item label="难度">
               <el-select
                 v-model="quesModel.difficultyDegree"
@@ -630,7 +627,7 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :xs="10" :sm="10" :md="10" :lg="10">
+          <el-col :span="12">
             <el-form-item label="公开度">
               <el-select
                 v-model="quesModel.publicity"
@@ -647,13 +644,9 @@
               </el-select>
             </el-form-item>
           </el-col>
-
           <el-col
             v-if="quesModel.questionType == 'TEXT_ANSWER_QUESTION'"
-            :xs="10"
-            :sm="10"
-            :md="10"
-            :lg="10"
+            :span="12"
           >
             <el-form-item label="作答类型">
               <el-select
@@ -672,10 +665,7 @@
           </el-col>
           <el-col
             v-if="quesModel.questionType && !isNested(quesModel.questionType)"
-            :xs="10"
-            :sm="10"
-            :md="10"
-            :lg="10"
+            :span="12"
           >
             <el-form-item label="时长">
               <el-input-number
@@ -687,13 +677,7 @@
               ></el-input-number>
             </el-form-item>
           </el-col>
-          <el-col
-            v-if="isMatchingQuestion(quesModel.questionType)"
-            :xs="10"
-            :sm="10"
-            :md="10"
-            :lg="10"
-          >
+          <el-col v-if="isMatchingQuestion(quesModel.questionType)" :span="12">
             <el-form-item label="答题模式">
               <el-select
                 v-model="quesModel.quesParam.matchingMode"
@@ -711,45 +695,41 @@
           </el-col>
         </el-row>
 
-        <el-row :gutter="10">
-          <el-col :xs="20" :sm="20" :md="20" :lg="20">
-            <el-form-item label="属性列表">
-              <el-tooltip
-                v-for="(content, propIndex) in quesModel.quesProperties"
-                :key="propIndex"
-                placement="top"
+        <el-form-item label="属性列表">
+          <el-tooltip
+            v-for="(content, propIndex) in quesModel.quesProperties"
+            :key="propIndex"
+            placement="top"
+          >
+            <div slot="content">
+              <span v-if="content.firstProperty != null"
+                >一级属性：{{ content.firstProperty.name }}({{
+                  content.firstProperty.code
+                }})</span
+              ><br />
+              <span v-if="content.secondProperty != null"
+                >二级属性：{{ content.secondProperty.name }}({{
+                  content.secondProperty.code
+                }})</span
               >
-                <div slot="content">
-                  <span v-if="content.firstProperty != null"
-                    >一级属性：{{ content.firstProperty.name }}({{
-                      content.firstProperty.code
-                    }})</span
-                  ><br />
-                  <span v-if="content.secondProperty != null"
-                    >二级属性：{{ content.secondProperty.name }}({{
-                      content.secondProperty.code
-                    }})</span
-                  >
-                </div>
-                <span>
-                  <el-tag
-                    :key="content.id"
-                    style="margin-right: 5px"
-                    :closable="!updatePorperty"
-                    type="primary"
-                    @close="handleClose(content)"
-                  >
-                    {{ content.courseProperty.name }}
-                  </el-tag>
-                </span>
-              </el-tooltip>
-            </el-form-item>
-          </el-col>
-        </el-row>
+            </div>
+            <span>
+              <el-tag
+                :key="content.id"
+                style="margin-right: 5px"
+                :closable="!updatePorperty"
+                type="primary"
+                @close="handleClose(content)"
+              >
+                {{ content.courseProperty.name }}
+              </el-tag>
+            </span>
+          </el-tooltip>
+        </el-form-item>
 
-        <el-row>
-          <el-col :span="6">
-            <el-form-item label="属性名" label-width="60px">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="属性名" label-width="80px">
               <el-select
                 v-model="coursePropertyId"
                 placeholder="属性名"
@@ -807,11 +787,10 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="6">
-            <el-form-item>
+          <el-col :span="4">
+            <el-form-item label-width="0px">
               <el-button
                 type="primary"
-                style="margin-left: -50px"
                 :disabled="updatePorperty"
                 @click="insertProperty"
                 ><i class="el-icon-plus"></i>新增属性
@@ -961,17 +940,7 @@
             </el-row>
           </div>
         </div>
-        <div
-          :class="{
-            margin_left_30:
-              quesModel.questionType == 'SINGLE_ANSWER_QUESTION' ||
-              quesModel.questionType == 'MULTIPLE_ANSWER_QUESTION',
-            margin_left_40: !(
-              quesModel.questionType == 'SINGLE_ANSWER_QUESTION' ||
-              quesModel.questionType == 'MULTIPLE_ANSWER_QUESTION'
-            ),
-          }"
-        >
+        <div style="text-align: right">
           <el-button
             v-if="
               (quesModel.questionType == 'SINGLE_ANSWER_QUESTION' ||
@@ -983,12 +952,14 @@
             @click="addQuesOption"
             ><i class="el-icon-plus"></i> 新增选项
           </el-button>
-          <el-button type="primary" @click="savePaperDetailUnit()"
-            >保存</el-button
-          >
-          <el-button @click="closeQuesDialog">取消</el-button>
         </div>
       </el-form>
+      <div slot="footer">
+        <el-button type="primary" @click="savePaperDetailUnit()"
+          >保存</el-button
+        >
+        <el-button type="danger" plain @click="closeQuesDialog">取消</el-button>
+      </div>
     </el-dialog>
     <!-- 考试说明弹框 -->
     <el-dialog
@@ -2544,14 +2515,3 @@ export default {
   },
 };
 </script>
-<style scoped src="../styles/EditPaper.css">
-.property_with {
-  width: 100px;
-}
-.ck-toolbar {
-  z-index: 9999;
-}
-#app {
-  background-color: white !important;
-}
-</style>

src/modules/questions/views/EditSelectQuestion.vue

@@ -105,7 +105,7 @@
               type="primary"
               @close="handleClose(content)"
             >
-              {{ content.coursePropertyName }}
+              {{ content.courseProperty.name }}
             </el-tag>
           </el-tooltip>
         </el-form-item>

src/modules/questions/views/ExamPaperPendingTrial.vue

@@ -65,12 +65,8 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="searchFrom"
-            ><i class="el-icon-search"></i> 查询</el-button
-          >
-          <el-button @click="resetForm"
-            ><i class="el-icon-refresh"></i> 重 置</el-button
-          >
+          <el-button type="primary" @click="searchFrom"> 查询</el-button>
+          <el-button type="danger" plain @click="resetForm">重 置</el-button>
         </el-form-item>
       </el-form>
       <div class="part-box-action">
@@ -91,7 +87,7 @@
           >
           <el-button
             :disabled="noBatchSelected"
-            type="primary"
+            type="danger"
             plain
             @click="auditPapers('NOT_PASS')"
             >批量不通过</el-button
@@ -200,39 +196,41 @@
                 type="primary"
                 plain
                 @click="editImportPaper(scope.row)"
-                ><i class="el-icon-view"></i>详情</el-button
+                >详情</el-button
               >
               <el-dropdown
                 v-show="isShowAuditBtn(scope.row)"
                 class="button_left"
               >
                 <el-button type="primary" size="mini" plain>
-                  审核<i class="el-icon-arrow-down el-icon--right"></i>
+                  审核<i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="success"
+                      plain
                       @click="auditPaper('PASS', scope.row.id)"
                     >
-                      <i class="el-icon-success"></i>通过
+                      通过
                     </el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="danger"
+                      plain
                       @click="auditPaper('NOT_PASS', scope.row.id)"
                     >
-                      <i class="el-icon-error"></i>不通过
+                      不通过
                     </el-button>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
               <el-dropdown class="button_left">
                 <el-button type="primary" size="mini" plain>
-                  更多 <i class="el-icon-arrow-down el-icon--right"></i>
+                  更多 <i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
@@ -240,8 +238,9 @@
                       v-show="isShowDeleteBtn(scope.row)"
                       size="mini"
                       type="danger"
+                      plain
                       @click="deletePaper(scope.row)"
-                      ><i class="el-icon-delete"></i>删除</el-button
+                      >删除</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -251,7 +250,7 @@
                       type="primary"
                       plain
                       @click="withdrawPaper(scope.row)"
-                      ><i class="el-icon-tickets"></i>撤回</el-button
+                      >撤回</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -261,7 +260,7 @@
                       type="primary"
                       plain
                       @click="submitPaper(scope.row)"
-                      ><i class="el-icon-finished"></i>提交</el-button
+                      >提交</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -270,7 +269,7 @@
                       type="primary"
                       plain
                       @click="exportPaper(scope.row)"
-                      ><i class="el-icon-download"></i>下载</el-button
+                      >下载</el-button
                     >
                   </el-dropdown-item>
                 </el-dropdown-menu>

src/modules/questions/views/GenPaper.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="content">
+  <section class="content gen-paper">
     <div v-show="isClear == 1">
       <LinkTitlesCustom :current-paths="['题库管理 ', '考试试卷管理']" />
     </div>
@@ -65,18 +65,15 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="searchFrom"
-            ><i class="el-icon-search"></i> 查询</el-button
-          >
-          <el-button @click="resetForm"
-            ><i class="el-icon-refresh"></i> 重 置</el-button
-          >
+          <el-button type="danger" @click="searchFrom">查询</el-button>
+          <el-button type="danger" plain @click="resetForm">重置</el-button>
         </el-form-item>
       </el-form>
       <div class="part-box-action">
         <div>
           <el-button
             type="danger"
+            plain
             :disabled="noBatchSelected"
             @click="batchDeleteGenPaper"
           >
@@ -84,6 +81,7 @@
           </el-button>
           <el-button
             type="danger"
+            plain
             :disabled="noBatchSelected"
             @click="recoveryPapers"
           >
@@ -91,12 +89,14 @@
           </el-button>
           <el-button
             type="primary"
+            plain
             :disabled="noBatchSelected"
             @click="openBatchExportPaperDialog"
             ><i class="el-icon-download"></i> 下载成卷</el-button
           >
           <el-button
             type="primary"
+            plain
             :disabled="noBatchSelected"
             @click="openQuesPro"
             ><i class="el-icon-edit"></i>试卷属性</el-button
@@ -189,20 +189,21 @@
                 type="primary"
                 plain
                 @click="editGenPaper(scope.row)"
-                ><i class="el-icon-edit"></i>编辑</el-button
+                >编辑</el-button
               >
               <el-dropdown class="button_left">
                 <el-button type="primary" size="mini" plain>
-                  更多 <i class="el-icon-arrow-down el-icon--right"></i>
+                  更多 <i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="danger"
+                      plain
                       @click="recoveryPaper(scope.row)"
                     >
-                      <i class="el-icon-delete"></i>回收
+                      回收
                     </el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -211,7 +212,7 @@
                       type="primary"
                       plain
                       @click="openExportDialog(scope.row)"
-                      ><i class="el-icon-download"></i> 下载</el-button
+                      >下载</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -220,7 +221,7 @@
                       type="primary"
                       plain
                       @click="previewPDF2(scope.row)"
-                      ><i class="el-icon-zoom-in"></i> 预览</el-button
+                      >预览</el-button
                     >
                   </el-dropdown-item>
                 </el-dropdown-menu>
@@ -243,10 +244,11 @@
       </div>
     </div>
 
+    <!-- 下载 -->
     <el-dialog
       title="导出"
       :visible.sync="exportDialog"
-      width="600"
+      width="600px"
       :modal="false"
       append-to-body
       custom-class="side-dialog"
@@ -290,6 +292,7 @@
       </div>
     </el-dialog>
 
+    <!-- 试卷属性 -->
     <el-dialog
       title="属性修改"
       :visible.sync="quesPropertyDialog"
@@ -300,9 +303,13 @@
     >
       <el-form :loading="quesLoading" :inline="true" label-width="100px">
         <el-form-item>
-          <el-checkbox v-model="difficultyDegreeDis"></el-checkbox>
-        </el-form-item>
-        <el-form-item label="难  度">
+          <span slot="label">
+            <el-checkbox
+              v-model="difficultyDegreeDis"
+              style="margin-right: 30px"
+            ></el-checkbox>
+            <span>难度</span>
+          </span>
           <el-select
             v-model="difficultyDegree"
             class="dialog_input_width"
@@ -317,9 +324,13 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-checkbox v-model="publicityDis"></el-checkbox>
-        </el-form-item>
-        <el-form-item label="公开度">
+          <span slot="label">
+            <el-checkbox
+              v-model="publicityDis"
+              style="margin-right: 16px"
+            ></el-checkbox>
+            <span>公开度</span>
+          </span>
           <el-select
             v-model="publicity"
             class="dialog_input_width"
@@ -341,11 +352,11 @@
           @click="updateQuesPropertyByPaper()"
           >保 存</el-button
         >
-        <el-button @click="resetQuesProForm"
-          ><i class="el-icon-refresh"></i> 重 置</el-button
+        <el-button type="danger" plain @click="resetQuesProForm"
+          >重 置</el-button
         >
-        <el-button type="primary" @click="closePropertyDialog"
-          ><i class="el-icon-arrow-left"></i> 返 回</el-button
+        <el-button type="danger" plain @click="closePropertyDialog"
+          >返 回</el-button
         >
       </div>
     </el-dialog>

src/modules/questions/views/PaperPendingTrial.vue

@@ -200,39 +200,41 @@
                 type="primary"
                 plain
                 @click="editImportPaper(scope.row)"
-                ><i class="el-icon-view"></i>详情</el-button
+                >详情</el-button
               >
               <el-dropdown
                 v-show="isShowAuditBtn(scope.row)"
                 class="button_left"
               >
                 <el-button type="primary" size="mini" plain>
-                  审核<i class="el-icon-arrow-down el-icon--right"></i>
+                  审核<i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="success"
+                      plain
                       @click="auditPaper('PASS', scope.row.id)"
                     >
-                      <i class="el-icon-success"></i>通过
+                      通过
                     </el-button>
                   </el-dropdown-item>
                   <el-dropdown-item>
                     <el-button
                       size="mini"
                       type="danger"
+                      plain
                       @click="auditPaper('NOT_PASS', scope.row.id)"
                     >
-                      <i class="el-icon-error"></i>不通过
+                      不通过
                     </el-button>
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
               <el-dropdown class="button_left">
                 <el-button type="primary" size="mini" plain>
-                  更多 <i class="el-icon-arrow-down el-icon--right"></i>
+                  更多 <i class="el-icon-more el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>
@@ -240,8 +242,9 @@
                       v-show="isShowDeleteBtn(scope.row)"
                       size="mini"
                       type="danger"
+                      plain
                       @click="deletePaper(scope.row)"
-                      ><i class="el-icon-delete"></i>删除</el-button
+                      >删除</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -251,7 +254,7 @@
                       type="primary"
                       plain
                       @click="withdrawPaper(scope.row)"
-                      ><i class="el-icon-tickets"></i>撤回</el-button
+                      >撤回</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -261,7 +264,7 @@
                       type="primary"
                       plain
                       @click="submitPaper(scope.row)"
-                      ><i class="el-icon-finished"></i>提交</el-button
+                      >提交</el-button
                     >
                   </el-dropdown-item>
                   <el-dropdown-item>
@@ -270,7 +273,7 @@
                       type="primary"
                       plain
                       @click="exportPaper(scope.row)"
-                      ><i class="el-icon-download"></i>下载</el-button
+                      >下载</el-button
                     >
                   </el-dropdown-item>
                 </el-dropdown-menu>

src/modules/questions/views/PaperStorage.vue

@@ -65,12 +65,8 @@
           ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="searchFrom"
-            ><i class="el-icon-search"></i> 查询</el-button
-          >
-          <el-button @click="resetForm"
-            ><i class="el-icon-refresh"></i> 重 置</el-button
-          >
+          <el-button type="primary" @click="searchFrom">查询</el-button>
+          <el-button type="danger" plain @click="resetForm">重 置</el-button>
         </el-form-item>
       </el-form>
       <div class="part-box-action">
@@ -155,7 +151,7 @@
           prop="updateDate"
         >
         </el-table-column>
-        <el-table-column label="操作" width="180" fixed="right">
+        <el-table-column label="操作" width="150" fixed="right">
           <template slot-scope="scope">
             <div class="operate_left">
               <el-button
@@ -163,14 +159,14 @@
                 type="primary"
                 plain
                 @click="viewPaper(scope.row)"
-                ><i class="el-icon-view"></i>查看</el-button
+                >查看</el-button
               >
               <el-button
                 size="mini"
                 type="primary"
                 plain
                 @click="releasePaper(scope.row)"
-                ><i class="el-icon-share"></i>释放</el-button
+                >释放</el-button
               >
             </div>
           </template>

src/modules/questions/views/Question.vue

@@ -131,12 +131,8 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="searchFrom"
-            ><i class="el-icon-search"></i> 查询</el-button
-          >
-          <el-button @click="resetForm"
-            ><i class="el-icon-refresh"></i> 重 置</el-button
-          >
+          <el-button type="primary" @click="searchFrom">查询</el-button>
+          <el-button type="danger" plain @click="resetForm">重 置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -161,15 +157,15 @@
         </el-table-column>
         <el-table-column label="题干">
           <template slot-scope="scope">
-            <span
-              class="row_quesBody"
+            <div
+              class="row-question-body"
+              title="点击查看试题"
               @click="prevViewQues(scope.row)"
               v-html="scope.row.quesBody"
-            >
-            </span>
+            ></div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="175">
+        <el-table-column label="操作" width="160">
           <template slot-scope="scope">
             <div class="operate_left">
               <el-button
@@ -179,14 +175,15 @@
                 plain
                 @click="updateRow(scope.row)"
               >
-                <i class="el-icon-edit"></i>编辑
+                编辑
               </el-button>
               <el-button
                 size="mini"
                 type="danger"
+                plain
                 @click="deleteRow(scope.row)"
               >
-                <i class="el-icon-delete"></i> 删除
+                删除
               </el-button>
             </div>
           </template>

src/modules/questions/views/QuestionInfo.vue

@@ -1,107 +1,98 @@
 <template>
-  <section class="content">
-    <div class="box-body">
-      <el-form :model="quesModel" label-position="right" label-width="80px">
-        <div style="border: 1px solid black">
-          <el-form-item label="题目">
-            <span v-html="quesModel.quesBody"></span>
-          </el-form-item>
+  <section class="question-info">
+    <el-form :model="quesModel" label-position="left" label-width="80px">
+      <el-form-item label="题目">
+        <div class="paper-question-body" v-html="quesModel.quesBody"></div>
+      </el-form-item>
+      <el-form-item
+        v-for="(quesOption, optIndex) in quesModel.quesOptions"
+        :key="optIndex"
+      >
+        <div class="paper-question-option">
+          <span>{{ optIndex | optionOrderWordFilter }}:</span>
+          <span v-html="quesOption.optionBody"></span>
+        </div>
+      </el-form-item>
 
-          <el-form-item
-            v-for="(quesOption, optIndex) in quesModel.quesOptions"
-            :key="optIndex"
-          >
-            <div style="display: flex; gap: 4px">
-              <span>{{ optIndex | optionOrderWordFilter }}:</span>
-              <span v-html="quesOption.optionBody"></span>
-            </div>
-          </el-form-item>
+      <el-form-item label="答案">
+        <div class="paper-question-body" v-html="quesModel.quesAnswer"></div>
+      </el-form-item>
 
-          <el-form-item label="答案">
-            <span v-html="quesModel.quesAnswer"></span>
-          </el-form-item>
-        </div>
-        <div style="display: flex; border: 1px solid black">
-          <div
-            style="
-              flex: 2 1 auto;
-              border-right: 1px solid black;
-              padding-right: 20px;
-            "
-          >
-            <el-form-item label="题型">
-              <span>{{ quesModel.questionType | questionType }}</span>
-            </el-form-item>
-            <!-- <div style="display: flex"></div> -->
-            <div style="display: flex; justify-content: space-between">
-              <el-form-item label="预估难度">
-                <span>{{ quesModel.difficultyDegree || "-" }}</span>
-              </el-form-item>
-              <el-form-item label="计算难度">
-                <span>{{ quesModel.calculateDifficultyDegree || "-" }}</span>
-              </el-form-item>
-            </div>
-            <div style="display: flex; justify-content: space-between">
-              <el-form-item label="区分度">
-                <span>{{ quesModel.discrimination || "-" }}</span>
-              </el-form-item>
-              <el-form-item label="标准差">
-                <span>{{ quesModel.std || "-" }}</span>
-              </el-form-item>
-            </div>
-            <div style="display: flex; justify-content: space-between">
-              <el-form-item label="信度">
-                <span>{{ quesModel.reliability || "-" }}</span>
-              </el-form-item>
-              <el-form-item label="差异系数">
-                <span>{{ quesModel.cv || "-" }}</span>
-              </el-form-item>
-            </div>
-            <div style="display: flex; justify-content: space-between">
-              <el-form-item label="平均分值">
-                <span>{{ quesModel.calculateAvgScore || "-" }}</span>
-              </el-form-item>
-              <el-form-item v-if="infoType == 'right'" label="重复率">
-                <span>{{ quesModel.duplicateRate || "-" }}</span>
-              </el-form-item>
-            </div>
-          </div>
+      <div class="line-seperator"></div>
 
-          <div style="width: 35%">
-            <el-form-item label="属性列表">
-              <el-tooltip
-                v-for="(content, propIndex) in quesModel.quesProperties"
-                :key="propIndex"
-                placement="top"
-              >
-                <div slot="content">
-                  <span v-if="content.firstProperty != null"
-                    >一级属性：{{ content.firstProperty.name }}({{
-                      content.firstProperty.code
-                    }})</span
-                  ><br />
-                  <span v-if="content.secondProperty != null"
-                    >二级属性：{{ content.secondProperty.name }}({{
-                      content.secondProperty.code
-                    }})</span
-                  >
-                </div>
-                <span>
-                  <el-tag
-                    :key="content.id"
-                    style="margin-right: 5px"
-                    type="primary"
-                    size="mini"
-                  >
-                    {{ content.courseProperty.name }}
-                  </el-tag>
-                </span>
-              </el-tooltip>
-            </el-form-item>
+      <el-form-item label="题型">
+        <span>{{ quesModel.questionType | questionType }}</span>
+      </el-form-item>
+      <div class="box-justify">
+        <el-form-item label="预估难度">
+          <span>{{ quesModel.difficultyDegree || "-" }}</span>
+        </el-form-item>
+        <el-form-item label="计算难度" style="width: 120px">
+          <span>{{ quesModel.calculateDifficultyDegree || "-" }}</span>
+        </el-form-item>
+      </div>
+      <div class="box-justify">
+        <el-form-item label="区分度">
+          <span>{{ quesModel.discrimination || "-" }}</span>
+        </el-form-item>
+        <el-form-item label="标准差" style="width: 120px">
+          <span>{{ quesModel.std || "-" }}</span>
+        </el-form-item>
+      </div>
+      <div class="box-justify">
+        <el-form-item label="信度">
+          <span>{{ quesModel.reliability || "-" }}</span>
+        </el-form-item>
+        <el-form-item label="差异系数" style="width: 120px">
+          <span>{{ quesModel.cv || "-" }}</span>
+        </el-form-item>
+      </div>
+      <div class="box-justify">
+        <el-form-item label="平均分值">
+          <span>{{ quesModel.calculateAvgScore || "-" }}</span>
+        </el-form-item>
+        <el-form-item
+          v-if="infoType == 'right'"
+          label="重复率"
+          style="width: 120px"
+        >
+          <span>{{ quesModel.duplicateRate || "-" }}</span>
+        </el-form-item>
+      </div>
+
+      <div class="line-seperator"></div>
+
+      <el-form-item label="试题关联属性" label-width="100px">
+        <el-tooltip
+          v-for="(content, propIndex) in quesModel.quesProperties"
+          :key="propIndex"
+          placement="top"
+        >
+          <div slot="content">
+            <span v-if="content.firstProperty != null"
+              >一级属性：{{ content.firstProperty.name }}({{
+                content.firstProperty.code
+              }})</span
+            ><br />
+            <span v-if="content.secondProperty != null"
+              >二级属性：{{ content.secondProperty.name }}({{
+                content.secondProperty.code
+              }})</span
+            >
           </div>
-        </div>
-      </el-form>
-    </div>
+          <span>
+            <el-tag
+              :key="content.id"
+              style="margin-right: 5px"
+              type="primary"
+              size="mini"
+            >
+              {{ content.courseProperty.name }}
+            </el-tag>
+          </span>
+        </el-tooltip>
+      </el-form-item>
+    </el-form>
   </section>
 </template>
 <script>

src/modules/questions/views/ViewPaper.vue

@@ -2,114 +2,75 @@
   <div
     id="editPaperApp"
     v-loading="loading"
-    class="paper"
+    class="view-paper"
     element-loading-text="拼命加载中。。。"
   >
-    <div class="edit-paper-top">
-      <div class="edit-paper-top-inline">
-        <div class="paper-top-div">
-          <span class="paper-top-title">课程代码:</span>
-          <span class="paper-top-value">{{ paper.course.code }}</span>
+    <div class="view-header box-justify">
+      <div class="header-info">
+        <div class="header-info-item">
+          <span>课程代码：</span>
+          <span>{{ paper.course.code }}</span>
         </div>
-        <div class="paper-top-div">
-          <span class="paper-top-title">课程名称:</span>
-          <span class="paper-top-value">{{ paper.course.name }}</span>
+        <div class="header-info-item">
+          <span>课程名称：</span>
+          <span>{{ paper.course.name }}</span>
         </div>
-        <div class="paper-top-div">
-          <span class="paper-top-title">试卷名称:</span>
-          <span class="paper-top-value">{{ paper.name }}</span>
-        </div>
-        <div class="paper-top-div">
-          <span class="paper-top-title">试卷难度:</span>
-          <span class="paper-top-value">{{ paper.difficultyDegree }}</span>
+        <div class="header-info-item">
+          <span>试卷名称：</span>
+          <span>
+            {{ paper.name }}
+          </span>
         </div>
-        <div>
-          <el-button
-            size="small"
-            type="primary"
-            plain
-            @click="releasePaper(paper.id)"
-            ><i class="el-icon-share"></i>释放</el-button
-          >
-          <el-button
-            size="small"
-            type="primary"
-            style="margin-left: 10px"
-            @click="back"
-            ><i class="el-icon-arrow-left"></i> 返回</el-button
-          >
+        <div class="header-info-item">
+          <span>试卷难度：</span>
+          <span>{{ paper.difficultyDegree }}</span>
         </div>
       </div>
+      <div class="header-btns">
+        <el-button type="primary" @click="releasePaper(paper.id)"
+          ><i class="el-icon-share"></i>释放</el-button
+        >
+        <el-button type="danger" plain @click="back"
+          ><i class="el-icon-arrow-left"></i> 返回</el-button
+        >
+      </div>
     </div>
-    <div class="paperName">
-      <div>
-        <br />
-        <h3 class="text-center">{{ paper.course.name }}&nbsp;试卷</h3>
-        <h5 class="text-center">
-          <span v-show="paper.hasAudio">（含音频试卷）</span>
-        </h5>
-        <br />
-        <h4 class="text-center">（课程代码&nbsp;{{ paper.course.code }}）</h4>
-        <br />
+
+    <div class="view-body">
+      <div class="view-title">
+        <h1 class="paper-title">{{ paper.course.name }}&nbsp;试卷</h1>
+        <p v-if="paper.hasAudio" class="paper-title-sub">（含音频试卷）</p>
+        <p class="paper-title-sub">（课程代码&nbsp;{{ paper.course.code }}）</p>
       </div>
-      <div class="text-left">
-        <el-table :data="paper.paperDetails" border style="width: 100%">
-          <el-table-column header-align="center" label="大题名称">
-            <template slot-scope="scope">
-              <span>{{ scope.row.name }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="大题总分">
-            <template slot-scope="scope">
-              <span>{{ scope.row.score }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="小题数量">
-            <template slot-scope="scope">
-              <span>{{ scope.row.unitCount }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="公开数量">
-            <template slot-scope="scope">
-              <span>{{ scope.row.pubCount }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column header-align="center" label="非公开数量">
-            <template slot-scope="scope">
-              <span>{{ scope.row.noPubCount }}</span>
-            </template>
+      <div class="view-summary">
+        <el-table :data="paper.paperDetails" border>
+          <el-table-column prop="name" label="大题名称"> </el-table-column>
+          <el-table-column prop="score" label="大题总分"> </el-table-column>
+          <el-table-column prop="unitCount" label="小题数量"> </el-table-column>
+          <el-table-column prop="pubCount" label="公开数量"> </el-table-column>
+          <el-table-column prop="noPubCount" label="非公开数量">
           </el-table-column>
         </el-table>
-
-        <div class="mainQues" style="margin-top: 20px; margin-left: 0px">
-          <div class="mainQuesTitle">
-            <span>考试说明:</span>
-            <div style="width: 550px; margin-left: 20px; margin-top: 20px">
-              <span v-html="paper.examRemark"></span>
-            </div>
-          </div>
-        </div>
-        <!-- end by wwh -->
-        <div>
-          <h1>本试卷满分{{ paper.totalScore }}分。</h1>
+      </div>
+      <div class="view-seperator"></div>
+      <!-- 考试说明 -->
+      <div class="view-part">
+        <div class="paper-question-title">考试说明</div>
+        <div class="paper-question-body">
+          <div v-html="paper.examRemark"></div>
+          <div>本试卷满分{{ paper.totalScore }}分。</div>
         </div>
-        <br />
       </div>
-    </div>
-
-    <div>
       <!-- 循环大题 -->
       <div
         v-for="(paperDetail, detailIndex) in paper.paperDetails"
         v-show="paperDetailShow(paperDetail)"
         :key="detailIndex"
-        class="mainQues"
+        class="view-part"
+        @mouseover="quesMouseOver(paperDetail.id)"
+        @mouseout="quesMouseOut(paperDetail.id)"
       >
-        <div
-          class="mainQuesTitle"
-          @mouseover="quesMouseOver(paperDetail.id)"
-          @mouseout="quesMouseOut(paperDetail.id)"
-        >
+        <div class="paper-question-title">
           <span>{{ paperDetail.cnNum }}</span> <span>.</span>
           <span>{{ paperDetail.name }}</span>
           <span>
@@ -117,377 +78,328 @@
               paperDetail.unitCount
             }}小题，满分{{ paperDetail.score }}分)
           </span>
+        </div>
+        <div class="paper-question-body" v-html="paperDetail.description"></div>
+        <div :id="paperDetail.id" class="view-part-action">
+          <el-button
+            v-show="showButtons[detailIndex].up"
+            size="small"
+            icon="el-icon-arrow-up"
+            @click.stop="hideContent(detailIndex)"
+          ></el-button>
 
-          <span :id="paperDetail.id" class="btnDiv">
-            <el-button
-              v-show="showButtons[detailIndex].up"
-              size="small"
-              icon="el-icon-arrow-up"
-              @click.stop="hideContent(detailIndex)"
-            ></el-button>
-
-            <el-button
-              v-show="!showButtons[detailIndex].up"
-              size="small"
-              icon="el-icon-arrow-down"
-              @click.stop="showContent(detailIndex)"
-            ></el-button>
-          </span>
-          <br />
-          <span v-html="paperDetail.description"></span>
+          <el-button
+            v-show="!showButtons[detailIndex].up"
+            size="small"
+            icon="el-icon-arrow-down"
+            @click.stop="showContent(detailIndex)"
+          ></el-button>
         </div>
 
         <!-- 循环小题 -->
-        <div v-show="showQuestions[detailIndex].is_show">
+        <div
+          v-show="showQuestions[detailIndex].is_show"
+          class="view-paper-questions"
+        >
           <div
             v-for="(paperDetailUnit, unitIndex) in paperDetail.paperDetailUnits"
             v-show="quesShow(paperDetailUnit.id)"
             :key="unitIndex"
-            class="ques"
+            class="view-quesiton"
+            @mouseover="quesMouseOver(paperDetailUnit.id)"
+            @mouseout="quesMouseOut(paperDetailUnit.id)"
           >
-            <div
-              class="quesSelect"
-              @mouseover="quesMouseOver(paperDetailUnit.id)"
-              @mouseout="quesMouseOut(paperDetailUnit.id)"
-            >
-              <div :id="paperDetailUnit.id" class="btnDiv">
-                <el-button
-                  size="small"
-                  @click="editQues(paperDetailUnit, paperDetailUnit.question)"
-                  >查看
-                </el-button>
-              </div>
-
-              <div class="quesBody">
-                <span class="ques-title">{{ paperDetailUnit.number }}.</span>
-                <span
-                  v-question-audio
-                  class="ques-body"
-                  :hasAudio="paperDetailUnit.question.hasAudio"
-                  :questionId="paperDetailUnit.question.id"
-                  v-html="paperDetailUnit.question.quesBody"
-                ></span>
-
-                <span class="score-span">
-                  （{{ paperDetailUnit.score }}分）
-                </span>
-              </div>
-
+            <div class="paper-question-title">
+              <span>{{ paperDetailUnit.number }}.</span>
+              <span
+                v-question-audio
+                :hasAudio="paperDetailUnit.question.hasAudio"
+                :questionId="paperDetailUnit.question.id"
+                v-html="paperDetailUnit.question.quesBody"
+              ></span>
+              <span> （{{ paperDetailUnit.score }}分） </span>
+            </div>
+            <div class="paper-question-body">
               <div
                 v-for="(quesOption, optionIndex) in paperDetailUnit.question
                   .quesOptions"
                 :key="optionIndex"
-                class="quesOption"
+                class="paper-question-option"
               >
-                <span class="ques-title"
-                  >{{ optionIndex | optionOrderWordFilter }}.
-                </span>
-
+                <span>{{ optionIndex | optionOrderWordFilter }}. </span>
                 <span
                   v-question-audio
-                  class="ques-body"
                   :hasAudio="paperDetailUnit.question.hasAudio"
                   :questionId="paperDetailUnit.question.id"
                   v-html="quesOption.optionBody"
                 ></span>
               </div>
             </div>
-            <br />
-            <div style="flex-basis: 100%"></div>
-            <div class="sub-ques-main-div">
+            <div :id="paperDetailUnit.id" class="view-part-action">
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="editQues(paperDetailUnit, paperDetailUnit.question)"
+                >查看
+              </el-button>
+            </div>
+            <!-- 子题循环 -->
+            <div class="view-question-subs">
               <div
                 v-for="(subQuestion, subIndex) in paperDetailUnit.question
                   .subQuestions"
                 v-show="quesShow(subQuestion.id)"
                 :key="subIndex"
-                class="subQues"
+                class="view-part"
+                @mouseover="
+                  quesMouseOver(getSubQuesEditId(paperDetailUnit, subQuestion))
+                "
+                @mouseout="
+                  quesMouseOut(getSubQuesEditId(paperDetailUnit, subQuestion))
+                "
               >
+                <div class="paper-question-title">
+                  <span>{{ subQuestion.subNumber }}. </span>
+                  <span v-html="subQuestion.quesBody"></span>
+                  <span
+                    >（{{ paperDetailUnit.subScoreList[subIndex] }}分）</span
+                  >
+                </div>
                 <div
-                  class="quesSelect"
-                  @mouseover="
-                    quesMouseOver(
-                      getSubQuesEditId(paperDetailUnit, subQuestion)
-                    )
-                  "
-                  @mouseout="
-                    quesMouseOut(getSubQuesEditId(paperDetailUnit, subQuestion))
-                  "
+                  v-if="paperDetailUnit.questionType != 'MATCHING_QUESTION'"
+                  class="paper-question-body"
                 >
                   <div
-                    :id="getSubQuesEditId(paperDetailUnit, subQuestion)"
-                    class="btnDiv"
-                  >
-                    <el-button
-                      size="small"
-                      @click="editQues(paperDetailUnit, subQuestion)"
-                      >查看
-                    </el-button>
-                  </div>
-
-                  <div class="quesBody">
-                    <span class="ques-title"
-                      >{{ subQuestion.subNumber }}.
-                    </span>
-
-                    <span v-html="subQuestion.quesBody"></span>
-                    <span
-                      >（{{ paperDetailUnit.subScoreList[subIndex] }}分）</span
-                    >
-                  </div>
-                  <div
-                    v-if="paperDetailUnit.questionType != 'MATCHING_QUESTION'"
+                    v-for="(
+                      subQuesOption, subOptIndex
+                    ) in subQuestion.quesOptions"
+                    :key="subOptIndex"
+                    class="paper-question-option"
                   >
-                    <div
-                      v-for="(
-                        subQuesOption, subOptIndex
-                      ) in subQuestion.quesOptions"
-                      :key="subOptIndex"
-                      class="quesOption"
-                    >
-                      <span class="ques-title"
-                        >{{ subOptIndex | optionOrderWordFilter }}.
-                      </span>
-                      <span v-html="subQuesOption.optionBody"></span>
-                    </div>
+                    <span>{{ subOptIndex | optionOrderWordFilter }}. </span>
+                    <span v-html="subQuesOption.optionBody"></span>
                   </div>
-                  <br />
+                </div>
+                <div
+                  :id="getSubQuesEditId(paperDetailUnit, subQuestion)"
+                  class="view-part-action"
+                >
+                  <el-button
+                    size="small"
+                    type="primary"
+                    plain
+                    @click="editQues(paperDetailUnit, subQuestion)"
+                    >查看
+                  </el-button>
                 </div>
               </div>
             </div>
           </div>
-          <br />
         </div>
       </div>
     </div>
 
-    <div class="text-left">
-      <el-dialog
-        v-loading.body="dialogLoading"
-        title="试题查看"
-        :visible.sync="quesDialog"
-        @close="closeQuesDialog"
-      >
-        <el-form :model="quesModel" label-position="right" label-width="80px">
-          <el-row :gutter="10">
-            <el-col :xs="10" :sm="10" :md="10" :lg="10">
-              <el-form-item label="题型">
-                <el-select
-                  v-model="quesModel.questionType"
-                  :disabled="true"
-                  placeholder="请输入题型"
+    <!-- 试题查看 -->
+    <el-dialog
+      v-loading.body="dialogLoading"
+      title="试题查看"
+      :visible.sync="quesDialog"
+      :modal="false"
+      append-to-body
+      custom-class="side-dialog"
+      @close="closeQuesDialog"
+    >
+      <el-form :model="quesModel" label-position="right" label-width="80px">
+        <el-row :gutter="10">
+          <el-col :span="12">
+            <el-form-item label="题型">
+              <el-select
+                v-model="quesModel.questionType"
+                :disabled="true"
+                placeholder="请输入题型"
+              >
+                <el-option
+                  v-for="item in questionTypes"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <el-option
-                    v-for="item in questionTypes"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="10" :sm="10" :md="10" :lg="10">
-              <el-form-item label="分值">
-                <el-input
-                  v-model="quesModel.score"
-                  :disabled="true"
-                  placeholder="分值"
-                ></el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <!-- create by  weiwenhai 添加难度，公开度，试题属性 -->
-          <el-row :gutter="10">
-            <el-col :xs="10" :sm="10" :md="10" :lg="10">
-              <el-form-item label="难度">
-                <el-select
-                  v-model="quesModel.difficultyDegree"
-                  placeholder="请输入难度"
-                  :disabled="true"
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="分值">
+              <el-input
+                v-model="quesModel.score"
+                :disabled="true"
+                placeholder="分值"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="难度">
+              <el-select
+                v-model="quesModel.difficultyDegree"
+                placeholder="请输入难度"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in difficultyDegreeList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <el-option
-                    v-for="item in difficultyDegreeList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :xs="10" :sm="10" :md="10" :lg="10">
-              <el-form-item label="公开度">
-                <el-select
-                  v-model="quesModel.publicity"
-                  placeholder="请输入公开度"
-                  :disabled="true"
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公开度">
+              <el-select
+                v-model="quesModel.publicity"
+                placeholder="请输入公开度"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in publicityList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <el-option
-                    v-for="item in publicityList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-
-            <el-col
-              v-if="quesModel.questionType == 'TEXT_ANSWER_QUESTION'"
-              :xs="10"
-              :sm="10"
-              :md="10"
-              :lg="10"
-            >
-              <el-form-item label="作答类型">
-                <el-select v-model="quesModel.answerType" :disabled="true">
-                  <el-option
-                    v-for="item in answerTypes"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col
-              v-if="quesModel.questionType && !isNested(quesModel.questionType)"
-              :xs="10"
-              :sm="10"
-              :md="10"
-              :lg="10"
-            >
-              <el-form-item label="时长">
-                <el-input-number
-                  v-model="quesModel.control.maxAnswerTime"
-                  size="small"
-                  :precision="0"
-                  :min="1"
-                  :disabled="true"
-                ></el-input-number>
-              </el-form-item>
-            </el-col>
-            <el-col
-              v-if="quesModel.questionType == 'MATCHING_QUESTION'"
-              :xs="10"
-              :sm="10"
-              :md="10"
-              :lg="10"
-            >
-              <el-form-item label="配对类型">
-                <el-select
-                  v-model="quesModel.quesParam.matchingType"
-                  :disabled="true"
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-if="quesModel.questionType == 'TEXT_ANSWER_QUESTION'"
+            :span="12"
+          >
+            <el-form-item label="作答类型">
+              <el-select v-model="quesModel.answerType" :disabled="true">
+                <el-option
+                  v-for="item in answerTypes"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <el-option
-                    v-for="item in matchingTypes"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col
-              v-if="quesModel.questionType == 'MATCHING_QUESTION'"
-              :xs="10"
-              :sm="10"
-              :md="10"
-              :lg="10"
-            >
-              <el-form-item label="答题模式">
-                <el-select
-                  v-model="quesModel.quesParam.matchingMode"
-                  :disabled="true"
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-if="quesModel.questionType && !isNested(quesModel.questionType)"
+            :span="12"
+          >
+            <el-form-item label="时长">
+              <el-input
+                v-model="quesModel.control.maxAnswerTime"
+                size="small"
+                class="select_width"
+                :disabled="true"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-if="quesModel.questionType == 'MATCHING_QUESTION'"
+            :span="12"
+          >
+            <el-form-item label="配对类型">
+              <el-select
+                v-model="quesModel.quesParam.matchingType"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in matchingTypes"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <el-option
-                    v-for="item in matchingModes"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="10">
-            <el-col :xs="20" :sm="20" :md="20" :lg="20">
-              <el-form-item label="属性列表">
-                <el-tooltip
-                  v-for="(content, propIndex) in quesModel.quesProperties"
-                  :key="propIndex"
-                  placement="top"
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-if="quesModel.questionType == 'MATCHING_QUESTION'"
+            :span="12"
+          >
+            <el-form-item label="答题模式">
+              <el-select
+                v-model="quesModel.quesParam.matchingMode"
+                :disabled="true"
+              >
+                <el-option
+                  v-for="item in matchingModes"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 >
-                  <div slot="content">
-                    <span v-if="content.firstProperty != null"
-                      >一级属性：{{ content.firstProperty.name }}</span
-                    ><br />
-                    <span v-if="content.secondProperty != null"
-                      >二级属性：{{ content.secondProperty.name }}</span
-                    >
-                  </div>
-                  <span>
-                    <el-tag
-                      :key="content.id"
-                      style="margin-right: 5px"
-                      :closable="false"
-                      type="primary"
-                    >
-                      {{ content.coursePropertyName }}
-                    </el-tag>
-                  </span>
-                </el-tooltip>
-              </el-form-item>
-            </el-col>
-          </el-row>
-
-          <!-- end by weiwenhai -->
-          <div>
-            <el-row>
-              <el-col>
-                <el-form-item label="题目">
-                  <span v-html="quesModel.quesBody"></span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <div
-              v-if="
-                !quesModel.parentType ||
-                quesModel.parentType != 'MATCHING_QUESTION'
-              "
-            >
-              <el-form-item
-                v-for="(quesOption, optIndex) in quesModel.quesOptions"
-                :key="optIndex"
-                ><el-col :span="2">
-                  <span>{{ optIndex | optionOrderWordFilter }}</span>
-                </el-col>
-                <el-col :span="20">
-                  <span v-html="quesOption.optionBody"></span>
-                </el-col>
-              </el-form-item>
-            </div>
-            <div v-if="!isNested(quesModel.questionType)">
-              <el-form-item label="答案">
-                <span v-html="quesModel.quesAnswer"></span>
-              </el-form-item>
-            </div>
-            <div
-              :class="{
-                margin_left_40: true,
-              }"
-            >
-              <el-button @click="closeQuesDialog">关闭</el-button>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="属性列表">
+          <el-tooltip
+            v-for="(content, propIndex) in quesModel.quesProperties"
+            :key="propIndex"
+            placement="top"
+          >
+            <div slot="content">
+              <span v-if="content.firstProperty != null"
+                >一级属性：{{ content.firstProperty.name }}</span
+              ><br />
+              <span v-if="content.secondProperty != null"
+                >二级属性：{{ content.secondProperty.name }}</span
+              >
             </div>
+            <span>
+              <el-tag
+                :key="propIndex"
+                style="margin-right: 5px"
+                :closable="false"
+                type="primary"
+              >
+                {{ content.courseProperty.name }}
+              </el-tag>
+            </span>
+          </el-tooltip>
+        </el-form-item>
+
+        <el-form-item label="题目">
+          <div
+            class="paper-question-title"
+            style="font-weight: 400; padding-top: 7px"
+            v-html="quesModel.quesBody"
+          ></div>
+        </el-form-item>
+        <el-form-item
+          v-if="
+            !quesModel.parentType || quesModel.parentType != 'MATCHING_QUESTION'
+          "
+        >
+          <div
+            v-for="(quesOption, optIndex) in quesModel.quesOptions"
+            :key="optIndex"
+            class="paper-question-option"
+          >
+            <span>{{ optIndex | optionOrderWordFilter }}. </span>
+            <span v-html="quesOption.optionBody"></span>
           </div>
-        </el-form>
-      </el-dialog>
-    </div>
+        </el-form-item>
+        <el-form-item v-if="!isNested(quesModel.questionType)" label="答案">
+          <div
+            class="paper-question-body"
+            style="padding-top: 6px"
+            v-html="quesModel.quesAnswer"
+          ></div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="danger" plain @click="closeQuesDialog">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 

src/styles/base.scss

@@ -36,6 +36,7 @@ label {
   .el-form-item__label {
     margin: 0;
     padding: 0 20px 0 15px;
+    color: #9a9dab;
     position: relative;
 
     &::after {
@@ -117,6 +118,9 @@ label {
 .margin-bottom-15 {
   margin-bottom: 15px;
 }
+.margin-tb-20 {
+  margin: 20px 0;
+}
 .line-seperator {
   border-bottom: 1px solid #eff0f5;
   margin: 15px 0;
@@ -139,6 +143,9 @@ label {
 }
 
 /* 检索框的长度 */
+.select_width {
+  width: 150px;
+}
 .search_width {
   width: 150px;
 }
@@ -272,10 +279,13 @@ label {
   // other
   .el-form {
     &-item {
-      margin-bottom: 20px;
+      margin-bottom: 16px;
       &__label {
         margin: 0;
       }
+      &__error {
+        padding-top: 2px;
+      }
     }
   }
 }

src/styles/global.css

@@ -30,7 +30,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 14px;
-  color: #383b4a;
+  color: #313444;
   background-color: #e1e7f7;
   margin: 0;
   min-width: 1260px;

src/styles/pages.scss

@@ -316,3 +316,200 @@
     }
   }
 }
+// view-paper
+.view-paper {
+  padding: 76px 60px 50px;
+  background-color: #e4e9f8;
+
+  .view-header {
+    padding: 20px 60px;
+    position: fixed;
+    height: 76px;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background-color: #e4e9f8;
+  }
+  .header-info {
+    font-size: 0;
+
+    &-item {
+      display: inline-block;
+      vertical-align: middle;
+      font-size: 14px;
+      padding: 0 10px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+      > span {
+        margin-left: 3px;
+      }
+    }
+  }
+  .view-body {
+    border-radius: 20px;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 30px;
+  }
+  .view-title {
+    text-align: center;
+    margin-bottom: 20px;
+    .paper-title {
+      height: 45px;
+      font-size: 32px;
+      font-weight: 500;
+      line-height: 45px;
+      margin-bottom: 10;
+    }
+    .paper-title-sub {
+      font-size: 16px;
+      font-weight: 500;
+      color: #9a9dab;
+      line-height: 22px;
+      margin-bottom: 10;
+    }
+  }
+  .view-summary {
+    padding-bottom: 30px;
+  }
+  .view-seperator {
+    border-bottom: 1px solid #f0f2f6;
+    margin: 0 -30px;
+  }
+  .view-part {
+    position: relative;
+    padding: 30px 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #f0f2f6;
+    }
+
+    &-action {
+      position: absolute;
+      background-color: #fff;
+      top: 30px;
+      right: 10px;
+      border-radius: 10px;
+      z-index: 9;
+    }
+    .paper-question-title {
+      margin-bottom: 10px;
+    }
+    .paper-question-body {
+      color: #6e7080;
+    }
+  }
+  .view-quesiton {
+    padding: 20px 30px;
+    border-radius: 15px;
+    background: #f4f6fc;
+    position: relative;
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+    .view-part-action {
+      top: 10px;
+    }
+  }
+  .view-question-subs {
+    .view-part {
+      padding: 20px;
+    }
+  }
+}
+// paper
+.paper {
+  &-question-title {
+    min-height: 22px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #313444;
+    line-height: 22px;
+    p {
+      display: inline;
+    }
+  }
+  &-question-body {
+    min-height: 24px;
+    line-height: 24px;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+  &-question-option {
+    line-height: 24px;
+    p {
+      display: inline;
+    }
+  }
+}
+.row-question-body {
+  line-height: 24px;
+  cursor: pointer;
+  p {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+}
+// question-info
+.question-info {
+  border: 1px solid #f0f2f6;
+  background-color: #fcfcfd;
+  border-radius: 10px;
+  padding: 30px;
+
+  .line-seperator {
+    border-color: #f0f2f6;
+  }
+  .el-form-item {
+    margin: 0;
+  }
+  .el-form-item__label {
+    color: #9a9dab;
+  }
+}
+// gen-paper-detail
+.gen-paper-detail {
+  .gen-step-box {
+    padding: 20px 30px 30px;
+  }
+  .gen-step-title {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f2f6;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 4px;
+      height: 10px;
+      border-radius: 2px;
+      background-color: #705eff;
+      top: 5px;
+      left: 0;
+      z-index: auto;
+    }
+
+    > h3 {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 600;
+      margin: 0;
+      padding-left: 15px;
+    }
+  }
+  .gen-step-title-sub {
+    border: 0;
+    margin-top: 10px;
+    padding-bottom: 10px;
+  }
+  .gen-step-body {
+    padding-top: 10px;
+  }
+}