ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-11-04 10:57:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(GiPageLayout): add collapse mask and remove animation

Browse Source
This commit is contained in:
ppxb
2025-04-09 15:01:27 +08:00
committed by Charles7c
parent c457883ac1
commit 576faac21b
1 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/GiPageLayout/index.vue
View File

@@ -6,16 +6,19 @@
</div> </div>
</a-col> </a-col>
<div v-if="slots.left" class="gi-page-layout__divider" :class="{ none: isCollapsed || !isDesktop }"> <div v-if="slots.left" class="gi-page-layout__divider" :class="{ none: isCollapsed || !isDesktop }">
<div v-if="defaultCollapsed" class="gi-split-button" :class="{ none: isCollapsed || !isDesktop }" @click="toggleCollapsed"> <div v-if="defaultCollapsed" class="gi-split-button" :class="{ none: isCollapsed || !isDesktop }" :style="isCollapsed ? 'left:0px' : 'left:-12px'" @click="toggleCollapsed">
<icon-right v-if="isCollapsed" /> <icon-right v-if="isCollapsed" />
<icon-left v-else /> <icon-left v-else />
</div> </div>
</div> </div>
<a-col v-show="isDesktop || (!isDesktop && isCollapsed)" :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">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<div class="gi-page-layout__body" :style="props.bodyStyle"> <div class="gi-page-layout__body" :style="props.bodyStyle">
<div v-if="!isDesktop && !isCollapsed" class="gi-page-layout__mask"></div>
<slot></slot> <slot></slot>
</div> </div>
</a-col> </a-col>
@@ -144,6 +147,7 @@ watch(() => breakpoint.value, (val) => {
} }
.gi-page-layout__body { .gi-page-layout__body {
position: relative;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -173,7 +177,6 @@ watch(() => breakpoint.value, (val) => {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--color-bg-1); background-color: var(--color-bg-1);
cursor: pointer; cursor: pointer;
transition: all .3s cubic-bezier(.4,0,.2,1);
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
@@ -182,7 +185,18 @@ watch(() => breakpoint.value, (val) => {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
} }
.gi-split-button.none { .gi-page-layout__mask{
content: "";
position: absolute;
top: 0;
left: 0; left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(20px);
z-index: 20;
}
.gi-split-button.none {
left: -12px;
} }
</style> </style>