md

src/modules/card/assets/styles/card-design.scss

@@ -6,7 +6,7 @@
   // page-box
   .page-box {
     // box-shadow: $--shadow-light;
-    // box-shadow: 0 0 1px #000;
+    box-shadow: 0 0 1px #666;
     &::before {
       content: "";
       position: absolute;
@@ -386,7 +386,7 @@
   top: 0;
   left: 240px;
   right: 0;
-  height: 70px;
+  height: 60px;
   z-index: 99;
   background-color: $--color-background;
   display: flex;
@@ -394,7 +394,7 @@
   justify-content: space-between;
 
   .control-right {
-    padding: 20px 20px 20px 0;
+    padding: 15px 15px 15px 0;
     width: 300px;
     text-align: right;
     flex-grow: 0;
@@ -405,7 +405,7 @@
     }
   }
   .control-left {
-    padding: 20px 0 20px 20px;
+    padding: 15px 0 15px 15px;
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: auto;

src/modules/paper-export/assets/styles/paper-temp-preview.scss

@@ -4,11 +4,18 @@
       &.page-box-0 {
         .page-main-inner {
           padding: 60px 40px 60px 160px;
+
+          &.page-main-noside {
+            padding: 60px;
+          }
         }
       }
       &.page-box-1 {
         .page-main-inner {
           padding: 60px 160px 60px 40px;
+          &.page-main-noside {
+            padding: 60px;
+          }
         }
         .page-column-side {
           right: 40px;
@@ -28,11 +35,17 @@
       &.page-box-0 {
         .page-main-inner {
           padding: 40px 20px 40px 130px;
+          &.page-main-noside {
+            padding: 40px;
+          }
         }
       }
       &.page-box-1 {
         .page-main-inner {
           padding: 40px 130px 40px 20px;
+          &.page-main-noside {
+            padding: 40px;
+          }
         }
         .page-column-side {
           right: 20px;
@@ -42,6 +55,7 @@
       }
     }
   }
+
   .page-column-side {
     position: absolute;
     top: 60px;
@@ -62,13 +76,6 @@
     .element-item {
       position: absolute;
     }
-
-    // .elem-text {
-    //   writing-mode: vertical-rl;
-    //   transform: rotate(180deg);
-    //   text-orientation: sideways;
-    //   height: 100%;
-    // }
   }
 
   .page-column-element .element-item::before {

src/modules/paper-export/components/PaperTemplateDesign.vue

@@ -84,7 +84,12 @@
           ]"
         >
           <!-- inner edit area -->
-          <div class="page-main-inner">
+          <div
+            :class="[
+              'page-main-inner',
+              { 'page-main-noside': !curPage.showSide },
+            ]"
+          >
             <div
               :class="['page-main', `page-main-${curPage.columns.length}`]"
               :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
@@ -120,6 +125,7 @@
           </div>
           <!-- side edit   -->
           <paper-side-edit
+            v-if="curPage.showSide"
             class="page-column-side"
             :data="curPage.sides"
           ></paper-side-edit>
@@ -129,8 +135,13 @@
 
     <!-- all topics -->
     <div class="topic-list">
-      <div :class="['page-box', `page-box-${curPage.pageSize}`]">
-        <div class="page-main-inner">
+      <div :class="['page-box', `page-box-${curPage.pageSize}`, `page-box-0`]">
+        <div
+          :class="[
+            'page-main-inner',
+            { 'page-main-noside': !curPage.showSide },
+          ]"
+        >
           <div
             :class="['page-main', `page-main-${curPage.columnNumber}`]"
             :style="{ margin: `0 -${curPage.columnGap / 2}px` }"

src/modules/paper-export/elements/pane-box/ElemPaneBox.vue

@@ -7,6 +7,7 @@
           v-for="element in data.elements"
           :key="element.id"
           :data="element"
+          class="elem-pane-box-element"
         ></box-element-preview>
       </div>
     </div>

src/modules/paper-export/store/index.js

@@ -89,8 +89,10 @@ const checkElementisCovered = (id, type) => {
 
   if (type === "PANE_BOX") {
     const limitHeight = elementDom.offsetHeight;
+    const limitWidth = elementDom.offsetWidth;
 
-    let elementHeights = [];
+    let elementHeights = [],
+      elementWidths = [];
     const elementChildren = elementDom.querySelector(
       ".elem-pane-box-elements"
     ).childNodes;
@@ -103,8 +105,16 @@ const checkElementisCovered = (id, type) => {
       elementHeights.push(
         node.firstChild.offsetHeight + node.firstChild.offsetTop
       );
+      elementWidths.push(
+        node.firstChild.offsetWidth + node.firstChild.offsetLeft
+      );
     });
-    return elementHeights.some((item) => item > limitHeight);
+
+    console.log(elementWidths, limitWidth);
+    return (
+      elementHeights.some((item) => item > limitHeight) ||
+      elementWidths.some((item) => item > limitWidth)
+    );
   }
 
   return elementDom.offsetHeight < elementDom.firstChild.offsetHeight;
@@ -237,6 +247,11 @@ const actions = {
       }
       if (isResetId) {
         element.id = getElementId();
+        if (element.elements && element.elements.length) {
+          element.elements.forEach((child) => {
+            child.container.id = element.id;
+          });
+        }
       }
     });
   },