汉字练习border

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -49,20 +49,21 @@
               />
             </template>
 
-            <div v-for="itemI in writer_number" :key="itemI + data.property.learn_type + index" style="display: flex">
+            <div
+              v-for="(itemI, indexI) in miao_arr[index]"
+              :key="indexI + data.property.learn_type + index"
+              style="display: flex"
+            >
               <Strockred
-                v-for="(items, indexs) in item.hz_strokes_list"
-                :key="indexs"
                 :book-text="item.content"
                 :hanzi-color="hanzi_color"
                 :reset="true"
                 :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
-                :book-strokes="items.strokes"
+                :book-strokes="itemI.strokes"
                 :class="[
                   'strock-chinese',
-                  ((item.hz_strokes_list.length * (itemI + 1) + indexs - 1) % writer_number_yuan !== 0 &&
-                    itemI !== writer_number) ||
-                  (itemI === writer_number && indexs !== item.hz_strokes_list.length - 1)
+                  'strock-chinese' + ((indexI + itemI.length + 1) % writer_number_yuan),
+                  (indexI + itemI.length + 1) % writer_number_yuan !== 0 && indexI !== miao_arr[index].length - 1
                     ? 'border-right-none'
                     : '',
                 ]"
@@ -83,7 +84,10 @@
             </template>
             <div v-for="(items, indexs) in item.imgArr" :key="indexs" class="con-box">
               <div
-                :class="['strockplay-newWord', (indexs + 1) % writer_number_yuan !== 0 ? 'border-left-none' : '']"
+                :class="[
+                  'strockplay-newWord',
+                  (indexs + item.hz_strokes_list.length) % writer_number_yuan !== 0 ? 'border-left-none' : '',
+                ]"
                 @click="freeWrite(items ? JSON.parse(items) : null, index, indexs, item.mark)"
               >
                 <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
@@ -160,7 +164,7 @@ export default {
     return {
       computeOptionMethods,
       hanzi_color: '#404040', // 描红汉字底色
-      writer_number_yuan: 19,
+      writer_number_yuan: 15,
       writer_number: null, // 书写个数
       if_free_show: false,
       free_img: [],
@@ -211,6 +215,7 @@ export default {
       active_mark: '',
       option_list: [],
       show_preview: false,
+      miao_arr: [],
     };
   },
   watch: {
@@ -252,8 +257,11 @@ export default {
       this.show_preview = false;
       this.writer_number = this.data.property.tian_number ? Number(this.data.property.tian_number) : 8;
       let option_list = JSON.parse(JSON.stringify(this.data)).option_list;
+
+      this.miao_arr = [];
       option_list.forEach((item, index) => {
         let arr = [];
+        this.miao_arr.push([]);
         if (this.data.property.learn_type === 'dictation') {
           item.pinyin_arr = [];
           let pinyin_arr = item.pinyin.trim().split(' ');
@@ -271,7 +279,13 @@ export default {
           }
         } else if (item.content.trim()) {
           for (let i = 0; i < this.writer_number; i++) {
-            item.hz_strokes_list.forEach(() => {
+            item.hz_strokes_list.forEach((items) => {
+              if (this.data.property.learn_type === 'paint') {
+                this.miao_arr[index].push({
+                  strokes: items.strokes,
+                  length: item.hz_strokes_list.length,
+                });
+              }
               arr.push(null);
             });
           }
@@ -291,11 +305,13 @@ export default {
       });
       this.option_list = option_list;
       this.show_preview = true;
-      if (document.getElementsByClassName('preview-content').length > 0) {
-        this.writer_number_yuan = Math.floor(
-          (document.getElementsByClassName('preview-content')[0].clientWidth - 128) / 64,
-        );
-      }
+      setTimeout(() => {
+        if (document.getElementsByClassName('chinese-preview').length > 0) {
+          this.writer_number_yuan = Math.floor(
+            (document.getElementsByClassName('chinese-preview')[0].clientWidth - 128) / 64,
+          );
+        }
+      }, 10);
     },
     changePraShow() {
       this.if_free_show = false;

src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -121,7 +121,8 @@ export default {
 
     .pic-info {
       margin: 0;
-      font-size: 12px;
+
+      //font-size: 12px;
       font-weight: 400;
       line-height: 20px;
       color: #000;