123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <div class="main-framework--top main-framework">
- <header class="main-framework__header">
- <div class="main-framework--top__header">
- <div style="display: flex; flex-grow: 2;">
- <div class="main-framework--top__name main-framework__name">
- <!--使用展开的name数据-->
- <slot name="name" :is-collapse="false"></slot>
- </div>
- <div class="main-framework--top__nav" style="flex-grow: 2">
- <slot name="nav" :is-collapse="false"></slot>
- </div>
- </div>
- <slot name="header"></slot>
- </div>
- </header>
- <div class="main-framework--top__tabs" v-show="withTabs === true">
- <slot name="tabs" ></slot>
- </div>
- <main class="main-framework--top__main main-framework__main">
- <div class="main-framework--top__main__limit">
- <div class="main-framework--top__breadcrumb">
- <!-- <slot name="breadcrumb"></slot>-->
- </div>
- <slot></slot>
- </div>
- </main>
- <footer class="main-framework--top__footer main-framework__footer" v-if="!hideFooter">
- <slot name="footer"></slot>
- </footer>
- </div>
- </template>
- <script>
- import { defineComponent } from 'vue'
- export default defineComponent({
- name: 'MainFrameworkTop',
- props: {
- hideFooter: Boolean,
- layout: String,
- withTabs: Boolean
- }
- })
- </script>
- <style lang="less">
- @footerHeight: 52px;
- @contentWidth: 1260px;
- .main-framework--top{
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: stretch;
- flex-direction: column;
- overflow-x: auto;
- .main-framework__header{
- flex-shrink: 0;
- width: 100%;
- overflow: hidden;
- min-width: @contentWidth;;
- }
- &__header{
- height: var(--main-framework-header-height, 52px);
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-shrink: 0;
- overflow: hidden;
- width: @contentWidth;
- margin: 0 auto;
- }
- &__main{
- flex-shrink: 0;
- width: 100%;
- min-width: @contentWidth;
- height: 0;
- flex-grow: 2;
- box-sizing: border-box;
- overflow: auto;
- &__limit{
- width: @contentWidth;
- height: 100%;
- margin: 0 auto;
- }
- }
- &__footer{
- height: @footerHeight;
- }
- &__name{
- height: var(--main-framework-header-height, 52px);
- display: flex;
- align-items: center;
- justify-content: flex-start;
- padding: 0 20px;
- box-sizing: border-box;
- flex-wrap: nowrap;
- white-space: nowrap;
- position: relative;
- z-index:1;
- }
- &__nav{
- flex-shrink: 0;
- }
- &__breadcrumb{
- position: absolute;
- top: var(--main-framework-header-height, 52px);
- width: @contentWidth;
- margin: 0 auto;
- z-index: 9;
- box-sizing: border-box;
- }
- &__tabs{
- width: @contentWidth;
- margin: 0 auto;
- padding:0;
- box-sizing: border-box;
- }
- }
- </style>
|