Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

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

@@ -17,15 +17,35 @@
               marginTop: isEnable(data.property.view_pinyin) ? '30px' : '',
             }"
           >
-            <span class="number">{{ index + 1 }}</span>
+            <span
+              class="number"
+              :style="{
+                background:
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+              >{{ index + 1 }}</span
+            >
           </div>
           <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
-            <div v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin" class="pinyin">
+            <div
+              v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+              class="pinyin"
+              :style="{
+                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+              }"
+            >
               {{ item.pinyin }}
             </div>
             <div class="items-flex">
               <div v-for="(items, indexs) in item.content_list" :key="indexs" class="items">
-                <div v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin" class="pinyin">
+                <div
+                  v-if="isEnable(data.property.view_pinyin) && !item.is_common_pinyin"
+                  class="pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
+                >
                   {{ items.pinyin }}
                 </div>
                 <div class="items-content">
@@ -38,7 +58,14 @@
                     />
                   </template>
                   <template v-else-if="items && items.type === 'lian'">
-                    <span class="items-lian">{{ items.con }}</span>
+                    <span
+                      class="items-lian"
+                      :style="{
+                        background:
+                          data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+                      }"
+                      >{{ items.con }}</span
+                    >
                   </template>
                   <Strockplayredline
                     v-if="items && items.type === 'hanzi'"
@@ -52,7 +79,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
+                    :target-div="'newWordTemplate-character' + items.con + index + indexs + randomId"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     :bg-type="data.property.frame_type"
                     class="hanzi-storck"
@@ -72,6 +99,15 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
+                    :play-color="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
 
                   <div
@@ -93,6 +129,12 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                     @click="
                       freeWrite(
                         userAnswer[index][indexs].imgArr ? userAnswer[index][indexs].imgArr : null,
@@ -136,12 +178,21 @@
               <div class="words-left" :style="{}">
                 <AudioPlay
                   v-if="isEnable(data.property.is_enable_voice)"
+                  v-if="isEnable(data.property.is_enable_voice)"
                   :file-id="item.audio_file_id"
-                  theme-color="gray"
+                  :theme-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
                 />
-                <span v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin" class="pinyin">{{
-                  item.pinyin
-                }}</span>
+                <span
+                  v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin"
+                  class="pinyin"
+                  :style="{
+                    fontSize:
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                  }"
+                  >{{ item.pinyin }}</span
+                >
               </div>
             </div>
             <div class="card-box">
@@ -155,11 +206,22 @@
                     :Book_text="items.con"
                     :play-storkes="isEnable(data.property.is_enable_stroke)"
                     :cur-item="null"
-                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
-                    :hz_json="items.hz_info[0].hzDetail.hz_json"
+                    :target-div="'newWordTemplate-character-answer' + items.con + index + indexs"
+                    :hz_json="
+                      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']"
                     :bg-type="data.property.frame_type"
+                    :play-color="
+                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                    "
+                    :style="{
+                      borderColor:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#346cda',
+                    }"
                   />
                 </div>
               </template>
@@ -168,6 +230,12 @@
                 v-for="(itemI, indexI) in item.miao_arr"
                 :key="indexI + index"
                 style="display: flex"
+                :style="{
+                  borderColor:
+                    data.unified_attrib && data.unified_attrib.topic_color
+                      ? data.unified_attrib.topic_color
+                      : '#346cda',
+                }"
                 @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
               >
                 <Strockplayredlines
@@ -177,26 +245,50 @@
                   "
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-1' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :class="['strock-chinese']"
                   :bg-type="data.property.frame_type"
+                  :play-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
                 <Strockplayredlines
                   v-else
                   :play-storkes="false"
                   :book-text="item.content"
-                  :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
+                  :target-div="'write-praT-2' + indexI + index + randomId"
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
                   :class="['strock-chinese']"
                   :bg-type="data.property.frame_type"
+                  :play-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                 />
               </div>
               <!-- 书写 -->
               <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
                 <div
                   :class="['strockplay-newWord']"
+                  :style="{
+                    borderColor:
+                      data.unified_attrib && data.unified_attrib.topic_color
+                        ? data.unified_attrib.topic_color
+                        : '#346cda',
+                  }"
                   @click="
                     freeWrite(
                       userAnswer[index].strokes_content_list[indexs].imgArr
@@ -244,6 +336,8 @@
           :disabled="disabled"
           :show-play="isEnable(data.property.is_enable_play_back)"
           :bg-type="data.property.frame_type"
+          :bg-type="data.property.frame_type"
+          :attrib="data.unified_attrib"
           @closeIfFreeShow="closeIfFreeShow"
           @changePraShow="changePraShow"
           @changeCurQue="changeCurQue"
@@ -261,7 +355,7 @@
             "
             :play-storkes="false"
             :book-text="current_hz"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT-3' + current_hz + active_col_index + active_index + randomId"
             :book-strokes="current_hz_data"
             :stroke-color="
               disabled &&
@@ -272,6 +366,7 @@
                 : ''
             "
             :bg-type="data.property.frame_type"
+            :play-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
           />
           <Strockred
             ref="strockRed"
@@ -284,7 +379,7 @@
             ]"
             :book-text="current_hz"
             :hanzi-color="hanzi_color"
-            :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+            :target-div="'write-praT' + current_hz + active_col_index + active_index + randomId"
             :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)"
@@ -339,6 +434,7 @@ export default {
       show_preview: false,
       miao_arr: [],
       if_miao_show: false, // 描红模块
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   computed: {},
@@ -422,7 +518,12 @@ export default {
       this.active_index = index;
       this.active_col_index = indexs;
 
-      this.current_hz = this.data.option_list[index].content_list[indexs].con;
+      this.current_hz =
+        this.data.option_list[index] &&
+        this.data.option_list[index].content_list[indexs] &&
+        this.data.option_list[index].content_list[indexs].con
+          ? this.data.option_list[index].content_list[indexs].con
+          : '';
       this.current_hz_data = imgUrl;
     },
     // 删除记录
@@ -487,12 +588,13 @@ export default {
   }
 
   .audio-wrapper-nobg {
-    height: 16px;
+    height: 24px;
 
     :deep .audio-play {
-      width: 16px;
-      height: 16px;
-      color: #000;
+      width: 24px;
+      height: 24px;
+
+      // color: #000;
       background-color: initial;
     }
 
@@ -590,6 +692,7 @@ export default {
     font-family: 'League';
     font-size: 20px;
     font-weight: 400;
+    line-height: 30px;
     color: rgba(0, 0, 0, 50%);
     text-align: center;
   }
@@ -751,7 +854,7 @@ export default {
   :deep .strockplay-redInner {
     width: 80px;
     height: 80px;
-    border: 2px solid #346cda !important;
+    border-width: 2px !important;
     border-radius: 8px;
   }
 

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

@@ -5,7 +5,11 @@
 
     <div class="main">
       <div class="main-top" :style="{ width: data.hz_strokes_list.length * 64 + 'px' }">
-        <AudioPlay v-if="isEnable(data.property.is_enable_voice)" :file-id="data.audio_file_id" theme-color="gray" />
+        <AudioPlay
+          v-if="isEnable(data.property.is_enable_voice)"
+          :file-id="data.audio_file_id"
+          :theme-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
+        />
         <span v-if="isEnable(data.property.view_pinyin)" class="pinyin">{{ data.pinyin }}</span>
       </div>
       <div class="strock-chinese-box">
@@ -19,7 +23,7 @@
             :book-strokes="items.strokes"
             :class="['strock-chinese', indexs !== data.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
             :bg-type="data.property.frame_type"
-            :frame-color="data.property.frame_color"
+            :playColor="data.property.frame_color"
           />
         </template>
         <template v-else>

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

@@ -7,17 +7,19 @@
         width: showSlider ? '230px' : '',
         justifyContent: showSlider && !showProgress ? 'space-between' : 'center',
         backgroundColor: themeColor ? '' : bookInfo.theme_color,
+        color: themeColor ? themeColor : '#000',
       }"
       @click="playAudio"
     >
-      <SvgIcon v-if="audio.paused" :size="audio.paused ? 20 : 14" :icon-class="iconClass" />
-      <img
+      <SvgIcon size="24" :icon-class="iconClass" />
+
+      <!-- <img
         v-else
         :src="
           themeColor === 'gray' ? require('@/assets/voice-play-gray.png') : require('@/assets/voice-play-white.png')
         "
         class="voice-play"
-      />
+      /> -->
 
       <template v-if="showSlider">
         <template v-if="showProgress">
@@ -91,7 +93,7 @@ export default {
   },
   computed: {
     iconClass() {
-      return this.audio.paused ? 'audio' : 'audio-stop';
+      return this.audio.paused ? 'play-btn' : 'animated';
     },
   },
   watch: {

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

@@ -25,10 +25,24 @@
         </a>
       </div>
       <ul class="nav-list" :class="[showPlay ? '' : 'nav-list-line']">
-        <li v-if="showPlay" :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'" @click="play()">
+        <li
+          v-if="showPlay"
+          :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'"
+          @click="play()"
+          :style="{
+            backgroundColor:
+              currenHzData && currenHzData.strokes_content && attrib && attrib.topic_color ? attrib.topic_color : '',
+          }"
+        >
           播放
         </li>
-        <li :class="disabled ? 'disabled' : ''" @click="handleWriteImg">保存</li>
+        <li
+          :class="disabled ? 'disabled' : ''"
+          @click="handleWriteImg"
+          :style="{ backgroundColor: attrib && attrib.topic_color ? attrib.topic_color : '#de4444' }"
+        >
+          保存
+        </li>
       </ul>
     </div>
   </div>
@@ -76,6 +90,10 @@ export default {
       type: String,
       default: 'tian',
     },
+    attrib: {
+      type: Object,
+      default: {},
+    },
   },
   data() {
     return {

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

@@ -2,9 +2,9 @@
   <div
     v-if="bookText"
     class="strockplay-redInner"
-    :style="{ borderColor: frameColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
+    :style="{ borderColor: playColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
   >
-    <div v-if="playStorkes" :class="['strock-play-box']" :style="{ color: frameColor }" @click="playHanzi">
+    <div v-if="playStorkes" :class="['strock-play-box']" :style="{ color: playColor }" @click="playHanzi">
       <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
     </div>
     <div class="character-target-box">
@@ -44,7 +44,7 @@ export default {
       type: String,
       default: 'tian',
     },
-    frameColor: {
+    playColor: {
       type: String,
       default: '#F13232',
     },

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

@@ -78,7 +78,7 @@
                   :paly-width="'18px'"
                   :BoxbgType="'0'"
                   :cur-item="items.hz_info[0].hzDetail.hz_json"
-                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con"
+                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con + row"
                   class="writeTop-item"
                   :style="{
                     borderColor:

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

@@ -2,7 +2,6 @@
 <template>
   <div class="newWord-template-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
-
     <div class="main">
       <div
         v-for="(item, index) in data.option_list"
@@ -49,9 +48,12 @@
               :text-align="'center'"
               :class="[classNameJudge(userAnswer[index].answer_pinyin, item.answer_pinyin, item.is_example)]"
               :style="{
-                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                fontSize:
+                  data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                 background:
-                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  data.unified_attrib && data.unified_attrib.assist_color
+                    ? data.unified_attrib.assist_color
+                    : '#deebff',
               }"
               @input="changeAnswer(item, index)"
             />
@@ -93,9 +95,11 @@
                   ]"
                   :style="{
                     fontSize:
-                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                     background:
-                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
                   }"
                   @input="changeAnswer(item, index, indexs)"
                 />
@@ -128,7 +132,7 @@
                       : null
                   "
                   :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                  :target-div="'newWordTemplate' + items.con + index + indexs + Math.random().toString(36)"
+                  :target-div="'newWordTemplate-answer' + items.con + index + indexs + randomId"
                   :hz_json="items.hz_info[0].hzDetail.hz_json"
                   class="hanzi-storck"
                   :class="[
@@ -160,9 +164,11 @@
                   :class="[classNameJudge(userAnswer[index].item[indexs].answer, items.answer, items.is_example)]"
                   :style="{
                     fontSize:
-                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                      data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                     background:
-                      data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                      data.unified_attrib && data.unified_attrib.assist_color
+                        ? data.unified_attrib.assist_color
+                        : '#deebff',
                   }"
                   @input="changeAnswer(items, index, indexs)"
                 />
@@ -177,9 +183,12 @@
               :text-align="'center'"
               :class="[classNameJudge(userAnswer[index].answer_en, item.answer_en, item.is_example)]"
               :style="{
-                fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                fontSize:
+                  data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                 background:
-                  data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                  data.unified_attrib && data.unified_attrib.assist_color
+                    ? data.unified_attrib.assist_color
+                    : '#deebff',
               }"
               @input="changeAnswer(item, index)"
             />
@@ -208,7 +217,14 @@
                   : '',
             }"
           >
-            <span class="number">{{ index + 1 }}</span>
+            <span
+              class="number"
+              :style="{
+                background:
+                  data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
+              }"
+              >{{ index + 1 }}</span
+            >
           </div>
           <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
             <div
@@ -231,9 +247,11 @@
                 :text-align="'center'"
                 :style="{
                   fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                   background:
-                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    data.unified_attrib && data.unified_attrib.assist_color
+                      ? data.unified_attrib.assist_color
+                      : '#deebff',
                 }"
                 @input="changeAnswer(item, index)"
               />
@@ -271,9 +289,13 @@
                     :text-align="'center'"
                     :style="{
                       fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                        data.unified_attrib && data.unified_attrib.pinyin_size
+                          ? data.unified_attrib.pinyin_size
+                          : '16px',
                       background:
-                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                        data.unified_attrib && data.unified_attrib.assist_color
+                          ? data.unified_attrib.assist_color
+                          : '#deebff',
                     }"
                     @input="changeAnswer(item, index, indexs)"
                   />
@@ -306,7 +328,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :target-div="'newWordTemplatez' + items.con + index + indexs + Math.random().toString(36)"
+                    :target-div="'newWordTemplatez' + items.con + index + indexs + randomId"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     class="hanzi-storck"
                     :class="[
@@ -337,9 +359,13 @@
                     :text-align="'center'"
                     :style="{
                       fontSize:
-                        data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                        data.unified_attrib && data.unified_attrib.pinyin_size
+                          ? data.unified_attrib.pinyin_size
+                          : '16px',
                       background:
-                        data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                        data.unified_attrib && data.unified_attrib.assist_color
+                          ? data.unified_attrib.assist_color
+                          : '#deebff',
                     }"
                     @input="changeAnswer(items, index, indexs)"
                   />
@@ -357,9 +383,11 @@
                 :text-align="'center'"
                 :style="{
                   fontSize:
-                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
+                    data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '16px',
                   background:
-                    data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
+                    data.unified_attrib && data.unified_attrib.assist_color
+                      ? data.unified_attrib.assist_color
+                      : '#deebff',
                 }"
                 @input="changeAnswer(item, index)"
               />
@@ -387,6 +415,7 @@ export default {
     return {
       data: getNewWordTemplateData(),
       userAnswer: [],
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   watch: {
@@ -547,7 +576,8 @@ export default {
 
     :deep .edit-div {
       min-height: 32px;
-      font-size: 16px;
+
+      // font-size: 16px;
       line-height: 30px;
       color: #000;
 

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -12,6 +12,7 @@
           <AudioPlay
             v-if="data.audio_file_id && data.property.audio_position === 'front'"
             :file-id="data.audio_file_id"
+            :theme-color="data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''"
           />
           <div
             class="option-content"

src/views/book/courseware/preview/components/write/WritePreview.vue

@@ -23,7 +23,12 @@
               }"
             >
               <div class="words-left" :style="{ width: '64' * item.hz_strokes_list.length + 'px' }">
-                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <AudioPlay
+                  :file-id="item.audio_file_id"
+                  :theme-color="
+                    data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
+                  "
+                />
                 <span class="pinyin">{{ item.pinyin }}</span>
               </div>
             </div>