全屏模式

src/components/Adult/phonePreview/AudioLineSentence.vue

@@ -428,8 +428,8 @@ export default {
     background-size: 100% 100%;
   }
   .audioLine3 {
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 40px;

src/components/Adult/phonePreview/VoiceMatrix.vue

@@ -385,10 +385,10 @@
         :handle-change-stop-audio="handleChangeStopAudio"
         @playing="playChange"
       />
-      <!-- <span ref="fullscreen" class="fullscreen" @click="fullScreen">
+      <span ref="fullscreen" class="fullscreen" @click="fullScreen">
         <span>黑板模式</span>
         <el-image :src="fullscreenSrc" />
-      </span> -->
+      </span>
     </div>
     <div :id="`screen-${cid}`" class="voice-full-screen">
       <VoiceFullscreen

src/components/Adult/phonePreview/VoiceMatrixFullscreen.vue

@@ -1,11 +1,7 @@
 <template>
   <div :class="['voicefull', bgIndex === 0 ? 'bg1' : 'bg2']">
-    <div
-      class="voicefull-top"
-      @mouseover="setTopShow(true)"
-      @mouseleave="setTopShow(false)"
-    >
-      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
+    <div class="voicefull-top">
+      <div :class="['voicefull-top-show']">
         <div class="top-left">
           <div :class="['select-bg', bgIndex === 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex === 1 ? 'active' : '']">
@@ -69,18 +65,6 @@
               />
             </template>
           </div>
-          <div
-            :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="changeStatus('isKeyboard')"
-          >
-            <span
-              :class="[
-                'keyboard-icon',
-                !isKeyboard ? 'disabled' : '',
-                isKeyboard && bgIndex === 1 ? 'keyboard-icon-yellow' : ''
-              ]"
-            />
-          </div>
         </div>
         <div class="top-middle">
           <template v-if="mp3">
@@ -212,7 +196,7 @@
               :class="[
                 'column-wrapper',
                 (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
-                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : ''
               ]"
@@ -225,15 +209,15 @@
                 :class="[
                   column.text.length === 0 ? 'space' : `column-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : ''
@@ -260,15 +244,15 @@
                 :class="[
                   `sentence-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : ''
@@ -342,15 +326,15 @@
                 :class="[
                   `pinyinEnglish-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : ''
@@ -376,15 +360,15 @@
                 :class="[
                   `textBrackets-${themeColor}`,
                   (selectCell.row === i && selectCell.column === j) ||
-                    (selectedLine.type === 'column' &&
-                      selectedLine.index === j) ||
-                    (selectedLine.type === 'row' && selectedLine.index === i)
+                  (selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (selectedLine.type === 'row' && selectedLine.index === i)
                     ? 'selected'
                     : '',
                   playing &&
-                    column.lrc_data.begin_time / 1000 <= curTime &&
-                    (curTime < column.lrc_data.end_time / 1000 ||
-                      column.lrc_data.end_time === -1)
+                  column.lrc_data.begin_time / 1000 <= curTime &&
+                  (curTime < column.lrc_data.end_time / 1000 ||
+                    column.lrc_data.end_time === -1)
                     ? 'playing'
                     : '',
                   column.isTitle ? 'title' : ''
@@ -416,12 +400,8 @@
       </div>
     </div>
 
-    <div
-      class="voicefull-bottom"
-      @mouseover="setBottomShow(true)"
-      @mouseleave="setBottomShow(false)"
-    >
-      <div :class="['voicefull-bottom-show', isBottomShow ? '' : 'hidden']">
+    <div class="voicefull-bottom">
+      <div :class="['voicefull-bottom-show']">
         <div class="bottom-left">
           <soundrecorddiff
             ref="Soundrecorddiff"
@@ -972,9 +952,13 @@ export default {
 
     pauseAudio() {
       let audio = document.getElementsByTagName("audio");
-      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
+      if (
+        audio &&
+        audio.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
         audio.forEach(item => {
-            item.pause();
+          item.pause();
         });
       }
     },
@@ -1008,12 +992,14 @@ $dark-color: #ffc600;
 $dark-color-play: #fff2c6;
 
 .voicefull {
-  width: 100%;
-  height: 100vh;
+  width: 100vh;
+  height: 100vw;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-
+  transform: rotate(90deg);
+  transform-origin: 0% 0%;
+  margin-left: 100vw;
   &.bg1 {
     background: #fff;
     color: #062211;
@@ -1091,21 +1077,21 @@ $dark-color-play: #fff2c6;
   }
 
   &-top {
-    height: 136px;
+    height: 66px;
     width: 100%;
-    padding: 0 40px;
+    padding: 0 15px;
 
     .voicefull-top-hidden {
       width: 100%;
-      height: 136px;
+      height: 66px;
       visibility: hidden;
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: end;
     }
     .voicefull-top-show {
       width: 100%;
-      height: 136px;
+      height: 66px;
       visibility: visible;
       display: flex;
       justify-content: space-between;
@@ -1120,14 +1106,14 @@ $dark-color-play: #fff2c6;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 96px;
-      height: 56px;
+      width: 84px;
+      height: 48px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 40px;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-right: 32px;
+      margin-right: 15px;
 
       &.select-bg-blue {
         background: rgba(255, 255, 255, 0.1);
@@ -1172,8 +1158,8 @@ $dark-color-play: #fff2c6;
     }
 
     .set-fontSize {
-      padding: 0 20px;
-      height: 56px;
+      padding: 0 10px;
+      height: 48px;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 40px;
@@ -1260,8 +1246,8 @@ $dark-color-play: #fff2c6;
       justify-content: center;
       align-items: center;
       .audio-box {
-        width: 56px;
-        height: 56px;
+        width: 48px;
+        height: 48px;
         background: #ffffff;
         border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 40px;
@@ -1277,12 +1263,13 @@ $dark-color-play: #fff2c6;
   }
 
   .op-btn {
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-shrink: 0;
 
     cursor: pointer;
     margin-left: 32px;
@@ -1389,7 +1376,8 @@ $dark-color-play: #fff2c6;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: calc(100vh - 272px);
+    height: calc(100vw - 272px);
+    overflow: auto;
 
     // 语音矩阵
 
@@ -1719,7 +1707,7 @@ $dark-color-play: #fff2c6;
   }
 
   &-bottom {
-    height: 136px;
+    height: 66px;
     width: 100%;
 
     display: flex;
@@ -1728,11 +1716,11 @@ $dark-color-play: #fff2c6;
     padding-right: 40px;
 
     .voicefull-bottom-show {
-      height: 136px;
+      height: 66px;
       width: 100%;
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: start;
       visibility: visible;
 
       &.hidden {

src/components/Adult/phonePreview/VoiceMatrixFullscreenAudio.vue

@@ -135,23 +135,31 @@ export default {
     PlayAudio() {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
-        if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-            audio.forEach(item => {
-                if (item.src === this.mp3) {
-                if (item.id !== audioId) {
-                    item.pause();
-                }
-                } else {
-                item.pause();
-                }
-            });
-        }
-        let video = document.getElementsByTagName("video")
-        if(video&&video.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-            video.forEach(vItem => {
-                vItem.pause();
-            });
-        }
+      if (
+        audio &&
+        audio.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
+        audio.forEach(item => {
+          if (item.src === this.mp3) {
+            if (item.id !== audioId) {
+              item.pause();
+            }
+          } else {
+            item.pause();
+          }
+        });
+      }
+      let video = document.getElementsByTagName("video");
+      if (
+        video &&
+        video.length > 0 &&
+        window.location.href.indexOf("GCLS-Learn") == -1
+      ) {
+        video.forEach(vItem => {
+          vItem.pause();
+        });
+      }
       if (this.audio.playing) {
         this.$refs[audioId].pause();
         this.audio.playing = false;
@@ -226,12 +234,16 @@ export default {
       this.playValue = (res / this.audio.maxTime) * 100;
       if (playFlag) {
         let audio = document.getElementsByTagName("audio");
-        if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
-            audio.forEach(item => {
+        if (
+          audio &&
+          audio.length > 0 &&
+          window.location.href.indexOf("GCLS-Learn") == -1
+        ) {
+          audio.forEach(item => {
             if (item.id !== audioId) {
-                item.pause();
+              item.pause();
             }
-            });
+          });
         }
         this.$refs[audioId].play();
       }
@@ -335,8 +347,8 @@ export default {
     background-size: 100% 100%;
   }
   .audioLine3 {
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 40px;

src/components/Adult/phonePreview/Voicefullscreen.vue

@@ -1,14 +1,9 @@
 <!--  -->
 <template>
   <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
-    <div
-      class="voicefull-top voicefull-bottom"
-      @mouseover="setTopShow(true)"
-      @mouseleave="setTopShow(false)"
-    >
-      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
-        <div></div>
-        <!-- <div class="top-left">
+    <div class="voicefull-top ">
+      <div :class="['voicefull-top-show']">
+        <div class="top-left">
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
               <span
@@ -68,19 +63,6 @@
               ></span>
             </template>
           </div>
-          <div
-            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-            @click="changeStatus('isKeyboard')"
-            title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
-          >
-            <span
-              :class="[
-                'keyboard-icon',
-                !isKeyboard ? 'disabled' : '',
-                isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : ''
-              ]"
-            ></span>
-          </div>
         </div>
         <div class="top-middle">
           <template v-if="mp3">
@@ -158,14 +140,14 @@
               ]"
             ></span>
           </div>
-        </div> -->
+        </div>
         <div
-          :class="[
-            'page-count',
-            bgIndex == 0 ? 'page-count-white' : 'page-count-green'
-          ]"
+          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+          @click="exitFullScreen"
         >
-          {{ curSentIndex + 1 }}/{{ sentList.length }}
+          <span
+            :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
+          ></span>
         </div>
       </div>
     </div>
@@ -624,13 +606,10 @@
         ></div>
       </div>
     </div>
-    <div
-      class="voicefull-top voicefull-bottom"
-      @mouseover="setTopShow(true)"
-      @mouseleave="setTopShow(false)"
-    >
-      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
-        <div class="top-left">
+    <div class="voicefull-top voicefull-bottom">
+      <div :class="['voicefull-bottom-show']">
+        <div></div>
+        <!-- <div class="top-left">
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
               <span
@@ -780,14 +759,14 @@
               ]"
             ></span>
           </div>
-        </div>
+        </div> -->
         <div
-          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="exitFullScreen"
+          :class="[
+            'page-count',
+            bgIndex == 0 ? 'page-count-white' : 'page-count-green'
+          ]"
         >
-          <span
-            :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
-          ></span>
+          {{ curSentIndex + 1 }}/{{ sentList.length }}
         </div>
       </div>
     </div>
@@ -1604,11 +1583,14 @@ export default {
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .voicefull {
-  width: 100%;
-  height: 100vh;
+  width: 100vh;
+  height: 100vw;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  transform: rotate(90deg);
+  transform-origin: 0% 0%;
+  margin-left: 100vw;
   .NNPE-wordDetail {
     position: fixed;
     z-index: 9999;
@@ -1625,11 +1607,11 @@ export default {
     }
   }
   &-top {
-    height: 136px;
+    height: 66px;
     width: 100%;
     box-sizing: border-box;
 
-    padding: 0 40px;
+    padding: 0 15px;
 
     .voicefull-top-hidden {
       width: 100%;
@@ -1641,11 +1623,11 @@ export default {
     }
     .voicefull-top-show {
       width: 100%;
-      height: 136px;
+      height: 66px;
       visibility: visible;
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: end;
     }
     .top-left {
       display: flex;
@@ -1656,15 +1638,15 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 96px;
-      height: 56px;
+      width: 84px;
+      height: 48px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 40px;
       display: flex;
       justify-content: center;
       align-items: center;
       box-sizing: border-box;
-      margin-right: 32px;
+      margin-right: 15px;
       &.select-bg-blue {
         background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -1706,8 +1688,8 @@ export default {
       }
     }
     .set-fontSize {
-      padding: 0 20px;
-      height: 56px;
+      padding: 0 10px;
+      height: 48px;
       background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 40px;
@@ -1792,9 +1774,11 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      column-gap: 10px;
+
       .audio-box {
-        width: 56px;
-        height: 56px;
+        width: 48px;
+        height: 48px;
         background: #ffffff;
         border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 40px;
@@ -1809,15 +1793,16 @@ export default {
     }
   }
   .op-btn {
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-shrink: 0;
 
     cursor: pointer;
-    margin-left: 32px;
+    // margin-left: 32px;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
@@ -1935,6 +1920,7 @@ export default {
     box-sizing: border-box;
     display: flex;
     align-items: center;
+    overflow: auto;
     .vc-box {
       padding: 0 8px 0 36px;
       &-right {
@@ -2136,20 +2122,20 @@ export default {
     }
   }
   &-bottom {
-    height: 136px;
+    height: 66px;
     width: 100%;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: end;
     padding-right: 40px;
 
     .voicefull-bottom-show {
-      height: 136px;
+      height: 66px;
       width: 100%;
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: start;
       visibility: visible;
     }
     .voicefull-bottom-hidden {
@@ -2168,7 +2154,7 @@ export default {
         margin-left: 40px;
       }
       .compare-box {
-        height: 56px;
+        height: 48px;
         padding: 16px 16px;
         box-sizing: border-box;
         border: 1px solid rgba(0, 0, 0, 0.1);

src/styles/index.scss

@@ -513,6 +513,7 @@ input:-ms-input-placeholder {
   font-size: 16px;
   line-height: 150%;
   color: #CC5E20;
+  margin: 10px 0;
 }
 .practiceBoxStrock{
   .el-dialog__header,.el-dialog__body{