短语模板

src/components/Adult/preview/WordPhrase.vue

@@ -78,23 +78,46 @@
                 v-else
                 style="width: 16px; height: 16px; margin-left: 8px"
               ></div>
-              <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-if="!sItem.pinyin_site||sItem.pinyin_site=='first'">
-                {{ sItem.pinyin }}
-              </span>
-              <span class="NPC-word-tab-common NPC-word-tab-word">
-                {{ sItem.new_word }}
-              </span>
-              <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-if="sItem.pinyin_site=='last'">
-                {{ sItem.pinyin }}
-              </span>
-              <span
-                class="NPC-word-tab-common NPC-word-tab-cixing"
-                v-html="sItem.cixing"
-              ></span>
-              <span
-                class="NPC-word-tab-common NPC-word-tab-def"
-                v-html="sItem.def_str"
-              ></span>
+              <template v-if="sItem.pinyin_site&&(sItem.pinyin_site=='top'||sItem.pinyin_site=='bottom')">
+                  <div class="NPC-word-tab-box">
+                        <span class="NPC-word-tab-common NPC-word-tab-pinyin" :class="[sItem.motif_color?'NPC-word-tab-pinyin-'+themeColor:'']" v-if="sItem.pinyin_site=='top'">
+                            {{ sItem.pinyin }}
+                        </span>
+                        <span class="NPC-word-tab-common NPC-word-tab-word" :class="[sItem.motif_color?'NPC-word-tab-word-'+themeColor:'']">
+                            {{ sItem.new_word }}
+                        </span>
+                        <span class="NPC-word-tab-common NPC-word-tab-pinyin" :class="[sItem.motif_color?'NPC-word-tab-pinyin-'+themeColor:'']" v-if="sItem.pinyin_site=='bottom'">
+                            {{ sItem.pinyin }}
+                        </span>
+                  </div>
+                    <span
+                        class="NPC-word-tab-common NPC-word-tab-cixing"
+                        v-html="sItem.cixing"
+                    ></span>
+                    <span
+                        class="NPC-word-tab-common NPC-word-tab-def"
+                        v-html="sItem.def_str"
+                    ></span>
+              </template>
+              <template v-else>
+                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" :class="[sItem.motif_color?'NPC-word-tab-pinyin-'+themeColor:'']" v-if="!sItem.pinyin_site||sItem.pinyin_site=='first'">
+                        {{ sItem.pinyin }}
+                    </span>
+                    <span class="NPC-word-tab-common NPC-word-tab-word" :class="[sItem.motif_color?'NPC-word-tab-word-'+themeColor:'']">
+                        {{ sItem.new_word }}
+                    </span>
+                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" :class="[sItem.motif_color?'NPC-word-tab-pinyin-'+themeColor:'']" v-if="sItem.pinyin_site=='last'">
+                        {{ sItem.pinyin }}
+                    </span>
+                    <span
+                        class="NPC-word-tab-common NPC-word-tab-cixing"
+                        v-html="sItem.cixing"
+                    ></span>
+                    <span
+                        class="NPC-word-tab-common NPC-word-tab-def"
+                        v-html="sItem.def_str"
+                    ></span>
+              </template>
               <span v-if="curQue.isInfor">
                 <img
                   src="../../../assets/NPC/detail-icon.png"
@@ -397,6 +420,15 @@ export default {
         margin-top: 4px;
         margin-left: 8px;
       }
+      .NPC-word-tab-box{
+          width: 240px;
+          span{
+              display: block;
+              width: 100%;
+              color: #000000;
+              margin: 2px 0;
+          }
+      }
       .NPC-word-tab-common {
         padding-left: 8px;
         width: 120px;
@@ -405,10 +437,30 @@ export default {
       .NPC-word-tab-pinyin {
         font-family: "GB-PINYINOK-B";
         white-space: nowrap;
+        font-size: 12px;
+        &.NPC-word-tab-pinyin-red{
+            color: #e35454;
+        }
+        &.NPC-word-tab-pinyin-green{
+            color: #24b99e;
+        }
+        &.NPC-word-tab-pinyin-brown{
+            color: #bd8865;
+        }
       }
       .NPC-word-tab-word {
-        font-family: "sourceR";
+        font-family: "FZJCGFKTK";
         white-space: nowrap;
+        font-size: 16px;
+        &.NPC-word-tab-word-red{
+            color: #e35454;
+        }
+        &.NPC-word-tab-word-green{
+            color: #24b99e;
+        }
+        &.NPC-word-tab-word-brown{
+            color: #bd8865;
+        }
       }
       .NPC-word-tab-cixing {
         font-family: "robot";