update: 更新

src/components/app-breadcrumb/app-breadcrumb.scss

@@ -6,7 +6,8 @@
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  margin-bottom: 16px;
+  background-color: var(--ey-color-gray-250);
+  padding: 16px 5%;
   .no-redirect {
     color: var(--ey-color-black);
     font-weight: bold;

src/layout/edit-view-layout/edit-view-layout.vue

 <template>
-    <layout :class="layoutClassName">
+    <layout :class="layoutClassName" ref="editViewLayout">
         <header class="view-header">
             <div class="view-header__top">
                 <slot name="headerTop" />
@@ -41,7 +41,7 @@ export default class AppEditViewLayout extends Vue {
      * @type {boolean}
      * @memberof AppEditViewLayout
      */
-    @Prop({ default: true }) public viewDefaultUsage?: boolean;
+    @Prop({ default: false }) public viewDefaultUsage?: boolean;
 
     /**
      * 布局类名
@@ -54,6 +54,21 @@ export default class AppEditViewLayout extends Vue {
         'view-default-usage': this.viewDefaultUsage ? true :false}
     }
 
+    mounted(){
+      if (this.viewDefaultUsage) {
+        const layout:any = this.$refs.editViewLayout;
+        if (layout && layout.$el ){
+          const header = layout.$el.querySelector('.view-header');
+          const content = layout.$el.querySelector('.view-content');
+          console.log(layout, header, content);
+          setTimeout(() => {
+            const height = header.offsetHeight;
+            content.style.marginTop = height + 'px';
+          }, 500);
+        }
+      }
+    }
+
 }
 </script>
 

src/layout/index-view-layout-top/index-view-layout-top.scss

@@ -38,7 +38,7 @@
     .index-view-content {
         height: calc(100% - 64px);
         overflow: auto;
-        padding: 20px 80px 0 80px;
+        padding: 0 5%;
         background-color: var(--ey-color-gray-250);
         display: flex;
         flex-direction: column;
@@ -73,13 +73,14 @@
   .index-view-content{
     // 编辑视图默认使用
     .edit-view-layout.view-default-usage{
-      // 为什么写在这边，因为只有上布局会有copyright，这里算高度算上
-      height: calc(100% - 130px);
-      display: flex;
-      flex-direction: column;
-      .view-content{
-        flex: 1;
-        overflow-y: auto;
+      position: inherit;
+      .view-header{
+        position: absolute;
+        z-index: 100;
+        top: 106px;
+        width: calc(90% - 4px);
+        background-color: var(--ey-color-white);
+        border-radius: 6px 6px 0 0;
       }
     }
     // 表格视图默认使用

src/layout/index-view-layout-top/index-view-layout-top.vue

@@ -11,8 +11,8 @@
                 <slot name="headerRight" />
             </div>
         </header>
+        <slot name="breadcrumb" />
         <content class="index-view-content">
-            <slot name="breadcrumb" />
             <slot name="navPos" />
             <div class="copyright-notice">
                 <div class="notice">Copyright 1999-2021 Ernst & Young. All Rights Reserved.</div>