refactor: header code refactor
This commit is contained in:
parent
bfa9145a23
commit
0ea7753fe7
|
@ -10,14 +10,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: url($first-screen-img) center center / cover no-repeat;
|
||||
background-position-y: $header-height - 2px;
|
||||
background-position-y: $header-height - $header-progress-height;
|
||||
|
||||
+keep-tablet() {
|
||||
background-position-y: $header-height * 0.9 - 2px;
|
||||
background-position-y: $header-height * 0.9 - $header-progress-height;
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
background-position-y: $header-height * 0.8 - 2px;
|
||||
background-position-y: $header-height * 0.8 - $header-progress-height;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
$header-progress-height = 2.8px;
|
||||
$logo-title-font-size = 2.2rem;
|
||||
$pc-search-icon-font-size = 1.5rem;
|
||||
$menu-bar-line-height = 2.5px;
|
||||
|
@ -12,6 +11,7 @@ $menu-bar-line-height = 2.5px;
|
|||
justify-content: center;
|
||||
background: var(--background-color);
|
||||
padding-top: $header-progress-height;
|
||||
transition();
|
||||
|
||||
hover-style(1.02, 1.02);
|
||||
|
||||
|
@ -42,6 +42,13 @@ $menu-bar-line-height = 2.5px;
|
|||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition();
|
||||
|
||||
.header-shrink & {
|
||||
transform: scale(0.85);
|
||||
transform-origin: left;
|
||||
transition();
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: $logo-title-font-size;
|
||||
|
@ -64,6 +71,7 @@ $menu-bar-line-height = 2.5px;
|
|||
.right {
|
||||
|
||||
.pc {
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -84,13 +92,11 @@ $menu-bar-line-height = 2.5px;
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
&:hover {
|
||||
|
||||
color: var(--default-text-color);
|
||||
a:hover, .active {
|
||||
|
||||
&::after {
|
||||
transition();
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
|
@ -99,28 +105,14 @@ $menu-bar-line-height = 2.5px;
|
|||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--primary-color);
|
||||
|
||||
.header-shrink & {
|
||||
transition();
|
||||
bottom: -($header-shrink-height / 2 - 12);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: var(--second-text-color);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--primary-color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.search {
|
||||
font-size: $pc-search-icon-font-size;
|
||||
margin-left: 26px;
|
||||
|
@ -132,6 +124,7 @@ $menu-bar-line-height = 2.5px;
|
|||
|
||||
}
|
||||
|
||||
|
||||
.mobile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -166,10 +159,14 @@ $menu-bar-line-height = 2.5px;
|
|||
background: var(--default-text-color);
|
||||
transition();
|
||||
|
||||
&::before {
|
||||
.header-drawer-show & {
|
||||
transition();
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $menu-bar-line-height;
|
||||
|
@ -177,15 +174,22 @@ $menu-bar-line-height = 2.5px;
|
|||
transition();
|
||||
}
|
||||
|
||||
|
||||
&::before {
|
||||
top: -6px;
|
||||
|
||||
.header-drawer-show & {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $menu-bar-line-height;
|
||||
background: var(--default-text-color);
|
||||
transition();
|
||||
|
||||
.header-drawer-show & {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -204,9 +208,13 @@ $menu-bar-line-height = 2.5px;
|
|||
transform-origin: top;
|
||||
background: var(--background-color);
|
||||
z-index: $z-index-2;
|
||||
|
||||
transition();
|
||||
|
||||
.header-drawer-show & {
|
||||
transition();
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.drawer-menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -252,90 +260,16 @@ $menu-bar-line-height = 2.5px;
|
|||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.header-drawer-show {
|
||||
opacity: 1 !important;
|
||||
|
||||
.header-content {
|
||||
|
||||
.right {
|
||||
.mobile {
|
||||
.menu-bar {
|
||||
.menu-bar-middle {
|
||||
|
||||
background: transparent;
|
||||
|
||||
&::before {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
|
||||
&::after {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-drawer {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.window-mask {
|
||||
.header-drawer-show & {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.header-wrapper-shrink {
|
||||
|
||||
.header-content {
|
||||
|
||||
.left {
|
||||
transform: scale(0.86);
|
||||
transform-origin: left;
|
||||
transition();
|
||||
}
|
||||
|
||||
.right {
|
||||
|
||||
.pc {
|
||||
|
||||
.menu-list {
|
||||
|
||||
.menu-item {
|
||||
|
||||
a:hover {
|
||||
&::after {
|
||||
transition();
|
||||
bottom: -($header-shrink-height / 2 - 12);
|
||||
}
|
||||
}
|
||||
|
||||
.active::after {
|
||||
transition();
|
||||
bottom: -($header-shrink-height / 2 - 12);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.header-drawer {
|
||||
padding: $header-shrink-height 0 20px 0;
|
||||
}
|
||||
.header-drawer-show {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
// ========================================================================
|
||||
$header-height = 76px; // 头部默认高度
|
||||
$header-shrink-height = $header-height * 0.8; // 头部收缩高度
|
||||
$header-progress-height = 2.8px; // 头部进度条高度
|
||||
$main-content-width = 80%; // 中间内容区域宽度(PC)
|
||||
$main-content-width-tablet = 85%; // 中间内容区域宽度(平板)
|
||||
$main-content-width-mobile = 90%; // 中间内容区域宽度(手机)
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
$header-progress-height = 2.8px;
|
||||
$temp-width = hexo-config('style.left_side_width');
|
||||
$page-aside-width = $temp-width ? convert($temp-width):260px;
|
||||
|
||||
|
@ -34,12 +33,25 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
padding-top: $header-height;
|
||||
position: relative;
|
||||
|
||||
.header-shrink & {
|
||||
padding-top: $header-shrink-height;
|
||||
transition();
|
||||
|
||||
+keep-tablet() {
|
||||
padding-top: $header-height - 8px;
|
||||
padding-top: $header-shrink-height * 0.9;
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
padding-top: $header-height - 16px;
|
||||
padding-top: $header-shrink-height * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
+keep-tablet() {
|
||||
padding-top: $header-height * 0.9;
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
padding-top: $header-height * 0.8;
|
||||
}
|
||||
|
||||
.page-main-content-top {
|
||||
|
@ -48,22 +60,35 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
right: 0;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
z-index: $z-index-5;
|
||||
box-sizing: border-box;
|
||||
transition();
|
||||
|
||||
.header-shrink & {
|
||||
height: $header-shrink-height;
|
||||
|
||||
+keep-tablet() {
|
||||
height: $header-shrink-height * 0.9;
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
height: $header-shrink-height * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+keep-tablet() {
|
||||
height: $header-height * 0.9;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
+keep-mobile() {
|
||||
height: $header-height * 0.8;
|
||||
}
|
||||
|
||||
z-index: $z-index-5;
|
||||
box-sizing: border-box;
|
||||
transition();
|
||||
}
|
||||
|
||||
|
||||
.page-main-content-middle {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
@ -103,33 +128,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-main-content-top-shrink {
|
||||
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 {
|
||||
height: $header-shrink-height;
|
||||
|
||||
+keep-tablet() {
|
||||
height: $header-shrink-height * 0.9;
|
||||
}
|
||||
|
||||
+keep-mobile() {
|
||||
height: $header-shrink-height * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -161,7 +159,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
right: $component-interspace;
|
||||
transition();
|
||||
|
||||
&.shrink {
|
||||
.header-shrink & {
|
||||
top: $header-shrink-height + $component-interspace;
|
||||
|
||||
+keep-tablet() {
|
||||
|
@ -173,6 +171,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
+keep-tablet() {
|
||||
top: $header-height * 0.9 + $component-interspace;
|
||||
right: 10px;
|
||||
|
@ -180,18 +179,18 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
|
|||
transform-origin: right top;
|
||||
}
|
||||
|
||||
|
||||
+keep-mobile() {
|
||||
top: $header-height * 0.8 + $component-interspace;
|
||||
right: 5px;
|
||||
transform: scale(0.72);
|
||||
transform-origin: right top;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-bottom-side-tools {
|
||||
position: fixed;
|
||||
bottom: $component-interspace;
|
||||
bottom: 5%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,47 +1,34 @@
|
|||
KEEP.initHeaderShrink = () => {
|
||||
KEEP.utils.headerShrink = {
|
||||
|
||||
pageTemplateDom: document.querySelector('.page-main-content'),
|
||||
headerDom: document.querySelector('.header-wrapper'),
|
||||
sidebarToolsDom: document.querySelector('.sidebar-tools'),
|
||||
isHeaderShrink: false,
|
||||
isShowHeaderDrawer: false,
|
||||
|
||||
init() {
|
||||
this.headerHeight = this.headerDom.getBoundingClientRect().height;
|
||||
},
|
||||
|
||||
headerShrink() {
|
||||
|
||||
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
|
||||
if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
|
||||
this.isHeaderShrink = true;
|
||||
this.headerDom.classList.add('header-wrapper-shrink');
|
||||
this.pageTemplateDom.classList.add('page-main-content-top-shrink');
|
||||
this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
|
||||
document.body.classList.add('header-shrink');
|
||||
} else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
|
||||
this.isHeaderShrink = false;
|
||||
this.headerDom.classList.remove('header-wrapper-shrink');
|
||||
this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
|
||||
this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
|
||||
document.body.classList.remove('header-shrink');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
initMenuBarButton() {
|
||||
document.querySelector('.menu-bar').addEventListener('click', () => {
|
||||
this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
|
||||
document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
|
||||
this.headerDom.classList.toggle('header-drawer-show');
|
||||
document.body.classList.toggle('header-drawer-show');
|
||||
});
|
||||
},
|
||||
|
||||
initWindowMask() {
|
||||
document.querySelector('.window-mask').addEventListener('click', () => {
|
||||
this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
|
||||
document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
|
||||
this.headerDom.classList.toggle('header-drawer-show');
|
||||
document.body.classList.toggle('header-drawer-show');
|
||||
});
|
||||
},
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue