fix: #124

Author: ly525

front-end/h5/src/components/core/editor/index.js

@@ -302,26 +302,26 @@ export default {
           <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
             { this._renderMenuContent() }
           </a-layout-sider>
-          <a-layout style="padding: 0 0 24px">
-            <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
-              <div style="text-align: center;">
-                <a-radio-group
-                  size="small"
-                  value={this.isPreviewMode}
-                  onInput={isPreviewMode => {
-                    this.isPreviewMode = isPreviewMode
-                    if (isPreviewMode) {
-                      // 当切换到预览模式的时候，清空当前编辑元素
-                      this.setEditingElement() // 相当于  setEditingElement(null)
-                    }
-                  }}
-                >
-                  {/* 编辑模式、预览模式 */}
-                  <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
-                  <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
-                </a-radio-group>
-              </div>
-              <div class='canvas-wrapper' style={{ transform: `scale(${this.scaleRate})` }}>
+          <a-layout>
+            <div class="mode-toggle-wrapper">
+              <a-radio-group
+                size="small"
+                value={this.isPreviewMode}
+                onInput={isPreviewMode => {
+                  this.isPreviewMode = isPreviewMode
+                  if (isPreviewMode) {
+                    // 当切换到预览模式的时候，清空当前编辑元素
+                    this.setEditingElement() // 相当于  setEditingElement(null)
+                  }
+                }}
+              >
+                {/* 编辑模式、预览模式 */}
+                <a-radio-button label={false} value={false}>{this.$t('editor.centerPanel.mode.edit')}</a-radio-button>
+                <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
+              </a-radio-group>
+            </div>
+            <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
+              <div class='canvas-wrapper'>
                 {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
                 { this.isPreviewMode
                   ? <RenderPreviewCanvas elements={this.elements}/>

front-end/h5/src/components/core/styles/canvas-wrapper.scss

@@ -2,8 +2,19 @@
  * 编辑器中间的画布
  */
 
+$cellSize: 35.6px;
+$designerWidth: 320px;
+$designerHeight: 568px;
+$designerWidthHalf: $designerWidth / 2;
+
 .canvas-wrapper {
-  border: 1px dashed #e7e7e7;
+  position: relative;
+  top: 60px;
+  width: $designerWidth;
+  height: $designerHeight;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid #e7e7e7;
 
   .edit-mode {
     // box-shadow: 0 0 0 1px #d9d9d9;
@@ -13,3 +24,12 @@
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlQTFRF9fX18PDwAAAABQ8/pgAAAAN0Uk5T/yIA41y2EwAAABhJREFUeJxjYIAC0VAQcGCQWgUCDUONBgDH8Fwzu33LswAAAABJRU5ErkJggg==');
   }
 }
+
+// 切换编辑、预览模式 的按钮组
+.mode-toggle-wrapper {
+  position: fixed;
+  z-index: 999;
+  top: 80px;
+  left: calc(50% - 120px);
+  text-align: center;
+}

front-end/h5/src/views/Editor.vue

@@ -8,30 +8,3 @@ export default {
   mixins: [loadPluginMixin]
 }
 </script>
-<style lang="scss">
-$cellSize: 35.6px;
-$designerWidth: 320px;
-$designerHeight: 568px;
-$designerWidthHalf: $designerWidth / 2;
-
-.canvas-wrapper {
-  position: relative;
-  top: 5%;
-  width: $designerWidth;
-  height: $designerHeight;
-  border: 1px #ebeaea solid;
-  margin: 0 auto;
-  background: #fff;
-}
-
-.lb-tabs {
-  box-shadow: none;
-  padding: 4px 8px 4px 0;
-  border: 1px solid #EBEEF5;
-  height: 100%;
-}
-
-.full-height {
-  height: 100% !important;
-}
-</style>