拼音字体

src/common/font/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'League';
+  src: url('ABeeZee-Regular.ttf');
+}

src/main.js

@@ -13,6 +13,8 @@ import '@/styles/element-variables.scss';
 
 import '@/utils/filter';
 
+import '@/common/font/font.css';
+
 setupRouterGuard(router);
 
 Vue.use(ElementUI, {

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

@@ -57,7 +57,7 @@
       </div>
       <div class="footer">
         <span class="add-option" @click="addOption">
-          <SvgIcon icon-class="add-circle" size="14" /> <span>增加选项</span>
+          <SvgIcon icon-class="add-circle" size="14" /> <span>增加汉字</span>
         </span>
       </div>
     </template>

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -6,6 +6,23 @@
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>
     <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
+    <template v-if="data.property.learn_type === 'paint'">
+      <!-- 描红 -->
+    </template>
+    <template v-else-if="data.property.learn_type === 'write'">
+      <!-- 书写 -->
+    </template>
+    <template v-else>
+      <!-- 笔画学习 -->
+      <div class="words-box">
+        <div v-for="(item, index) in data.option_list" :key="index" class="words-item">
+          <div class="words-info">
+            <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+            <span class="pinyin">{{ item.pinyin }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -18,6 +35,9 @@ export default {
   data() {
     return {};
   },
+  created() {
+    console.log(this.data);
+  },
   methods: {},
 };
 </script>
@@ -27,5 +47,48 @@ export default {
 
 .chinese-preview {
   @include preview;
+
+  .words-box {
+    display: flex;
+    column-gap: 24px;
+
+    .words-item {
+      min-width: 64px;
+    }
+
+    .audio-wrapper {
+      height: 16px;
+
+      :deep .audio-play {
+        width: 16px;
+        height: 16px;
+        color: #000;
+        background-color: initial;
+      }
+
+      :deep .audio-play.not-url {
+        color: #a1a1a1;
+      }
+
+      :deep .voice-play {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .words-info {
+      display: flex;
+      column-gap: 4px;
+      align-items: center;
+      justify-content: center;
+
+      .pinyin {
+        font-family: 'League';
+        font-size: 12px;
+        font-weight: 500;
+        color: #000;
+      }
+    }
+  }
 }
 </style>