gpttemp
This commit is contained in:
55
code/public/static/css/modules/list/item/_item_base.css
Normal file
55
code/public/static/css/modules/list/item/_item_base.css
Normal file
@@ -0,0 +1,55 @@
|
||||
/* ========== item 基础结构 ========== */
|
||||
|
||||
.__PFX__-item{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.__PFX__-item-link{
|
||||
display:block;
|
||||
color:inherit;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.__PFX__-item-cover{
|
||||
position:relative;
|
||||
background:var(--bg-soft-color);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.__PFX__-item-cover img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.__PFX__-item-score{
|
||||
position:absolute;
|
||||
right:6px;
|
||||
top:6px;
|
||||
padding:2px 6px;
|
||||
font-size:12px;
|
||||
background:rgba(0,0,0,.65);
|
||||
color:#fff;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.__PFX__-item-info{
|
||||
padding:6px 4px;
|
||||
}
|
||||
|
||||
.__PFX__-item-title{
|
||||
font-size:14px;
|
||||
line-height:1.4;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.__PFX__-item-meta{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
.__PFX__-item-extra{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
78
code/public/static/css/modules/list/item/_item_media.css
Normal file
78
code/public/static/css/modules/list/item/_item_media.css
Normal file
@@ -0,0 +1,78 @@
|
||||
/* ===================================================
|
||||
* Item Mother B - Media Row
|
||||
* =================================================== */
|
||||
/* ========== media:横向信息流 ========== */
|
||||
.item-media{
|
||||
/* display:flex;
|
||||
gap:12px;
|
||||
align-items:center; */
|
||||
}
|
||||
.item-media img{
|
||||
width:120px;
|
||||
aspect-ratio:16/9;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
.__PFX__-item.media{
|
||||
/* display:flex;
|
||||
gap:12px;
|
||||
align-items:flex-start; */
|
||||
}
|
||||
|
||||
/* 封面偏宽 */
|
||||
.__PFX__-item.media .__PFX__-item-cover , .__PFX__-item.media img{
|
||||
flex:0 0 38%;
|
||||
aspect-ratio:16 / 9;
|
||||
border-radius:10px;
|
||||
overflow:hidden;
|
||||
background:var(--bg-soft-color);
|
||||
}
|
||||
|
||||
/* 信息区居中 */
|
||||
.__PFX__-item.media .__PFX__-item-info{
|
||||
padding:6px 4px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.__PFX__-item.media .__PFX__-item-cover img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.__PFX__-item.media .__PFX__-item-body{
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:4px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-item.media .__PFX__-item-title{
|
||||
font-size:14px;
|
||||
font-weight:700;
|
||||
line-height:1.3;
|
||||
color:var(--text-color);
|
||||
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient:vertical;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* 描述 */
|
||||
.__PFX__-item.media .__PFX__-item-desc{
|
||||
font-size:12px;
|
||||
line-height:1.4;
|
||||
color:var(--text-muted-color);
|
||||
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient:vertical;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
62
code/public/static/css/modules/list/item/_item_poster.css
Normal file
62
code/public/static/css/modules/list/item/_item_poster.css
Normal file
@@ -0,0 +1,62 @@
|
||||
/* ===================================================
|
||||
* Item Mother A - Poster Card
|
||||
* =================================================== */
|
||||
|
||||
.__PFX__-item.poster{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:6px;
|
||||
}
|
||||
|
||||
/* 封面容器 */
|
||||
.__PFX__-item.poster .__PFX__-item-cover{
|
||||
position:relative;
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
overflow:hidden;
|
||||
border-radius:12px;
|
||||
background:var(--bg-soft-color);
|
||||
}
|
||||
|
||||
/* 封面图 */
|
||||
.__PFX__-item.poster .__PFX__-item-cover img{
|
||||
position:absolute;
|
||||
inset:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-item.poster .__PFX__-item-title{
|
||||
font-size:14px;
|
||||
line-height:1.3;
|
||||
font-weight:700;
|
||||
color:var(--text-color);
|
||||
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:2;
|
||||
-webkit-box-orient:vertical;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* 元信息 */
|
||||
.__PFX__-item.poster .__PFX__-item-meta{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
/* 强调态(评分 / 热度) */
|
||||
.__PFX__-item.poster.emphasis{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.__PFX__-item.poster.emphasis::after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
inset:0;
|
||||
border-radius:12px;
|
||||
box-shadow:0 8px 18px var(--shadow-color);
|
||||
pointer-events:none;
|
||||
}
|
||||
49
code/public/static/css/modules/list/item/_item_rank.css
Normal file
49
code/public/static/css/modules/list/item/_item_rank.css
Normal file
@@ -0,0 +1,49 @@
|
||||
/* ===================================================
|
||||
* Item Mother C - Rank / Text
|
||||
* =================================================== */
|
||||
/* ========== rank:排行榜 ========== */
|
||||
|
||||
.__PFX__-item.rank::before{
|
||||
content:attr(data-rank);
|
||||
font-size:18px;
|
||||
font-weight:700;
|
||||
color:var(--primary-color);
|
||||
width:28px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
.__PFX__-item.rank{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
padding:6px 0;
|
||||
}
|
||||
|
||||
/* 序号 */
|
||||
.__PFX__-item.rank .rank-no{
|
||||
flex:0 0 24px;
|
||||
text-align:center;
|
||||
font-weight:900;
|
||||
font-size:14px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
/* Top 强化 */
|
||||
.__PFX__-item.rank.top .rank-no{
|
||||
color:var(--primary-color);
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-item.rank .rank-title{
|
||||
flex:1;
|
||||
font-size:14px;
|
||||
line-height:1.3;
|
||||
font-weight:600;
|
||||
color:var(--text-color);
|
||||
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
12
code/public/static/css/modules/list/item/_item_text.css
Normal file
12
code/public/static/css/modules/list/item/_item_text.css
Normal file
@@ -0,0 +1,12 @@
|
||||
/* ========== text:极简文本 ========== */
|
||||
.__PFX__-item.text .__PFX__-item-cover{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.__PFX__-item.text .__PFX__-item-info{
|
||||
padding:10px 0;
|
||||
}
|
||||
|
||||
.__PFX__-item.text{
|
||||
border-bottom:1px solid var(--border-color);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/* ======================================================
|
||||
* Title Clamp Packs (opt-in by .__PFX__-tclamp)
|
||||
* ====================================================== */
|
||||
|
||||
/* 统一命中 title(覆盖 poster/media 里已有的 clamp) */
|
||||
.__PFX__-tclamp .__PFX__-item-title,
|
||||
.__PFX__-tclamp .__PFX__-rank-title,
|
||||
.__PFX__-tclamp .rank-title{
|
||||
line-height: var(--tc-lh, 1.35);
|
||||
margin: var(--tc-m, 0);
|
||||
font-weight: var(--tc-fw, inherit);
|
||||
|
||||
/* 统一改为可换行,避免 item_04 那种 nowrap 造成高度不可控:contentReference[oaicite:4]{index=4} */
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
|
||||
overflow: hidden;
|
||||
height: var(--tc-h, 2.7em);
|
||||
max-height: var(--tc-h, 2.7em);
|
||||
|
||||
/* 默认走多行 clamp(ln1 会被下面覆盖) */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: var(--tc-lines, 2);
|
||||
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ln1:强制单行省略号(比 -webkit-line-clamp:1 更“可控”) */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-item-title,
|
||||
.__PFX__-tclamp.__PFX__-tclamp-l1 .__PFX__-rank-title,
|
||||
.__PFX__-tclamp.__PFX__-tclamp-l1 .rank-title{
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: unset;
|
||||
max-height: var(--tc-h, 1.35em);
|
||||
height: var(--tc-h, 1.35em);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Pack 0:紧凑型(偏短行高)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p0{ --tc-lh:1.25; --tc-fw:600; --tc-m:0; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.25em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.50em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p0.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.75em; }
|
||||
|
||||
/* =========================
|
||||
* Pack 1:舒展型(更易读)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p1{ --tc-lh:1.40; --tc-fw:700; --tc-m:0 0 4px; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.40em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.80em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p1.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.20em; }
|
||||
|
||||
/* =========================
|
||||
* Pack 2:强调标题(行高略小 + 字重更高)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p2{ --tc-lh:1.30; --tc-fw:800; --tc-m:0 0 2px; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.30em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.60em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p2.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.90em; }
|
||||
|
||||
/* =========================
|
||||
* Pack 3:网格对齐优先(高度更“硬”)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p3{ --tc-lh:1.28; --tc-fw:650; --tc-m:0; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.28em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.56em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p3.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.84em; }
|
||||
|
||||
/* =========================
|
||||
* Pack 4:更适合英文/混排(行高更大,断词更激进)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4{ --tc-lh:1.45; --tc-fw:700; --tc-m:0; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-item-title,
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4 .__PFX__-rank-title,
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4 .rank-title{
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.45em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.90em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p4.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:4.35em; }
|
||||
|
||||
/* =========================
|
||||
* Pack 5:极简文本/榜单更合适(轻字重 + 更小 margin)
|
||||
* ========================= */
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p5{ --tc-lh:1.32; --tc-fw:600; --tc-m:0; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l1{ --tc-lines:1; --tc-h:1.32em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l2{ --tc-lines:2; --tc-h:2.64em; }
|
||||
.__PFX__-tclamp.__PFX__-tclamp-p5.__PFX__-tclamp-l3{ --tc-lines:3; --tc-h:3.96em; }
|
||||
58
code/public/static/css/modules/list/item/item_01.css
Normal file
58
code/public/static/css/modules/list/item/item_01.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* ========== item_01 基础 ========== */
|
||||
.__PFX__-item{
|
||||
background:var(--bg-soft-color);
|
||||
border-radius:12px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.__PFX__-item-link{
|
||||
display:block;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
.__PFX__-item-cover{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
background:#000;
|
||||
}
|
||||
|
||||
.__PFX__-item-cover img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
object-position:center center;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.__PFX__-item-info{
|
||||
padding:10px 12px;
|
||||
}
|
||||
|
||||
.__PFX__-item-title{
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
line-height:1.35;
|
||||
}
|
||||
|
||||
.__PFX__-item-meta{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
.__PFX__-item-desc{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
margin-top:6px;
|
||||
}
|
||||
|
||||
.__PFX__-item-score{
|
||||
position:absolute;
|
||||
top:6px;
|
||||
right:6px;
|
||||
font-size:12px;
|
||||
padding:2px 6px;
|
||||
border-radius:6px;
|
||||
background:rgba(0,0,0,.65);
|
||||
color:#fff;
|
||||
}
|
||||
103
code/public/static/css/modules/list/item/item_02.css
Normal file
103
code/public/static/css/modules/list/item/item_02.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/* item_02:封面横向信息流
|
||||
* 继承:_item_media.css
|
||||
* 无额外样式
|
||||
*/
|
||||
/* ========== item_02 个性微调(可选) */
|
||||
|
||||
.__PFX__-item.item02 .__PFX__-item-title{
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
/* item_media.css | item_02 专用(在通用 item 基础上补齐 media 布局) */
|
||||
|
||||
.__PFX__-item.item02{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* 横向信息流:默认左右布局(由 shell 控制列数) */
|
||||
.__PFX__-item.item02 .__PFX__-item-link{
|
||||
display:flex;
|
||||
gap:12px;
|
||||
align-items:flex-start;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* 封面:横向信息流用 16:9 更稳(宽>高) */
|
||||
.__PFX__-item.item02 .__PFX__-item-cover{
|
||||
flex:0 0 42%;
|
||||
max-width:42%;
|
||||
aspect-ratio:16/9;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
border-radius:12px;
|
||||
background:var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.__PFX__-item.item02 .__PFX__-item-cover img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 评分角标 */
|
||||
.__PFX__-item.item02 .__PFX__-item-score{
|
||||
position:absolute;
|
||||
right:8px;
|
||||
top:8px;
|
||||
padding:2px 6px;
|
||||
font-size:12px;
|
||||
border-radius:999px;
|
||||
background:rgba(0,0,0,.55);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 信息区 */
|
||||
.__PFX__-item.item02 .__PFX__-item-info{
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.__PFX__-item.item02 .__PFX__-item-title{
|
||||
font-size:14px;
|
||||
line-height:1.25;
|
||||
margin:0 0 6px;
|
||||
color:var(--text-color);
|
||||
}
|
||||
|
||||
.__PFX__-item.item02 .__PFX__-item-meta{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
margin:0 0 6px;
|
||||
}
|
||||
|
||||
.__PFX__-item.item02 .__PFX__-item-extra{
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
margin:0 0 4px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* PC:稍微压缩封面占比,提升信息量 */
|
||||
@media (min-width: 1024px){
|
||||
.__PFX__-item.item02 .__PFX__-item-cover{
|
||||
flex-basis:36%;
|
||||
max-width:36%;
|
||||
border-radius:14px;
|
||||
}
|
||||
.__PFX__-item.item02 .__PFX__-item-title{
|
||||
font-size:15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* item02-5*/
|
||||
.__PFX__-item.__PFX__-item02 {
|
||||
display: block;
|
||||
}
|
||||
.__PFX__-item.item02 .__PFX__-item-cover{
|
||||
max-width: 100%;
|
||||
}
|
||||
81
code/public/static/css/modules/list/item/item_03.css
Normal file
81
code/public/static/css/modules/list/item/item_03.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* ======================================================
|
||||
* item_03 | 极简文本 / 榜单型
|
||||
* ====================================================== */
|
||||
|
||||
.__PFX__-item{
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 点击区域 */
|
||||
.__PFX__-item-link{
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
gap:12px;
|
||||
padding:10px 6px;
|
||||
text-decoration:none;
|
||||
color:var(--text-color);
|
||||
}
|
||||
|
||||
/* 序号 */
|
||||
.__PFX__-item-index{
|
||||
min-width:22px;
|
||||
font-size:14px;
|
||||
font-weight:700;
|
||||
color:var(--text-muted-color);
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
/* 主体 */
|
||||
.__PFX__-item-main{
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-item-title{
|
||||
font-size:14px;
|
||||
line-height:1.4;
|
||||
font-weight:500;
|
||||
margin:0 0 4px;
|
||||
color:var(--text-color);
|
||||
}
|
||||
|
||||
/* 元信息 */
|
||||
.__PFX__-item-meta{
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
/* ===== 行为适配 ===== */
|
||||
|
||||
/* 紧凑 */
|
||||
.compact .__PFX__-item-link{
|
||||
padding:6px 4px;
|
||||
}
|
||||
.compact .__PFX__-item-title{
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
/* 宽松 */
|
||||
.loose .__PFX__-item-link{
|
||||
padding:14px 8px;
|
||||
}
|
||||
|
||||
/* Top 榜单 */
|
||||
.top .__PFX__-item-index{
|
||||
color:var(--primary-color);
|
||||
}
|
||||
|
||||
/* 强调 */
|
||||
.emphasis .__PFX__-item-link{
|
||||
background:var(--bg-soft-color);
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.__PFX__-item-link:hover .__PFX__-item-title{
|
||||
color:var(--primary-color);
|
||||
}
|
||||
93
code/public/static/css/modules/list/item/item_04.css
Normal file
93
code/public/static/css/modules/list/item/item_04.css
Normal file
@@ -0,0 +1,93 @@
|
||||
/* ======================================================
|
||||
* item_04 | 评分 / 热度强化型
|
||||
* ====================================================== */
|
||||
|
||||
.__PFX__-item.poster.score{
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 链接 */
|
||||
.__PFX__-item-link{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:6px;
|
||||
color:var(--text-color);
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
/* ===== 封面 ===== */
|
||||
.__PFX__-item-cover{
|
||||
position:relative;
|
||||
width:100%;
|
||||
aspect-ratio: 3 / 4; /* 比 item_01 稍宽,更利于列表 */
|
||||
overflow:hidden;
|
||||
border-radius:12px;
|
||||
background:var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.__PFX__-item-cover img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* ===== 评分角标 ===== */
|
||||
.__PFX__-item-score{
|
||||
position:absolute;
|
||||
right:6px;
|
||||
top:6px;
|
||||
padding:2px 6px;
|
||||
font-size:12px;
|
||||
font-weight:700;
|
||||
color:#fff;
|
||||
background:var(--accent-color);
|
||||
border-radius:6px;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
/* ===== 信息区 ===== */
|
||||
.__PFX__-item-info{
|
||||
padding:0 2px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-item-title{
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
line-height:1.4;
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
/* 元信息 */
|
||||
.__PFX__-item-meta{
|
||||
display:flex;
|
||||
gap:6px;
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
/* ===== 行为适配 ===== */
|
||||
|
||||
/* 紧凑 */
|
||||
.compact .__PFX__-item-title{
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
/* 宽松 */
|
||||
.loose .__PFX__-item-link{
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
/* 强调 */
|
||||
.emphasis .__PFX__-item-cover{
|
||||
box-shadow:0 6px 18px var(--shadow-color);
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.__PFX__-item-link:hover .__PFX__-item-title{
|
||||
color:var(--primary-color);
|
||||
}
|
||||
94
code/public/static/css/modules/list/item/item_05.css
Normal file
94
code/public/static/css/modules/list/item/item_05.css
Normal file
@@ -0,0 +1,94 @@
|
||||
/* ======================================================
|
||||
* item_05 | Top 强化榜单型
|
||||
* ====================================================== */
|
||||
|
||||
.__PFX__-item.rank{
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* 主链接 */
|
||||
.__PFX__-rank-link{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:12px;
|
||||
padding:10px 8px;
|
||||
text-decoration:none;
|
||||
color:var(--text-color);
|
||||
}
|
||||
|
||||
/* ===== 排名数字 ===== */
|
||||
.__PFX__-rank-no{
|
||||
min-width:28px;
|
||||
font-size:16px;
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
color:var(--text-muted-color);
|
||||
}
|
||||
|
||||
/* Top 1-3 强化 */
|
||||
.__PFX__-rank-no.rank-1{
|
||||
color:#d32f2f;
|
||||
font-size:18px;
|
||||
}
|
||||
.__PFX__-rank-no.rank-2{
|
||||
color:#f57c00;
|
||||
}
|
||||
.__PFX__-rank-no.rank-3{
|
||||
color:#fbc02d;
|
||||
}
|
||||
|
||||
/* 主体 */
|
||||
.__PFX__-rank-main{
|
||||
flex:1;
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.__PFX__-rank-title{
|
||||
font-size:14px;
|
||||
font-weight:600;
|
||||
margin:0 0 4px;
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
/* 元信息 */
|
||||
.__PFX__-rank-meta{
|
||||
display:flex;
|
||||
gap:8px;
|
||||
font-size:12px;
|
||||
color:var(--text-muted-color);
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
/* 评分 / 热度 */
|
||||
.__PFX__-rank-score{
|
||||
font-size:13px;
|
||||
font-weight:600;
|
||||
color:var(--accent-color);
|
||||
}
|
||||
|
||||
/* ===== 行为适配 ===== */
|
||||
|
||||
/* 紧凑 */
|
||||
.compact .__PFX__-rank-link{
|
||||
padding:6px 6px;
|
||||
}
|
||||
.compact .__PFX__-rank-title{
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
/* 宽松 */
|
||||
.loose .__PFX__-rank-link{
|
||||
padding:14px 10px;
|
||||
}
|
||||
|
||||
/* 强调模块 */
|
||||
.emphasis .__PFX__-rank-link{
|
||||
background:var(--bg-soft-color);
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.__PFX__-rank-link:hover .__PFX__-rank-title{
|
||||
color:var(--primary-color);
|
||||
}
|
||||
Reference in New Issue
Block a user