生词详情田字格和课文取词田字格

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

@@ -7,7 +7,12 @@
       paddingRight: isLandscape ? '100px' : '',
     }"
   >
-    <div class="voicefull-bottom" @mouseover="setTopShow(true)" @mouseleave="setTopShow(false)">
+    <div
+      class="voicefull-bottom"
+      :class="[isPhone ? 'voicefull-bottom-phone' : '']"
+      @mouseover="setTopShow(true)"
+      @mouseleave="setTopShow(false)"
+    >
       <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']">
@@ -790,7 +795,12 @@
         ></div>
       </div>
     </div>
-    <div class="voicefull-top" @mouseover="setBottomShow(true)" @mouseleave="setBottomShow(false)">
+    <div
+      class="voicefull-top"
+      :class="[isPhone ? 'voicefull-top-phone' : '']"
+      @mouseover="setBottomShow(true)"
+      @mouseleave="setBottomShow(false)"
+    >
       <div :class="[isBottomShow || isPhone ? 'voicefull-top-show' : 'voicefull-top-hidden']">
         <div class="top-left">
           <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
@@ -1806,7 +1816,8 @@ export default {
     transform-origin: 0% 0%;
 
     .vc-main {
-      max-height: calc(100vw - 132px) !important;
+      height: calc(100vw - 132px) !important;
+      overflow: auto;
     }
 
     .op-btn {
@@ -1860,6 +1871,43 @@ export default {
       visibility: visible;
     }
 
+    &-phone {
+      height: 66px;
+
+      .voicefull-top-show {
+        height: 66px;
+      }
+
+      .voicefull-top-hidden {
+        height: 66px;
+      }
+
+      .op-btn {
+        width: 40px !important;
+        height: 40px !important;
+
+        > span {
+          width: 20px !important;
+          height: 20px !important;
+        }
+      }
+
+      :deep .audioLine3 {
+        width: 40px !important;
+        height: 40px !important;
+
+        .play {
+          width: 20px !important;
+          height: 20px !important;
+        }
+      }
+
+      .select-bg,
+      .set-fontSize {
+        height: 40px !important;
+      }
+    }
+
     .top-left {
       display: flex;
       align-items: center;
@@ -2439,6 +2487,18 @@ export default {
       visibility: hidden;
     }
 
+    &-phone {
+      height: 66px;
+
+      .voicefull-bottom-show {
+        height: 66px;
+      }
+
+      .voicefull-bottom-hidden {
+        height: 66px;
+      }
+    }
+
     .bottom-left {
       display: flex;
       align-items: center;

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

@@ -19,7 +19,10 @@
       <SvgIcon icon-class="hanzi-strock-play" size="22" class="strock-play-btn" />
     </div>
 
-    <div :id="targetDiv" class="character-target-div"></div>
+    <div class="character-target-box">
+      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+      <div :id="targetDiv" class="character-target-div"></div>
+    </div>
   </div>
 </template>
 
@@ -91,16 +94,42 @@ export default {
   height: 128px; // 480px
 }
 
+// .character-target-div {
+//   z-index: 1;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 100%;
+//   height: 100%;
+//   font-family: '楷体';
+//   background: #fff url('@/assets/chinaTianRed.png') center no-repeat;
+//   background-size: 100% 100%;
+// }
 .character-target-div {
+  position: absolute;
+  top: 0;
+  left: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  font-family: '楷体';
-  background: #fff url('@/assets/chinaTianRed.png') center no-repeat;
-  background-size: 100% 100%;
+}
+
+.character-target-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.character-target-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+  color: #dedede;
 }
 
 .eep-strock-play-box {

src/views/book/courseware/preview/components/new_word/components/Strockplayredline.vue

@@ -116,8 +116,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
   color: #dedede;
 }