refactor: 优化 GiPageLayout 组件布局 header 移动端适配

This commit is contained in:
2025-04-09 21:52:38 +08:00
parent 3159e2ce04
commit 0c77f52eda

View File

@@ -1,6 +1,6 @@
<template> <template>
<a-row align="stretch" :gutter="rowGutter" class="gi-page-layout" :class="getClass"> <a-row align="stretch" :gutter="rowGutter" class="gi-page-layout" :class="getClass">
<a-col v-if="slots.left" v-show="!isCollapsed" v-bind="props.leftColProps" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4"> <a-col v-if="slots.left" v-show="!isCollapsed" v-bind="props.leftColProps" :sm="10" :md="7" :lg="6" :xl="5" :xxl="4">
<div class="gi-page-layout__left" :style="props.leftStyle"> <div class="gi-page-layout__left" :style="props.leftStyle">
<slot name="left"></slot> <slot name="left"></slot>
</div> </div>
@@ -13,7 +13,7 @@
</div> </div>
<a-col :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps"> <a-col :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps">
<div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle"> <div v-if="slots.header" class="gi-page-layout__header" :style="{ ...props.headerStyle, display: !isDesktop && !isCollapsed ? 'none' : 'flex' }">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>