Pārlūkot izejas kodu

修改音频样式;组织音频播放时选择选项

Michael Wang 4 gadi atpakaļ
vecāks
revīzija
01d727b787

+ 23 - 3
src/features/OnlineExam/Examing/QuestionAudio.vue

@@ -1,12 +1,14 @@
 <template>
-  <span style="display: inline-flex; align-items: center;">
-    <span v-show="shouldShowAudio" @click="play">
+  <span class="a-container" style="display: inline-flex; align-items: center;">
+    <span v-show="shouldShowAudio" @click.stop="play">
       <Button
         v-if="!playing"
         type="primary"
         shape="circle"
         icon="ios-play"
         :disabled="playCount === 0"
+        size="small"
+        class="play"
       ></Button>
       <Button
         v-else
@@ -14,9 +16,11 @@
         shape="circle"
         icon="md-pause"
         style="cursor: not-allowed;"
+        size="small"
+        class="pause"
       ></Button>
     </span>
-    &nbsp;
+    <span style="padding-left: 2px;">&nbsp;</span>
     <span v-show="shouldShowAudio">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </span>
@@ -155,3 +159,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.a-container >>> .ivu-btn-small {
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 11px !important;
+  margin-bottom: 4px;
+}
+.a-container >>> .ivu-btn-small.play {
+  padding-left: 2px !important;
+}
+.a-container >>> .ivu-btn-small.pause {
+  padding-left: 0px !important;
+  padding-top: 1px !important;
+}
+</style>

+ 9 - 1
src/features/OnlineExam/Examing/QuestionContainer.vue

@@ -4,7 +4,15 @@
       <template v-if="item.className === 'audio-placeholder'">
         <div
           :key="index"
-          style="position: relative; margin-bottom: 2px;"
+          style="
+            position: relative;
+            font-size: 12px;
+            word-break: break-word;
+            background-color: lightblue;
+            border-radius: 4px;
+            padding-left: 2px;
+            padding-top: 2px;
+          "
           class="audio-div"
         >
           <QuestionAudio