填空拖拽 选择拖拽 移动端

src/components/Adult/phonePreview/FillDrag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fill-drag" :class="[isPhone ? 'fill-drag-phone' : '']">
+  <div class="fill-drag fill-drag-phone">
     <!-- 选项 -->
     <div class="fill-drag-options">
       <draggable
@@ -41,7 +41,11 @@
       >
         <!-- 偏旁 -->
         <div class="drag-fill-container">
-          <span class="drag-fill-space active" v-text="fill.side" />
+          <span
+            class="drag-fill-space active"
+            v-text="fill.side"
+            style="line-height: 64px"
+          />
 
           <span
             v-for="(drag, j) in fill.dragList"
@@ -110,9 +114,8 @@ export default {
       type: String,
       required: true
     },
-    isPhone: {
-      type: Boolean,
-      required: true
+    baseSizePhone: {
+      type: Number
     }
   },
   data() {
@@ -221,7 +224,7 @@ $image-size: 64px;
 
   &-options {
     width: 100%;
-    background-color: #f7f7f7;
+    // background-color: #f7f7f7;
     border: 1px solid #dedede;
     border-radius: 8px;
     padding: 24px;
@@ -269,7 +272,7 @@ $image-size: 64px;
         height: 16px;
         width: 16px;
         font-size: 16px;
-        margin-right: 16px;
+        // margin-right: 16px;
         margin-top: 24px;
       }
 
@@ -295,11 +298,11 @@ $image-size: 64px;
       .drag-delete {
         flex: 1;
         // padding-right: 16px;
-        padding-top: 20px;
+        padding-top: 14px;
         .el-image {
           float: right;
-          width: 24px;
-          height: 24px;
+          width: 30px;
+          height: 30px;
         }
       }
 

src/components/Adult/phonePreview/SelectDrag.vue

@@ -1,8 +1,7 @@
 <!-- 选择 -> 拖拽 -->
 <template>
   <div
-    class="select-drag"
-    :class="[isPhone ? 'select-drag-phone' : '']"
+    class="select-drag select-drag-phone"
     v-if="curQue && judgeAnswer == 'standardAnswer' ? IsError : true"
   >
     <!-- 选项 -->
@@ -74,7 +73,8 @@
           :style="{
             'grid-template': item.isSpace
               ? ''
-              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`
+              : `repeat(${item.wordsList.length}, auto) / repeat(${item.wordsList.length}, auto)`,
+            fontSize: baseSizePhone + 2 + 'px'
           }"
         >
           <!-- 空格 -> 拖拽 -->
@@ -108,18 +108,31 @@
                       :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
                       :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
                       v-text="isPyTop ? pinyin : chs"
+                      :style="{
+                        fontSize: isPyTop
+                          ? baseSizePhone + 'px'
+                          : baseSizePhone + 2 + 'px'
+                      }"
                     />
                     <span
                       v-for="({ chs, pinyin }, k) in item.dragList[0].wordsList"
                       :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
                       :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
                       v-text="isPyTop ? chs : pinyin"
+                      :style="{
+                        fontSize: isPyTop
+                          ? baseSizePhone + 2 + 'px'
+                          : baseSizePhone + 'px'
+                      }"
                     />
                   </template>
                   <span
                     v-else
                     :class="['chs']"
                     v-text="item.dragList[0].sentence"
+                    :style="{
+                      fontSize: baseSizePhone + 2 + 'px'
+                    }"
                   />
                 </template>
               </div>
@@ -130,6 +143,11 @@
               v-for="({ chs, pinyin }, k) in item.wordsList"
               :key="`${isPyTop ? 'pinyin' : 'chs'}-${k}`"
               :class="[`${isPyTop ? 'pinyin' : 'chs'}`]"
+              :style="{
+                fontSize: isPyTop
+                  ? baseSizePhone + 'px'
+                  : baseSizePhone + 2 + 'px'
+              }"
             >
               {{ isPyTop ? pinyin : chs }}
             </span>
@@ -137,11 +155,22 @@
               v-for="({ chs, pinyin }, k) in item.wordsList"
               :key="`${isPyTop ? 'chs' : 'pinyin'}-${k}`"
               :class="[`${isPyTop ? 'chs' : 'pinyin'}`]"
+              :style="{
+                fontSize: isPyTop
+                  ? baseSizePhone + 2 + 'px'
+                  : baseSizePhone + 'px'
+              }"
             >
               {{ isPyTop ? chs : pinyin }}
             </span>
           </template>
-          <span :class="['chs']" v-else>
+          <span
+            :class="['chs']"
+            v-else
+            :style="{
+              fontSize: baseSizePhone + 2 + 'px'
+            }"
+          >
             {{ item.sentence }}
           </span>
         </span>
@@ -172,9 +201,8 @@ export default {
       type: String,
       required: true
     },
-    isPhone: {
-      type: Boolean,
-      required: true
+    baseSizePhone: {
+      type: Number
     }
   },
   data() {
@@ -459,7 +487,7 @@ export default {
 
   &-options {
     width: 100%;
-    background-color: #f7f7f7;
+    // background-color: #f7f7f7;
     border: 1px solid #dedede;
     border-radius: 8px;
     padding: 24px;
@@ -467,15 +495,15 @@ export default {
     .draggable-options {
       display: flex;
       flex-wrap: wrap;
-      column-gap: 16px;
-      row-gap: 24px;
+      column-gap: 6px;
+      row-gap: 6px;
 
       .drag-option {
-        min-width: 96px;
+        min-width: 66px;
         // height: 58px;
         text-align: center;
-        padding: 8px 12px;
-        background-color: #fff;
+        padding: 4px 10px;
+        // background-color: #fff;
         border: 1px solid #dedede;
         border-radius: 8px;
       }
@@ -485,13 +513,13 @@ export default {
     .select-drag-options {
       padding: 10px;
       .draggable-options {
-        gap: 10px;
+        gap: 6px;
       }
     }
   }
   &-sentences {
     .drag-sentence {
-      margin-top: 24px;
+      margin-top: 10px;
       display: flex;
       align-items: center;
       flex-flow: wrap;
@@ -525,10 +553,10 @@ export default {
       }
 
       &-item {
-        padding: 8px 12px;
+        padding: 4px 10px;
         // height: 58px;
-        height: 42px;
-        background-color: #fff;
+        min-height: 34px;
+        // background-color: #fff;
         border: 1px solid #dedede;
         border-radius: 8px;
         margin-left: 4px;
@@ -544,7 +572,7 @@ export default {
 
         &.space {
           min-width: 96px;
-          background-color: #f1f1f1;
+          // background-color: #f1f1f1;
         }
 
         .drag-list {

src/components/Adult/phonePreview/TableView.vue

@@ -236,7 +236,7 @@ export default {
           padding: 8px;
         }
         td {
-          background: #ffffff;
+          // background: #ffffff;
           border: 1px solid #e2cfc1;
           // min-height: 64px;
           height: 64px;
@@ -277,6 +277,7 @@ export default {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center;
+    background: transparent;
   }
 }
 </style>

src/components/Adult/phonePreview/VoiceMatrix.vue

@@ -370,6 +370,7 @@
         @handleParentPlay="pauseOtherAudio"
         @sentPause="sentPause"
         @handleWav="handleWav"
+        :baseSizePhone="baseSizePhone"
       />
       <AudioCompare
         :style="{ flex: 1 }"

src/components/Adult/preview/InputHasRecord.vue

@@ -899,4 +899,9 @@ export default {
     }
   }
 }
+.InputHasRecordNPC-phone {
+  .el-textarea__inner {
+    background: transparent;
+  }
+}
 </style>