98 lines
1.7 KiB
CSS
98 lines
1.7 KiB
CSS
/* recommend_02.css (优化稳定版) */
|
||
|
||
.__PFX__-recB-wrap{
|
||
margin:14px auto 4px;
|
||
padding:10px 0 8px;
|
||
max-width:1280px;
|
||
}
|
||
|
||
.__PFX__-recB-head{
|
||
padding:0 14px 4px;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
}
|
||
|
||
.__PFX__-recB-label{
|
||
font-size:10px;
|
||
padding:2px 6px;
|
||
border-radius:999px;
|
||
background:var(--primary-color);
|
||
color:#fff;
|
||
}
|
||
|
||
.__PFX__-recB-title{
|
||
font-size:15px;
|
||
font-weight:600;
|
||
color:var(--text-color, var(--text-primary-color));
|
||
}
|
||
|
||
/* H5：横向滑动，2~3 列缩略卡片 */
|
||
.__PFX__-recB-scroll{
|
||
display:flex;
|
||
overflow-x:auto;
|
||
padding:8px 12px 10px;
|
||
gap:12px;
|
||
scroll-snap-type:x mandatory;
|
||
}
|
||
.__PFX__-recB-scroll::-webkit-scrollbar{ display:none; }
|
||
|
||
.__PFX__-recB-card{
|
||
min-width:46%;
|
||
max-width:48%;
|
||
scroll-snap-align:start;
|
||
background:var(--bg-soft-color);
|
||
border-radius:10px;
|
||
overflow:hidden;
|
||
}
|
||
|
||
/* PC：完整 5 列自适应，彻底居中 */
|
||
@media(min-width:768px){
|
||
.__PFX__-recB-scroll{
|
||
display:grid;
|
||
grid-template-columns:repeat(5, 1fr);
|
||
gap:14px;
|
||
overflow:visible;
|
||
}
|
||
.__PFX__-recB-card{
|
||
min-width:0;
|
||
width:100%;
|
||
max-width:100%;
|
||
}
|
||
}
|
||
|
||
.__PFX__-recB-anchor{
|
||
display:block;
|
||
text-decoration:none;
|
||
color:inherit;
|
||
}
|
||
|
||
.__PFX__-recB-figure{
|
||
margin:0;
|
||
background:#000;
|
||
}
|
||
|
||
.__PFX__-recB-img{
|
||
width:100%;
|
||
aspect-ratio:2/3;
|
||
object-fit:cover;
|
||
display:block;
|
||
}
|
||
|
||
.__PFX__-recB-meta{
|
||
padding:6px 7px 7px;
|
||
}
|
||
|
||
.__PFX__-recB-name{
|
||
font-size:12px;
|
||
line-height:1.3;
|
||
max-height:2.6em;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.__PFX__-recB-info{
|
||
margin-top:2px;
|
||
font-size:11px;
|
||
color:var(--text-muted-color);
|
||
}
|