Add: 屏幕宽度小于 960px 时,隐藏左侧

This commit is contained in:
XPoet 2020-03-20 19:57:01 +08:00
parent d9ee2d6d41
commit 0c8ac5f2ed
3 changed files with 17 additions and 17 deletions

View File

@ -1,5 +1,5 @@
left-side-width = 30% $left-side-width = 30%
right-side-width = 70% $right-side-width = 70%
.page-container { .page-container {
position absolute position absolute
@ -11,15 +11,26 @@ right-side-width = 70%
.page-left { .page-left {
float: left float: left
width: left-side-width width: $left-side-width
height: 100% height: 100%
position: fixed position: fixed
} }
.page-right { .page-right {
float: right float: right
width: right-side-width width: $right-side-width
height: 100% height: 100%
} }
@media screen and (max-width: 960px) {
.page-left {
display none
}
.page-right {
width: 100%
}
}
} }

View File

@ -1,8 +1 @@
console.log('this is main.js'); console.log('this is main.js');
(() => {
// 选择分页器元素里面的 a 标签,但不包含 .page-number给指定元素追加类 btn 和 设置属性 role=navigation
document.querySelectorAll('.home-container .paginator a:not(.page-number)').forEach(e => {
e.classList.add('btn');
e.setAttribute('role', 'navigation');
});
})();

View File

@ -1,4 +0,0 @@
export const addClass = (element, className) => {
element.classList.add(className)
};