Explorar o código

字词卡片调整样式

natasha hai 1 ano
pai
achega
e41fff2565

+ 1 - 0
src/views/exercise_questions/preview/RepeatPreview.vue

@@ -16,6 +16,7 @@
         <AudioPlay
           v-if="data.option_list[i] && data.option_list[i].audio_file_id"
           :file-id="data.option_list[i].audio_file_id"
+          :showSlider="true"
         />
         <div
           v-if="sanitizeHTML(data.option_list[i].content)"

+ 1 - 1
src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -16,7 +16,7 @@
           v-if="pic_list[item.picture_file_id]"
           style="width: 370px; height: 238px"
           :src="pic_list[item.picture_file_id]"
-          fit="contain"
+          fit="cover"
         />
         <p class="pic-info rich-text" v-html="sanitizeHTML(item.picture_info)"></p>
         <!-- 语音作答 -->

+ 17 - 10
src/views/exercise_questions/preview/WordCardPreview.vue

@@ -20,12 +20,12 @@
           pic_list[option_list[active_index].picture_file_id]
         "
         :src="pic_list[option_list[active_index].picture_file_id]"
-        fit="contain"
+        fit="cover"
       />
       <div class="words-right">
         <template v-for="(item, index) in option_list">
           <div v-if="index === active_index" :key="index" class="strock-box">
-            <div class="pinyin-box">
+            <div class="pinyin-box" v-if="item.audio_file_id || item.pinyin">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
               <span class="pinyin">{{ item.pinyin }}</span>
             </div>
@@ -170,11 +170,11 @@ export default {
 
       label {
         display: block;
-        padding: 4px 16px;
+        padding: 8px 16px;
         margin-bottom: 4px;
-        font-size: 16px;
+        font-size: 18px;
         font-weight: 400;
-        line-height: 24px;
+        line-height: 26px;
         color: rgba(0, 0, 0, 30%);
         cursor: pointer;
         border-radius: 20px;
@@ -194,7 +194,14 @@ export default {
     }
 
     .strock-chinese {
+      width: 96px;
+      height: 96px;
       border: 1px solid #e81b1b;
+
+      :deep .strock-play-box {
+        width: 16px;
+        height: 16px;
+      }
     }
 
     .border-right-none {
@@ -233,22 +240,22 @@ export default {
   .tips {
     display: block;
     margin-bottom: 8px;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 24px;
     color: rgba(0, 0, 0, 40%);
   }
 
   .example-sentence {
     margin: 0;
-    font-size: 14px;
-    line-height: 22px;
+    font-size: 16px;
+    line-height: 24px;
     color: #000;
   }
 
   .sound-box {
     width: max-content;
-    padding: 4px;
+    padding: 8px;
     background: $content-color;
     border-radius: 40px;
   }

+ 1 - 1
src/views/exercise_questions/preview/WritePictruePreview.vue

@@ -17,7 +17,7 @@
           v-if="pic_list[item.picture_file_id]"
           style="width: 370px; height: 238px"
           :src="pic_list[item.picture_file_id]"
-          fit="contain"
+          fit="cover"
           :class="[active_index !== index ? 'not-active' : '']"
           @click="active_index = index"
         />