style: optimize the overall style

This commit is contained in:
XPoet 2021-01-04 21:16:07 +08:00
parent 1d6a14de69
commit bfa9145a23
5 changed files with 49 additions and 7 deletions

View File

@ -12,6 +12,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
background: url($first-screen-img) center center / cover no-repeat; background: url($first-screen-img) center center / cover no-repeat;
background-position-y: $header-height - 2px; background-position-y: $header-height - 2px;
+keep-tablet() {
background-position-y: $header-height * 0.9 - 2px;
}
+keep-mobile() {
background-position-y: $header-height * 0.8 - 2px;
}
.content { .content {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;

View File

@ -58,10 +58,9 @@ $menu-bar-line-height = 2.5px;
font-size: $logo-title-font-size * 0.8; font-size: $logo-title-font-size * 0.8;
} }
} }
} }
.right { .right {
.pc { .pc {
@ -317,11 +316,13 @@ $menu-bar-line-height = 2.5px;
a:hover { a:hover {
&::after { &::after {
transition();
bottom: -($header-shrink-height / 2 - 12); bottom: -($header-shrink-height / 2 - 12);
} }
} }
.active::after { .active::after {
transition();
bottom: -($header-shrink-height / 2 - 12); bottom: -($header-shrink-height / 2 - 12);
} }
} }

View File

@ -6,10 +6,10 @@
// layout // layout
// ======================================================================== // ========================================================================
$header-height = 76px; // $header-height = 76px; //
$header-shrink-height = $header-height * 0.8; //
$main-content-width = 80%; // PC $main-content-width = 80%; // PC
$main-content-width-tablet = 85%; // $main-content-width-tablet = 85%; //
$main-content-width-mobile = 90%; // $main-content-width-mobile = 90%; //
$header-shrink-height = 56px; //
$circle-button-width = 40px; // tools $circle-button-width = 40px; // tools
$tools-button-width = 32px; // tools $tools-button-width = 32px; // tools
$component-interspace = 30px; // /PC $component-interspace = 30px; // /PC

View File

@ -50,12 +50,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
height: $header-height; height: $header-height;
+keep-tablet() { +keep-tablet() {
height: $header-height - 8px; height: $header-height * 0.9;
padding-left: 0 !important; padding-left: 0 !important;
} }
+keep-mobile() { +keep-mobile() {
height: $header-height - 16px; height: $header-height * 0.8;
} }
z-index: $z-index-5; z-index: $z-index-5;
@ -106,11 +106,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
.page-main-content-top-shrink { .page-main-content-top-shrink {
transition();
padding-top: $header-shrink-height; padding-top: $header-shrink-height;
transition();
+keep-tablet() {
padding-top: $header-shrink-height * 0.9;
}
+keep-mobile() {
padding-top: $header-shrink-height * 0.8;
}
.page-main-content-top { .page-main-content-top {
height: $header-shrink-height; height: $header-shrink-height;
+keep-tablet() {
height: $header-shrink-height * 0.9;
}
+keep-mobile() {
height: $header-shrink-height * 0.8;
}
} }
} }
@ -145,13 +161,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
right: $component-interspace; right: $component-interspace;
transition(); transition();
&.shrink {
top: $header-shrink-height + $component-interspace;
+keep-tablet() { +keep-tablet() {
top: $header-shrink-height * 0.9 + $component-interspace;
}
+keep-mobile() {
top: $header-shrink-height * 0.8 + $component-interspace;
}
}
+keep-tablet() {
top: $header-height * 0.9 + $component-interspace;
right: 10px; right: 10px;
transform: scale(0.82); transform: scale(0.82);
transform-origin: right top; transform-origin: right top;
} }
+keep-mobile() { +keep-mobile() {
top: $header-height * 0.8 + $component-interspace;
right: 5px; right: 5px;
transform: scale(0.72); transform: scale(0.72);
transform-origin: right top; transform-origin: right top;

View File

@ -3,6 +3,7 @@ KEEP.initHeaderShrink = () => {
pageTemplateDom: document.querySelector('.page-main-content'), pageTemplateDom: document.querySelector('.page-main-content'),
headerDom: document.querySelector('.header-wrapper'), headerDom: document.querySelector('.header-wrapper'),
sidebarToolsDom: document.querySelector('.sidebar-tools'),
isHeaderShrink: false, isHeaderShrink: false,
isShowHeaderDrawer: false, isShowHeaderDrawer: false,
@ -18,10 +19,12 @@ KEEP.initHeaderShrink = () => {
this.isHeaderShrink = true; this.isHeaderShrink = true;
this.headerDom.classList.add('header-wrapper-shrink'); this.headerDom.classList.add('header-wrapper-shrink');
this.pageTemplateDom.classList.add('page-main-content-top-shrink'); this.pageTemplateDom.classList.add('page-main-content-top-shrink');
this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) { } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
this.isHeaderShrink = false; this.isHeaderShrink = false;
this.headerDom.classList.remove('header-wrapper-shrink'); this.headerDom.classList.remove('header-wrapper-shrink');
this.pageTemplateDom.classList.remove('page-main-content-top-shrink'); this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
} }
}, },