选择音节 移动端

src/components/Adult/phonePreview/SelectYinjie.vue

@@ -1,9 +1,8 @@
 <!--  -->
 <template>
   <div
-    class="Big-Book-prev-Textdes SelectYinjie"
+    class="Big-Book-prev-Textdes SelectYinjie SelectYinjie-phone"
     v-if="isShowTemp"
-    :class="[isPhone ? 'SelectYinjie-phone' : '']"
   >
     <div class="SelectYinjie-inner">
       <div
@@ -22,6 +21,7 @@
           type="audioLine"
           ref="audioLine"
           @handleListenRead="handleListenRead"
+          :baseSizePhone="baseSizePhone"
         />
       </div>
       <div v-for="(item, index) in curQue.option" :key="index">
@@ -43,7 +43,11 @@
               )
             "
           ></a>
-          <b v-if="item.number">{{ item.number }}</b>
+          <b
+            v-if="item.number"
+            :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+            >{{ item.number }}</b
+          >
           <div class="zijie-box">
             <p
               :class="[
@@ -53,6 +57,7 @@
               v-for="(items, indexs) in item.option"
               :key="indexs"
               @click="handleClick(index, indexs)"
+              :style="{ fontSize: baseSizePhone + 'px' }"
             >
               {{ items.pinyin }}
             </p>
@@ -75,11 +80,11 @@
 </template>
 
 <script>
-import AudioLine from "../preview/AudioLine.vue";
+import AudioLine from "../phonePreview/AudioLine.vue";
 
 export default {
   components: { AudioLine },
-  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "isPhone"],
+  props: ["curQue", "themeColor", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
       userList: [],
@@ -280,11 +285,11 @@ export default {
   width: 100%;
   &-inner {
     width: 100%;
-    background: #f7f7f7;
+    // background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 8px;
-    padding: 24px;
+    padding: 10px;
   }
   .aduioLine-box {
     margin-bottom: 8px;
@@ -292,7 +297,7 @@ export default {
   .item-box {
     display: flex;
     align-items: center;
-    background: #ffffff;
+    // background: #ffffff;
     padding: 4px 12px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
@@ -310,7 +315,7 @@ export default {
       border-radius: 50%;
       font-size: 12px;
       font-family: "robot";
-      line-height: 16px;
+      line-height: 1.2;
     }
     .play-btn {
       width: 16px;