汉字书写

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -13,19 +13,49 @@
         <template v-if="item.content.trim()">
           <template v-if="data.property.learn_type === 'paint'">
             <!-- 描红 -->
+            <Strockplayredline
+              :play-storkes="true"
+              :book-text="item.content"
+              :target-div="'pre' + item.content + index"
+              :book-strokes="item.strokes"
+              :class="['strock-chinese', 'border-right-none']"
+            />
             <Strockred
+              v-for="itemI in 5"
+              :key="itemI + data.property.learn_type"
               :book-text="item.content"
               :hanzi-color="hanzi_color"
               :reset="true"
-              :target-div="'write-praT' + item.content"
+              :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
               :book-strokes="item.strokes"
-              class="strock-chinese"
+              :class="['strock-chinese', itemI !== 5 ? 'border-right-none' : '']"
             />
+            <div
+              v-for="(items, indexs) in item.imgArr"
+              :key="indexs"
+              :class="['strockplay-newWord border-left-none']"
+              @click="freeWrite(items, index, indexs)"
+            >
+              <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+              <img
+                v-if="!play_status && items && items.strokes_image_url"
+                class="hanzi-writer-img"
+                :src="items.strokes_image_url"
+                alt=""
+              />
+            </div>
           </template>
           <template v-else-if="data.property.learn_type === 'write'">
             <!-- 书写 -->
+            <Strockplayredline
+              :play-storkes="true"
+              :book-text="item.content"
+              :target-div="'pre' + item.content + index"
+              :book-strokes="item.strokes"
+              :class="['strock-chinese']"
+            />
             <div v-for="(items, indexs) in item.imgArr" :key="indexs" class="con-box">
-              <div class="strockplay-newWord" @click="freeWrite(items, index, indexs)">
+              <div :class="['strockplay-newWord border-left-none']" @click="freeWrite(items, index, indexs)">
                 <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                 <img
                   v-if="!play_status && items && items.strokes_image_url"
@@ -44,7 +74,7 @@
             <Strockplayredline
               :play-storkes="true"
               :book-text="item.content"
-              :target-div="'pra' + item.content + index"
+              :target-div="'pre' + item.content + index"
               :book-strokes="item.strokes"
               class="strock-chinese"
             />
@@ -100,6 +130,16 @@ export default {
       play_status: false, // 播放状态
     };
   },
+  watch: {
+    'data.property.learn_type': {
+      handler(val, oldVal) {
+        if (val !== oldVal) {
+          this.handleData();
+        }
+      },
+      deep: true,
+    },
+  },
   created() {
     this.handleData();
   },
@@ -177,11 +217,10 @@ export default {
   @include preview;
 
   .words-box {
-    row-gap: 24px;
-
     .words-item {
       display: flex;
       min-width: 64px;
+      margin-bottom: 24px;
     }
 
     .audio-wrapper {
@@ -209,6 +248,7 @@ export default {
       column-gap: 4px;
       align-items: center;
       justify-content: center;
+      margin-bottom: 9px;
 
       .pinyin {
         font-family: 'League';
@@ -219,12 +259,13 @@ export default {
     }
 
     .strock-chinese {
-      margin-top: 9px;
       border: 1px solid #e81b1b;
     }
 
     .strockplay-newWord {
       position: relative;
+      box-sizing: border-box;
+      flex-shrink: 0;
       width: 64px;
       height: 64px;
       border: 1px solid #e81b1b;
@@ -244,9 +285,21 @@ export default {
       }
     }
 
+    .border-left-none {
+      border-left: none;
+    }
+
+    .border-right-none {
+      border-right: none;
+    }
+
     &-learn {
       display: flex;
       column-gap: 24px;
+
+      .words-item {
+        display: block;
+      }
     }
   }
 

src/views/exercise_questions/preview/components/common/Strockplayredline.vue

@@ -83,6 +83,7 @@ export default {
 <style lang="scss" scoped>
 .strockplay-redInner {
   position: relative;
+  box-sizing: border-box;
   width: 64px; // 444px
   height: 64px; // 480px
 }