汉字题

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -11,6 +11,22 @@
     <div :class="['words-box', 'words-box-' + data.property.learn_type]">
       <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
         <template v-if="item.content.trim()">
+          <div
+            v-if="data.property.learn_type !== 'learn'"
+            class="words-top"
+            :style="{
+              width:
+                data.property.learn_type === 'paint'
+                  ? 64 * (writer_number + 6) + 'px'
+                  : 64 * (writer_number + 1) + 'px',
+            }"
+          >
+            <div class="words-left">
+              <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+              <span class="pinyin">{{ item.pinyin }}</span>
+            </div>
+            <p class="words-right">{{ item.definition }}</p>
+          </div>
           <template v-if="data.property.learn_type === 'paint'">
             <!-- 描红 -->
             <Strockplayredline
@@ -117,7 +133,8 @@ export default {
   data() {
     return {
       hanzi_color: '#404040', // 描红汉字底色
-      writer_number: 19, // 书写个数
+      writer_number_yuan: 19,
+      writer_number: null, // 书写个数
       answer_list: {
         write_model: {},
       }, // 用户答题数据
@@ -143,26 +160,34 @@ export default {
   created() {
     this.handleData();
   },
+  mounted() {},
   methods: {
     // 初始化数据
     handleData() {
-      if (document.getElementsByClassName('preview-content') && document.getElementsByClassName('preview-content')[0]) {
-        this.writer_number =
+      if (
+        document.getElementsByClassName('preview-content') &&
+        document.getElementsByClassName('preview-content')[0] &&
+        this.data.property.learn_type !== 'learn' &&
+        !this.writer_number
+      ) {
+        this.writer_number_yuan =
           Math.floor((document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64) - 1;
       }
       if (this.data.property.learn_type === 'paint') {
-        this.writer_number -= 5;
+        this.writer_number = this.writer_number_yuan - 5;
+      } else {
+        this.writer_number = this.writer_number_yuan;
       }
       this.data.option_list.forEach((item) => {
         if (item.content.trim()) {
           let arr = [];
-          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
-          let data = {
-            hz: item.content.trim(),
-          };
-          GetStaticResources(MethodName, data).then((res) => {
-            this.$set(item, 'strokes', res);
-          });
+          // let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          // let data = {
+          //   hz: item.content.trim(),
+          // };
+          // GetStaticResources(MethodName, data).then((res) => {
+          //   this.$set(item, 'strokes', res);
+          // });
           for (let i = 0; i < this.writer_number; i++) {
             arr.push(null);
           }
@@ -219,10 +244,36 @@ export default {
   .words-box {
     .words-item {
       display: flex;
+      flex-wrap: wrap;
       min-width: 64px;
       margin-bottom: 24px;
     }
 
+    .words-top {
+      display: flex;
+      width: 100%;
+      border: 1px solid #e81b1b;
+      border-bottom: none;
+
+      .words-left {
+        box-sizing: border-box;
+        display: flex;
+        column-gap: 4px;
+        align-items: center;
+        justify-content: center;
+        width: 64px;
+        border-right: 1px solid #e81b1b;
+      }
+
+      .words-right {
+        padding: 8px 16px;
+        margin: 0;
+        font-size: 14px;
+        line-height: 14px;
+        color: #000;
+      }
+    }
+
     .audio-wrapper {
       height: 16px;
 
@@ -249,13 +300,13 @@ export default {
       align-items: center;
       justify-content: center;
       margin-bottom: 9px;
+    }
 
-      .pinyin {
-        font-family: 'League';
-        font-size: 12px;
-        font-weight: 500;
-        color: #000;
-      }
+    .pinyin {
+      font-family: 'League';
+      font-size: 12px;
+      font-weight: 500;
+      color: #000;
     }
 
     .strock-chinese {