@include b(portlet-layout) { @include set-component-css-var('portlet-layout', $portlet-layout); width: 100%; height: 100%; background-color: getCssVar('portlet-layout','bg-color'); // 标题样式 @include e(caption){ max-width: getCssVar('portlet-layout','caption-max-width'); @include e(caption-text){ font-size: getCssVar('portlet-layout','caption-font-size'); font-weight: getCssVar('portlet-layout','caption-font-weight'); color: getCssVar('portlet-layout','caption-color'); vertical-align: middle; } } // 无头部时的样式 @include when(no-header) { >.#{bem(portlet-layout-content)}{ height: 100%; } } } // 头部样式 @include b(portlet-layout-header) { @include flex(row, space-between, center); height: getCssVar('portlet-layout','header-height'); padding: getCssVar('portlet-layout','header-padding'); margin: getCssVar('portlet-layout','header-margin'); background-color: getCssVar('portlet-layout','header-bg-color'); border-bottom: getCssVar('portlet-layout','header-border-bottom'); } // 内容区样式 @include b(portlet-layout-content) { height: calc(100% - getCssVar('portlet-layout','header-height')); padding: getCssVar('portlet-layout','content-padding'); margin: getCssVar('portlet-layout','content-margin'); background-color: getCssVar('portlet-layout','content-bg-color'); }