看图说话修改样式

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

@@ -109,7 +109,7 @@
             :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
           />
         </el-form-item>
-        <el-form-item label="词数">
+        <el-form-item label="字数">
           <el-input-number :min="1" :step="10" v-model="data.property.word_num" class="word-num-input" :precision="0" />
         </el-form-item>
         <el-form-item label="范文">

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

@@ -87,7 +87,7 @@
             :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
           />
         </el-form-item>
-        <el-form-item label="词数">
+        <el-form-item label="字数">
           <el-input-number :min="1" :step="10" v-model="data.property.word_num" class="word-num-input" :precision="0" />
         </el-form-item>
         <el-form-item label="范文">

src/views/exercise_questions/data/write.js

@@ -15,7 +15,7 @@ export const writeData = {
     is_enable_description: 'false', // 描述
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
-    word_num: 50, // 词数
+    word_num: 50, // 字数
     is_enable_sample_text: 'true', // 范文开启
     is_enable_upload_accessory: 'true', // 上传附件
   },

src/views/exercise_questions/data/writePicture.js

@@ -24,7 +24,7 @@ export const writePictrueData = {
     score: 1, // 分值
     is_enable_description: switchOption[1].value, // 描述
     score_type: scoreTypeList[0].value, // 分值类型
-    word_num: 50, // 词数
+    word_num: 50, // 字数
     is_enable_sample_text: 'true', // 范文开启
     is_enable_upload_accessory: 'true', // 上传附件
   },

src/views/exercise_questions/preview/AnswerQuestionPreview.vue

@@ -9,7 +9,7 @@
     <AudioPlay v-if="data.file_id_list.length > 0" :file-id="data.file_id_list[0]" />
 
     <SoundRecordPreview :wav-blob.sync="answer.answer_list[0].voice_file_id" />
-    <div v-if="isEnable(data.property.is_enable_reference_answer) && 1 === 2" class="reference-box">
+    <div v-if="isEnable(data.property.is_enable_reference_answer)" class="reference-box">
       <h5 class="reference-title">参考答案</h5>
       <span class="reference-answer" v-html="sanitizeHTML(data.reference_answer)"></span>
     </div>

src/views/exercise_questions/preview/EssayQuestionPreview.vue

@@ -27,7 +27,7 @@
       @upload="handleUpload"
       @deleteFile="handleDelete"
     />
-    <div v-if="isEnable(data.property.is_enable_reference_answer) && 1 === 2" class="reference-box">
+    <div v-if="isEnable(data.property.is_enable_reference_answer)" class="reference-box">
       <h5 class="reference-title">参考答案</h5>
       <span class="reference-answer" v-html="sanitizeHTML(data.reference_answer)"></span>
     </div>

src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -7,37 +7,25 @@
     </div>
     <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ 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 class="pic-title" v-html="sanitizeHTML(data.option_list[active_index].picture_title)"></h3>
-        <p class="pic-info" v-html="sanitizeHTML(data.option_list[active_index].picture_info)"></p>
-
-        <template v-if="isEnable(data.property.is_enable_voice_answer)">
-          <!-- 语音作答 -->
-          <SoundRecordPreview :wav-blob.sync="answer_list[active_index].audio_file_id" />
-        </template>
+      <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"
+        />
+        <h3 class="pic-title" v-html="sanitizeHTML(item.picture_title)"></h3>
+        <p class="pic-info" v-html="sanitizeHTML(item.picture_info)"></p>
+        <!-- 语音作答 -->
+        <div class="sound-box" v-if="isEnable(data.property.is_enable_voice_answer)">
+          <SoundRecordPreview :wav-blob.sync="answer_list[index].audio_file_id" type="small" />
+        </div>
+
+        <div v-if="isEnable(data.property.is_enable_reference_answer)" class="reference-box">
+          <h5 class="reference-title">参考答案</h5>
+          <span class="reference-answer" v-html="sanitizeHTML(item.reference_answer)"></span>
+        </div>
       </div>
-      <div class="content-right"></div>
-    </div>
-    <div v-if="isEnable(data.property.is_enable_reference_answer) && 1 === 2" class="reference-box">
-      <h5 class="reference-title">参考答案</h5>
-      <span class="reference-answer" v-html="sanitizeHTML(data.option_list[active_index].reference_answer)"></span>
     </div>
   </div>
 </template>
@@ -102,52 +90,31 @@ export default {
   .content {
     display: flex;
     column-gap: 24px;
+    width: 100%;
+    overflow: auto;
+
+    .pic-title {
+      margin: 8px 0 4px;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: #000;
+      word-break: break-word;
+    }
 
-    &-left {
-      flex-shrink: 0;
-      width: 478px;
-
-      :deep .el-carousel__item--card {
-        width: 77%;
-        margin-left: -13.5%;
-      }
-
-      .el-image {
-        opacity: 0.2;
-      }
-
-      :deep .el-carousel__arrow:focus {
-        outline: none;
-      }
-
-      .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;
-      }
+    .pic-info {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #000;
+      word-break: break-word;
     }
 
     .sound-record-wrapper {
-      margin-top: 8px;
+      :deep .sound-item-btn {
+        background-color: #fff;
+      }
     }
 
     &-right {
@@ -162,6 +129,7 @@ export default {
 
   .reference-box {
     padding: 12px;
+    margin-top: 8px;
     background: #f9f8f9;
 
     .reference-title {
@@ -172,5 +140,13 @@ export default {
       color: #4e5969;
     }
   }
+
+  .sound-box {
+    width: max-content;
+    padding: 4px;
+    margin-top: 8px;
+    background: $content-color;
+    border-radius: 40px;
+  }
 }
 </style>

src/views/exercise_questions/preview/components/common/SoundRecordPreview.vue

@@ -21,13 +21,13 @@
       </label>
     </div>
     <div class="sound-item">
-      <span :class="['sound-item-span', wavBlob ? '' : 'not-url']" @click="playMicrophone">
+      <span :class="['sound-item-span sound-item-btn', wavBlob ? '' : 'not-url']" @click="playMicrophone">
         <SvgIcon :icon-class="iconClass" :size="iconSize" :class="['audio-play-btn']" />
       </span>
       <label v-if="type === 'big'" class="tips">回放</label>
     </div>
     <div class="sound-item">
-      <span :class="['sound-item-span', wavBlob ? '' : 'not-url']" @click="delectWav">
+      <span :class="['sound-item-span sound-item-btn', wavBlob ? '' : 'not-url']" @click="delectWav">
         <SvgIcon icon-class="delete-back-line" :size="iconSize" :class="['delete-btn']" />
       </span>
       <label v-if="type === 'big'" class="tips">删除</label>