优化细节

src/views/book/courseware/create/components/question/character/Character.vue

@@ -40,11 +40,11 @@
               </el-radio-group>
             </template>
             <template v-if="isEnable(data.property.is_enable_pinyin)">
-              <span>共用拼音：</span>
+              <!-- <span>共用拼音：</span>
               <el-radio-group v-model="item.is_common_pinyin">
                 <el-radio :label="true">是</el-radio>
                 <el-radio :label="false">否</el-radio>
-              </el-radio-group>
+              </el-radio-group> -->
               <template v-if="item.is_common_pinyin">
                 <span>拼音</span>
                 <el-input v-model="item.pinyin" placeholder="输入拼音"></el-input>

src/views/book/courseware/data/character.js

@@ -41,8 +41,8 @@ export const frameList = [
     label: '田字格',
   },
   {
-    value: 'fang',
-    label: '方框',
+    value: 'mi',
+    label: '米字格',
   },
   {
     value: 'none',
@@ -59,7 +59,7 @@ export function getOption() {
     file_list: [],
     file_id_list: [],
     content_list: [],
-    is_common_pinyin: false,
+    is_common_pinyin: true,
     audio_file_id: '',
     is_margin: false,
     is_show_ben: true,

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -54,6 +54,7 @@
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
                     :targetDiv="'newWordTemplate' + items.con + index + indexs"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    :bgType="data.property.frame_type"
                     class="hanzi-storck"
                     :class="[
                       !item.is_margin && item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',
@@ -100,7 +101,16 @@
                       )
                     "
                   >
-                    <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+                    <SvgIcon
+                      icon-class="hanzi-writer-bg"
+                      class="character-target-bg"
+                      v-if="data.property.frame_type === 'tian'"
+                    />
+                    <SvgIcon
+                      icon-class="mi"
+                      class="character-target-bg"
+                      v-else-if="data.property.frame_type === 'mi'"
+                    />
                     <img
                       v-if="
                         !play_status &&
@@ -124,23 +134,34 @@
           <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
             <div class="words-top">
               <div class="words-left" :style="{}">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-                <span class="pinyin">{{ item.pinyin }}</span>
+                <AudioPlay
+                  :file-id="item.audio_file_id"
+                  theme-color="gray"
+                  v-if="isEnable(data.property.is_enable_voice)"
+                />
+                <span class="pinyin" v-if="isEnable(data.property.is_enable_pinyin) && item.is_common_pinyin">{{
+                  item.pinyin
+                }}</span>
               </div>
             </div>
             <div class="card-box">
               <!-- 描红 -->
               <template v-for="(items, indexs) in item.content_list">
-                <Strockplayredline
-                  :key="'miao' + indexs"
-                  :Book_text="items.con"
-                  :playStorkes="isEnable(data.property.is_enable_stroke)"
-                  :curItem="null"
-                  :targetDiv="'newWordTemplate' + items.con + index + indexs"
-                  :hz_json="items.hz_info[0].hzDetail.hz_json"
-                  class="hanzi-storck"
-                  :class="['strock-chinese', 'border-right-none']"
-                />
+                <div v-if="item.is_show_ben" :key="'miao' + indexs">
+                  <!-- <div v-if="isEnable(data.property.is_enable_pinyin) && !item.is_common_pinyin" class="pinyin">
+                    {{ items.pinyin }}
+                  </div> -->
+                  <Strockplayredline
+                    :Book_text="items.con"
+                    :playStorkes="isEnable(data.property.is_enable_stroke)"
+                    :curItem="null"
+                    :targetDiv="'newWordTemplate' + items.con + index + indexs"
+                    :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    class="hanzi-storck"
+                    :class="['strock-chinese', 'border-right-none']"
+                    :bgType="data.property.frame_type"
+                  />
+                </div>
               </template>
 
               <div
@@ -159,6 +180,7 @@
                   :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
                   :book-strokes="itemI.strokes"
                   :class="['strock-chinese']"
+                  :bgType="data.property.frame_type"
                 />
                 <Strockplayredlines
                   v-else
@@ -168,6 +190,7 @@
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
                   :class="['strock-chinese']"
+                  :bgType="data.property.frame_type"
                 />
               </div>
               <!-- 书写 -->
@@ -184,7 +207,12 @@
                     )
                   "
                 >
-                  <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+                  <SvgIcon
+                    icon-class="hanzi-writer-bg"
+                    class="character-target-bg"
+                    v-if="data.property.frame_type === 'tian'"
+                  />
+                  <SvgIcon icon-class="mi" class="character-target-bg" v-else-if="data.property.frame_type === 'mi'" />
                   <img
                     v-if="
                       !play_status &&
@@ -199,7 +227,7 @@
                 </div>
               </div>
             </div>
-            <div class="words-bottom" v-if="item.shiyi">
+            <div class="words-bottom" v-if="item.shiyi && isEnable(data.property.is_enable_shiyi)">
               {{ item.shiyi }}
             </div>
           </div>
@@ -219,6 +247,7 @@
           @changePraShow="changePraShow"
           @changeCurQue="changeCurQue"
           @deleteWriteRecord="deleteWriteRecord"
+          :bgType="data.property.frame_type"
         />
       </div>
       <div v-if="if_miao_show" class="practiceBox practice-box-strock">
@@ -242,6 +271,7 @@
                 ? '#ddd'
                 : ''
             "
+            :bgType="data.property.frame_type"
           />
           <Strockred
             ref="strockRed"
@@ -258,6 +288,7 @@
             :book-strokes="current_hz_data"
             :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
             :show-error-tip="isEnable(data.property.is_enable_error)"
+            :bgType="data.property.frame_type"
           />
           <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
             <SvgIcon icon-class="reset" class="reset-btn" />
@@ -325,7 +356,6 @@ export default {
   created() {},
   methods: {
     handleData() {
-      console.log(this.data.option_list);
       let answer_list = [];
       this.data.option_list.forEach((item, index) => {
         if (this.data.property.model === 'write') {

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

@@ -2,7 +2,8 @@
   <div class="practice practiceSingleNPC">
     <i class="el-icon-close close-icon" @click="changePraShow()"></i>
     <div class="right-content">
-      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" v-if="bgType === 'tian'" />
+      <svg-icon icon-class="mi" class="character-target-bg" v-else-if="bgType === 'mi'" />
       <div class="right-strockred">
         <template v-if="!hasPlay && data && data.strokes_image">
           <img class="img" :src="data.strokes_image" alt="" />
@@ -71,6 +72,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    bgType: {
+      type: String,
+      default: 'tian',
+    },
   },
   data() {
     return {

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

@@ -9,6 +9,7 @@
     </div>
     <div class="character-target-box">
       <SvgIcon v-if="bgType === 'tian'" icon-class="hanzi-writer-bg" class="character-target-bg" />
+      <svg-icon icon-class="mi" class="character-target-bg" v-else-if="bgType === 'mi'" />
       <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
     </div>
   </div>

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

@@ -2,7 +2,8 @@
   <div class="strockredBox">
     <div class="strockred">
       <div class="character-target-box">
-        <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+        <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" v-if="bgType === 'tian'" />
+        <svg-icon icon-class="mi" class="character-target-bg" v-else-if="bgType === 'mi'" />
         <div :id="targetDiv" class="character-target-div"></div>
       </div>
       <!-- <div v-if="reset" :class="['reset-box']" @click="resetHanzi">
@@ -46,6 +47,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    bgType: {
+      type: String,
+      default: 'tian',
+    },
   },
   data() {
     return {

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -27,7 +27,12 @@
     <template v-else>
       <span class="book-text">{{ Book_text }}</span>
     </template>
-    <svg-icon icon-class="tian" :className="tianColor ? 'tian-bg-red' : 'tian-bg'" />
+    <svg-icon
+      icon-class="hanzi-writer-bg"
+      :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
+      v-if="bg_type === 'tian'"
+    />
+    <svg-icon icon-class="mi" :className="tianColor ? 'tian-bg-red' : 'tian-bg'" v-else-if="bg_type === 'mi'" />
   </div>
 </template>
 
@@ -48,10 +53,12 @@ export default {
     'type',
     'judgeAnswer',
     'hz_json',
+    'bgType',
   ],
   data() {
     return {
       writer: null,
+      bg_type: this.bgType || this.bgType !== '' ? this.bgType : 'tian',
     };
   },
   computed: {},
@@ -168,7 +175,8 @@ export default {
 }
 
 .character-target-div {
-  z-index: 99999;
+  position: absolute;
+  z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,9 +221,10 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 0;
     width: 100%;
     height: 100%;
-    stroke: rgba(157, 202, 255, 20%);
+    color: #dedede;
   }
 
   .tian-bg-red {