生词

src/components/Adult/phonePreview/WordPhrase.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="NPC-zhedie"
-    v-if="curQue"
-    :class="[isPhone ? 'NPC-zhedie-phone' : '']"
-  >
+  <div class="NPC-zhedie NPC-zhedie-phone" v-if="curQue">
     <div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
       <div class="NPC-top-left">
         <template v-if="curQue.conDetail && curQue.conDetail.sentence">
@@ -17,17 +13,31 @@
               :fn_check_list="[]"
               :pyNumber="0"
               :record_check="[]"
+              :maxFontsize="baseSizePhone"
             />
           </div>
         </template>
-        <span class="NPC-topTitle-text" v-else>{{ curQue.title }}</span>
+        <span
+          class="NPC-topTitle-text"
+          v-else
+          :style="{
+            fontSize: baseSizePhone + 2 + 'px'
+          }"
+          >{{ curQue.title }}</span
+        >
         <!-- <span
           :class="['NPC-play-all', playClass]"
           @click.stop="playNewwords"
         ></span> -->
       </div>
       <div class="NPC-top-right" @click="handleChangeTab">
-        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
+        <span
+          class="NPC-top-right-text"
+          :style="{
+            fontSize: baseSizePhone + 'px'
+          }"
+          >{{ wordShow ? "收起" : "展开" }}</span
+        >
         <template v-if="curQue.titleBg == 'white'">
           <img
             v-if="wordShow"
@@ -84,213 +94,275 @@
               v-for="(sItem, sIndex) in item"
               :key="'curQue.option.child' + sIndex"
             >
-              <template v-if="sItem.bg || sItem.ed">
-                <a
-                  :class="[
-                    'play-btn',
-                    curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
-                      ? 'active'
-                      : ''
-                  ]"
-                  @click="handleChangeTime(sItem.bg, sItem.ed)"
-                ></a>
-              </template>
-              <template
-                v-else-if="
-                  sItem.mp3_list &&
-                    sItem.mp3_list.length > 0 &&
-                    sItem.mp3_list[0].id
-                "
-              >
-                <span
-                  :class="[
-                    themeColor == 'green'
-                      ? 'NPC-play-btn-green'
-                      : themeColor == 'red'
-                      ? 'NPC-play-btn-red'
-                      : 'NPC-play-btn-brown',
-                    playClass && mp3_index == sItem.sIndex ? 'active' : ''
-                  ]"
-                  @click="palyAudio(sItem.sIndex)"
-                ></span>
-                <audio
-                  :id="'word' + indexStr + sItem.sIndex"
-                  :src="sItem.mp3_list[0].id"
-                ></audio>
-              </template>
-
-              <template v-else>
-                <span style="width: 16px; height: 16px"></span>
-              </template>
-              <div class="tabNum-box">
-                <template v-if="sItem.mIndex == 0 || sItem.number">
-                  <b class="tabNum">{{
-                    sItem.number ? sItem.number : index + 1
-                  }}</b>
-                </template>
+              <div class="content-box">
                 <div
-                  v-else
-                  style="width: 16px; height: 16px; margin-left: 8px"
-                ></div>
-                <img
-                  v-if="sItem.starFlag"
-                  class="star-label"
-                  :src="
-                    require('../../../assets/NPC/asterisk-' +
-                      themeColor +
-                      '.png')
-                  "
-                />
-              </div>
-              <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
-                        : '',
-                      curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
-                    ]"
+                  style="display: flex;flex-flow: wrap; width: 100%; gap: 10px;"
+                >
+                  <template v-if="sItem.bg || sItem.ed">
+                    <a
+                      :class="[
+                        'play-btn',
+                        curTime >= sItem.bg && curTime < sItem.ed && stopAudioS
+                          ? 'active'
+                          : ''
+                      ]"
+                      @click="handleChangeTime(sItem.bg, sItem.ed)"
+                    ></a>
+                  </template>
+                  <template
+                    v-else-if="
+                      sItem.mp3_list &&
+                        sItem.mp3_list.length > 0 &&
+                        sItem.mp3_list[0].id
+                    "
                   >
-                    {{ 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'"
+                    <span
+                      :class="[
+                        themeColor == 'green'
+                          ? 'NPC-play-btn-green'
+                          : themeColor == 'red'
+                          ? 'NPC-play-btn-red'
+                          : 'NPC-play-btn-brown',
+                        playClass && mp3_index == sItem.sIndex ? 'active' : ''
+                      ]"
+                      @click="palyAudio(sItem.sIndex)"
+                    ></span>
+                    <audio
+                      :id="'word' + indexStr + sItem.sIndex"
+                      :src="sItem.mp3_list[0].id"
+                    ></audio>
+                  </template>
+
+                  <template v-else>
+                    <span style="width: 16px; height: 16px"></span>
+                  </template>
+                  <div class="tabNum-box">
+                    <template v-if="sItem.mIndex == 0 || sItem.number">
+                      <b
+                        class="tabNum"
+                        :style="{
+                          fontSize: baseSizePhone - 2 + 'px'
+                        }"
+                        >{{ sItem.number ? sItem.number : index + 1 }}</b
+                      >
+                    </template>
+                    <div
+                      v-else
+                      style="width: 16px; height: 16px; margin-left: 8px"
+                    ></div>
+                    <img
+                      v-if="sItem.starFlag"
+                      class="star-label"
+                      :src="
+                        require('../../../assets/NPC/asterisk-' +
+                          themeColor +
+                          '.png')
+                      "
+                    />
+                  </div>
+                  <template
+                    v-if="
+                      sItem.pinyin_site &&
+                        (sItem.pinyin_site == 'top' ||
+                          sItem.pinyin_site == 'bottom')
+                    "
                   >
-                    {{ sItem.pinyin }}
-                  </span>
+                    <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
+                            : ''
+                        ]"
+                        :style="{
+                          fontSize: baseSizePhone + 'px'
+                        }"
+                        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
+                            : '',
+                          curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
+                        ]"
+                        :style="{
+                          fontSize: baseSizePhone + 'px'
+                        }"
+                      >
+                        {{ sItem.new_word }}
+                      </span>
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-pinyin"
+                        :class="[
+                          sItem.motif_color
+                            ? 'NPC-word-tab-pinyin-' + themeColor
+                            : ''
+                        ]"
+                        :style="{
+                          fontSize: baseSizePhone + 'px'
+                        }"
+                        v-if="sItem.pinyin_site == 'bottom'"
+                      >
+                        {{ sItem.pinyin }}
+                      </span>
+                    </div>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-cixing"
+                      :class="[
+                        /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
+                          ? 'hasCn'
+                          : '',
+                        sItem.motif_color
+                          ? 'NPC-word-tab-cixing-' + themeColor
+                          : ''
+                      ]"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                      v-html="sItem.cixing"
+                    ></span>
+                  </template>
+                  <template v-else>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
+                      :class="[
+                        sItem.motif_color
+                          ? 'NPC-word-tab-pinyin-' + themeColor
+                          : ''
+                      ]"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                      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
+                          : '',
+                        curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
+                      ]"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                    >
+                      {{ sItem.new_word }}
+                    </span>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
+                      :class="[
+                        sItem.motif_color
+                          ? 'NPC-word-tab-pinyin-' + themeColor
+                          : ''
+                      ]"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                      v-if="sItem.pinyin_site == 'last'"
+                    >
+                      {{ sItem.pinyin }}
+                    </span>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-cixing"
+                      :class="[
+                        /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
+                          ? 'hasCn'
+                          : '',
+                        sItem.motif_color
+                          ? 'NPC-word-tab-cixing-' + themeColor
+                          : ''
+                      ]"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                      v-html="sItem.cixing"
+                    ></span>
+                  </template>
                 </div>
-                <span
-                  class="NPC-word-tab-common NPC-word-tab-cixing"
-                  :class="[
-                    /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
-                      ? 'hasCn'
-                      : '',
-                    sItem.motif_color ? 'NPC-word-tab-cixing-' + themeColor : ''
-                  ]"
-                  v-html="sItem.cixing"
-                ></span>
+
                 <span
                   class="NPC-word-tab-common NPC-word-tab-def"
                   :class="[
                     sItem.motif_color ? 'NPC-word-tab-def-' + themeColor : ''
                   ]"
+                  :style="{
+                    fontSize: baseSizePhone + 'px'
+                  }"
                   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 : '',
-                    curQue.whiteSpace ? 'NPC-word-tab-word-break' : ''
-                  ]"
+                <div v-if="sItem.collocation" class="collocation">
+                  <span
+                    :style="{
+                      fontSize: baseSizePhone + 'px'
+                    }"
+                    >搭配：</span
+                  ><b
+                    v-html="sItem.collocation"
+                    :style="{
+                      fontSize: baseSizePhone + 'px'
+                    }"
+                  ></b>
+                </div>
+                <div
+                  v-if="
+                    sItem.liju_list &&
+                      sItem.liju_list.length > 0 &&
+                      sItem.liju_list[0]
+                  "
+                  class="collocation"
                 >
-                  {{ sItem.new_word }}
+                  <span
+                    :style="{
+                      fontSize: baseSizePhone + 'px'
+                    }"
+                    >例句：</span
+                  >
+                  <div>
+                    <b
+                      v-html="items"
+                      v-for="(items, indexs) in sItem.liju_list"
+                      :key="indexs"
+                      :style="{
+                        fontSize: baseSizePhone + 'px'
+                      }"
+                    ></b>
+                  </div>
+                </div>
+              </div>
+
+              <div class="operate-box">
+                <span v-if="curQue.type == 'NewWord_chs'">
+                  <Soundrecord
+                    :tmIndex="index"
+                    :tmsIndex="sIndex"
+                    :TaskModel="TaskModel"
+                    @handleWav="handleWav"
+                    :modelType="curQue.type"
+                    :answerRecordList="
+                      judgeAnswer != 'standardAnswer'
+                        ? curQue.Bookanswer[index][sIndex].recordList
+                        : []
+                    "
+                    type="mini"
+                    class="luyin-box-wordphrase"
+                    :style="{ marginLeft: '8px' }"
+                  />
                 </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 v-if="curQue.isInfor">
+                  <img
+                    src="../../../assets/NPC/detail-icon.png"
+                    class="detail-icon"
+                    @click="showDetail(sItem)"
+                  />
                 </span>
-                <span
-                  class="NPC-word-tab-common NPC-word-tab-cixing"
-                  :class="[
-                    /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing)
-                      ? 'hasCn'
-                      : '',
-                    sItem.motif_color ? 'NPC-word-tab-cixing-' + themeColor : ''
-                  ]"
-                  v-html="sItem.cixing"
-                ></span>
-                <span
-                  class="NPC-word-tab-common NPC-word-tab-def"
-                  :class="[
-                    sItem.motif_color ? 'NPC-word-tab-def-' + themeColor : ''
-                  ]"
-                  v-html="sItem.def_str"
-                ></span>
-              </template>
-              <span v-if="curQue.type == 'NewWord_chs'">
-                <Soundrecord
-                  :tmIndex="index"
-                  :tmsIndex="sIndex"
-                  :TaskModel="TaskModel"
-                  @handleWav="handleWav"
-                  :modelType="curQue.type"
-                  :answerRecordList="
-                    judgeAnswer != 'standardAnswer'
-                      ? curQue.Bookanswer[index][sIndex].recordList
-                      : []
-                  "
-                  type="mini"
-                  class="luyin-box-wordphrase"
-                  :style="{ marginLeft: '8px' }"
-                />
-              </span>
-              <span v-if="curQue.isInfor">
-                <img
-                  src="../../../assets/NPC/detail-icon.png"
-                  class="detail-icon"
-                  @click="showDetail(sItem)"
-                />
-              </span>
-              <div v-if="sItem.collocation" class="collocation">
-                <span>搭配：</span><b v-html="sItem.collocation"></b>
-              </div>
-              <div
-                v-if="
-                  sItem.liju_list &&
-                    sItem.liju_list.length > 0 &&
-                    sItem.liju_list[0]
-                "
-                class="collocation"
-              >
-                <span>例句：</span>
-                <div>
-                  <b
-                    v-html="items"
-                    v-for="(items, indexs) in sItem.liju_list"
-                    :key="indexs"
-                  ></b>
-                </div>
               </div>
             </div>
           </li>
@@ -320,8 +392,8 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import WordPhraseDetail from "./components/WordPhraseDetail.vue";
-import AudioLine from "../preview/AudioLine.vue";
-import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+import AudioLine from "../phonePreview/AudioLine.vue";
+import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 import OneSentenceTemp from "./components/OneSentenceTemp.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -340,7 +412,7 @@ export default {
     "indexStr",
     "TaskModel",
     "judgeAnswer",
-    "isPhone"
+    "baseSizePhone"
   ],
   data() {
     //这里存放数据
@@ -665,8 +737,8 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .NPC-zhedie {
-  width: 780px;
-  margin-bottom: 24px;
+  width: 100%;
+  // margin-bottom: 24px;
   .aduioLine-box {
     margin-bottom: 8px;
   }
@@ -683,12 +755,12 @@ export default {
     overflow-y: auto;
   }
   .NPC-word-list {
-    background: #f7f7f7;
+    // background: #f7f7f7;
   }
   .NPC-word-table {
     width: 100%;
     > .NPC-word-tr {
-      background: #fff;
+      background: rgba(250, 249, 249, 1);
       border-radius: 8px;
 
       margin-bottom: 8px;
@@ -698,7 +770,7 @@ export default {
         display: flex;
         flex-flow: wrap;
         justify-content: flex-start;
-        padding: 8px 13px 8px 12px;
+        padding: 10px 4px 10px 10px;
         border-radius: 8px;
         &.active {
           background: linear-gradient(
@@ -708,12 +780,18 @@ export default {
             ),
             #ffffff;
         }
-        > span {
+        span {
           font-size: 16px;
           line-height: 150%;
           color: #000000;
         }
       }
+      .content-box {
+        flex: 1;
+      }
+      .operate-box {
+        display: flex;
+      }
       .tabNum-box {
         position: relative;
         .star-label {
@@ -748,8 +826,8 @@ export default {
         }
       }
       .NPC-word-tab-common {
-        padding-left: 8px;
-        width: 125px;
+        // padding-left: 8px;
+        // width: 125px;
         box-sizing: border-box;
       }
       .NPC-word-tab-pinyin {
@@ -788,7 +866,7 @@ export default {
       .NPC-word-tab-cixing {
         font-family: "robot", "alabo";
         // width: 48px;
-        width: 60px;
+        // width: 60px;
         word-break: break-word;
         box-sizing: border-box;
         text-align: left;
@@ -888,7 +966,7 @@ export default {
     }
   }
   .NPC-word-list {
-    padding: 20px 24px;
+    padding: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: none;
     border-radius: 0 0 8px 8px;
@@ -906,6 +984,7 @@ export default {
     height: 16px;
     background: url("../../../assets/NPC/play-red.png") center no-repeat;
     background-size: cover;
+    display: block;
     &.active {
       background-image: url("../../../assets/NPC/icon-voice-play-red.png");
       background-size: cover;
@@ -1128,6 +1207,11 @@ export default {
   .el-table__row {
     padding: 4px 0;
   }
+  .operate-box {
+    .playBack {
+      margin-left: 3px;
+    }
+  }
 }
 .NPC-Big-Book-preview-green {
   .NPC-zhedie {

src/components/Adult/phonePreview/components/WordPhraseDetail.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="wordDetailModule wordDetailChs"
-    :class="[isPhone ? 'wordDetailModule-phone' : '']"
-  >
+  <div class="wordDetailModule wordDetailChs wordDetailModule-phone">
     <div class="module-inner">
       <div class="top" v-if="data">
         <div class="operation">
@@ -414,8 +411,7 @@ export default {
     "currentTreeID",
     "type",
     "bg",
-    "ed",
-    "isPhone"
+    "ed"
   ],
   data() {
     //这里存放数据
@@ -1059,14 +1055,14 @@ export default {
   z-index: 999;
   overflow-y: scroll;
   .module-inner {
-    padding: 130px 0;
+    padding: 30px 0;
     > div {
-      width: 788px;
+      width: 100%;
       margin: 0 auto;
       background: #ffffff;
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
       border-radius: 8px;
-      padding: 16px 32px 40px 32px;
+      padding: 10px;
       .operation {
         height: 16px;
         margin-bottom: 8px;
@@ -1101,7 +1097,7 @@ export default {
     padding-top: 16px;
     .wordDetail {
       width: 100%;
-      margin-bottom: 16px;
+      // margin-bottom: 16px;
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
@@ -1109,13 +1105,13 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
-        min-width: 130px;
-        height: 130px;
+        min-width: 65px;
+        height: 65px;
         margin-bottom: 16px;
         border-radius: 8px;
         box-sizing: border-box;
         overflow: hidden;
-        margin-right: 37px;
+        margin-right: 10px;
         .strockplay {
           display: flex;
           justify-content: center;
@@ -1130,8 +1126,8 @@ export default {
           }
         }
         .bwc-line {
-          width: 2px;
-          height: 128px;
+          width: 1px;
+          height: 65px;
         }
         .red-bg {
           background: #ff5757;
@@ -1149,19 +1145,19 @@ export default {
         line-height: 1.5;
         font-family: FZJCGFKTK;
         text-align: center;
-        border: 2px solid #d47064;
+        border: 1px solid #d47064;
         border-radius: 8px;
         padding: 40px 0;
         margin: 0 37px 16px 0;
       }
       .red-border {
-        border: 2px solid #ff5757;
+        border: 1px solid #ff5757;
       }
       .green-border {
-        border: 2px solid #24b99e;
+        border: 1px solid #24b99e;
       }
       .brown-border {
-        border: 2px solid #bd8865;
+        border: 1px solid #bd8865;
       }
       .wordInfor {
         flex: 1;
@@ -1169,11 +1165,11 @@ export default {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          margin-bottom: 16px;
+          margin-bottom: 5px;
           width: fit-content;
           .pinyintext {
-            font-size: 20px;
-            line-height: 30px;
+            font-size: 14px;
+            line-height: 1.4;
             color: #2c2c2c;
             display: flex;
             align-items: center;
@@ -1198,9 +1194,9 @@ export default {
       }
 
       .jieshu {
-        margin-top: 16px;
-        font-size: 16px;
-        line-height: 19px;
+        margin-top: 5px;
+        font-size: 12px;
+        line-height: 1.4;
         color: #000000;
       }
     }
@@ -1502,13 +1498,6 @@ export default {
     }
   }
 }
-.wordDetailModule-phone {
-  .module-inner {
-    > div {
-      width: 100%;
-    }
-  }
-}
 </style>
 <style lang="scss">
 .el-tooltip__popper,
@@ -1557,4 +1546,15 @@ export default {
     }
   }
 }
+.wordDetailModule-phone {
+  .module-inner {
+    > div {
+      width: 100%;
+    }
+    .strockplayRedInner {
+      width: 65px;
+      height: 65px;
+    }
+  }
+}
 </style>