语音全屏-问题修改

src/components/Adult/preview/AudioCompare.vue

@@ -18,6 +18,7 @@
           :ed="ed"
           @handleChangeStopAudio="handleChangeStopAudio"
           @sentPause="sentPause"
+          @playChange="getPlayStatus"
           :type="type"
         />
       </div>
@@ -28,6 +29,7 @@
           :isCompare="true"
           :themeColor="themeColor"
           @sentPause="sentPause"
+          @getPlayStatus="getPlayStatus"
           :type="type"
         />
       </div>
@@ -70,6 +72,7 @@ export default {
     "handleChangeStopAudio",
     "themeColor",
     "type",
+    "getPlayStatus",
   ],
   data() {
     return {

src/components/Adult/preview/Soundrecorddiff.vue

@@ -166,6 +166,7 @@ export default {
         "getRerordStatus",
         !_this.microphoneStatus && _this.recordList.length > 0
       );
+      _this.$emit("getMicrophoneStatus", _this.microphoneStatus);
     },
     playmicrophone(totalTimes) {
       this.isPlaying = true;

src/components/Adult/preview/Voicefullscreen.vue

@@ -22,7 +22,9 @@
               ></span>
             </div>
           </div>
-          <div class="set-fontSize">
+          <div
+            :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']"
+          >
             <span
               :class="[
                 'font-jian-black',
@@ -31,10 +33,7 @@
               @click="setFontSize('-')"
             ></span>
             <span
-              :class="[
-                'font-img-black',
-                bgIndex == 1 ? 'font-jian-yellow' : '',
-              ]"
+              :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"
             ></span>
             <span
               :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']"
@@ -138,21 +137,22 @@
         </div>
       </div>
     </div>
-    <div
-      class="voicefull-content"
-      v-if="item"
-      @mousemove="showPrevNext(true)"
-      @mouseleave="showPrevNext(false)"
-    >
+    <div class="voicefull-content" v-if="item">
       <div
-        :class="[
-          'vc-left vc-left-grey',
-          isShowPN && bgIndex == 0 ? 'vc-left-black' : '',
-          isShowPN && bgIndex == 1 ? 'vc-left-white' : '',
-          curSentIndex == 0 ? 'hidden' : '',
-        ]"
-        @click="prevSentence"
-      ></div>
+        class="vc-box"
+        @mousemove="showPrevNext(true, 'isShowLeft')"
+        @mouseleave="showPrevNext(false, 'isShowLeft')"
+      >
+        <div
+          :class="[
+            'vc-left vc-left-grey',
+            isShowLeft && bgIndex == 0 ? 'vc-left-black' : '',
+            isShowLeft && bgIndex == 1 ? 'vc-left-white' : '',
+            curSentIndex == 0 ? 'hidden' : '',
+          ]"
+          @click="prevSentence"
+        ></div>
+      </div>
       <div class="vc-main">
         <div class="NNPE-words-box">
           <div
@@ -385,14 +385,20 @@
         </div>
       </div>
       <div
-        :class="[
-          '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>
+        class="vc-box-right"
+        @mousemove="showPrevNext(true, 'isShowRight')"
+        @mouseleave="showPrevNext(false, 'isShowRight')"
+      >
+        <div
+          :class="[
+            'vc-left vc-right-grey',
+            isShowRight && bgIndex == 0 ? 'vc-right-black' : '',
+            isShowRight && bgIndex == 1 ? 'vc-right-white' : '',
+            curSentIndex == sentList.length - 1 ? 'hidden' : '',
+          ]"
+          @click="nextSentence"
+        ></div>
+      </div>
     </div>
     <div
       class="voicefull-bottom"
@@ -412,6 +418,7 @@
             @handleParentPlay="handleParentPlay"
             @sentPause="sentPause"
             @getRerordStatus="getRerordStatus"
+            @getMicrophoneStatus="getMicrophoneStatus"
             :bgIndex="bgIndex"
           />
           <div
@@ -432,6 +439,7 @@
               :sentPause="sentPause"
               :isRecord="isRecord"
               :handleChangeStopAudio="handleChangeStopAudio"
+              :getPlayStatus="getPlayStatus"
             />
           </div>
         </div>
@@ -547,7 +555,8 @@ export default {
       stopAudio: false,
       isRecord: false,
       isShowCompare: false,
-      isShowPN: false,
+      isShowRight: false,
+      isShowLeft: false,
       curSentIndex: 0,
       oldHz: "",
       hz: "",
@@ -566,9 +575,11 @@ export default {
       isPlaying: false,
       isAuto: false,
       key: "isRepeat",
-      isKeyboard: false,
+      isKeyboard: true,
       isTopShow: false,
       isBottomShow: false,
+      isRecording: false,
+      recordPlaying: false,
     };
   },
   computed: {
@@ -582,6 +593,22 @@ export default {
     // },
   },
   watch: {
+    isRecording: {
+      handler: function (newVal, oldVal) {
+        if (newVal) {
+          this.isBottomShow = newVal;
+        }
+      },
+      deep: true,
+    },
+    recordPlaying: {
+      handler: function (newVal, oldVal) {
+        if (newVal) {
+          this.isBottomShow = newVal;
+        }
+      },
+      deep: true,
+    },
     sentIndex: {
       handler: function (newVal, oldVal) {
         this.curSentIndex = newVal;
@@ -623,7 +650,12 @@ export default {
       this.isTopShow = bool;
     },
     setBottomShow(bool) {
-      this.isBottomShow = bool;
+      if (!this.recordPlaying && !this.isRecording) {
+        this.isBottomShow = bool;
+      }
+    },
+    getPlayStatus(bool) {
+      this.recordPlaying = bool;
     },
     setFontSize(type) {
       let _this = this;
@@ -680,8 +712,8 @@ export default {
         this.$message.success("收藏成功！");
       });
     },
-    showPrevNext(bool) {
-      this.isShowPN = bool;
+    showPrevNext(bool, key) {
+      this[key] = bool;
     },
     prevSentence() {
       if (this.curSentIndex == 0) {
@@ -732,6 +764,9 @@ export default {
     getRerordStatus(bool) {
       this.isShowCompare = bool;
     },
+    getMicrophoneStatus(bool) {
+      this.isRecording = bool;
+    },
     getWavblob(wavblob) {
       this.wavblob = wavblob;
     },
@@ -1133,6 +1168,10 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      &-green {
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
       > span {
         width: 24px;
         height: 24px;
@@ -1142,11 +1181,13 @@ export default {
             background: url("../../../assets/NPC/jian-black.png") no-repeat left
               top;
             background-size: 100% 100%;
+            cursor: pointer;
           }
           &-yellow {
-            background: url("../../../assets/NPC/jian-yellow.png") no-repeat
-              left top;
+            background: url("../../../assets/NPC/jian-white.png") no-repeat left
+              top;
             background-size: 100% 100%;
+            cursor: pointer;
           }
         }
         &.font-img {
@@ -1156,7 +1197,7 @@ export default {
             background-size: 100% 100%;
           }
           &-yellow {
-            background: url("../../../assets/NPC/fontSize-yellow.png") no-repeat
+            background: url("../../../assets/NPC/fontSize-white.png") no-repeat
               left top;
             background-size: 100% 100%;
           }
@@ -1166,11 +1207,13 @@ export default {
             background: url("../../../assets/NPC/jia-black.png") no-repeat left
               top;
             background-size: 100% 100%;
+            cursor: pointer;
           }
           &-yellow {
-            background: url("../../../assets/NPC/jia-yellow.png") no-repeat left
+            background: url("../../../assets/NPC/jia-white.png") no-repeat left
               top;
             background-size: 100% 100%;
+            cursor: pointer;
           }
         }
       }
@@ -1320,10 +1363,14 @@ export default {
     flex: 1;
     width: 100%;
     box-sizing: border-box;
-    padding: 0 36px;
     display: flex;
     align-items: center;
-
+    .vc-box {
+      padding: 0 8px 0 36px;
+      &-right {
+        padding: 0 36px 0 8px;
+      }
+    }
     .vc-left {
       width: 64px;
       height: 64px;
@@ -1366,6 +1413,7 @@ export default {
     .vc-main {
       width: fit-content;
       margin: 0 auto;
+      padding: 0 67px;
       .enwords {
         padding: 0 3px;
         margin-top: 40px;

src/components/Adult/preview/components/AudioRed.vue

@@ -82,17 +82,20 @@ export default {
       _this.voiceSrc = _this.isCompare
         ? _this.comparePlaySrc
         : _this.voicePauseSrc;
+      _this.$emit("getPlayStatus", true);
     });
     _this.audio.addEventListener("pause", function () {
       _this.voiceSrc = _this.isCompare
         ? _this.comparePauseSrc
         : _this.voicePauseSrc;
+      _this.$emit("getPlayStatus", false);
     });
     _this.audio.addEventListener("ended", function () {
       _this.voiceSrc = _this.isCompare
         ? _this.comparePauseSrc
         : _this.voicePauseSrc;
       _this.$emit("sentPause", false);
+      _this.$emit("getPlayStatus", false);
     });
   },
   // 方法集合

src/components/Adult/preview/components/Intp.vue

@@ -9,61 +9,69 @@
       @select="handleSelect"
     >
       <el-menu-item index="1">词典释义</el-menu-item>
-      <el-menu-item index="2">近/反义词</el-menu-item>
-      <el-menu-item index="3">组词</el-menu-item>
+      <el-menu-item
+        index="2"
+        :disabled="synonymList.length == 0 && antonymList.length == 0"
+        >近/反义词</el-menu-item
+      >
+      <el-menu-item index="3" :disabled="termsList.length == 0"
+        >组词</el-menu-item
+      >
     </el-menu>
     <template v-if="activeIndex == '1'">
       <div class="bwc-intp">
         <!-- 基本释义 -->
         <h1>基本释义</h1>
-        <span v-if="word.pinyin" class="pinyin">{{ word.pinyin }}</span>
-        <template v-if="isHasValue2=='definitionWithSpell'">
-            <div
-                v-for="(itemss, indexss) in paraphrase"
-                :key="indexss"
-                class="paraphrase"
-                >
-                <div
-                    v-for="(vItems, key, vIndexs) in itemss['@definitionWithSpell']"
-                    :key="vIndexs"
-                    class="para"
-                    >
-                    <span class="para-key">{{
-                        key.replace("[", "").replace("]", "")
-                    }}</span>
-                    <ul
-                        v-for="(pItems, pIndexs) in vItems"
-                        :key="pIndexs"
-                        class="para-value"
-                    >
-                        <li>{{ pItems }}</li>
-                    </ul>
-                </div>
-            </div>
-        </template>
-        <template v-else-if="isHasValue2=='definitions'">
+        <span v-if="word.pinyin" class="pinyin">{{
+          word.pinyin.toLowerCase()
+        }}</span>
+        <template v-if="isHasValue2 == 'definitionWithSpell'">
+          <div
+            v-for="(itemss, indexss) in paraphrase"
+            :key="indexss"
+            class="paraphrase"
+          >
             <div
-                v-for="(itemss, indexss) in paraphrase"
-                :key="indexss"
-                class="paraphrase"
-                >
-                <ul
-                    v-for="(vItems, key, vIndexs) in itemss['@definitions']"
-                    :key="vIndexs"
-                    class="para"
-                    >
-                    <li>{{ vItems }}</li>
-                </ul>
+              v-for="(vItems, key, vIndexs) in itemss['@definitionWithSpell']"
+              :key="vIndexs"
+              class="para"
+            >
+              <span class="para-key">{{
+                key.replace("[", "").replace("]", "")
+              }}</span>
+              <ul
+                v-for="(pItems, pIndexs) in vItems"
+                :key="pIndexs"
+                class="para-value"
+              >
+                <li>{{ pItems }}</li>
+              </ul>
             </div>
+          </div>
         </template>
-        <template v-else>
+        <template v-else-if="isHasValue2 == 'definitions'">
+          <div
+            v-for="(itemss, indexss) in paraphrase"
+            :key="indexss"
+            class="paraphrase"
+          >
             <ul
-                v-for="(itemss, indexss) in paraphrase"
-                :key="indexss"
-                class="paraphrase"
-                >
-                <li>{{ itemss['@value'] }}</li>
+              v-for="(vItems, key, vIndexs) in itemss['@definitions']"
+              :key="vIndexs"
+              class="para"
+            >
+              <li>{{ vItems }}</li>
             </ul>
+          </div>
+        </template>
+        <template v-else>
+          <ul
+            v-for="(itemss, indexss) in paraphrase"
+            :key="indexss"
+            class="paraphrase"
+          >
+            <li>{{ itemss["@value"] }}</li>
+          </ul>
         </template>
         <hr />
       </div>
@@ -131,7 +139,7 @@ export default {
       antonymList: [], // 反义词
       termsList: [], // 组词
       dataDetail: [],
-      isHasValue2: '', // 释义里是否含有value2
+      isHasValue2: "", // 释义里是否含有value2
     };
   },
   computed: {
@@ -193,7 +201,7 @@ export default {
       _this.synonymList = [];
       _this.antonymList = [];
       _this.termsList = [];
-      _this.isHasValue2 = ''
+      _this.isHasValue2 = "";
       _this.dataDetail.forEach((item) => {
         if (item.request.queryType == "entity") {
           // 读音
@@ -208,13 +216,13 @@ export default {
               } else if (itemss.key == "definition") {
                 // 释义
                 _this.paraphrase = itemss.objects;
-                for(let i = 0; i< _this.paraphrase.length; i++){
-                    if(_this.paraphrase[i]['@definitionWithSpell']){
-                        _this.isHasValue2 = 'definitionWithSpell'
-                        return false
-                    }else if(_this.paraphrase[i]['@definitions']){
-                        _this.isHasValue2 = 'definitions'
-                    }
+                for (let i = 0; i < _this.paraphrase.length; i++) {
+                  if (_this.paraphrase[i]["@definitionWithSpell"]) {
+                    _this.isHasValue2 = "definitionWithSpell";
+                    return false;
+                  } else if (_this.paraphrase[i]["@definitions"]) {
+                    _this.isHasValue2 = "definitions";
+                  }
                 }
               } else if (itemss.key == "synonym") {
                 // 近义词
@@ -241,18 +249,18 @@ export default {
       _this.getChineseInfo();
     } else {
       if (_this.word) {
-        _this.isHasValue2 = ''
+        _this.isHasValue2 = "";
         _this.mp3Url = _this.word.mp3Url ? _this.word.mp3Url : "";
         _this.paraphrase = _this.word.paraphrase
           ? JSON.parse(JSON.stringify(_this.word.paraphrase))
           : [];
-        for(let i = 0; i< _this.paraphrase.length; i++){
-            if(_this.paraphrase[i]['@definitionWithSpell']){
-                _this.isHasValue2 = 'definitionWithSpell'
-                return false
-            }else if(_this.paraphrase[i]['@definitions']){
-                _this.isHasValue2 = 'definitions'
-            }
+        for (let i = 0; i < _this.paraphrase.length; i++) {
+          if (_this.paraphrase[i]["@definitionWithSpell"]) {
+            _this.isHasValue2 = "definitionWithSpell";
+            return false;
+          } else if (_this.paraphrase[i]["@definitions"]) {
+            _this.isHasValue2 = "definitions";
+          }
         }
         _this.synonymList = _this.word.synonymList
           ? JSON.parse(JSON.stringify(_this.word.synonymList))