汉字-描红

src/views/book/courseware/preview/components/character_base/CharacterBasePreview.vue

@@ -77,6 +77,63 @@
         />
       </template>
     </div>
+    <div v-if="if_free_show" class="practiceBox practice-box-strock">
+      <FreewriteLettle
+        ref="freePaint"
+        :current-tree-i-d="'1234456'"
+        :current-hz="current_hz"
+        :curren-hz-data="current_hz_data"
+        :row-index="active_index"
+        :col-index="active_col_index"
+        :disabled="disabled"
+        @closeIfFreeShow="closeIfFreeShow"
+        @changePraShow="changePraShow"
+        @changeCurQue="changeCurQue"
+        @deleteWriteRecord="deleteWriteRecord"
+      />
+    </div>
+    <div v-if="if_miao_show" class="practiceBox practice-box-strock">
+      <div class="miao-box">
+        <i class="el-icon-close close-icon" @click="if_miao_show = false"></i>
+        <Strockplayredline
+          v-if="
+            (data.answer.answer_list[0].strokes_content_list[active_col_index] &&
+              data.answer.answer_list[0].strokes_content_list[active_col_index] === 'true') ||
+            disabled
+          "
+          :play-storkes="false"
+          :book-text="current_hz"
+          :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+          :book-strokes="current_hz_data"
+          :strokeColor="
+            disabled &&
+            (!data.answer.answer_list[0].strokes_content_list[active_col_index] ||
+              (data.answer.answer_list[0].strokes_content_list[active_col_index] &&
+                data.answer.answer_list[0].strokes_content_list[active_col_index] === 'false'))
+              ? '#ddd'
+              : ''
+          "
+        />
+        <Strockred
+          :class="[
+            'strock-red',
+            data.answer.answer_list[0].strokes_content_list[active_col_index] &&
+            data.answer.answer_list[0].strokes_content_list[active_col_index] === 'true'
+              ? 'strock-red-zindex'
+              : '',
+          ]"
+          :book-text="current_hz"
+          :hanzi-color="hanzi_color"
+          :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+          :book-strokes="current_hz_data"
+          :is-answer.sync="data.answer.answer_list[0].strokes_content_list[active_col_index]"
+          ref="strockRed"
+        />
+        <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
+          <SvgIcon icon-class="reset" class="reset-btn" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -295,5 +352,82 @@ export default {
   .border-right-none {
     border-right: none;
   }
+
+  .practiceBox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 101;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, 19%);
+
+    &.practice-box-strock {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top: 0;
+    }
+
+    .miao-box {
+      position: relative;
+      width: 332px;
+      height: 360px;
+      padding: 30px 16px;
+      margin: 0 auto;
+      background: #f3f3f3;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
+
+      .close-icon {
+        position: absolute;
+        top: 0;
+        right: 8px;
+        z-index: 2;
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+        cursor: pointer;
+      }
+
+      .strockredBox,
+      .strockplay-redInner {
+        width: 300px;
+        height: 300px;
+        margin: 0 auto;
+      }
+
+      .strock-red {
+        position: absolute;
+        top: 30px;
+        left: 16px;
+
+        &-zindex {
+          z-index: -1;
+        }
+      }
+
+      .reset-box {
+        position: absolute;
+        right: 22px;
+        bottom: 22px;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 11px;
+        height: 11px;
+        color: $text-color;
+        cursor: pointer;
+
+        &:hover {
+          color: #000;
+        }
+      }
+    }
+  }
 }
 </style>