谢宇宁
@@ -0,0 +1,201 @@
|
||||
/* 剧集列表页 / 首页视频更多页 */
|
||||
|
||||
body.page-series .site-header,
|
||||
body.page-more-video .site-header {
|
||||
background: var(--bg);
|
||||
border-bottom-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.grid--series-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.series-list-promo {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.series-list-card {
|
||||
width: 282px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.series-list-card__cover {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 159px;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
box-shadow: inset 0 0 0 1px var(--line-soft);
|
||||
isolation: isolate;
|
||||
background-color: #141417;
|
||||
background-image:
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%),
|
||||
var(--cover);
|
||||
background-position: center, center;
|
||||
background-size: cover, cover;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-clip: padding-box;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transition: box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.series-list-card__play {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
background: rgba(11, 11, 13, 0.72);
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.series-list-card__play .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* Figma HGW/封面卡：横版封面悬浮态（对齐短剧 card__cover） */
|
||||
.series-list-card__cover::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
border-radius: inherit;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
content: "";
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
.series-list-card__cover::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 4;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 76px;
|
||||
padding-top: 54px;
|
||||
background:
|
||||
url("../images/play.svg") center 13px / 18px 18px no-repeat,
|
||||
radial-gradient(
|
||||
circle at 50% 22px,
|
||||
rgba(11, 11, 13, 0.72) 0 21px,
|
||||
rgba(255, 255, 255, 0.24) 21px 22px,
|
||||
transparent 22px
|
||||
);
|
||||
color: #f2f2f4;
|
||||
content: "立即播放";
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, calc(-50% + 6px));
|
||||
transition:
|
||||
opacity 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.series-list-card__cover:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px rgba(236, 35, 127, 0.45);
|
||||
}
|
||||
|
||||
.series-list-card__cover:focus-visible::before,
|
||||
.series-list-card__cover:focus-visible::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.series-list-card__cover:focus-visible::after {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.series-list-card__cover:hover {
|
||||
box-shadow: inset 0 0 0 1px rgba(236, 35, 127, 0.45);
|
||||
}
|
||||
|
||||
.series-list-card__cover:hover::before,
|
||||
.series-list-card__cover:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.series-list-card__cover:hover::after {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.series-list-card .card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.series-list-card .card__meta {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.series-list-card .card__ep {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid--series-list {
|
||||
gap: 14px 9px;
|
||||
}
|
||||
|
||||
.series-list-card {
|
||||
width: calc((100% - 9px) / 2);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.series-list-card__cover {
|
||||
height: auto;
|
||||
aspect-ratio: 167 / 94;
|
||||
}
|
||||
|
||||
.series-list-card__play {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.series-list-card__play .icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.series-list-card .card__title {
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.series-list-card .card__meta {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.series-list-card .card__ep {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user