cip-components/main/framework/top.vue

<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>