田字格支持大中小三种格式

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

@@ -13,6 +13,13 @@
       <el-form-item label="框颜色">
         <el-color-picker v-model="property.frame_color" />
       </el-form-item>
+      <el-form-item label="框大小">
+        <el-radio-group v-model="property.frame_size">
+          <el-radio v-for="{ value, label } in frameSizeList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
 
       <el-divider />
       <el-form-item v-if="property.model === 'miao'" label="描红格">
@@ -115,6 +122,7 @@ import {
   isEnable,
   frameList,
   audioGenerationMethodList,
+  frameSizeList,
 } from '@/views/book/courseware/data/character';
 import { GetTextToAudioConfParamList } from '@/api/app';
 import { speedRatioList } from '@/views/book/courseware/data/common';
@@ -134,6 +142,7 @@ export default {
       voice_type_list: [],
       emotion_list: [],
       speedRatioList,
+      frameSizeList,
     };
   },
   created() {

src/views/book/courseware/create/components/question/character_structure/CharacterStructureSetting.vue

@@ -3,6 +3,13 @@
     <el-form :model="property" label-width="72px" label-position="left">
       <SerialNumber :property="property" />
       <BackgroundSet :property="property" />
+      <el-form-item label="框大小">
+        <el-radio-group v-model="property.frame_size">
+          <el-radio v-for="{ value, label } in frameSizeList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="拼音显示">
         <el-radio-group v-model="property.view_pinyin">
           <el-radio v-for="{ value, label } in showList" :key="value" :label="value">
@@ -18,7 +25,11 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
-import { getCharacterStructureProperty, showList } from '@/views/book/courseware/data/characterStructure';
+import {
+  getCharacterStructureProperty,
+  showList,
+  frameSizeList,
+} from '@/views/book/courseware/data/characterStructure';
 
 export default {
   name: 'CharacterStructureSetting',
@@ -27,6 +38,7 @@ export default {
     return {
       property: getCharacterStructureProperty(),
       showList,
+      frameSizeList,
     };
   },
   methods: {},

src/views/book/courseware/create/components/question/newWord_template/NewWordTemplateSetting.vue

@@ -3,6 +3,13 @@
     <el-form :model="property" label-width="72px" label-position="left">
       <SerialNumber :property="property" />
       <BackgroundSet :property="property" />
+      <el-form-item label="框大小">
+        <el-radio-group v-model="property.frame_size">
+          <el-radio v-for="{ value, label } in frameSizeList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="笔画动画">
         <el-radio-group v-model="property.is_enable_play_structure">
           <el-radio v-for="{ value, label } in showList" :key="value" :label="value">
@@ -39,7 +46,12 @@
 <script>
 import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
 
-import { getNewWordTemplateProperty, showList, displayList } from '@/views/book/courseware/data/newWordTemplate';
+import {
+  getNewWordTemplateProperty,
+  showList,
+  displayList,
+  frameSizeList,
+} from '@/views/book/courseware/data/newWordTemplate';
 
 export default {
   name: 'NewWordTemplateSetting',
@@ -49,6 +61,7 @@ export default {
       property: getNewWordTemplateProperty(),
       showList,
       displayList,
+      frameSizeList,
     };
   },
   methods: {},

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

@@ -52,6 +52,23 @@ export const frameList = [
   },
 ];
 
+// 汉字框大小
+export const frameSizeList = [
+  {
+    value: 'big',
+    label: '大',
+  },
+  {
+    value: 'middle',
+    label: '中',
+  },
+  {
+    value: 'small',
+    label: '小',
+  },
+];
+
+
 // 读音生成方式
 export const audioGenerationMethodList = [
   {
@@ -112,6 +129,7 @@ export function getCharacterProperty() {
     ...commonComponentProperty,
     is_enable_voice_answer: switchOption[1].value,
     audio_generation_method: audioGenerationMethodList[0].value,
+    frame_size: frameSizeList[0].value,
   };
 }
 

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

@@ -24,6 +24,22 @@ export const showList = [
   },
 ];
 
+// 汉字框大小
+export const frameSizeList = [
+  {
+    value: 'big',
+    label: '大',
+  },
+  {
+    value: 'middle',
+    label: '中',
+  },
+  {
+    value: 'small',
+    label: '小',
+  },
+];
+
 // 结构列表
 export const structureList = [
   {
@@ -124,6 +140,7 @@ export function getCharacterStructureProperty() {
     sn_display_mode: displayList[1].value,
 
     view_pinyin: showList[0].value,
+    frame_size: frameSizeList[0].value,
 
     ...commonComponentProperty,
   };

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

@@ -40,6 +40,22 @@ export const frameList = [
   },
 ];
 
+// 汉字框大小
+export const frameSizeList = [
+  {
+    value: 'big',
+    label: '大',
+  },
+  {
+    value: 'middle',
+    label: '中',
+  },
+  {
+    value: 'small',
+    label: '小',
+  },
+];
+
 // 模式类型
 export const modelList = [
   {
@@ -100,6 +116,7 @@ export function getNewWordTemplateProperty() {
 
     // input模式
     is_enable_shiyi: showList[0].value,
+    frame_size: frameSizeList[0].value,
 
     ...commonComponentProperty,
   };

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

@@ -13,6 +13,7 @@
         >
           <div
             class="number-box"
+            :class="['number-box-' + data.property.frame_size]"
             :style="{
               marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
             }"
@@ -53,6 +54,7 @@
                     <el-image
                       v-if="items.file_list[0]"
                       class="items-image"
+                      :class="['frame-size-' + data.property.frame_size]"
                       :src="items.file_list[0].file_url"
                       fit="contain"
                       :style="{
@@ -64,6 +66,7 @@
                   <template v-else-if="items && items.type === 'lian'">
                     <span
                       class="items-lian"
+                      :class="['items-lian-' + data.property.frame_size]"
                       :style="{
                         color:
                           data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -105,6 +108,7 @@
                       item.content_list[indexs + 1].type !== 'lian'
                         ? 'NoborderRight'
                         : '',
+                      'frame-size-' + data.property.frame_size,
                     ]"
                     :play-color="
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -138,6 +142,7 @@
                       item.content_list[indexs + 1].type !== 'lian'
                         ? 'NoborderRight'
                         : '',
+                      'frame-size-' + data.property.frame_size,
                     ]"
                     :style="{
                       borderColor:
@@ -226,7 +231,7 @@
                       items.hz_info && items.hz_info[0].hzDetail.hz_json ? items.hz_info[0].hzDetail.hz_json : []
                     "
                     class="hanzi-storck"
-                    :class="['strock-chinese', 'border-right-none']"
+                    :class="['strock-chinese', 'border-right-none', 'frame-size-' + data.property.frame_size]"
                     :bg-type="data.property.frame_type"
                     :play-color="
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -262,7 +267,7 @@
                   :book-text="item.content"
                   :target-div="'write-praT-1' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
-                  :class="['strock-chinese']"
+                  :class="['strock-chinese', 'frame-size-' + data.property.frame_size]"
                   :bg-type="data.property.frame_type"
                   :play-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -281,7 +286,7 @@
                   :target-div="'write-praT-2' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
-                  :class="['strock-chinese']"
+                  :class="['strock-chinese', 'frame-size-' + data.property.frame_size]"
                   :bg-type="data.property.frame_type"
                   :play-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
@@ -297,7 +302,7 @@
               <!-- 书写 -->
               <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                 <div
-                  :class="['strockplay-newWord']"
+                  :class="['strockplay-newWord', 'frame-size-' + data.property.frame_size]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color
@@ -737,6 +742,14 @@ export default {
     height: 80px;
     margin-right: 16px;
 
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
+
     .number {
       display: block;
       width: 24px;
@@ -776,6 +789,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .items-lian {
     display: block;
     height: 80px;
@@ -783,6 +806,16 @@ export default {
     font-size: 34px;
     line-height: 80px;
     color: #346cda;
+
+    &-middle {
+      height: 70px;
+      line-height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+      line-height: 60px;
+    }
   }
 
   .items-flex {

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -26,6 +26,7 @@
               :id="item.id"
               :key="'op' + i"
               class="option_one"
+              :class="['option_one-' + data.property.frame_size]"
               :style="{
                 background:
                   data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -69,6 +70,7 @@
               <!-- @click="writeWord(conItem, items.pinyin)" -->
               <div
                 class="strockplay-newWord"
+                :class="['frame-size-' + data.property.frame_size]"
                 :style="{
                   borderColor:
                     data.unified_attrib && data.unified_attrib.topic_color
@@ -102,7 +104,7 @@
           <div class="image">
             <img src="@/assets/drag-arrows.png" alt="" />
           </div>
-          <div class="answer">
+          <div class="answer" :class="['answer-' + data.property.frame_size]">
             <!-- :disabled="TaskModel == 'ANSWER' ? true : items.is_example ? true : false" -->
 
             <draggable
@@ -111,6 +113,7 @@
               group="site"
               :disabled="items.is_example"
               class="content-box content-boxs"
+              :class="['content-boxs-' + data.property.frame_size]"
               :move="onMove"
             >
               <transition-group>
@@ -118,7 +121,10 @@
                   v-for="(answer, i) in answer.answer_list[row].answer_list"
                   :key="'op' + i"
                   class="option_one"
-                  :class="[items.is_example ? 'option_one_example' : classNameJudge(items, row)]"
+                  :class="[
+                    items.is_example ? 'option_one_example' : classNameJudge(items, row),
+                    'option_one-' + data.property.frame_size,
+                  ]"
                   :index="'form' + i"
                   :style="{
                     borderColor:
@@ -141,7 +147,10 @@
                   v-if="answer.answer_list[row].answer_list.length == 0"
                   :key="row"
                   class="option_one"
-                  :class="[isJudgingRightWrong && items.answer ? 'wrong' : '']"
+                  :class="[
+                    isJudgingRightWrong && items.answer ? 'wrong' : '',
+                    'option_one-' + data.property.frame_size,
+                  ]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -191,6 +200,7 @@
                 <template v-if="items.hz_info.length > 0">
                   <div
                     class="strockplay-newWord"
+                    :class="['frame-size-' + data.property.frame_size]"
                     :style="{
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color
@@ -229,7 +239,7 @@
               <div class="answer">
                 <div
                   class="option_one"
-                  :class="[items.is_example ? 'option_one_example' : '']"
+                  :class="[items.is_example ? 'option_one_example' : '', 'option_one-' + data.property.frame_size]"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color
@@ -408,6 +418,14 @@ export default {
   .content-boxs {
     height: 80px;
     overflow: hidden;
+
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
   }
 
   .option {
@@ -429,6 +447,16 @@ export default {
       background: #9dcaff;
       border-radius: 4px;
 
+      &-middle {
+        width: 62px;
+        height: 62px;
+      }
+
+      &-small {
+        width: 52px;
+        height: 52px;
+      }
+
       img {
         max-width: 100%;
         max-height: 100%;
@@ -455,6 +483,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .one {
     display: flex;
     align-items: center;
@@ -505,6 +543,16 @@ export default {
       width: 80px;
       height: 80px;
 
+      &-middle {
+        width: 70px;
+        height: 70px;
+      }
+
+      &-small {
+        width: 60px;
+        height: 60px;
+      }
+
       .option_one {
         display: flex;
         align-items: center;
@@ -515,6 +563,16 @@ export default {
         border: 2px solid #346cda;
         border-radius: 4px;
 
+        &-middle {
+          width: 70px;
+          height: 70px;
+        }
+
+        &-small {
+          width: 60px;
+          height: 60px;
+        }
+
         &.right {
           background: #e9f7f2 !important;
           border-color: $right-color !important;

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

@@ -11,6 +11,7 @@
       >
         <div
           class="number-box"
+          :class="['number-box-' + data.property.frame_size]"
           :style="{
             marginTop: isEnable(data.property.view_pinyin)
               ? '30px'
@@ -111,6 +112,7 @@
                   <el-image
                     v-if="items.file_list[0]"
                     class="items-image"
+                    :class="['frame-size-' + data.property.frame_size]"
                     :src="items.file_list[0].file_url"
                     fit="contain"
                     :style="{
@@ -122,6 +124,7 @@
                 <template v-else-if="items && items.type === 'lian'">
                   <span
                     class="items-lian"
+                    :class="['items-lian-' + data.property.frame_size]"
                     :style="{
                       color:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -156,6 +159,7 @@
                     item.content_list[indexs + 1].type !== 'lian'
                       ? 'NoborderRight'
                       : '',
+                    'frame-size-' + data.property.frame_size,
                   ]"
                   bg-type="tian"
                   :style="{
@@ -234,6 +238,7 @@
           >
             <div
               class="number-box"
+              :class="['number-box-' + data.property.frame_size]"
               :style="{
                 marginTop: isEnable(data.property.view_pinyin)
                   ? '30px'
@@ -335,6 +340,7 @@
                       <el-image
                         v-if="items.file_list[0]"
                         class="items-image"
+                        :class="['frame-size-' + data.property.frame_size]"
                         :src="items.file_list[0].file_url"
                         fit="contain"
                         :style="{
@@ -348,6 +354,7 @@
                     <template v-else-if="items && items.type === 'lian'">
                       <span
                         class="items-lian"
+                        :class="['items-lian-' + data.property.frame_size]"
                         :style="{
                           color:
                             data.unified_attrib && data.unified_attrib.topic_color
@@ -386,6 +393,7 @@
                         item.content_list[indexs + 1].type !== 'lian'
                           ? 'NoborderRight'
                           : '',
+                        'frame-size-' + data.property.frame_size,
                       ]"
                       :style="{
                         borderColor:
@@ -582,6 +590,14 @@ export default {
     height: 80px;
     margin-right: 16px;
 
+    &-middle {
+      height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+    }
+
     .number {
       display: block;
       width: 24px;
@@ -620,6 +636,16 @@ export default {
     border-radius: 4px;
   }
 
+  .frame-size-middle {
+    width: 70px !important;
+    height: 70px !important;
+  }
+
+  .frame-size-small {
+    width: 60px !important;
+    height: 60px !important;
+  }
+
   .items-lian {
     display: block;
     height: 80px;
@@ -627,6 +653,16 @@ export default {
     font-size: 34px;
     line-height: 80px;
     color: #346cda;
+
+    &-middle {
+      height: 70px;
+      line-height: 70px;
+    }
+
+    &-small {
+      height: 60px;
+      line-height: 60px;
+    }
   }
 
   .inputdv {

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

@@ -23,7 +23,8 @@
         :style="{ color: playColor ? playColor : '' }"
         @click="playHanzi"
       />
-      <div :id="targetDiv" class="character-target-div" :style="{ padding: '5px' }"></div>
+      <!-- :style="{ padding: '5px' }" -->
+      <div :id="targetDiv" class="character-target-div"></div>
     </template>
     <template v-else>
       <span class="book-text">{{ Book_text }}</span>