feat: simple implementation

This commit is contained in:
FairyEver 2021-12-06 15:01:03 +08:00
parent 4ee88aed75
commit 613fd5fc4b
3 changed files with 6 additions and 4 deletions

View File

@ -30,9 +30,11 @@ html, body, #app {
>.body__header { >.body__header {
@apply absolute inset-x-0 overflow-hidden break-words border-b; @apply absolute inset-x-0 overflow-hidden break-words border-b;
top: calc(#{--var('header-height')} + #{--var('header-border-width')}); top: calc(#{--var('header-height')} + #{--var('header-border-width')});
padding: --var('body-padding');
} }
>.body__footer { >.body__footer {
@apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t; @apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
padding: --var('body-padding');
} }
>.body__scroll { >.body__scroll {
@apply absolute inset-0; @apply absolute inset-0;

View File

@ -20,11 +20,11 @@ $color-bg-container: #FFFFFF;
:root { :root {
// color // color
#{--key('color-bg-app')}: $color-bg-app; #{--key('color-bg-app')}: $color-bg-app;
#{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.6); #{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.5);
#{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98); #{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98);
#{--key('color-bg-container')}: $color-bg-container; #{--key('color-bg-container')}: $color-bg-container;
#{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.6); #{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.5);
#{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98); #{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
#{--key('color-bg-popup')}: #FFFFFF; #{--key('color-bg-popup')}: #FFFFFF;

View File

@ -9,10 +9,10 @@
<template> <template>
<d2-admin-layout-dashboard-container> <d2-admin-layout-dashboard-container>
<template #header> <template #header>
<template v-for="n in 30" :key="n">----------</template> <a-button>Button</a-button>
</template> </template>
<template #footer> <template #footer>
<template v-for="n in 30" :key="n">----------</template> <a-button>Button</a-button>
</template> </template>
<ul> <ul>
<li v-for="n in 100" :key="n">{{ n }}</li> <li v-for="n in 100" :key="n">{{ n }}</li>