全屏模式按钮位置调到下方

src/components/Adult/preview/Voicefullscreen.vue

@@ -2,12 +2,13 @@
 <template>
   <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
     <div
-      class="voicefull-top"
+      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></div>
+        <!-- <div class="top-left">
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
             <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
               <span
@@ -157,7 +158,7 @@
               ]"
             ></span>
           </div>
-        </div>
+        </div> -->
         <div
           :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
           @click="exitFullScreen"
@@ -624,6 +625,173 @@
       </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="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+            <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
+              <span
+                :class="['bg-green', bgIndex == 1 ? 'active' : '']"
+                @click="changeBg(1)"
+              ></span>
+            </div>
+            <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+              <span
+                :class="['bg-white', bgIndex == 0 ? 'active' : '']"
+                @click="changeBg(0)"
+              ></span>
+            </div>
+          </div>
+          <div
+            :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']"
+          >
+            <template v-if="hzSize >= 34">
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex == 1 ? 'font-jian-yellow' : ''
+                ]"
+                @click="setFontSize('-')"
+              ></span>
+            </template>
+            <template v-else>
+              <span
+                :class="[
+                  'font-jian-black',
+                  bgIndex == 1
+                    ? 'font-jian-yellow-disabled'
+                    : 'font-jian-white-disabled'
+                ]"
+              ></span>
+            </template>
+            <span
+              :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"
+            ></span>
+            <template v-if="hzSize <= 76">
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex == 1 ? 'font-jia-yellow' : ''
+                ]"
+                @click="setFontSize('+')"
+              ></span>
+            </template>
+            <template v-else>
+              <span
+                :class="[
+                  'font-jia-black',
+                  bgIndex == 1
+                    ? 'font-jia-yellow-disabled'
+                    : 'font-jia-white-disabled'
+                ]"
+              ></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">
+            <AudioLineSentence
+              :key="'sent' + curSentIndex"
+              :mp3="mp3"
+              :getCurTime="getCurTime"
+              ref="audioLineSent"
+              :audioId="'artPraAudioId' + curSentIndex"
+              :stopAudio="stopAudio"
+              :width="120"
+              :hideSlider="true"
+              :bg="bg"
+              :ed="ed"
+              :curTime="curTime"
+              :maxTime="maxTime"
+              :bgIndex="bgIndex"
+              :isRepeat="isRepeat"
+              :isAuto="isAuto"
+              @playChange="playChange"
+              @rollSentence="rollSentence"
+            />
+          </template>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="setStatus"
+          >
+            <span
+              :class="[
+                'repeat-icon',
+                !isRepeat && !isAuto ? 'disabled' : '',
+                !isRepeat && isAuto ? 'auto-icon' : '',
+                isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
+                !isRepeat && isAuto && bgIndex == 1 ? 'auto-icon-yellow' : ''
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="changePinyin"
+          >
+            <span
+              :class="[
+                'pinyin-icon',
+                !config.isShowPY ? 'disabled' : '',
+                config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : ''
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="changeEN"
+          >
+            <span
+              :class="[
+                'en-icon',
+                !enwords ? 'disabled' : '',
+                !config.isShowEN ? 'disabled' : '',
+                config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : ''
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="handleColl"
+            title="点击收藏后可在“个人中心”-“我的收藏”查看"
+          >
+            <span
+              :class="[
+                'coll-icon',
+                !isCollArr[curSentIndex] ? 'disabled' : '',
+                isCollArr[curSentIndex] && bgIndex == 1
+                  ? 'coll-icon-yellow'
+                  : ''
+              ]"
+            ></span>
+          </div>
+        </div>
+        <div
+          :class="[
+            'page-count',
+            bgIndex == 0 ? 'page-count-white' : 'page-count-green'
+          ]"
+        >
+          {{ curSentIndex + 1 }}/{{ sentList.length }}
+        </div>
+      </div>
+    </div>
+    <!-- <div
       class="voicefull-bottom"
       @mouseover="setBottomShow(true)"
       @mouseleave="setBottomShow(false)"
@@ -689,7 +857,7 @@
           {{ curSentIndex + 1 }}/{{ sentList.length }}
         </div>
       </div>
-    </div>
+    </div> -->
 
     <template v-if="isShow">
       <div