填空拖拽 移动端

src/components/Adult/Preview.vue

@@ -664,6 +664,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template v-if="itemss.type === 'config_table'">

src/components/Adult/preview/FillDrag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fill-drag">
+  <div class="fill-drag" :class="[isPhone ? 'fill-drag-phone' : '']">
     <!-- 选项 -->
     <div class="fill-drag-options">
       <draggable
@@ -40,9 +40,9 @@
         :data-serial="i + 1"
       >
         <!-- 偏旁 -->
-        <span class="drag-fill-space active" v-text="fill.side" />
-
         <div class="drag-fill-container">
+          <span class="drag-fill-space active" v-text="fill.side" />
+
           <span
             v-for="(drag, j) in fill.dragList"
             :key="j"
@@ -109,6 +109,10 @@ export default {
     themeColor: {
       type: String,
       required: true
+    },
+    isPhone: {
+      type: Boolean,
+      required: true
     }
   },
   data() {
@@ -151,7 +155,9 @@ export default {
       if (
         e.to.classList.contains("draggable-fill") &&
         e.relatedContext.component.realList.length > 0
-      ) { return false; }
+      ) {
+        return false;
+      }
       let { fill, space } = e.from.dataset;
       this.curDrag = {
         fillIndex: fill,
@@ -254,7 +260,7 @@ $image-size: 64px;
       margin-top: 24px;
       display: flex;
       flex-wrap: no-wrap;
-      align-items: center;
+      // align-items: center;
       column-gap: 16px;
 
       &::before {
@@ -264,6 +270,7 @@ $image-size: 64px;
         width: 16px;
         font-size: 16px;
         margin-right: 16px;
+        margin-top: 24px;
       }
 
       .drag-fill-container {
@@ -287,8 +294,8 @@ $image-size: 64px;
 
       .drag-delete {
         flex: 1;
-        padding-right: 16px;
-
+        // padding-right: 16px;
+        padding-top: 20px;
         .el-image {
           float: right;
           width: 24px;
@@ -305,5 +312,16 @@ $image-size: 64px;
       }
     }
   }
+  &-phone {
+    .fill-drag-options {
+      padding: 10px;
+    }
+    .draggable-options {
+      gap: 10px;
+    }
+    .fill-drag-fills {
+      margin-left: 0;
+    }
+  }
 }
 </style>