文章分词拼音对齐

src/views/Textanalysis/index.vue

@@ -268,63 +268,246 @@
                   <template v-if="fenci">
                     <template v-if="itemss.pinyin_lt">
                         <span class="word">
-                            <span
-                                v-if="pinyinShow"
-                                :class="['pinyin']"
-                                :style="{
-                                    fontSize: pinyinFontsize + 'px',
-                                    lineHeight: pinyinLineHeight + 'px',
-                                }"
-                                >
-                                {{ itemss.pinyin_lt }}
-                            </span>
-                            <br v-if="pinyinShow" />
-                            <span :class="['word-box']">
+                            <span class="text">
                                 <span
-                                    class="hanzi"
-                                    v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'"
+                                    v-if="pinyinShow"
+                                    :class="['pinyin']"
                                     :style="{
-                                        fontSize: wordFontsize + 'px',
-                                        lineHeight: wordLineHeight + 'px',
-                                        background: word.color ? word.color : '',
-                                        color: word.color
-                                        ? '#000'
-                                        : !xifen
-                                        ? leftNavIndex == 0
-                                            ? seleLevelMapList.indexOf(word.levels.P_G) != -1
-                                            ? levelMap[word.levels.P_G].color
-                                            : '#000'
+                                        fontSize: pinyinFontsize + 'px',
+                                        lineHeight: pinyinLineHeight + 'px',
+                                    }"
+                                    >
+                                    {{ itemss.pinyin_lt }}
+                                </span>
+                                <br v-if="pinyinShow" />
+                                <span :class="['word-box']">
+                                    <template v-for="(word, indexsss) in itemss.text" >
+                                    <span
+                                        v-if="word.isShow"
+                                        class="hanzi"
+                                        :key="indexsss + 'word'"
+                                        :style="{
+                                            fontSize: wordFontsize + 'px',
+                                            lineHeight: wordLineHeight + 'px',
+                                            background: word.color ? word.color : '',
+                                            color: word.color
+                                            ? '#000'
+                                            : !xifen
+                                            ? leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                ? levelMap[word.levels.P_G].color
+                                                : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                ? levelMap[word.levels.W_G].color
+                                                : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                ? levelMap[word.levels.C_G].color
+                                                : '#000'
+                                                : '#000'
+                                            : leftNavIndex == 0
+                                            ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                ? levelMap[word.levels.P_L].color
+                                                : '#000'
                                             : leftNavIndex == 1
-                                            ? seleLevelMapList.indexOf(word.levels.W_G) != -1
-                                            ? levelMap[word.levels.W_G].color
-                                            : '#000'
+                                            ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                ? levelMap[word.levels.W_L].color
+                                                : '#000'
                                             : leftNavIndex == 2
-                                            ? seleLevelMapList.indexOf(word.levels.C_G) != -1
-                                            ? levelMap[word.levels.C_G].color
-                                            : '#000'
-                                            : '#000'
-                                        : leftNavIndex == 0
-                                        ? seleLevelMapList.indexOf(word.levels.P_L) != -1
-                                            ? levelMap[word.levels.P_L].color
-                                            : '#000'
-                                        : leftNavIndex == 1
-                                        ? seleLevelMapList.indexOf(word.levels.W_L) != -1
-                                            ? levelMap[word.levels.W_L].color
-                                            : '#000'
-                                        : leftNavIndex == 2
-                                        ? seleLevelMapList.indexOf(word.levels.C_L) != -1
-                                            ? levelMap[word.levels.C_L].color
-                                            : '#000'
-                                        : '#000',
-                                    }"
-                                    >{{ word.word }}</span>
+                                            ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                ? levelMap[word.levels.C_L].color
+                                                : '#000'
+                                            : '#000',
+                                        }"
+                                        >{{ word.word }}</span>
+                                    </template>
+                                </span>
                             </span>
+                            <span class="texts">
+                                    <template v-if="pinyinShow">
+                                        <span
+                                            :class="['pinyin']"
+                                            :style="{
+                                                fontSize: pinyinFontsize + 'px',
+                                                lineHeight: pinyinLineHeight + 'px',
+                                            }"
+                                        >
+                                            <!-- {{ itemss.pinyinStr }} -->
+                                        </span>
+                                    </template>
+                                    <br v-if="pinyinShow" />
+                                    <span>
+                                        <template v-for="(word, indexsss) in itemss.texts">
+                                            <span
+                                            class="hanzi"
+                                            :key="indexsss + 'word'"
+                                            :style="{
+                                                fontSize: wordFontsize + 'px',
+                                                lineHeight: wordLineHeight + 'px',
+                                                background: word.color ? word.color : '',
+                                                color: word.color
+                                                ? '#000'
+                                                : !xifen
+                                                ? leftNavIndex == 0
+                                                    ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                    ? levelMap[word.levels.P_G].color
+                                                    : '#000'
+                                                    : leftNavIndex == 1
+                                                    ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                    ? levelMap[word.levels.W_G].color
+                                                    : '#000'
+                                                    : leftNavIndex == 2
+                                                    ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                    ? levelMap[word.levels.C_G].color
+                                                    : '#000'
+                                                    : '#000'
+                                                : leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                    ? levelMap[word.levels.P_L].color
+                                                    : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                    ? levelMap[word.levels.W_L].color
+                                                    : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                    ? levelMap[word.levels.C_L].color
+                                                    : '#000'
+                                                : '#000',
+                                            }"
+                                            >{{ word.word }}</span>
+                                        </template>
+                                    </span>
+                                </span>
                         </span>
 
                     </template>
                     <template v-else>
-                        <span v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" :class="['word']">
-                            <template v-if="word.isShow">
+                        <span :class="['word']">
+                            <!-- <template v-if="word.isShow"> -->
+                                <span class="text">
+                                <template v-if="pinyinShow">
+                                    <span
+                                        :class="['pinyin']"
+                                        :style="{
+                                            fontSize: pinyinFontsize + 'px',
+                                            lineHeight: pinyinLineHeight + 'px',
+                                        }"
+                                    >
+                                        {{ itemss.pinyinStr }}
+                                    </span>
+                                </template>
+                                <br v-if="pinyinShow" />
+                                <span>
+                                    <template v-for="(word, indexsss) in itemss.text">
+                                        <span
+                                        v-if="word.isShow"
+                                        class="hanzi"
+                                        :key="indexsss + 'word'"
+                                        :style="{
+                                            fontSize: wordFontsize + 'px',
+                                            lineHeight: wordLineHeight + 'px',
+                                            background: word.color ? word.color : '',
+                                            color: word.color
+                                            ? '#000'
+                                            : !xifen
+                                            ? leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                ? levelMap[word.levels.P_G].color
+                                                : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                ? levelMap[word.levels.W_G].color
+                                                : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                ? levelMap[word.levels.C_G].color
+                                                : '#000'
+                                                : '#000'
+                                            : leftNavIndex == 0
+                                            ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                ? levelMap[word.levels.P_L].color
+                                                : '#000'
+                                            : leftNavIndex == 1
+                                            ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                ? levelMap[word.levels.W_L].color
+                                                : '#000'
+                                            : leftNavIndex == 2
+                                            ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                ? levelMap[word.levels.C_L].color
+                                                : '#000'
+                                            : '#000',
+                                        }"
+                                        >{{ word.word }}</span>
+                                    </template>
+                                </span>
+                                </span>
+                                <span class="texts">
+                                    <template v-if="pinyinShow">
+                                        <span
+                                            :class="['pinyin']"
+                                            :style="{
+                                                fontSize: pinyinFontsize + 'px',
+                                                lineHeight: pinyinLineHeight + 'px',
+                                            }"
+                                        >
+                                            <!-- {{ itemss.pinyinStr }} -->
+                                        </span>
+                                    </template>
+                                    <br v-if="pinyinShow" />
+                                    <span>
+                                        <template v-for="(word, indexsss) in itemss.texts">
+                                            <span
+                                            class="hanzi"
+                                            :key="indexsss + 'word'"
+                                            :style="{
+                                                fontSize: wordFontsize + 'px',
+                                                lineHeight: wordLineHeight + 'px',
+                                                background: word.color ? word.color : '',
+                                                color: word.color
+                                                ? '#000'
+                                                : !xifen
+                                                ? leftNavIndex == 0
+                                                    ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                    ? levelMap[word.levels.P_G].color
+                                                    : '#000'
+                                                    : leftNavIndex == 1
+                                                    ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                    ? levelMap[word.levels.W_G].color
+                                                    : '#000'
+                                                    : leftNavIndex == 2
+                                                    ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                    ? levelMap[word.levels.C_G].color
+                                                    : '#000'
+                                                    : '#000'
+                                                : leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                    ? levelMap[word.levels.P_L].color
+                                                    : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                    ? levelMap[word.levels.W_L].color
+                                                    : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                    ? levelMap[word.levels.C_L].color
+                                                    : '#000'
+                                                : '#000',
+                                            }"
+                                            >{{ word.word }}</span>
+                                        </template>
+                                    </span>
+                                </span>
+                            <!-- </template> -->
+                        </span>
+                    </template>
+                    
+                  </template>
+                  <template v-else>
+                    <template v-if="itemss.pinyin_lt">
+                        <span class="word" :style="{padding: `0 ${wordsMargin<3?'1':wordsMargin>5?'2':wordsMargin-2}px`}">
+                            <span class="text">
                                 <span
                                 v-if="pinyinShow"
                                 :class="['pinyin']"
@@ -333,54 +516,114 @@
                                     lineHeight: pinyinLineHeight + 'px',
                                 }"
                                 >
-                                {{ word.pinyin }}
+                                {{ itemss.pinyin_lt }}
                                 </span>
                                 <br v-if="pinyinShow" />
-                                <span
-                                class="hanzi"
-                                :style="{
-                                    fontSize: wordFontsize + 'px',
-                                    lineHeight: wordLineHeight + 'px',
-                                    background: word.color ? word.color : '',
-                                    color: word.color
-                                    ? '#000'
-                                    : !xifen
-                                    ? leftNavIndex == 0
-                                        ? seleLevelMapList.indexOf(word.levels.P_G) != -1
-                                        ? levelMap[word.levels.P_G].color
-                                        : '#000'
-                                        : leftNavIndex == 1
-                                        ? seleLevelMapList.indexOf(word.levels.W_G) != -1
-                                        ? levelMap[word.levels.W_G].color
-                                        : '#000'
-                                        : leftNavIndex == 2
-                                        ? seleLevelMapList.indexOf(word.levels.C_G) != -1
-                                        ? levelMap[word.levels.C_G].color
-                                        : '#000'
-                                        : '#000'
-                                    : leftNavIndex == 0
-                                    ? seleLevelMapList.indexOf(word.levels.P_L) != -1
-                                        ? levelMap[word.levels.P_L].color
-                                        : '#000'
-                                    : leftNavIndex == 1
-                                    ? seleLevelMapList.indexOf(word.levels.W_L) != -1
-                                        ? levelMap[word.levels.W_L].color
-                                        : '#000'
-                                    : leftNavIndex == 2
-                                    ? seleLevelMapList.indexOf(word.levels.C_L) != -1
-                                        ? levelMap[word.levels.C_L].color
-                                        : '#000'
-                                    : '#000',
-                                }"
-                                >{{ word.word }}</span>
-                            </template>
+                                <span class="word-box">
+                                    <template v-for="(word, indexsss) in itemss.text" >
+                                    <span
+                                        v-if="word.isShow"
+                                        class="hanzi" 
+                                        :key="indexsss + 'word'" 
+                                        :style="{
+                                            fontSize: wordFontsize + 'px',
+                                            lineHeight: wordLineHeight + 'px',
+                                            background: word.color ? word.color : '',
+                                            color: word.color
+                                            ? '#000'
+                                            : !xifen
+                                            ? leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                ? levelMap[word.levels.P_G].color
+                                                : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                ? levelMap[word.levels.W_G].color
+                                                : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                ? levelMap[word.levels.C_G].color
+                                                : '#000'
+                                                : '#000'
+                                            : leftNavIndex == 0
+                                            ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                ? levelMap[word.levels.P_L].color
+                                                : '#000'
+                                            : leftNavIndex == 1
+                                            ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                ? levelMap[word.levels.W_L].color
+                                                : '#000'
+                                            : leftNavIndex == 2
+                                            ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                ? levelMap[word.levels.C_L].color
+                                                : '#000'
+                                            : '#000',
+                                        }"
+                                        >{{ word.word }}</span>
+                                    </template>
+                                </span>
+                            </span>
+                            <span class="texts">
+                                <template v-if="pinyinShow">
+                                    <span
+                                        :class="['pinyin']"
+                                        :style="{
+                                            fontSize: pinyinFontsize + 'px',
+                                            lineHeight: pinyinLineHeight + 'px',
+                                        }"
+                                    >
+                                        <!-- {{ itemss.pinyinStr }} -->
+                                    </span>
+                                </template>
+                                <br v-if="pinyinShow" />
+                                <span>
+                                    <template v-for="(word, indexsss) in itemss.texts">
+                                        <span
+                                        class="hanzi"
+                                        :key="indexsss + 'word'"
+                                        :style="{
+                                            fontSize: wordFontsize + 'px',
+                                            lineHeight: wordLineHeight + 'px',
+                                            background: word.color ? word.color : '',
+                                            color: word.color
+                                            ? '#000'
+                                            : !xifen
+                                            ? leftNavIndex == 0
+                                                ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                                ? levelMap[word.levels.P_G].color
+                                                : '#000'
+                                                : leftNavIndex == 1
+                                                ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                                ? levelMap[word.levels.W_G].color
+                                                : '#000'
+                                                : leftNavIndex == 2
+                                                ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                                ? levelMap[word.levels.C_G].color
+                                                : '#000'
+                                                : '#000'
+                                            : leftNavIndex == 0
+                                            ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                                ? levelMap[word.levels.P_L].color
+                                                : '#000'
+                                            : leftNavIndex == 1
+                                            ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                                ? levelMap[word.levels.W_L].color
+                                                : '#000'
+                                            : leftNavIndex == 2
+                                            ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                                ? levelMap[word.levels.C_L].color
+                                                : '#000'
+                                            : '#000',
+                                        }"
+                                        >{{ word.word }}</span>
+                                    </template>
+                                </span>
+                            </span>
                         </span>
                     </template>
-                    
-                  </template>
-                  <template v-else>
-                    <template v-if="itemss.pinyin_lt">
-                        <span class="word" :style="{padding: `0 ${wordsMargin<3?'1':wordsMargin>5?'2':wordsMargin-2}px`}">
+                    <template v-else>
+                        <span v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" class="word" :style="{padding: word.isShow ? `0 ${wordsMargin<3?'1':wordsMargin>5?'2':wordsMargin-2}px`:'',display:'initial'}">
+                        <template v-if="word.isShow">
                             <span
                             v-if="pinyinShow"
                             :class="['pinyin']"
@@ -389,55 +632,49 @@
                                 lineHeight: pinyinLineHeight + 'px',
                             }"
                             >
-                            {{ itemss.pinyin_lt }}
+                            {{ word.pinyin }}
                             </span>
                             <br v-if="pinyinShow" />
-                            <span class="word-box">
-                                <span
-                                    class="hanzi" 
-                                    v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" 
-                                    :style="{
-                                        fontSize: wordFontsize + 'px',
-                                        lineHeight: wordLineHeight + 'px',
-                                        background: word.color ? word.color : '',
-                                        color: word.color
-                                        ? '#000'
-                                        : !xifen
-                                        ? leftNavIndex == 0
-                                            ? seleLevelMapList.indexOf(word.levels.P_G) != -1
-                                            ? levelMap[word.levels.P_G].color
-                                            : '#000'
-                                            : leftNavIndex == 1
-                                            ? seleLevelMapList.indexOf(word.levels.W_G) != -1
-                                            ? levelMap[word.levels.W_G].color
-                                            : '#000'
-                                            : leftNavIndex == 2
-                                            ? seleLevelMapList.indexOf(word.levels.C_G) != -1
-                                            ? levelMap[word.levels.C_G].color
-                                            : '#000'
-                                            : '#000'
-                                        : leftNavIndex == 0
-                                        ? seleLevelMapList.indexOf(word.levels.P_L) != -1
-                                            ? levelMap[word.levels.P_L].color
-                                            : '#000'
-                                        : leftNavIndex == 1
-                                        ? seleLevelMapList.indexOf(word.levels.W_L) != -1
-                                            ? levelMap[word.levels.W_L].color
-                                            : '#000'
-                                        : leftNavIndex == 2
-                                        ? seleLevelMapList.indexOf(word.levels.C_L) != -1
-                                            ? levelMap[word.levels.C_L].color
-                                            : '#000'
-                                        : '#000',
-                                    }"
-                                    >{{ word.word }}</span>
-                            </span>
-                            
+                            <span
+                            class="hanzi"
+                            :style="{
+                                fontSize: wordFontsize + 'px',
+                                lineHeight: wordLineHeight + 'px',
+                                background: word.color ? word.color : '',
+                                color: word.color
+                                ? '#000'
+                                : !xifen
+                                ? leftNavIndex == 0
+                                    ? seleLevelMapList.indexOf(word.levels.P_G) != -1
+                                    ? levelMap[word.levels.P_G].color
+                                    : '#000'
+                                    : leftNavIndex == 1
+                                    ? seleLevelMapList.indexOf(word.levels.W_G) != -1
+                                    ? levelMap[word.levels.W_G].color
+                                    : '#000'
+                                    : leftNavIndex == 2
+                                    ? seleLevelMapList.indexOf(word.levels.C_G) != -1
+                                    ? levelMap[word.levels.C_G].color
+                                    : '#000'
+                                    : '#000'
+                                : leftNavIndex == 0
+                                ? seleLevelMapList.indexOf(word.levels.P_L) != -1
+                                    ? levelMap[word.levels.P_L].color
+                                    : '#000'
+                                : leftNavIndex == 1
+                                ? seleLevelMapList.indexOf(word.levels.W_L) != -1
+                                    ? levelMap[word.levels.W_L].color
+                                    : '#000'
+                                : leftNavIndex == 2
+                                ? seleLevelMapList.indexOf(word.levels.C_L) != -1
+                                    ? levelMap[word.levels.C_L].color
+                                    : '#000'
+                                : '#000',
+                            }"
+                            >{{ word.word }}</span>
+                        </template>
                         </span>
-                    </template>
-                    <template v-else>
-                        <span v-for="(word, indexsss) in itemss.text" :key="indexsss + 'word'" class="word" :style="{padding: `0 ${wordsMargin<3?'1':wordsMargin>5?'2':wordsMargin-2}px`}">
-                        <template v-if="word.isShow">
+                        <span v-for="(word, indexsss) in itemss.texts" :key="indexsss + 'words'" class="word" :style="{display:'initial'}">
                             <span
                             v-if="pinyinShow"
                             :class="['pinyin']"
@@ -486,7 +723,6 @@
                                 : '#000',
                             }"
                             >{{ word.word }}</span>
-                        </template>
                         </span>
                     </template>
                   </template>
@@ -526,7 +762,7 @@ export default {
   data() {
     return {
       ratioShow: false,
-      chsFhList: ['，', '。', '”', '：', '》', '《', '？', '！', '；', '、'],
+      chsFhList: ['，', '。', '”', '：', '》', '《', '？', '！', '；', '、','~'],
       loading: false,
       LeftLoading: false,
       wordFontsize: 20, // 汉字字号初始值
@@ -1380,19 +1616,31 @@ export default {
                     item.forEach((items) => {
                     items.forEach((itemss, index) => {
                         let wordStr = ''
+                        let pinyinStr = ''
                         itemss.text.forEach((itemsss) => {
                             wordStr += itemsss.word
+                            pinyinStr += itemsss.pinyin
                         if (this.chsFhList.indexOf(itemsss.word) === -1) {
                             itemsss.isShow = true;
                         } else {
                             let obj = JSON.parse(JSON.stringify(itemsss));
-                            obj.isShow = true;
+                            // obj.isShow = true;
+                            obj.isShow = false
+                            obj.isChsFh = true
                             if (index > 0) {
                             if (items[index - 1].text[items[index - 1].text.length - 1].isShow) {
                                 items[index - 1].text.push(obj);
+                                if(!items[index - 1].hasOwnProperty('texts')){
+                                    this.$set(items[index - 1],'texts',[])
+                                }
+                                items[index - 1].texts.push(obj);
                                 itemsss.isShow = false;
                             } else {
                                 items[index - 2].text.push(obj);
+                                if(!items[index - 2].hasOwnProperty('texts')){
+                                    this.$set(items[index - 2],'texts',[])
+                                }
+                                items[index - 2].texts.push(obj);
                                 itemsss.isShow = false;
                             }
                             } else {
@@ -1404,6 +1652,7 @@ export default {
                         if(itemss.pinyin_lt){
                             itemss.wordStr = wordStr
                         }
+                        itemss.pinyinStr = pinyinStr
                     });
                     });
                 });
@@ -1418,6 +1667,14 @@ export default {
                             index += 1;
                         }
                         });
+                        if(itemss.hasOwnProperty('texts')){
+                            itemss.texts.forEach((itemsss) => {
+                            if (itemsss.isChsFh) {
+                                itemsss.index = index;
+                                index += 1;
+                            }
+                            });
+                        }
                     });
                     });
                 });
@@ -2002,6 +2259,7 @@ export default {
 
                 .word {
                   text-align: center;
+                  display: flex;
                 }
 
                 .pinyin {