update:更新

src/app-register.ts

@@ -145,6 +145,7 @@ import AppIndexViewLayoutTop from './layout/index-view-layout-top/index-view-lay
 import AppGridViewLayout from './layout/grid-view-layout/grid-view-layout.vue';
 import AppEditViewLayout from './layout/edit-view-layout/edit-view-layout.vue';
 import AppMEditViewLayout from './layout/medit-view-layout/medit-view-layout.vue';
+import AppPickUpViewLayout from './layout/pickup-view-layout/pickup-view-layout.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -304,5 +305,6 @@ export const AppComponents = {
         v.component('app-field-image-dynamic', AppFieldImageDynamic);
         v.component('app-todo-list',AppTodoList);
         v.component('extend-action-timeline',ExtendActionTimeline);
+        v.component('app-pickup-view-layout',AppPickUpViewLayout);
     },
 };
\ No newline at end of file

src/layout/pickup-view-layout/pickup-view-layout.scss

+.pickup-grid-view-layout {
+    height: 100%;
+    background-color: transparent;
+    box-shadow: none;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    .view-header__top {
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+    .view-header__content {
+        display: flex;
+        flex-direction: column;
+        padding: 16px 4px 20px 7px;
+        gap: 10px;
+        background: var(--app-color-white);
+        box-sizing: border-box;
+        border: 1px solid var(--app-color-gray-250);
+    }
+    .view-header__bottom {
+        height: 74px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        background-color: transparent;
+        gap: 10px;
+    }
+    >.view-content {
+        flex: auto;
+        height: 0;
+        background: var(--app-color-white);
+        border: 1px solid var(--app-color-gray-200);
+    }
+    >.view-footer {
+        height: 40px;
+        
+    }
+}
\ No newline at end of file

src/layout/pickup-view-layout/pickup-view-layout.vue

+<template>
+    <layout class="pickup-view-layout view-layout">
+        <header class="view-header">
+            <div class="view-header__top">
+                <slot name="headerTop" />
+            </div>
+            <div class="view-header__content">
+                <slot name="headerContent" />
+            </div>
+            <div class="view-header__bottom">
+                <slot name="headerBottom" />
+            </div>   
+        </header>
+        <content class="view-content content-container">
+            <slot name="contentTop"/>
+            <slot />
+            <slot name="contentBottom"/>
+        </content>
+        <footer  class="view-footer">
+            <slot name="footer" />
+        </footer>
+    </layout>
+</template>
+<script lang="ts">
+import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppPickUpViewLayout extends Vue {
+
+}
+</script>
+
+<style lang="scss">
+@import "./pickup-view-layout.scss";
+</style>