gpttemp

code/public/static/css/modules/recommend/recommend_02.css

@@ -0,0 +1,97 @@
+/* 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);
+}