看图说话和看图写作样式

src/views/exercise_questions/create/components/exercises/WritePictureQuestion.vue

@@ -42,12 +42,12 @@
         </div>
         <UploadDrag @fileUploadSuccess="fileUploadSuccess" :limit="999" ref="uploadDrag"></UploadDrag>
 
+        <label class="title-little">阅读材料：</label>
+        <RichText v-model="data.article" placeholder="输入阅读材料" />
         <template v-if="isEnable(data.property.is_enable_description)">
           <label class="title-little">题目要求：</label>
-          <el-input v-model="data.description" rows="3" resize="none" type="textarea" placeholder="输入题目要求" />
+          <RichText v-model="data.description" placeholder="输入题目要求" />
         </template>
-        <label class="title-little">阅读材料：</label>
-        <RichText v-model="data.article" placeholder="输入阅读材料" />
         <template v-if="isEnable(data.property.is_enable_sample_text)">
           <el-divider class="write-divider" />
           <label class="title-little">范文：</label>

src/views/exercise_questions/create/components/exercises/WriteQuestion.vue

@@ -12,20 +12,17 @@
         />
 
         <RichText v-if="data.property.stem_type === stemTypeList[1].value" v-model="data.stem" placeholder="输入题干" />
-
-        <el-input
-          v-show="isEnable(data.property.is_enable_description)"
-          v-model="data.description"
-          rows="3"
-          resize="none"
-          type="textarea"
-          placeholder="输入题目要求"
-        />
       </div>
 
       <div class="content">
         <label class="title-little">阅读材料：</label>
         <RichText v-model="data.article" placeholder="输入阅读材料" />
+        <label class="title-little" v-if="isEnable(data.property.is_enable_description)">题目要求：</label>
+        <RichText
+          v-if="isEnable(data.property.is_enable_description)"
+          v-model="data.description"
+          placeholder="输入题目要求"
+        />
         <template v-if="isEnable(data.property.is_enable_sample_text)">
           <el-divider class="write-divider" />
           <label class="title-little">范文：</label>

src/views/exercise_questions/data/answerQuestion.js

@@ -5,6 +5,7 @@ export const answerQuestionData = {
   type: 'answer_question', // 题型
   stem: '', // 题干
   file_id_list: [], // 文件 id 列表
+  reference_answer: '', // 参考答案
   answer: {
     score: 0,
     score_type: scoreTypeList[0].value,

src/views/exercise_questions/data/essayQuestion.js

@@ -5,6 +5,7 @@ export const essayQuestionData = {
   type: 'essay_question', // 题型
   stem: '', // 题干
   description: '', // 描述
+  reference_answer: '', // 参考答案
   answer: {
     score: 0,
     score_type: scoreTypeList[0].value,

src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -89,7 +89,7 @@ export default {
 
   .content {
     display: flex;
-    column-gap: 24px;
+    column-gap: 8px;
     width: 100%;
     overflow: auto;
 

src/views/exercise_questions/preview/WritePictruePreview.vue

@@ -6,52 +6,38 @@
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>
     <div class="article-content" v-html="sanitizeHTML(data.article)"></div>
-    <div v-if="isEnable(data.property.is_enable_description)" class="description">
-      {{ data.description }}
-    </div>
+    <div
+      v-if="isEnable(data.property.is_enable_description)"
+      class="description"
+      v-html="sanitizeHTML(data.description)"
+    ></div>
     <div class="content">
-      <div class="content-left">
-        <el-carousel
-          type="card"
-          height="276px"
-          :autoplay="false"
-          indicator-position="none"
-          arrow="always"
-          @change="changeImg"
-        >
-          <el-carousel-item v-for="(item, index) in data.option_list" :key="index">
-            <el-image
-              v-if="pic_list[item.picture_file_id]"
-              style="width: 370px; height: 276px"
-              :src="pic_list[item.picture_file_id]"
-              fit="contain"
-            />
-          </el-carousel-item>
-        </el-carousel>
-        <h3
-          v-if="data.option_list[active_index] && data.option_list[active_index].picture_title"
-          class="pic-title"
-          v-html="sanitizeHTML(data.option_list[active_index].picture_title)"
-        ></h3>
-        <p
-          v-if="data.option_list[active_index] && data.option_list[active_index].picture_info"
-          class="pic-info"
-          v-html="sanitizeHTML(data.option_list[active_index].picture_info)"
-        ></p>
-      </div>
-      <div class="content-right" v-if="answer_list[active_index]">
-        <el-input
-          v-model="answer_list[active_index].value"
-          rows="12"
-          resize="none"
-          type="textarea"
-          placeholder="请输入"
-          :maxlength="data.property.word_num"
-          show-word-limit
-          @input="handleInput"
+      <div class="content-item" v-for="(item, index) in data.option_list" :key="index">
+        <el-image
+          v-if="pic_list[item.picture_file_id]"
+          style="width: 370px; height: 238px"
+          :src="pic_list[item.picture_file_id]"
+          fit="contain"
+          @click="active_index = index"
+          :class="[active_index !== index ? 'not-active' : '']"
         />
+        <h3 class="pic-title" v-html="sanitizeHTML(item.picture_title)"></h3>
+        <p class="pic-info" v-html="sanitizeHTML(item.picture_info)"></p>
       </div>
     </div>
+
+    <div class="content-right" v-if="answer_list[active_index]">
+      <el-input
+        v-model="answer_list[active_index].value"
+        rows="12"
+        resize="none"
+        type="textarea"
+        placeholder="请输入"
+        :maxlength="data.property.word_num"
+        show-word-limit
+        @input="handleInput"
+      />
+    </div>
     <template v-if="isEnable(data.property.is_enable_upload_accessory)">
       <!-- 上传附件 -->
       <UploadFiles
@@ -156,58 +142,34 @@ export default {
 
   .content {
     display: flex;
-    column-gap: 24px;
+    column-gap: 8px;
+    width: 100%;
+    overflow: auto;
 
-    &-left {
-      flex-shrink: 0;
-      width: 478px;
+    .el-image {
+      cursor: pointer;
 
-      :deep .el-carousel__item--card {
-        width: 77%;
-        margin-left: -13.5%;
-      }
-
-      .el-image {
+      &.not-active {
         opacity: 0.2;
       }
-
-      .el-carousel__item--card.is-active {
-        .el-image {
-          background: #fff;
-          opacity: 1;
-        }
-      }
-
-      .pic-title {
-        margin: 8px 0 4px;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 20px;
-        color: #000;
-        word-break: break-word;
-      }
-
-      .pic-info {
-        margin: 0;
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 20px;
-        color: #000;
-        word-break: break-word;
-      }
     }
 
-    :deep .el-carousel__arrow:focus {
-      outline: none;
+    .pic-title {
+      margin: 8px 0 4px;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: #000;
+      word-break: break-word;
     }
 
-    &-right {
-      flex: 1;
-
-      .el-textarea {
-        height: 276px;
-        margin-bottom: 16px;
-      }
+    .pic-info {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #000;
+      word-break: break-word;
     }
   }
 
@@ -240,7 +202,8 @@ export default {
     }
   }
 
-  .article-content {
+  .article-content,
+  .description {
     :deep p {
       margin: 0;
     }

src/views/exercise_questions/preview/WritePreview.vue

@@ -6,7 +6,11 @@
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>
     <div class="article-content" v-html="sanitizeHTML(data.article)"></div>
-    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
+    <div
+      v-if="isEnable(data.property.is_enable_description)"
+      class="description"
+      v-html="sanitizeHTML(data.description)"
+    ></div>
     <el-input
       v-model="user_answer.text"
       rows="3"
@@ -102,7 +106,8 @@ export default {
     }
   }
 
-  .article-content {
+  .article-content,
+  .description {
     :deep p {
       margin: 0;
     }