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,6 +46,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -53,6 +71,9 @@
|
||||
background: var(--background);
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
|
||||
&__above {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
background: var(--background);
|
||||
.joe_container {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -308,6 +329,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&-searchicon {
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--routine);
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&__below {
|
||||
position: relative;
|
||||
@@ -366,6 +395,78 @@
|
||||
transition: width 0.35s;
|
||||
}
|
||||
}
|
||||
&__searchout {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 990;
|
||||
background: var(--background);
|
||||
border-top: 1px solid var(--classC);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
transition: transform 0.35s, visibility 0.35s;
|
||||
visibility: hidden;
|
||||
&.active {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&-inner {
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
.search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--classA);
|
||||
border-right: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
color: var(--routine);
|
||||
}
|
||||
button {
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: var(--theme);
|
||||
color: #fff;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: var(--routine);
|
||||
padding: 15px 0 10px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: var(--routine);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -5px -5px;
|
||||
.item {
|
||||
padding: 5px;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.joe_aside {
|
||||
@@ -866,6 +967,7 @@
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
transition: color 0.35s;
|
||||
font-weight: normal;
|
||||
&:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
@@ -881,7 +983,8 @@
|
||||
text-overflow: ellipsis;
|
||||
color: var(--minor);
|
||||
word-break: break-all;
|
||||
line-height: 26px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.line {
|
||||
@@ -1006,7 +1109,7 @@
|
||||
}
|
||||
}
|
||||
.information {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
@@ -1014,7 +1117,7 @@
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1050,14 +1153,14 @@
|
||||
}
|
||||
&.multiple {
|
||||
.information {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.thumbnail {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 180px;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,317 +1,318 @@
|
||||
/* 首页样式 */
|
||||
.joe_index {
|
||||
border-radius: var(--radius-wrap);
|
||||
padding: 0 15px;
|
||||
background: var(--background);
|
||||
box-shadow: var(--box-shadow);
|
||||
&__banner {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
&-recommend {
|
||||
width: 270px;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.noswiper {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
margin-left: 0;
|
||||
.item:first-child {
|
||||
margin-bottom: 0;
|
||||
margin-right: 7.5px;
|
||||
}
|
||||
.item:last-child {
|
||||
margin-left: 7.5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: var(--radius-inner);
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.35s;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
&_type {
|
||||
background-image: linear-gradient(to right, #fc712a, #f84c39);
|
||||
background-color: #f84c39;
|
||||
padding: 0 5px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&_title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__hot {
|
||||
padding-top: 15px;
|
||||
&-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 15px;
|
||||
.item {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-inner);
|
||||
.link {
|
||||
display: block;
|
||||
.inner {
|
||||
position: relative;
|
||||
&:hover {
|
||||
.image {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.title {
|
||||
background: var(--classC);
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
.title {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
color: var(--minor);
|
||||
background: var(--classD);
|
||||
transition: background 0.35s;
|
||||
}
|
||||
.views {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background-image: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__ad {
|
||||
padding-top: 15px;
|
||||
&-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-inner);
|
||||
transition: opacity 0.35s;
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
color: #ebebeb;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--classC);
|
||||
&-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--routine);
|
||||
font-weight: 500;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
user-select: none;
|
||||
transition: color 0.35s;
|
||||
&.active {
|
||||
color: var(--theme);
|
||||
}
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--theme);
|
||||
transition: left 0.35s, width 0.35s;
|
||||
}
|
||||
}
|
||||
&-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 40px;
|
||||
svg {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
a {
|
||||
color: var(--minor);
|
||||
line-height: 20px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.35s;
|
||||
&:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
border-radius: var(--radius-wrap);
|
||||
padding: 0 15px;
|
||||
background: var(--background);
|
||||
box-shadow: var(--box-shadow);
|
||||
&__banner {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
&-recommend {
|
||||
width: 270px;
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.noswiper {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
margin-left: 0;
|
||||
.item:first-child {
|
||||
margin-bottom: 0;
|
||||
margin-right: 7.5px;
|
||||
}
|
||||
.item:last-child {
|
||||
margin-left: 7.5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: var(--radius-inner);
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: opacity 0.35s;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
&_type {
|
||||
background-image: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);
|
||||
background-color: #8695e6;
|
||||
padding: 0 5px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&_title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__hot {
|
||||
padding-top: 15px;
|
||||
&-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 15px;
|
||||
.item {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-inner);
|
||||
.link {
|
||||
display: block;
|
||||
.inner {
|
||||
position: relative;
|
||||
&:hover {
|
||||
.image {
|
||||
opacity: 0.85;
|
||||
}
|
||||
.title {
|
||||
background: var(--classC);
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
.title {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
padding: 0 8px;
|
||||
line-height: 32px;
|
||||
color: var(--minor);
|
||||
background: var(--classD);
|
||||
transition: background 0.35s;
|
||||
}
|
||||
.views {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background-image: linear-gradient(to right, #fc712a, #f84c39);
|
||||
background-color: #f84c39;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__ad {
|
||||
padding-top: 15px;
|
||||
&-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-inner);
|
||||
transition: opacity 0.35s;
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 2px 5px;
|
||||
border-radius: 2px;
|
||||
color: #ebebeb;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--classC);
|
||||
&-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--routine);
|
||||
font-weight: 500;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
user-select: none;
|
||||
transition: color 0.35s;
|
||||
&.active {
|
||||
color: var(--theme);
|
||||
}
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--theme);
|
||||
transition: left 0.35s, width 0.35s;
|
||||
}
|
||||
}
|
||||
&-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 40px;
|
||||
svg {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
a {
|
||||
color: var(--minor);
|
||||
line-height: 20px;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.35s;
|
||||
&:hover {
|
||||
color: var(--theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: 335px;
|
||||
--swiper-theme-color: #fff;
|
||||
border-radius: var(--radius-inner);
|
||||
.item {
|
||||
display: block;
|
||||
height: 335px;
|
||||
border-radius: var(--radius-inner);
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.35s;
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&.swiper-container-horizontal {
|
||||
.swiper-pagination-bullets {
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: auto;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
&.swiper-container-vertical {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
transition: background 0.35s, right 0.35s, left 0.35s;
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&::after {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: -27px;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: -27px;
|
||||
}
|
||||
&:hover {
|
||||
.swiper-button-next {
|
||||
right: 10px;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: 335px;
|
||||
--swiper-theme-color: #fff;
|
||||
border-radius: var(--radius-inner);
|
||||
.item {
|
||||
display: block;
|
||||
height: 335px;
|
||||
border-radius: var(--radius-inner);
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.35s;
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
&.swiper-container-horizontal {
|
||||
.swiper-pagination-bullets {
|
||||
bottom: unset;
|
||||
left: unset;
|
||||
width: auto;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
&.swiper-container-vertical {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
transition: background 0.35s, right 0.35s, left 0.35s;
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&::after {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: -27px;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: -27px;
|
||||
}
|
||||
&:hover {
|
||||
.swiper-button-next {
|
||||
right: 10px;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,360 @@
|
||||
/* 基类：基于 最大屏幕 + 有侧边栏 下进行适配 */
|
||||
|
||||
html {
|
||||
@media (max-width: 1760px) {
|
||||
#live2d-widget {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.joe_video__list-item {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.joe_live__play-player {
|
||||
height: 500px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 230px;
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 150px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.joe_wallpaper__list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.joe_detail__friends {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.joe_video__list-item {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.joe_video__player-play {
|
||||
height: 450px;
|
||||
}
|
||||
.joe_live__list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.joe_live__play-player {
|
||||
height: 450px;
|
||||
}
|
||||
.joe_detail__article-player {
|
||||
height: 450px;
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 125px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 200px;
|
||||
}
|
||||
.joe_index__ad-link .image {
|
||||
height: 180px;
|
||||
}
|
||||
.joe_index__hot-list .item .link .inner .image {
|
||||
height: 90px;
|
||||
}
|
||||
.joe_index__banner {
|
||||
display: block;
|
||||
}
|
||||
.joe_index__banner-recommend {
|
||||
padding-top: 15px;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
&.noswiper {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.joe_index__banner-recommend .item {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.joe_index__hot-list {
|
||||
column-gap: 10px;
|
||||
}
|
||||
.joe_video__list-item .item .thumb {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.joe_aside {
|
||||
display: none;
|
||||
}
|
||||
.joe_video__list-item .item .thumb {
|
||||
height: 220px;
|
||||
}
|
||||
.joe_video__source-list {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.joe_live__play-player {
|
||||
height: 420px;
|
||||
}
|
||||
.joe_video__player-play {
|
||||
height: 420px;
|
||||
}
|
||||
.joe_detail__article-player {
|
||||
height: 420px;
|
||||
}
|
||||
.swiper-container {
|
||||
height: 300px;
|
||||
}
|
||||
.swiper-container .item {
|
||||
height: 300px;
|
||||
}
|
||||
.joe_header__above-logo {
|
||||
padding-right: 0;
|
||||
}
|
||||
.joe_header__above-logo::after {
|
||||
display: none;
|
||||
}
|
||||
.joe_header__above-search {
|
||||
display: none;
|
||||
}
|
||||
.joe_header__above-searchicon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
.swiper-container {
|
||||
height: 180px;
|
||||
.item {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
.joe_index__banner-recommend {
|
||||
gap: 10px;
|
||||
.item {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.joe_index__hot-list {
|
||||
overflow-x: auto;
|
||||
grid-template-columns: repeat(4, 200px);
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.joe_index__ad-link .image {
|
||||
height: 120px;
|
||||
}
|
||||
.joe_index__title-notice {
|
||||
display: none;
|
||||
}
|
||||
.joe_index__title-title .item {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.joe_list__item {
|
||||
.information {
|
||||
.title {
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.abstract {
|
||||
max-height: 46px;
|
||||
}
|
||||
}
|
||||
&.none {
|
||||
.information {
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
&.multiple {
|
||||
.thumbnail {
|
||||
grid-template-rows: 80px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
&.single {
|
||||
.thumbnail {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
&.default {
|
||||
padding-bottom: 47px;
|
||||
.thumbnail {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
height: 80px;
|
||||
min-height: 80px;
|
||||
margin-right: 10px;
|
||||
time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.abstract {
|
||||
margin-top: auto;
|
||||
}
|
||||
.meta {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.joe_wallpaper {
|
||||
&__list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
&__pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.joe_detail {
|
||||
&__friends {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
&__article {
|
||||
font-size: 14px;
|
||||
&-player {
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.joe_video {
|
||||
&__list-item {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
.item .thumb {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
&__pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
&__source-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
&__player-play {
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
.joe_live {
|
||||
&__pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
&__list-item .thumb {
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 没有侧边栏时候的样式 */
|
||||
html .noaside {
|
||||
.joe_detail__friends {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.joe_video__list-item {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
.joe_video__source-list {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
.joe_live__list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 200px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 300px;
|
||||
}
|
||||
.joe_index__ad-link .image {
|
||||
height: 250px;
|
||||
}
|
||||
.joe_index__hot-list .item .link .inner .image {
|
||||
height: 140px;
|
||||
}
|
||||
@media (max-width: 1400px) {
|
||||
.joe_video__list-item {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 180px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 270px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.joe_wallpaper__list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.joe_detail__friends {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.joe_live__list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.joe_index__hot-list .item .link .inner .image {
|
||||
height: 120px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 250px;
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 150px;
|
||||
}
|
||||
.joe_index__banner-recommend .item {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.joe_wallpaper__list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.joe_detail__friends {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.joe_video__list-item {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.joe_video__source-list {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.joe_live__list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.joe_index__banner-recommend .item {
|
||||
height: 160px;
|
||||
}
|
||||
.joe_index__hot-list .item .link .inner .image {
|
||||
height: 90px;
|
||||
}
|
||||
.joe_index__ad-link .image {
|
||||
height: 200px;
|
||||
}
|
||||
.joe_list__item.single .thumbnail {
|
||||
height: 220px;
|
||||
}
|
||||
.joe_list__item.multiple .thumbnail {
|
||||
grid-template-rows: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -323,10 +323,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
Array.from(arr).forEach(_ => {
|
||||
if (_.parentNode.className === 'container') str = _
|
||||
})
|
||||
if (!/Joe/.test(res)) return Qmsg.warning(str.textContent.trim() || '')
|
||||
window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment')
|
||||
},
|
||||
complete: () => (isSubmit = false)
|
||||
if (!/Joe/.test(res)) {
|
||||
Qmsg.warning(str.textContent.trim() || '')
|
||||
isSubmit = false
|
||||
} else {
|
||||
window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -351,4 +354,28 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
$(this).toggleClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
/* 小屏幕搜索框 */
|
||||
{
|
||||
$('.joe_header__above-searchicon').on('click', function () {
|
||||
if ($('.joe_header__searchout').hasClass('active')) {
|
||||
$('body').css('overflow', '')
|
||||
$('.joe_mask').removeClass('active')
|
||||
$('.joe_header__searchout').removeClass('active')
|
||||
} else {
|
||||
$('body').css('overflow', 'hidden')
|
||||
$('.joe_mask').addClass('active')
|
||||
$('.joe_header__searchout').addClass('active')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* 点击遮罩层关闭 */
|
||||
{
|
||||
$('.joe_mask').on('click', function () {
|
||||
$('body').css('overflow', '')
|
||||
$('.joe_mask').removeClass('active')
|
||||
$('.joe_header__searchout').removeClass('active')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user