录音预览调整

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -20,6 +20,7 @@
         <SoundRecord
           ref="record"
           :type="data.size"
+          :many-times="isEnable(data.is_enable_manyTimes)"
           class="record-box"
           :answer-record-list="data.answer.answer_list.answer_record_list"
           :task-model="isJudgingRightWrong ? 'ANSWER' : ''"

src/views/book/courseware/preview/components/record_input/SoundRecord.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="record">
-    <template v-if="type === 'normal' || type === 'mini'">
+    <!-- <template v-if="type === 'normal' || type === 'mini'">
       <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
       <span
         v-if="type && type == 'normal'"
@@ -46,7 +46,32 @@
         @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
       ></div>
       <a :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete"></a>
-    </template>
+    </template> -->
+    <div :class="['record', microphoneStatus ? 'active' : '']" @click="microphone"></div>
+
+    <span
+      :class="[
+        'record-time',
+        microphoneStatus ? 'record-ing' : '',
+        selectIndex || selectIndex == 0 ? 'record-black' : '',
+      ]"
+      v-if="type !== 'mini'"
+      >{{ isPlaying ? '-' : '' }}{{ handleDateTime(recordtime) }}</span
+    >
+    <el-select
+      v-model="selectIndex"
+      placeholder="无录音"
+      :class="[type + 'Select']"
+      @change="handleChangeRecord"
+      v-if="manyTimes"
+    >
+      <el-option v-for="(item, i) in recordList" :key="i + item.id" :label="item.name" :value="i" />
+    </el-select>
+    <div
+      :class="['playBack', hasMicro]"
+      @click="playmicrophone(selectIndex || selectIndex == 0 ? recordList[selectIndex].toltime : '')"
+    ></div>
+    <a :class="['record-delete', hasMicro ? 'record-delete-has' : '']" @click="handleDelete" v-if="manyTimes"></a>
   </div>
 </template>
 
@@ -88,6 +113,10 @@ export default {
       type: Number,
       default: 0,
     },
+    manyTimes: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -417,47 +446,10 @@ export default {
       }
     }
   }
-}
-</style>
-
-<style lang="scss">
-.record {
-  .el-select {
-    flex: 1;
-    height: 24px;
-
-    &.proSelect {
-      width: 78px;
-    }
-
-    .el-input__inner {
-      box-sizing: border-box;
-      height: 24px;
-      padding: 0 11px;
-      font-family: 'Smartisan';
-      font-size: 14px;
-      line-height: 22px;
-      color: rgba(0, 0, 0, 85%);
-      border: 1px solid rgba(0, 0, 0, 10%);
-      border-radius: 4px;
-    }
 
-    .el-input {
-      .el-select__caret {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #000;
-      }
-    }
-
-    .el-input__icon {
-      width: 16px;
-    }
-
-    .el-input__suffix {
-      right: 3px;
-    }
+  :deep .normalSelect,
+  :deep .miniSelect {
+    width: 22px;
   }
 }
 </style>