文章全屏样式调整

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -1,8 +1,14 @@
 <!--  -->
 <template>
-  <div v-if="sentList" :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']">
+  <div
+    v-if="sentList"
+    :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2', isLandscape ? 'voicefull-scape' : '']"
+    :style="{
+      paddingRight: isLandscape ? '100px' : '',
+    }"
+  >
     <div class="voicefull-bottom" @mouseover="setTopShow(true)" @mouseleave="setTopShow(false)">
-      <div :class="[isTopShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
+      <div :class="[isTopShow || isPhone ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden']">
         <div :class="['bottom-left', TaskModel == 'ANSWER' ? 'bottom-left-margin' : '']"></div>
         <div :class="['page-count', bgIndex == 0 ? 'page-count-white' : 'page-count-green']">
           {{ curSentIndex + 1 }}/{{ sentList.length }}
@@ -467,7 +473,7 @@
       </div>
     </div>
     <div class="voicefull-top" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
-      <div :class="[isBottomShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
+      <div :class="[isBottomShow || isPhone ? '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' : '']">
@@ -722,6 +728,8 @@ export default {
       isNoteShow: false,
       oldNoteNum: '',
       windowWidth: window.innerWidth,
+      isLandscape: window.innerWidth < window.innerHeight, // 手机是否为竖屏
+      isPhone: false,
     };
   },
   computed: {
@@ -801,7 +809,10 @@ export default {
     },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     window.addEventListener('resize', this.getScreenHeight);
@@ -1411,6 +1422,24 @@ export default {
   height: 100vh;
   overflow: hidden;
 
+  &-scape {
+    display: flex;
+    flex-direction: column;
+    width: 100vh;
+    height: 100vw;
+    margin-left: 100vw;
+    transform: rotate(90deg);
+    transform-origin: 0% 0%;
+
+    .vc-main {
+      max-height: calc(100vw - 132px) !important;
+    }
+
+    .op-btn {
+      margin-left: 16px !important;
+    }
+  }
+
   .NNPE-wordDetail {
     position: fixed;
     top: 50%;
@@ -1634,6 +1663,7 @@ export default {
   .op-btn {
     box-sizing: border-box;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: 56px;
@@ -1892,23 +1922,23 @@ export default {
             }
 
             .active {
-              color: #de4444;
+              color: #de4444 !important;
 
               &-yellow {
-                color: #ffc600;
+                color: #ffc600 !important;
               }
             }
 
             .wordActive {
-              color: #de4444;
+              color: #de4444 !important;
             }
 
             .wordActive-blue {
-              color: #ffc600;
+              color: #ffc600 !important;
             }
 
             .newActive {
-              color: #de4444;
+              color: #de4444 !important;
             }
           }
 
@@ -1979,23 +2009,23 @@ export default {
           }
 
           .active {
-            color: #de4444;
+            color: #de4444 !important;
 
             &-yellow {
-              color: #ffc600;
+              color: #ffc600 !important;
             }
           }
 
           .wordActive {
-            color: #de4444;
+            color: #de4444 !important;
           }
 
           .wordActive-blue {
-            color: #ffc600;
+            color: #ffc600 !important;
           }
 
           .newActive {
-            color: #de4444;
+            color: #de4444 !important;
           }
         }