语音矩阵-设置字体大小

src/components/Adult/preview/AudioLineSentence.vue

@@ -2,17 +2,30 @@
   <!-- mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '', -->
   <div :class="['Audio', 'AudioFull']">
     <div
-      v-if="!hideSlider"
-      :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']"
+      :class="['audioLine3', bgIndex == 1 ? 'audioLine3-green' : '']"
+      @click="PlayAudio"
     >
       <div
         class="play"
         :class="[
           audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
         ]"
+      />
+    </div>
+    <input
+      style="position: absolute; top: -1000px; left: -100px; width: 5px"
+      autocomplete="false"
+      @keyup.space="PlayAudio"
+    />
+    <!-- <div :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']">
+      <div
+        class="play"
+        :class="[
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+        ]"
         @click="PlayAudio"
       />
-      <template>
+      <template >
         <el-slider
           v-model="playValue"
           :style="{ width: sliderWidth + 'px', height: '6px' }"
@@ -21,16 +34,11 @@
         />
         <span :class="bgIndex == 1 ? 'color-white' : ''">
           {{ realFormatSecond(audio.maxTime) }}
-          <!-- <template v-if="audio.playing">-</template
-          >{{
-            audio.maxTime
-              ? realFormatSecond(audio.maxTime - audio.currentTime - bg / 1000)
-              : ""
-          }} -->
+        
         </span>
       </template>
-    </div>
-    <div v-else class="audioLine2">
+    </div> -->
+    <!-- <div v-else class="audioLine2">
       <div
         class="play-icon"
         :class="
@@ -42,7 +50,7 @@
         "
         @click="PlayAudio"
       />
-    </div>
+    </div> -->
     <audio
       :id="audioId"
       :ref="audioId"
@@ -129,11 +137,6 @@ export default {
         if (val) this.$emit("handleChangeStopAudio");
       },
     },
-    "audio.isPlaying": {
-      handler(val) {
-        this.$emit("isPlayChange", val);
-      },
-    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -150,7 +153,6 @@ export default {
     _this.$refs[audioId].addEventListener("loadstart", function () {});
     _this.$refs[audioId].addEventListener("play", function () {
       _this.audio.playing = true;
-      // _this.audio.isPlaying = true;
       _this.audio.loading = false;
     });
     _this.$refs[audioId].addEventListener("pause", function () {
@@ -338,7 +340,6 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .AudioFull {
-  width: 100%;
   .audioLine {
     display: flex;
     align-items: center;
@@ -398,6 +399,48 @@ export default {
     background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
     background-size: 100% 100%;
   }
+  .audioLine3 {
+    width: 56px;
+    height: 56px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .play {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      &.playBtn {
+        background: url("../../../assets/icon/pause-24-normal-red.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+      &.pauseBtn {
+        background: url("../../../assets/icon/play-24-normal-red.png") no-repeat
+          left top;
+        background-size: 100% 100%;
+      }
+    }
+    &-green {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      .play {
+        &.playBtn {
+          background: url("../../../assets/icon/pause-24-normal-yellow.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn {
+          background: url("../../../assets/icon/play-24-normal-yellow.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -500,6 +543,36 @@ export default {
         top;
       background-size: 100% 100%;
     }
+    .audioLine3 {
+      .play {
+        &.playBtn {
+          background: url("../../../assets/icon/pause-24-normal-green.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn {
+          background: url("../../../assets/icon/play-24-normal-Green.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+      &-green {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        .play {
+          &.playBtn {
+            background: url("../../../assets/icon/pause-24-normal-yellow.png")
+              no-repeat left top;
+            background-size: 100% 100%;
+          }
+          &.pauseBtn {
+            background: url("../../../assets/icon/play-24-normal-yellow.png")
+              no-repeat left top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 }
 .NPC-Big-Book-preview-brown {
@@ -537,6 +610,36 @@ export default {
         top;
       background-size: 100% 100%;
     }
+    .audioLine3 {
+      .play {
+        &.playBtn {
+          background: url("../../../assets/icon/pause-24-normal-brown.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+        &.pauseBtn {
+          background: url("../../../assets/icon/play-24-normal-Brown.png")
+            no-repeat left top;
+          background-size: 100% 100%;
+        }
+      }
+      &-green {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        .play {
+          &.playBtn {
+            background: url("../../../assets/icon/pause-24-normal-yellow.png")
+              no-repeat left top;
+            background-size: 100% 100%;
+          }
+          &.pauseBtn {
+            background: url("../../../assets/icon/play-24-normal-yellow.png")
+              no-repeat left top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -975,4 +975,36 @@ export default {
     // z-index: 9999;
   }
 }
+</style>
+<style lang="scss">
+.NPC-Big-Book-preview-green {
+  .NNPE-ArticleView {
+    .ArticleView-full {
+      background: url("../../../../assets/NPC/full-screen-green.png") left
+        center no-repeat;
+      background-size: 16px 16px;
+    }
+    .Soundrecord-content {
+      .full-screen-icon {
+        background: url("../../../../assets/NPC/full-screen-green.png") left
+          center no-repeat;
+        background-size: 16px 16px;
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .Soundrecord-content {
+    .ArticleView-full {
+      background: url("../../../../assets/NPC/full-screen-brown.png") left
+        center no-repeat;
+      background-size: 16px 16px;
+    }
+    .full-screen-icon {
+      background: url("../../../../assets/NPC/full-screen-brown.png") left
+        center no-repeat;
+      background-size: 16px 16px;
+    }
+  }
+}
 </style>

src/components/Adult/preview/Voicefullscreen.vue

@@ -2,25 +2,37 @@
 <template>
   <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
     <div class="voicefull-top">
-      <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
-        <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+      <div class="top-left">
+        <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+          <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+            <span
+              :class="['bg-white', bgIndex == 0 ? 'active' : '']"
+              @click="changeBg(0)"
+            ></span>
+          </div>
+          <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
+            <span
+              :class="['bg-green', bgIndex == 1 ? 'active' : '']"
+              @click="changeBg(1)"
+            ></span>
+          </div>
+        </div>
+        <div class="set-fontSize">
           <span
-            :class="['bg-white', bgIndex == 0 ? 'active' : '']"
-            @click="changeBg(0)"
+            :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
+            @click="setFontSize('-')"
           ></span>
-        </div>
-        <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
           <span
-            :class="['bg-green', bgIndex == 1 ? 'active' : '']"
-            @click="changeBg(1)"
+            :class="['font-img-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
+          ></span>
+          <span
+            :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']"
+            @click="setFontSize('+')"
           ></span>
         </div>
       </div>
       <div class="top-middle">
-        <div
-          v-if="mp3"
-          :class="['audio-box', bgIndex == 1 ? 'audio-box-green' : '']"
-        >
+        <template v-if="mp3">
           <AudioLineSentence
             :key="'sent' + curSentIndex"
             :mp3="mp3"
@@ -29,14 +41,15 @@
             :audioId="'artPraAudioId' + curSentIndex"
             :stopAudio="stopAudio"
             :width="120"
-            :hideSlider="false"
+            :hideSlider="true"
             :bg="bg"
             :ed="ed"
             :maxTime="maxTime"
             :bgIndex="bgIndex"
             :isRepeat="isRepeat"
+            @playChange="playChange"
           />
-        </div>
+        </template>
         <div
           :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
           @click="changeStatus('isRepeat')"
@@ -68,6 +81,7 @@
           <span
             :class="[
               'en-icon',
+              item && !item.enwords ? 'disabled' : '',
               !isShowEN ? 'disabled' : '',
               isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
             ]"
@@ -106,6 +120,7 @@
           'vc-left vc-left-grey',
           isShowPN && bgIndex == 0 ? 'vc-left-black' : '',
           isShowPN && bgIndex == 1 ? 'vc-left-white' : '',
+          curSentIndex == 0 ? 'hidden' : '',
         ]"
         @click="prevSentence"
       ></div>
@@ -138,12 +153,16 @@
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
+                        :style="'font-size:' + pySize + 'px'"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
                     <span
                       class="NNPE-chs"
-                      :class="[pItem.padding && isShowPY ? 'padding' : '']"
+                      :class="[
+                        pItem.padding && isShowPY ? 'padding' : '',
+                        curQue.pyPosition == 'top' ? 'bottom' : '',
+                      ]"
                     >
                       <template>
                         <span
@@ -169,6 +188,7 @@
                               ? 'wordActive-blue'
                               : '',
                           ]"
+                          :style="'font-size:' + hzSize + 'px'"
                           >{{ pItem.chs[wIndex] }}</span
                         >
                       </template>
@@ -176,12 +196,13 @@
                     <template v-if="curQue.pyPosition == 'bottom'">
                       <span
                         v-if="isShowPY"
-                        class="NNPE-pinyin"
+                        class="NNPE-pinyin bottom"
                         :class="[
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
+                        :style="'font-size:' + pySize + 'px'"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -197,11 +218,17 @@
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
-                        style="text-align: left"
+                        :style="{ fontSize: pySize + 'px', textAlign: left }"
                         >{{ item[pIndex + 1].pinyin }}</span
                       >
                     </template>
-                    <span class="NNPE-chs" style="text-align: left">
+                    <span
+                      :class="[
+                        'NNPE-chs',
+                        curQue.pyPosition == 'top' ? 'bottom' : '',
+                      ]"
+                      :style="{ fontSize: hzSize + 'px', textAlign: left }"
+                    >
                       <span
                         :class="[
                           isPlaying &&
@@ -216,6 +243,7 @@
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
+                        :style="{ fontSize: pySize + 'px' }"
                         >{{ item[pIndex + 1].chs }}</span
                       >
                     </span>
@@ -228,8 +256,9 @@
                             ? 'noFont'
                             : '',
                           bgIndex == 1 ? 'font-white' : '',
+                          'bottom',
                         ]"
-                        style="text-align: left"
+                        :style="{ fontSize: pySize + 'px', textAlign: left }"
                         >{{ item[pIndex + 1].pinyin }}</span
                       >
                     </template>
@@ -247,6 +276,7 @@
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
+                        :style="{ fontSize: pySize + 'px' }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -254,7 +284,10 @@
                   <span
                     v-if="pItem.chs != '#'"
                     class="NNPE-chs"
-                    :class="[pItem.padding && isShowPY ? 'padding' : '']"
+                    :class="[
+                      pItem.padding && isShowPY ? 'padding' : '',
+                      curQue.pyPosition == 'top' ? 'bottom' : '',
+                    ]"
                   >
                     <template>
                       <span
@@ -280,6 +313,7 @@
                             ? 'wordActive-blue'
                             : '',
                         ]"
+                        :style="{ fontSize: hzSize + 'px' }"
                         >{{ pItem.chs[wIndex] }}</span
                       >
                     </template>
@@ -288,12 +322,13 @@
                     <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
                       <span
                         v-if="isShowPY"
-                        class="NNPE-pinyin"
+                        class="NNPE-pinyin bottom"
                         :class="[
                           pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           bgIndex == 1 ? 'font-white' : '',
                         ]"
+                        :style="{ fontSize: pySize + 'px' }"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -313,8 +348,8 @@
         </div>
         <div style="clear: both; overflow: hidden"></div>
         <div
-          v-if="item.enwords && isShowEN"
           :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
+          :style="{ fontSize: enSize + 'px' }"
         >
           {{ item.enwords }}
         </div>
@@ -324,6 +359,7 @@
           'vc-left vc-right-grey',
           isShowPN && bgIndex == 0 ? 'vc-right-black' : '',
           isShowPN && bgIndex == 1 ? 'vc-right-white' : '',
+          curSentIndex == sentList.length - 1 ? 'hidden' : '',
         ]"
         @click="nextSentence"
       ></div>
@@ -429,6 +465,9 @@ export default {
   ],
   data() {
     return {
+      pySize: 32,
+      hzSize: 48,
+      enSize: 24,
       bgIndex: 0,
       maxTime: 0,
       item: null,
@@ -483,7 +522,7 @@ export default {
       wordMaxTime: 0,
       isWordPlay: false,
       curWordTime: 0,
-      isPlaying: true,
+      isPlaying: false,
     };
   },
   computed: {
@@ -534,7 +573,22 @@ export default {
   },
   //方法集合
   methods: {
-    isPlayChange(bool) {
+    setFontSize(type) {
+      let _this = this;
+      if (type == "-") {
+        if (_this.hzSize >= 34) {
+          this.hzSize = this.hzSize - 4;
+        }
+      }
+      if (type == "+") {
+        if (_this.hzSize <= 76) {
+          this.hzSize = this.hzSize + 4;
+        }
+      }
+      _this.pySize = parseInt(_this.hzSize / 1.5);
+      _this.enSize = parseInt(_this.hzSize / 2);
+    },
+    playChange(bool) {
       this.isPlaying = bool;
     },
     //添加收藏
@@ -640,6 +694,7 @@ export default {
     getSentence() {
       let _this = this;
       _this.pauseAudio();
+      _this.isPlaying = false;
       let item = _this.sentList[_this.curSentIndex];
       if (item.sentArr) {
         _this.item = item.sentArr;
@@ -681,17 +736,21 @@ export default {
     //播放音频
     playWord(item) {
       let _this = this;
+      _this.pauseAudio();
+      _this.isWordPlay = false;
       _this.wordIndex = item.wordIndex;
-      let leg = item.timeList.length;
-      _this.wordbg = item.timeList[0].wordBg;
-      _this.worded = item.timeList[leg - 1].wordEd;
-      let wordMaxTime = (_this.worded - _this.wordbg) / 1000;
-      if (wordMaxTime < 1) {
-        _this.wordMaxTime = 1;
-      } else {
-        _this.wordMaxTime = wordMaxTime;
-      }
-      _this.isWordPlay = true;
+      setTimeout(() => {
+        let leg = item.timeList.length;
+        _this.wordbg = item.timeList[0].wordBg;
+        _this.worded = item.timeList[leg - 1].wordEd;
+        let wordMaxTime = (_this.worded - _this.wordbg) / 1000;
+        if (wordMaxTime < 1) {
+          _this.wordMaxTime = 1;
+        } else {
+          _this.wordMaxTime = wordMaxTime;
+        }
+        _this.isWordPlay = true;
+      }, 50);
     },
     changePlayStatus() {
       this.isWordPlay = false;
@@ -878,6 +937,11 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 0 40px;
+    .top-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
     .select-bg {
       display: flex;
       justify-content: space-between;
@@ -890,6 +954,7 @@ export default {
       justify-content: center;
       align-items: center;
       box-sizing: border-box;
+      margin-right: 32px;
       &.select-bg-blue {
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -930,12 +995,63 @@ export default {
         }
       }
     }
+    .set-fontSize {
+      padding: 0 20px;
+      height: 56px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      > span {
+        width: 24px;
+        height: 24px;
+        margin: 0 4px;
+        &.font-jian {
+          &-black {
+            background: url("../../../assets/NPC/jian-black.png") no-repeat left
+              top;
+            background-size: 100% 100%;
+          }
+          &-yellow {
+            background: url("../../../assets/NPC/jian-yellow.png") no-repeat
+              left top;
+            background-size: 100% 100%;
+          }
+        }
+        &.font-img {
+          &-black {
+            background: url("../../../assets/NPC/fontSize-black.png") no-repeat
+              left top;
+            background-size: 100% 100%;
+          }
+          &-yellow {
+            background: url("../../../assets/NPC/fontSize-yellow.png") no-repeat
+              left top;
+            background-size: 100% 100%;
+          }
+        }
+        &.font-jia {
+          &-black {
+            background: url("../../../assets/NPC/jia-black.png") no-repeat left
+              top;
+            background-size: 100% 100%;
+          }
+          &-yellow {
+            background: url("../../../assets/NPC/jia-yellow.png") no-repeat left
+              top;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
     .top-middle {
       display: flex;
       justify-content: center;
       align-items: center;
       .audio-box {
-        padding: 0 16px;
+        width: 56px;
         height: 56px;
         background: #ffffff;
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -1071,6 +1187,9 @@ export default {
         background: url("../../../assets/NPC/left-white.png") no-repeat left top;
         background-size: 100% 100%;
       }
+      &.hidden {
+        visibility: hidden;
+      }
     }
     .vc-right {
       width: 64px;
@@ -1120,11 +1239,12 @@ export default {
             font-family: "GB-PINYINOK-B";
             font-weight: normal;
             font-size: 32px;
-            line-height: 40px;
-
-            height: 40px;
+            line-height: 1.25;
+            box-sizing: border-box;
             color: rgba(0, 0, 0, 0.85);
-
+            &.bottom {
+              padding-bottom: 16px;
+            }
             &.noFont {
               font-family: initial;
             }
@@ -1141,9 +1261,11 @@ export default {
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
             font-size: 48px;
-            line-height: 56px;
-            padding-bottom: 16px;
+            line-height: 1.17;
             color: rgba(0, 0, 0, 0.85);
+            &.bottom {
+              padding-bottom: 16px;
+            }
             .font-white {
               color: #fff;
             }
@@ -1178,9 +1300,12 @@ export default {
           font-family: "GB-PINYINOK-B";
           font-weight: normal;
           font-size: 32px;
-          line-height: 40px;
-          height: 40px;
+          line-height: 1.25;
+          box-sizing: border-box;
           color: rgba(0, 0, 0, 0.85);
+          &.bottom {
+            padding-bottom: 16px;
+          }
           &.font-white {
             color: #fff;
           }
@@ -1197,9 +1322,11 @@ export default {
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
           font-size: 48px;
-          line-height: 56px;
-          padding-bottom: 16px;
+          line-height: 1.17;
           color: rgba(0, 0, 0, 0.85);
+          &.bottom {
+            padding-bottom: 16px;
+          }
           .font-white {
             color: #fff;
           }
@@ -1217,7 +1344,8 @@ export default {
           }
         }
         &.padding {
-          padding: 0 3px;
+          padding-left: 3px;
+          padding-right: 3px;
         }
       }
     }
@@ -1271,7 +1399,7 @@ export default {
 </style>
 <style lang="scss">
 .NPC-Big-Book-preview-green {
-  .bg2 {
+  .bg1 {
     .repeat-icon {
       background: url("../../../assets/icon/Repeat-24-normal-Green.png")
         no-repeat left top;
@@ -1295,7 +1423,7 @@ export default {
   }
 }
 .NPC-Big-Book-preview-brown {
-  .bg2 {
+  .bg1 {
     .repeat-icon {
       background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
         no-repeat left top;