mirror of
https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git
synced 2026-02-17 13:10:05 +08:00
更新
This commit is contained in:
haoouba
File diff suppressed because one or more lines are too long
@@ -46,24 +46,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.joe_mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.35s, opacity 0.35s;
|
||||
z-index: 888;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.joe_header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -72,50 +54,11 @@
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
&__above {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
z-index: 999;
|
||||
background: var(--background);
|
||||
.joe_container {
|
||||
align-items: center;
|
||||
}
|
||||
&-slide {
|
||||
display: none;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: rotate(0deg);
|
||||
background-color: var(--routine);
|
||||
border-radius: 1px;
|
||||
transition: top 0.35s ease, transform 0.35s, opacity 0.35s;
|
||||
&:nth-child(2) {
|
||||
top: 9px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.line:nth-child(1) {
|
||||
top: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.line:nth-child(3) {
|
||||
top: 9px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-logo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -329,14 +272,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&-searchicon {
|
||||
&-searchicon,
|
||||
&-slideicon {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--routine);
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
&-searchicon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
&__below {
|
||||
position: relative;
|
||||
@@ -400,7 +346,7 @@
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 990;
|
||||
z-index: 890;
|
||||
background: var(--background);
|
||||
border-top: 1px solid var(--classC);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
@@ -421,10 +367,11 @@
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--classA);
|
||||
border: 1px solid var(--classB);
|
||||
border-right: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
color: var(--routine);
|
||||
background: var(--classD);
|
||||
}
|
||||
button {
|
||||
padding: 0 10px;
|
||||
@@ -469,11 +416,11 @@
|
||||
}
|
||||
&__slideout {
|
||||
position: fixed;
|
||||
top: 55px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
z-index: 990;
|
||||
z-index: 1020;
|
||||
background: var(--classD);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: hidden;
|
||||
@@ -501,7 +448,6 @@
|
||||
margin-bottom: 15px;
|
||||
background: var(--background);
|
||||
border-radius: var(--radius-wrap);
|
||||
overflow: hidden;
|
||||
padding: 15px;
|
||||
box-shadow: var(--box-shadow);
|
||||
.avatar {
|
||||
@@ -511,19 +457,22 @@
|
||||
border-radius: var(--radius-inner);
|
||||
}
|
||||
.info {
|
||||
overflow: hidden;
|
||||
line-height: 25px;
|
||||
.link,
|
||||
.motto {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.link {
|
||||
display: block;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--main);
|
||||
}
|
||||
.motto {
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--routine);
|
||||
}
|
||||
}
|
||||
@@ -572,6 +521,26 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(5px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.35s, opacity 0.35s;
|
||||
z-index: 880;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
&.slideout {
|
||||
z-index: 1010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.joe_aside {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -117,23 +117,34 @@ html {
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.joe_header__above-nav {
|
||||
display: none;
|
||||
}
|
||||
.joe_header__below {
|
||||
display: none;
|
||||
}
|
||||
.joe_header__above-logo {
|
||||
height: 55px;
|
||||
}
|
||||
.joe_header__above-logo img {
|
||||
max-height: 45px;
|
||||
}
|
||||
.joe_header__searchout {
|
||||
top: 55px;
|
||||
}
|
||||
.joe_header__above-slide {
|
||||
display: block;
|
||||
.joe_header {
|
||||
&__above {
|
||||
.joe_container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-nav {
|
||||
display: none;
|
||||
}
|
||||
&-logo {
|
||||
height: 55px;
|
||||
margin-right: 0;
|
||||
img {
|
||||
max-height: 45px;
|
||||
}
|
||||
}
|
||||
&-searchicon {
|
||||
margin-left: 0;
|
||||
}
|
||||
&-slideicon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&__below {
|
||||
display: none;
|
||||
}
|
||||
&__searchout {
|
||||
top: 55px;
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
height: 180px;
|
||||
@@ -367,7 +378,7 @@ html {
|
||||
}
|
||||
}
|
||||
}
|
||||
.body .text{
|
||||
.body .text {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -350,19 +350,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
/* 小屏幕伸缩侧边栏 */
|
||||
{
|
||||
$('.joe_header__above-slide').on('click', function () {
|
||||
$('.joe_header__above-slideicon').on('click', function () {
|
||||
/* 关闭搜索框 */
|
||||
$('.joe_header__searchout').removeClass('active')
|
||||
/* 处理开启关闭状态 */
|
||||
if ($('.joe_header__slideout').hasClass('active')) {
|
||||
$('body').css('overflow', '')
|
||||
$('.joe_mask').removeClass('active')
|
||||
$('.joe_header__above-slide').removeClass('active')
|
||||
$('.joe_header__mask').removeClass('active slideout')
|
||||
$('.joe_header__slideout').removeClass('active')
|
||||
} else {
|
||||
$('body').css('overflow', 'hidden')
|
||||
$('.joe_mask').addClass('active')
|
||||
$('.joe_header__above-slide').addClass('active')
|
||||
$('.joe_header__mask').addClass('active slideout')
|
||||
$('.joe_header__slideout').addClass('active')
|
||||
}
|
||||
})
|
||||
@@ -372,16 +370,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
{
|
||||
$('.joe_header__above-searchicon').on('click', function () {
|
||||
/* 关闭侧边栏 */
|
||||
$('.joe_header__above-slide').removeClass('active')
|
||||
$('.joe_header__slideout').removeClass('active')
|
||||
/* 处理开启关闭状态 */
|
||||
if ($('.joe_header__searchout').hasClass('active')) {
|
||||
$('body').css('overflow', '')
|
||||
$('.joe_mask').removeClass('active')
|
||||
$('.joe_header__mask').removeClass('active slideout')
|
||||
$('.joe_header__searchout').removeClass('active')
|
||||
} else {
|
||||
$('body').css('overflow', 'hidden')
|
||||
$('.joe_mask').addClass('active')
|
||||
$('.joe_header__mask').addClass('active')
|
||||
$('.joe_header__searchout').addClass('active')
|
||||
}
|
||||
})
|
||||
@@ -389,20 +386,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
/* 点击遮罩层关闭 */
|
||||
{
|
||||
$('.joe_mask').on('click', function () {
|
||||
$('.joe_header__mask').on('click', function () {
|
||||
$('body').css('overflow', '')
|
||||
$('.joe_mask').removeClass('active')
|
||||
$('.joe_header__mask').removeClass('active slideout')
|
||||
$('.joe_header__searchout').removeClass('active')
|
||||
$('.joe_header__slideout').removeClass('active')
|
||||
$('.joe_header__above-slide').removeClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
/* 移动端侧边栏 */
|
||||
/* 移动端侧边栏菜单手风琴 */
|
||||
{
|
||||
$('.joe_header__slideout-menu .panel').on('click', function () {
|
||||
const panelBox = $(this).parent().parent()
|
||||
console.log(panelBox);
|
||||
/* 清除全部内容 */
|
||||
panelBox.find('.panel').not($(this)).removeClass('in')
|
||||
panelBox.find('.panel-body').not($(this).siblings('.panel-body')).stop().hide('fast')
|
||||
|
||||
Reference in New Issue
Block a user