This commit is contained in:
make
2025-12-31 00:49:32 +08:00
parent ae57b68f99
commit eb8c097777
709 changed files with 39727 additions and 1041 deletions

View File

@@ -0,0 +1,69 @@
/* ===================== Action Base ===================== */
.__PFX__-dm-action {
margin: 14px 0;
}
.__PFX__-dm-action a,
.__PFX__-dm-action button {
display: inline-block;
padding: 8px 14px;
background: var(--primary-color);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
.__PFX__-dm-action span,
.__PFX__-dm-action small,
.__PFX__-dm-action em {
margin-left: 8px;
font-size: 12px;
color: var(--text-muted-color);
}
.__PFX__-dm-action button {
border: none;
cursor: pointer;
}
/* ===================== Structure Differences ===================== */
.__PFX__-dm-action.v2 a,
.__PFX__-dm-action.v12 a {
margin-right: 10px;
}
.__PFX__-dm-action.v3 li {
list-style: none;
margin-bottom: 6px;
}
.__PFX__-dm-action.v3 a {
background: var(--accent-color);
}
.__PFX__-dm-action.v7 small,
.__PFX__-dm-action.v17 em {
display: block;
margin-top: 4px;
}
.__PFX__-dm-action.v13 a {
font-size: 20px;
padding: 6px 10px;
}
.__PFX__-dm-action.v15,
.__PFX__-dm-action.v19 {
text-align: center;
}
.__PFX__-dm-action.v18 {
border-top: 1px dashed var(--border-color);
padding-top: 10px;
}
.__PFX__-dm-action {
margin-top: 12px;
}

View File

@@ -0,0 +1,101 @@
/* ===================== Cover Base ===================== */
.__PFX__-dm-cover {
position: relative;
width: 100%;
overflow: hidden;
}
.__PFX__-dm-cover-img {
display: block;
width: 100%;
height: auto;
}
.__PFX__-dm-cover-bg {
width: 100%;
aspect-ratio: 2 / 3;
background-size: cover;
background-position: center;
}
/* ===================== Overlays ===================== */
.__PFX__-dm-cover-badge,
.__PFX__-dm-cover-score,
.__PFX__-dm-cover-tag,
.__PFX__-dm-cover-year,
.__PFX__-dm-cover-free,
.__PFX__-dm-cover-top {
position: absolute;
top: 8px;
left: 8px;
padding: 2px 6px;
font-size: 12px;
background: rgba(0,0,0,.6);
color: #fff;
border-radius: 3px;
}
.__PFX__-dm-cover-score {
top: auto;
bottom: 8px;
left: 8px;
}
.__PFX__-dm-cover-remark {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 12px;
padding: 4px 6px;
background: rgba(0,0,0,.5);
color: #fff;
}
.__PFX__-dm-cover-play {
position: absolute;
inset: 0;
background: rgba(0,0,0,.35);
}
.__PFX__-dm-cover-play::after {
content: "▶";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #fff;
}
/* ===================== Variant Differences ===================== */
.__PFX__-dm-cover.v3,
.__PFX__-dm-cover.v6,
.__PFX__-dm-cover.v10,
.__PFX__-dm-cover.v11,
.__PFX__-dm-cover.v14 {
aspect-ratio: 2 / 3;
}
.__PFX__-dm-cover.v8 {
text-align: center;
}
.__PFX__-dm-cover.v16 .__PFX__-dm-cover-mask {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,.6)
);
}
.__PFX__-dm-cover.v18 {
aspect-ratio: 2 / 3;
background-size: cover;
background-position: center;
}

View File

@@ -0,0 +1,58 @@
/* ===================== Desc Base ===================== */
.__PFX__-dm-desc {
font-size: 14px;
line-height: 1.7;
color: var(--text-color);
margin-bottom: 12px;
}
.__PFX__-dm-desc-more {
margin-left: 6px;
color: var(--accent-color);
}
.__PFX__-dm-desc-note {
font-size: 12px;
color: var(--text-muted-color);
}
.__PFX__-dm-desc-hidden {
display: none;
}
/* ===================== Variant Helpers ===================== */
.__PFX__-dm-desc.v1,
.__PFX__-dm-desc.v2,
.__PFX__-dm-desc.v3,
.__PFX__-dm-desc.v7,
.__PFX__-dm-desc.v12,
.__PFX__-dm-desc.v17 {
padding: 6px 0;
}
.__PFX__-dm-desc.v5 summary {
cursor: pointer;
font-weight: 600;
}
.__PFX__-dm-desc.v8 blockquote {
margin: 0;
padding-left: 10px;
border-left: 3px solid var(--border-color);
}
.__PFX__-dm-desc.v11 {
opacity: .95;
}
.__PFX__-dm-desc.v14 {
background: var(--bg-soft-color);
padding: 8px;
}
.__PFX__-dm-desc.v19 header {
font-weight: 600;
margin-bottom: 4px;
}

View File

@@ -0,0 +1,34 @@
.__PFX__-dm-root{
margin:20px 0;
display:grid;
grid-template-columns: 110px 1fr;
gap:14px;
align-items:start;
}
/* 所有模块默认在右侧 */
.__PFX__-dm-title,
.__PFX__-dm-title-box,
.__PFX__-dm-title-wrap,
.__PFX__-dm-meta,
.__PFX__-dm-desc,
.__PFX__-dm-action{
grid-column:2;
}
/* 封面永远左侧 */
.__PFX__-dm-cover{
grid-column:1;
grid-row:1 / span 8;
border-radius:10px;
overflow:hidden;
}
.__PFX__-dm-cover-img,
.__PFX__-dm-cover-bg{
width:100%;
aspect-ratio:2 / 3;
object-fit:cover;
}

View File

@@ -0,0 +1,40 @@
.__PFX__-detail {
display: flex;
gap: 20px;
margin: 20px 0;
}
.__PFX__-detail.B,
.__PFX__-detail.D {
flex-direction: column;
}
.__PFX__-detail-cover img {
width: 100%;
max-width: 220px;
aspect-ratio: 2 / 3;
object-fit: cover;
}
.__PFX__-detail-title {
font-size: 22px;
margin: 0 0 8px;
}
.__PFX__-detail-title .score {
margin-left: 8px;
color: var(--accent-color);
font-size: 16px;
}
.__PFX__-detail-meta span {
margin-right: 12px;
font-size: 14px;
color: var(--text-muted-color);
}
.__PFX__-detail-desc {
margin-top: 12px;
font-size: 14px;
line-height: 1.8;
}

View File

@@ -0,0 +1,67 @@
/* ================= Layout A ================= */
.__PFX__-layout-a{
margin:24px 0;
display:flex;
flex-direction:column;
gap:20px;
}
/* ---------- Cover主视觉 ---------- */
.__PFX__-layout-a .__PFX__-dm-row-cover{
display:flex;
justify-content:center;
}
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
width:60%;
max-width:420px; /* PC 不霸屏 */
}
/* ---------- 信息区 ---------- */
.__PFX__-layout-a .__PFX__-dm-row-info{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
text-align:center;
}
/* action 不要贴太近 */
.__PFX__-layout-a .__PFX__-dm-row-info .__PFX__-dm-action{
margin-top:6px;
}
/* ---------- 描述区 ---------- */
.__PFX__-layout-a .__PFX__-dm-row-desc{
max-width:760px;
margin:0 auto;
line-height:1.8;
}
/* ================= H5 优化 ================= */
@media (max-width:767px){
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
width:80%;
max-width:none;
}
.__PFX__-layout-a .__PFX__-dm-row-desc{
max-width:none;
}
}
/* ================= 大屏优化 ================= */
@media (min-width:1200px){
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
max-width:480px;
}
.__PFX__-layout-a .__PFX__-dm-row-desc{
max-width:860px;
}
}

View File

@@ -0,0 +1,51 @@
/* ================= Layout B ================= */
.__PFX__-dm-root.__PFX__-layout-B{
margin:20px 0;
display:flex;
flex-direction:column;
gap:16px;
}
/* 顶部左右 */
.__PFX__-layout-B .__PFX__-dm-row-top{
display:flex;
gap:16px;
align-items:flex-start;
}
/* 左:封面 */
.__PFX__-layout-B .__PFX__-dm-col-cover{
width:33%;
max-width:280px;
}
/* 右:信息区 */
.__PFX__-layout-B .__PFX__-dm-col-info{
flex:1;
display:flex;
flex-direction:column;
gap:10px;
}
/* 底部 desc */
.__PFX__-layout-B .__PFX__-dm-row-bottom{
width:100%;
}
/* ================= H5 优化 ================= */
@media (max-width:767px){
.__PFX__-layout-B .__PFX__-dm-row-top{
gap:12px;
}
.__PFX__-layout-B .__PFX__-dm-col-cover{
width:40%;
max-width:none;
}
.__PFX__-layout-B .__PFX__-dm-col-info{
gap:8px;
}
}

View File

@@ -0,0 +1,48 @@
/* ================= Layout C ================= */
.__PFX__-dm-root.__PFX__-layout-C{
margin:20px 0;
display:flex;
flex-direction:column;
gap:16px;
}
/* 顶部 */
.__PFX__-layout-C .__PFX__-dm-row-top{
width:100%;
}
/* 中间:左右 */
.__PFX__-layout-C .__PFX__-dm-row-middle{
display:flex;
gap:16px;
}
/* 左:封面 */
.__PFX__-layout-C .__PFX__-dm-col-cover{
width:33%;
max-width:280px;
}
/* 右:信息 */
.__PFX__-layout-C .__PFX__-dm-col-info{
flex:1;
display:flex;
flex-direction:column;
gap:12px;
}
/* 底部 */
.__PFX__-layout-C .__PFX__-dm-row-bottom{
width:100%;
}
/* H5 适配 */
@media (max-width:767px){
.__PFX__-layout-C .__PFX__-dm-row-middle{
gap:12px;
}
.__PFX__-layout-C .__PFX__-dm-col-cover{
width:40%;
}
}

View File

@@ -0,0 +1,102 @@
/* ===================== Meta Base ===================== */
.__PFX__-dm-meta {
font-size: 13px;
color: var(--text-muted-color);
line-height: 1.6;
margin-bottom: 10px;
}
.__PFX__-dm-meta-label {
font-weight: 600;
margin-right: 4px;
}
.__PFX__-dm-meta-sep {
margin: 0 6px;
}
.__PFX__-dm-meta-hidden {
display: none;
}
/* ===================== Structure Helpers ===================== */
.__PFX__-dm-meta.v0 li,
.__PFX__-dm-meta.v1 li,
.__PFX__-dm-meta.v2 li {
list-style: none;
}
.__PFX__-dm-meta.v3 span,
.__PFX__-dm-meta.v7 span,
.__PFX__-dm-meta.v8 span,
.__PFX__-dm-meta.v9 span,
.__PFX__-dm-meta.v13 span,
.__PFX__-dm-meta.v14 span {
margin-right: 10px;
}
.__PFX__-dm-meta.v5 dt,
.__PFX__-dm-meta.v6 dt {
font-weight: 600;
}
.__PFX__-dm-meta.v5 dd,
.__PFX__-dm-meta.v6 dd {
margin: 0 0 4px 0;
}
.__PFX__-dm-meta.v10 {
width: 100%;
border-collapse: collapse;
}
.__PFX__-dm-meta.v10 td {
padding: 2px 6px;
border-bottom: 1px solid var(--border-color);
}
.__PFX__-dm-meta.v12 strong {
margin-right: 6px;
}
.__PFX__-dm-meta.v15 {
letter-spacing: .5px;
}
/* ===================== Variant Differences ===================== */
.__PFX__-dm-meta.v3 {
display: flex;
flex-wrap: wrap;
}
.__PFX__-dm-meta.v4 {
font-style: italic;
}
.__PFX__-dm-meta.v11 {
opacity: .9;
}
.__PFX__-dm-meta.v16 {
color: var(--text-color);
}
.__PFX__-dm-meta.v19 p {
margin: 0;
}
.__PFX__-dm-meta-chip {
display: inline-block;
padding: 1px 6px;
border: 1px solid var(--border-color);
border-radius: 999px;
margin-right: 6px;
margin-bottom: 4px;
color: var(--text-muted-color);
font-size: 12px;
}
.__PFX__-dm-meta {
margin-bottom: 6px;
}

View File

@@ -0,0 +1,103 @@
/* ===================== Detail Title Base ===================== */
.__PFX__-dm-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--text-color);
}
.__PFX__-dm-title-wrap {
margin-bottom: 12px;
}
.__PFX__-dm-title-box {
padding: 6px 0;
}
.__PFX__-dm-sub {
font-size: 13px;
color: var(--text-muted-color);
}
.__PFX__-dm-tag {
margin-left: 6px;
font-size: 12px;
color: var(--accent-color);
}
.__PFX__-dm-score {
margin-left: 8px;
font-size: 13px;
color: var(--primary-color);
}
.__PFX__-dm-hidden {
display: none;
}
/* ===================== Variant Differences ===================== */
.__PFX__-dm-title.v1 small {
font-size: 13px;
margin-left: 6px;
}
.__PFX__-dm-title.v5 sup {
font-size: 12px;
color: var(--accent-color);
}
.__PFX__-dm-title-wrap.v3 {
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
}
.__PFX__-dm-title-wrap.v6 {
background: var(--bg-soft-color);
padding: 8px;
}
.__PFX__-dm-title-wrap.v7 {
border-left: 4px solid var(--primary-color);
padding-left: 8px;
}
.__PFX__-dm-title-wrap.v8 {
text-align: center;
}
.__PFX__-dm-title.v9 .__PFX__-dm-tag {
background: var(--bg-soft-color);
padding: 2px 6px;
border-radius: 4px;
}
.__PFX__-dm-title-box.v12 {
background: var(--bg-soft-color);
}
.__PFX__-dm-title.v13 .__PFX__-dm-score {
font-weight: bold;
}
.__PFX__-dm-title-wrap.v14 .__PFX__-dm-icon {
display: inline-block;
width: 6px;
height: 6px;
background: var(--accent-color);
border-radius: 50%;
margin-left: 6px;
}
.__PFX__-dm-title.v15 {
letter-spacing: 0.5px;
}
.__PFX__-dm-title-wrap.v19 {
padding: 10px 0;
}
.__PFX__-dm-title,
.__PFX__-dm-title-wrap {
margin-bottom: 8px;
}