gpttemp

code/public/static/css/modules/play/play_01.css

@@ -0,0 +1,121 @@
+/* PLAY 01 — 极简白风 */
+
+.__PFX__-p1-wrap {
+    padding: 14px;
+    max-width: 900px;
+    margin: auto;
+}
+
+/* 顶部信息 */
+.__PFX__-p1-header {
+    display: flex;
+    gap: 12px;
+}
+@media(max-width:768px){
+    .__PFX__-p1-header { flex-direction: column; }
+}
+.__PFX__-p1-poster img {
+    width: 140px;
+    aspect-ratio: 2/3;
+    border-radius: 10px;
+    object-fit: cover;
+}
+.__PFX__-p1-info h1 {
+    font-size: 24px;
+    margin: 4px 0;
+    color: var(--primary-color);
+}
+.__PFX__-p1-meta span {
+    font-size: 12px;
+    margin-right: 8px;
+}
+.__PFX__-p1-des {
+    margin-top: 8px;
+    line-height: 1.7;
+    font-size: 14px;
+}
+
+/* 播放器 */
+.__PFX__-p1-playerbox {
+    margin-top: 18px;
+}
+.__PFX__-p1-dp {
+    width: 100%;
+    height: 220px;
+}
+@media(min-width:768px){
+    .__PFX__-p1-dp { height: 400px; }
+}
+
+/* 线路导航 */
+.__PFX__-p1-lines {
+    margin-top:16px;
+    display:flex;
+    gap:10px;
+    overflow-x:auto;
+}
+.__PFX__-p1-linebtn {
+    padding:6px 12px;
+    background:#f1f1f1;
+    border-radius:6px;
+    font-size:13px;
+    white-space:nowrap;
+}
+.__PFX__-p1-linebtn.active {
+    background:var(--primary-color);
+    color:#fff;
+}
+
+/* 集数列表 */
+.__PFX__-p1-episodes {
+    margin-top:12px;
+}
+.__PFX__-p1-elist {
+    display:none;
+    flex-wrap:wrap;
+    gap:10px;
+}
+.__PFX__-p1-elist.active {
+    display:flex;
+}
+.__PFX__-p1-ep {
+    display:block;
+    padding:6px 14px;
+    border-radius:6px;
+    background:#fafafa;
+    font-size:13px;
+}
+.__PFX__-p1-ep.active {
+    background:var(--primary-color);
+    color:#fff;
+}
+
+/* 相关推荐 */
+.__PFX__-p1-relbox {
+    margin-top:26px;
+}
+.__PFX__-p1-reltitle {
+    font-size:18px;
+    color:var(--primary-color);
+}
+.__PFX__-p1-relgrid {
+    margin-top:12px;
+    display:grid;
+    gap:14px;
+    grid-template-columns:repeat(2,1fr);
+}
+@media(min-width:768px){
+    .__PFX__-p1-relgrid {
+        grid-template-columns:repeat(4,1fr);
+    }
+}
+.__PFX__-p1-relcard img {
+    width:100%;
+    aspect-ratio:2/3;
+    border-radius:10px;
+    object-fit:cover;
+}
+.__PFX__-p1-relcard p {
+    margin-top:4px;
+    font-size:13px;
+}