位置调整修改更接近真实预览

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -1,6 +1,6 @@
 <template>
   <main ref="canvas" class="canvas" :style="computedCanvasStyle()">
-    <template v-if="isEdit">
+    <div v-if="isEdit" class="edit">
       <div v-for="item in lineList" :key="item[0]" class="group-line" :style="computedGroupLine(item)"></div>
       <span class="drag-line" data-row="-1"></span>
       <!-- 行 -->
@@ -104,7 +104,7 @@
         <span v-if="i < data.row_list.length - 1" :key="`row-${row.row_id}`" class="drag-line" :data-row="i"></span>
       </template>
       <span class="drag-line" :data-row="data.row_list.length - 1"></span>
-    </template>
+    </div>
 
     <PreviewEdit
       v-else
@@ -1704,125 +1704,126 @@ export default {
 
 <style lang="scss" scoped>
 .canvas {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  width: $courseware-width;
-  min-height: calc(100% - 6px);
-  padding: 24px;
-  margin: 0 auto;
-  background-color: #fff;
-  background-repeat: no-repeat;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1; // 背景在最底层
-    width: 100%;
-    height: 100%;
-    pointer-events: none; // 背景不接受鼠标事件
-    content: '';
+  .edit {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    width: $courseware-width;
+    min-height: calc(100vh - 240px);
+    padding: 24px;
+    margin: 0 auto;
     background-color: #fff;
-    background-image: var(--bg-image);
-    background-repeat: var(--bg-repeat);
-    background-position: var(--bg-position);
-    background-size: var(--bg-size);
-    border: var(--bg-border);
-    border-radius: var(--bg-border-radius-top-left) var(--bg-border-radius-top-right)
-      var(--bg-border-radius-bottom-right) var(--bg-border-radius-bottom-left);
-    opacity: var(--bg-opacity);
-  }
-
-  .group-line {
-    position: absolute;
-    left: 11px;
-    width: 1px;
-    background-color: #165dff;
-  }
-
-  .row {
-    display: grid;
-    row-gap: 16px;
 
-    .row-checkbox {
+    &::before {
       position: absolute;
-      left: 4px;
+      top: 0;
+      left: 0;
+      z-index: -1; // 背景在最底层
+      width: 100%;
+      height: 100%;
+      pointer-events: none; // 背景不接受鼠标事件
+      content: '';
+      background-color: #fff;
+      background-image: var(--bg-image);
+      background-repeat: var(--bg-repeat);
+      background-position: var(--bg-position);
+      background-size: var(--bg-size);
+      border: var(--bg-border);
+      border-radius: var(--bg-border-radius-top-left) var(--bg-border-radius-top-right)
+        var(--bg-border-radius-bottom-right) var(--bg-border-radius-bottom-left);
+      opacity: var(--bg-opacity);
     }
 
-    > .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
-      left: 6px;
+    .group-line {
+      position: absolute;
+      left: 11px;
+      width: 1px;
+      background-color: #165dff;
     }
 
-    .drag-vertical-line.grid-line-right,
-    .drag-vertical-line.grid-line-left {
-      top: 25%;
-      height: 50%;
-    }
+    .row {
+      display: grid;
+      row-gap: 16px;
 
-    .drag-vertical-line.col-start {
-      left: -12px;
-    }
+      .row-checkbox {
+        position: absolute;
+        left: 4px;
+      }
 
-    .drag-vertical-line.col-end {
-      right: -8px;
-    }
+      > .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
+        left: 6px;
+      }
 
-    .col {
-      display: grid;
+      .drag-vertical-line.grid-line-right,
+      .drag-vertical-line.grid-line-left {
+        top: 25%;
+        height: 50%;
+      }
 
-      .drag-vertical-line:first-child {
-        left: -8px;
+      .drag-vertical-line.col-start {
+        left: -12px;
       }
 
-      .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
-        left: 6px;
+      .drag-vertical-line.col-end {
+        right: -8px;
       }
 
-      .drag-vertical-line:last-child {
-        right: -4px;
+      .col {
+        display: grid;
+
+        .drag-vertical-line:first-child {
+          left: -8px;
+        }
+
+        .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
+          left: 6px;
+        }
+
+        .drag-vertical-line:last-child {
+          right: -4px;
+        }
       }
     }
-  }
 
-  .drag-line {
-    z-index: 2;
-    width: calc(100% - 16px);
-    height: 4px;
-    margin: 0 8px;
-    background-color: #379fff;
-    border-radius: 4px;
-    opacity: 0;
-
-    &.drag-row {
-      width: 50%;
-      margin-left: 25%;
-      background-color: $right-color;
-    }
+    .drag-line {
+      z-index: 2;
+      width: calc(100% - 16px);
+      height: 4px;
+      margin: 0 8px;
+      background-color: #379fff;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.drag-row {
+        width: 50%;
+        margin-left: 25%;
+        background-color: $right-color;
+      }
 
-    &.grid-line:not(:first-child, :last-child) {
-      position: relative;
-      top: 6px;
-    }
+      &.grid-line:not(:first-child, :last-child) {
+        position: relative;
+        top: 6px;
+      }
 
-    &.grid-line {
-      background-color: #f43;
+      &.grid-line {
+        background-color: #f43;
+      }
     }
-  }
 
-  .drag-vertical-line {
-    position: relative;
-    z-index: 2;
-    width: 4px;
-    height: 100%;
-    background-color: #f43;
-    border-radius: 4px;
-    opacity: 0;
-
-    &.grid-line {
+    .drag-vertical-line {
+      position: relative;
+      z-index: 2;
+      width: 4px;
+      height: 100%;
       background-color: #f43;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.grid-line {
+        background-color: #f43;
+      }
     }
   }
 }

src/views/book/courseware/create/components/PreviewEdit.vue

@@ -343,9 +343,20 @@ export default {
 
 <style lang="scss" scoped>
 .preview {
+  position: relative;
   display: flex;
   flex-direction: column;
   row-gap: $component-spacing;
+  width: calc($courseware-width + 200px);
+  height: 100%;
+  min-height: calc(100vh - 240px);
+  padding: calc($courseware-top-padding + 15px) 100px calc($courseware-bottom-padding + 15px) 100px;
+  margin: 0 auto;
+  overflow: hidden;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
 
   .height-prompt {
     position: absolute;

src/views/book/courseware/create/components/question/table/Table.vue

@@ -201,7 +201,7 @@ export default {
 
           return row.concat(Array.from({ length: diff }, getOption));
         });
-        this.data.answer_lists = this.data.answer_lists.map((row) => {
+        this.data.answer_lists = this.data.answer_lists?.map((row) => {
           if (val < row.length) {
             return row.slice(0, val);
           }

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -992,23 +992,11 @@ export default {
   padding-top: $courseware-top-padding;
   padding-bottom: $courseware-bottom-padding;
   margin: 15px 0;
-  overflow: hidden;
   background-color: #fff;
   background-repeat: no-repeat;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
 
-  &::before,
-  &::after {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 15px;
-    pointer-events: none;
-    content: '';
-    background: $courseware-bgColor;
-  }
-
   &::before {
     top: -15px;
   }

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

@@ -33,7 +33,7 @@
                 {{ multilingual.find((item) => item.type === getLang())?.translation }}
               </div>
             </div>
-            <div v-else :key="mark" style="width: calc(50% - 36px)"></div>
+            <div v-else :key="mark" style="width: calc(50% - 36px); padding: 12px 24px"></div>
           </template>
         </li>
       </ul>

src/views/personal_workbench/edit_task/edit/index.vue

@@ -60,6 +60,7 @@
     </div>
 
     <CreatePage ref="create" class="edit-task__content" @goBackPreview="goBackPreview" />
+
     <UseTemplate
       :visible.sync="visibleTemplate"
       @useTemplate="handleUseTemplate"