多选题

src/components/Adult/Preview.vue

@@ -777,6 +777,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template

src/components/Adult/preview/CheckBoxModule.vue

@@ -1,38 +1,48 @@
 <!--  -->
 <template>
-    <div class="Big-Book-prev-Textdes CheckboxModule" v-if="curQue">
-        <h2>{{curQue.title}}</h2>
-        <el-checkbox v-model="curQue.Bookanswer[index]" v-for="(item,index) in curQue.option" :key="index" :readonly="TaskModel=='ANSWER'">{{item.con}}</el-checkbox>
-    </div>
+  <div
+    class="Big-Book-prev-Textdes CheckboxModule"
+    v-if="curQue"
+    :class="[isPhone ? 'CheckboxModule-phone' : '']"
+  >
+    <h2>{{ curQue.title }}</h2>
+    <el-checkbox
+      v-model="curQue.Bookanswer[index]"
+      v-for="(item, index) in curQue.option"
+      :key="index"
+      :readonly="TaskModel == 'ANSWER'"
+      >{{ item.con }}</el-checkbox
+    >
+  </div>
 </template>
 
 <script>
 export default {
   components: {},
-  props: ["curQue","TaskModel"],
+  props: ["curQue", "TaskModel", "isPhone"],
   data() {
     return {
-        userList: []
+      userList: []
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
-      handleData(){
-          let _this = this
-          let userList = []
-          _this.curQue.option.forEach(item => {
-              userList.push(false)
-          });
-          if (!this.curQue.Bookanswer) {
-            this.$set(this.curQue, "Bookanswer", userList);
-          }
+    handleData() {
+      let _this = this;
+      let userList = [];
+      _this.curQue.option.forEach(item => {
+        userList.push(false);
+      });
+      if (!this.curQue.Bookanswer) {
+        this.$set(this.curQue, "Bookanswer", userList);
       }
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      this.handleData()
+    this.handleData();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -42,37 +52,50 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
-.CheckboxModule{
+.CheckboxModule {
+  width: 100%;
+  margin: 0;
+  h2 {
+    margin: 8px 0;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000000;
+  }
+  .el-checkbox {
     width: 100%;
-    margin: 0;
-    h2{
-        margin: 8px 0;
-        font-size: 16px;
-        line-height: 150%;
-        color: #000000;
-    }
-    .el-checkbox{
-        width: 100%;
-        margin: 4px 0;
-    }
+    margin: 4px 0;
+  }
 }
 </style>
 <style lang="scss">
-.CheckboxModule{
-    .el-checkbox__label,.el-checkbox__input.is-checked+.el-checkbox__label{
-        color: #000000;
-        font-size: 16px;
-        line-height: 1.5;
-        font-weight: normal;
-    }
-    .el-checkbox__inner{
-        border-color: #4D91F6;
-    }
+.CheckboxModule {
+  .el-checkbox__label,
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #000000;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: normal;
+  }
+  .el-checkbox__inner {
+    border-color: #4d91f6;
+  }
 }
-
-</style>
+.CheckboxModule-phone {
+  .el-checkbox {
+    display: flex;
+    align-items: flex-start;
+  }
+  .el-checkbox__label {
+    white-space: normal;
+    word-break: break-word;
+  }
+  .el-checkbox__input {
+    margin-top: 5px;
+  }
+}
+</style>