移动端连线题

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -37,6 +37,10 @@ const mixin = {
       type: String,
       default: '',
     },
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     showLang() {

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -9,8 +9,13 @@
           <div
             v-for="({ content, mark, multilingual, paragraph_list }, j) in item"
             :key="mark"
-            :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark)]"
-            :style="{ cursor: disabled ? 'default' : 'pointer' }"
+            :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark), { isMobile: isMobile }]"
+            :style="{
+              cursor: disabled ? 'default' : 'pointer',
+              flex: isMobile ? '0 1 auto' : '',
+              width: isMobile ? 'calc(50% - 8px)' : '',
+              overflow: isMobile ? 'auto' : '',
+            }"
             @mousedown="mousedown($event, i, j, mark)"
             @mouseup="mouseup($event, i, j, mark)"
             @click="handleClickConnection($event, i, j, mark)"
@@ -500,7 +505,7 @@ export default {
         background-color: $content-color;
         border-radius: 40px;
 
-        &:not(:last-child) {
+        &:not(:last-child, .isMobile) {
           margin-right: 52px;
         }