选择声调 移动端

src/components/Adult/phonePreview/AudioLine.vue

@@ -25,7 +25,7 @@
           @change="changeCurrentTime"
         />
         <span :style="{ fontSize: baseSizePhone + 2 + 'px' }"
-          >123<template v-if="audio.playing">-</template
+          ><template v-if="audio.playing">-</template
           >{{
             audio.maxTime
               ? realFormatSecond(audio.maxTime - audio.currentTime)

src/components/Adult/phonePreview/SelectTone.vue

@@ -1,9 +1,6 @@
 <!--  -->
 <template>
-  <div
-    class="Big-Book-prev-Textdes SelectTone SelectTone-phone"
-    v-if="isShowTemp"
-  >
+  <div class="Big-Book-prev-Textdes SelectTone-phone" v-if="isShowTemp">
     <div
       class="aduioLine-box"
       v-if="
@@ -20,6 +17,7 @@
         type="audioLine"
         ref="audioLine"
         @handleListenRead="handleListenRead"
+        :baseSizePhone="baseSizePhone"
       />
     </div>
     <ul>
@@ -68,8 +66,8 @@
 </template>
 
 <script>
-import Audio from "../preview/components/AudioRed.vue"; // 音频播放
-import AudioLine from "../preview/AudioLine.vue";
+import Audio from "../phonePreview/components/AudioRed.vue"; // 音频播放
+import AudioLine from "../phonePreview/AudioLine.vue";
 
 export default {
   components: { Audio, AudioLine },
@@ -280,18 +278,18 @@ export default {
   ul {
     width: 100%;
     box-sizing: border-box;
-    background: #f7f7f7;
+    // background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     display: flex;
     flex-flow: wrap;
     justify-content: space-between;
     align-items: flex-start;
-    padding: 24px 12px;
+    padding: 10px;
 
     div.op-li {
       width: 363px;
-      background: #ffffff;
+      // background: #ffffff;
       border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
       border-radius: 8px;
@@ -422,7 +420,7 @@ export default {
 }
 </style>
 <style lang="scss">
-.SelectTone.Big-Book-prev-Textdes {
+.SelectTone-phone.Big-Book-prev-Textdes {
   ul {
     li {
       div.con {
@@ -445,7 +443,7 @@ export default {
         }
         span {
           font-family: "Sans-GBNPC" !important;
-          font-size: 16px !important;
+          // font-size: 16px !important;
           background: transparent !important;
         }
       }

src/components/Adult/phonePreview/VoiceMatrix.vue

@@ -37,6 +37,7 @@
         :mp3-source="mp3Source"
         @handleChangeStopAudio="handleChangeStopAudio"
         @playChange="playChange"
+        :baseSizePhone="baseSizePhone"
       />
     </div>
     <!-- 语音矩阵 -->
@@ -897,7 +898,7 @@ $select-color-brown-active: #a37557;
         font-size: 12px;
         background-color: $select-color;
         font-family: "robot";
-        color: #fff;
+        // color: #fff;
         border-radius: 50%;
       }
 
@@ -943,7 +944,7 @@ $select-color-brown-active: #a37557;
     overflow: auto;
     font-size: 16px;
     height: calc(100% - 80px);
-    background-color: #f5f5f5;
+    // background-color: #f5f5f5;
     border-left: 1px solid $border-color;
     border-right: 1px solid $border-color;
     word-break: break-word;
@@ -1070,7 +1071,7 @@ $select-color-brown-active: #a37557;
           width: 100%;
           height: 100%;
           min-height: 24px;
-          background-color: #fff;
+          // background-color: #fff;
           border: 1px solid $border-color;
           border-radius: 8px;
           transition: 0.2s;
@@ -1330,7 +1331,7 @@ $select-color-brown-active: #a37557;
       height: 40px;
       padding: 4px 4px 4px 16px;
       margin: 24px 24px 0 0;
-      background-color: #fff;
+      // background-color: #fff;
       border: 1px solid $border-color;
       border-radius: 8px;
     }