lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: header background

This commit is contained in:
FairyEver 2021-11-24 20:44:51 +08:00
parent 0f4af75c75
commit f3acf6a0ab
3 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
d2/components/d2/admin/layout/dashboard/index.vue
View File

@ -1,4 +1,12 @@
<template>
<!-- side -->
<d2-flex class="layout__side" dir="top">
<d2-scroll class="side__scroll">
<div class="side__container">
<d2-admin-layout-dashboard-menu-side/>
</div>
</d2-scroll>
</d2-flex>
<!-- body -->
<div class="layout__body">
<d2-scroll class="body__scroll">
@ -6,6 +14,7 @@
</d2-scroll>
</div>
<!-- header -->
<div class="layout__header-background layout__blur"/>
<d2-flex class="layout__header" dir="left" box="justify">
<d2-flex class="header__button-group">
<d2-flex class="header__button header__button--icon" tag="button" @click="collapsedToggle" center>
@ -20,16 +29,8 @@
<d2-admin-layout-dashboard-header-action-news/>
</d2-flex>
</d2-flex>
<!-- side -->
<d2-flex class="layout__side" dir="top">
<d2-scroll class="side__scroll">
<div class="side__container">
<d2-admin-layout-dashboard-menu-side/>
</div>
</d2-scroll>
</d2-flex>
<!-- logo -->
<div class="layout__logo layout__blur">
<div class="layout__logo">
<d2-flex class="h-full w-full" center>
Dashboard
</d2-flex>

67
d2/style/themes/default/src/layout/dashboard/src/style.scss
View File

@ -9,10 +9,29 @@ html, body, #app {
background-color: --var('color-bg-app');
}
.layout__body {
background-color: --var('color-bg-content');
.layout__side {
@apply cursor-pointer select-none;
position: absolute;
top: --var('header-height');
top: 0px;
bottom: 0px;
left: 0px;
width: --var('side-width');
>.side__scroll {
@apply w-full h-full;
>.os-scrollbar-vertical {
top: --var('logo-height');
bottom: --var('footer-height');
}
.side__container {
padding-top: calc(#{--var('logo-height')} + #{--var('logo-border-width')});
padding-bottom: calc(#{--var('footer-height')} + #{--var('footer-border-width')});
}
}
}
.layout__body {
position: absolute;
top: 0px;
left: --var('side-width');
right: 0px;
bottom: 0px;
@ -20,14 +39,24 @@ html, body, #app {
@apply w-full h-full;
}
}
.layout__header-background,
.layout__header {
position: absolute;
height: --var('header-height');
top: 0px;
left: 0px;
right: 0px;
}
.layout__header-background {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.layout__header {
@apply cursor-pointer select-none;
position: absolute;
top: 0px;
left: --var('side-width');
right: 0px;
height: --var('header-height');
>.header__button-group {
padding: 0 calc(#{--var('item-margin-x')} / 2);
>.header__button {
@ -67,34 +96,12 @@ html, body, #app {
}
}
.layout__side {
@apply cursor-pointer select-none;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: --var('side-width');
>.side__scroll {
@apply w-full h-full;
>.os-scrollbar-vertical {
top: --var('logo-height');
bottom: --var('footer-height');
}
.side__container {
padding-top: calc(#{--var('logo-height')} + #{--var('logo-border-width')});
padding-bottom: calc(#{--var('footer-height')} + #{--var('footer-border-width')});
}
}
}
.layout__logo {
position: absolute;
top: 0px;
left: 0px;
height: --var('logo-height');
width: --var('logo-width');
border-bottom-style: solid;
border-bottom-width: --var('logo-border-width');
}
.layout__footer {
@ -103,6 +110,7 @@ html, body, #app {
left: 0px;
height: --var('footer-height');
width: --var('footer-width');
box-sizing: content-box;
border-top-style: solid;
border-top-width: --var('footer-border-width');
}
@ -111,7 +119,6 @@ html, body, #app {
background-color: --var('color-bg-app-rgba-blur');
backdrop-filter: blur(8px);
border-color: --var('color-bg-app');
box-sizing: content-box;
}
@-moz-document url-prefix() {
.layout__blur {

2
d2/style/themes/default/src/layout/dashboard/src/var.scss
View File

@ -21,7 +21,7 @@ $color-bg-app: #ECF1F6;
#{--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-moz')}: rgba($color-bg-app, 0.96);
#{--key('color-bg-content')}: #FFFFFF;
// #{--key('color-bg-content')}: #FFFFFF;
#{--key('color-bg-popup')}: #FFFFFF;
#{--key('color-bg-item-hover')}: #F6F8FB;
#{--key('color-bg-item-selected')}: #FFFFFF;