gpttemp
This commit is contained in:
121
code/public/static/css/modules/play/play_01.css
Normal file
121
code/public/static/css/modules/play/play_01.css
Normal file
@@ -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;
|
||||
}
|
||||
140
code/public/static/css/modules/play/play_02.css
Normal file
140
code/public/static/css/modules/play/play_02.css
Normal file
@@ -0,0 +1,140 @@
|
||||
/* PLAY 02 — 深色影院风 */
|
||||
|
||||
.__PFX__-p2-shell {
|
||||
background:#05060a;
|
||||
color:#eee;
|
||||
min-height:100vh;
|
||||
}
|
||||
|
||||
/* 播放器 */
|
||||
.__PFX__-p2-screen {
|
||||
width:100%;
|
||||
max-width:960px;
|
||||
margin:0 auto;
|
||||
padding:10px;
|
||||
}
|
||||
.__PFX__-p2-dp {
|
||||
width:100%;
|
||||
height:220px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p2-dp { height:420px; }
|
||||
}
|
||||
|
||||
/* 信息 */
|
||||
.__PFX__-p2-info {
|
||||
max-width:960px;
|
||||
margin:10px auto 0;
|
||||
padding:0 12px;
|
||||
}
|
||||
.__PFX__-p2-info h1 {
|
||||
font-size:22px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p2-meta span {
|
||||
font-size:12px;
|
||||
margin-right:8px;
|
||||
color:#ccc;
|
||||
}
|
||||
.__PFX__-p2-actors {
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
/* 线路 chips */
|
||||
.__PFX__-p2-lines {
|
||||
max-width:960px;
|
||||
margin:14px auto 0;
|
||||
padding:0 12px;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
}
|
||||
.__PFX__-p2-linechip {
|
||||
padding:5px 10px;
|
||||
border-radius:999px;
|
||||
border:1px solid rgba(255,255,255,.15);
|
||||
background:rgba(255,255,255,.03);
|
||||
color:#ddd;
|
||||
font-size:12px;
|
||||
}
|
||||
.__PFX__-p2-linechip.active {
|
||||
background:var(--primary-color);
|
||||
border-color:var(--primary-color);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 集数按钮 */
|
||||
.__PFX__-p2-epswrap {
|
||||
max-width:960px;
|
||||
margin:8px auto 0;
|
||||
padding:0 12px 10px;
|
||||
}
|
||||
.__PFX__-p2-epbox {
|
||||
display:none;
|
||||
display:none;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
}
|
||||
.__PFX__-p2-epbox.active {
|
||||
display:flex;
|
||||
}
|
||||
.__PFX__-p2-epbtn {
|
||||
padding:6px 12px;
|
||||
font-size:12px;
|
||||
border-radius:8px;
|
||||
background:#171920;
|
||||
color:#ddd;
|
||||
}
|
||||
.__PFX__-p2-epbtn.active {
|
||||
background:var(--primary-color);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 简介 */
|
||||
.__PFX__-p2-desc {
|
||||
max-width:960px;
|
||||
margin:14px auto 0;
|
||||
padding:0 12px 10px;
|
||||
}
|
||||
.__PFX__-p2-desc h2 {
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.__PFX__-p2-desc p {
|
||||
font-size:14px;
|
||||
line-height:1.7;
|
||||
color:#ddd;
|
||||
}
|
||||
|
||||
/* 推荐 */
|
||||
.__PFX__-p2-rel {
|
||||
max-width:960px;
|
||||
margin:14px auto 20px;
|
||||
padding:0 12px;
|
||||
}
|
||||
.__PFX__-p2-rel h3 {
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p2-relgrid {
|
||||
margin-top:10px;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p2-relgrid { grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
.__PFX__-p2-card img {
|
||||
width:100%;
|
||||
border-radius:10px;
|
||||
aspect-ratio:2/3;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-p2-card p {
|
||||
font-size:12px;
|
||||
margin-top:4px;
|
||||
color:#eee;
|
||||
}
|
||||
117
code/public/static/css/modules/play/play_03.css
Normal file
117
code/public/static/css/modules/play/play_03.css
Normal file
@@ -0,0 +1,117 @@
|
||||
/* PLAY 03 — 左右布局实验风 */
|
||||
|
||||
.__PFX__-p3-layout {
|
||||
padding:12px;
|
||||
}
|
||||
.__PFX__-p3-main {
|
||||
display:flex;
|
||||
gap:14px;
|
||||
}
|
||||
@media(max-width:768px){
|
||||
.__PFX__-p3-main { flex-direction:column; }
|
||||
}
|
||||
.__PFX__-p3-left {
|
||||
flex:3;
|
||||
}
|
||||
.__PFX__-p3-right {
|
||||
flex:2;
|
||||
}
|
||||
|
||||
/* 播放器 */
|
||||
.__PFX__-p3-dp {
|
||||
width:100%;
|
||||
height:210px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p3-dp { height:360px; }
|
||||
}
|
||||
|
||||
.__PFX__-p3-info h1 {
|
||||
font-size:20px;
|
||||
margin-top:8px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p3-meta {
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
}
|
||||
.__PFX__-p3-actor {
|
||||
font-size:13px;
|
||||
margin-top:2px;
|
||||
}
|
||||
|
||||
/* 右侧线路 + 集数 */
|
||||
.__PFX__-p3-linehead {
|
||||
font-size:14px;
|
||||
color:var(--primary-color);
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.__PFX__-p3-linelist {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
.__PFX__-p3-line {
|
||||
padding:4px 10px;
|
||||
font-size:12px;
|
||||
border-radius:8px;
|
||||
background:#f3f3f3;
|
||||
}
|
||||
.__PFX__-p3-line.active {
|
||||
background:var(--primary-color);
|
||||
color:#fff;
|
||||
}
|
||||
.__PFX__-p3-eplist {
|
||||
display:none;
|
||||
border-radius:10px;
|
||||
padding:8px;
|
||||
background:#fafafa;
|
||||
max-height:220px;
|
||||
overflow:auto;
|
||||
}
|
||||
.__PFX__-p3-eplist.active { display:block; }
|
||||
.__PFX__-p3-ep {
|
||||
display:block;
|
||||
font-size:13px;
|
||||
padding:5px 0;
|
||||
}
|
||||
.__PFX__-p3-ep.active {
|
||||
color:var(--primary-color);
|
||||
}
|
||||
|
||||
/* 简介 + 推荐 */
|
||||
.__PFX__-p3-desc h2 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p3-desc p {
|
||||
margin-top:6px;
|
||||
font-size:14px;
|
||||
line-height:1.7;
|
||||
}
|
||||
.__PFX__-p3-rel h3 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p3-relgrid {
|
||||
margin-top:8px;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p3-relgrid { grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
.__PFX__-p3-card img {
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
border-radius:10px;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-p3-card p {
|
||||
font-size:12px;
|
||||
margin-top:4px;
|
||||
}
|
||||
90
code/public/static/css/modules/play/play_04.css
Normal file
90
code/public/static/css/modules/play/play_04.css
Normal file
@@ -0,0 +1,90 @@
|
||||
/* PLAY 04 — 极简下拉线路 */
|
||||
|
||||
.__PFX__-p4-page {
|
||||
padding:12px;
|
||||
}
|
||||
|
||||
/* 播放器 */
|
||||
.__PFX__-p4-top { margin-bottom:10px; }
|
||||
.__PFX__-p4-dp {
|
||||
width:100%;
|
||||
height:220px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p4-dp { height:380px; }
|
||||
}
|
||||
|
||||
/* 信息 */
|
||||
.__PFX__-p4-info h1 {
|
||||
font-size:22px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p4-info p {
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
/* 线路下拉 */
|
||||
.__PFX__-p4-linebar {
|
||||
margin-top:10px;
|
||||
font-size:13px;
|
||||
}
|
||||
.__PFX__-p4-linebar select {
|
||||
margin-left:6px;
|
||||
padding:4px 6px;
|
||||
}
|
||||
|
||||
/* 集数列表 */
|
||||
.__PFX__-p4-eplist {
|
||||
margin-top:8px;
|
||||
}
|
||||
.__PFX__-p4-ol {
|
||||
display:none;
|
||||
padding-left:18px;
|
||||
}
|
||||
.__PFX__-p4-ol.active { display:block; }
|
||||
.__PFX__-p4-ol li {
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.__PFX__-p4-ol a {
|
||||
font-size:13px;
|
||||
}
|
||||
.__PFX__-p4-ol a.active {
|
||||
color:var(--primary-color);
|
||||
}
|
||||
|
||||
/* 简介 + 推荐 */
|
||||
.__PFX__-p4-desc h2 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p4-desc p {
|
||||
margin-top:6px;
|
||||
font-size:14px;
|
||||
line-height:1.7;
|
||||
}
|
||||
.__PFX__-p4-rel h3 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p4-grid {
|
||||
margin-top:8px;
|
||||
display:grid;
|
||||
gap:12px;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p4-grid { grid-template-columns:repeat(3,1fr); }
|
||||
}
|
||||
.__PFX__-p4-card img {
|
||||
width:100%;
|
||||
aspect-ratio:2/3;
|
||||
border-radius:8px;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-p4-card p {
|
||||
font-size:12px;
|
||||
margin-top:4px;
|
||||
}
|
||||
118
code/public/static/css/modules/play/play_05.css
Normal file
118
code/public/static/css/modules/play/play_05.css
Normal file
@@ -0,0 +1,118 @@
|
||||
/* PLAY 05 — 实验风卡片布局 */
|
||||
|
||||
.__PFX__-p5-wrap {
|
||||
padding:12px;
|
||||
}
|
||||
|
||||
/* 封面 + 播放器 */
|
||||
.__PFX__-p5-hero {
|
||||
display:flex;
|
||||
gap:10px;
|
||||
}
|
||||
@media(max-width:768px){
|
||||
.__PFX__-p5-hero { flex-direction:column; }
|
||||
}
|
||||
.__PFX__-p5-pic {
|
||||
width:120px;
|
||||
aspect-ratio:2/3;
|
||||
border-radius:10px;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-p5-right {
|
||||
flex:1;
|
||||
}
|
||||
.__PFX__-p5-right h1 {
|
||||
font-size:20px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p5-meta {
|
||||
font-size:13px;
|
||||
margin-top:4px;
|
||||
}
|
||||
.__PFX__-p5-dp {
|
||||
width:100%;
|
||||
margin-top:8px;
|
||||
height:200px;
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p5-dp { height:280px; }
|
||||
}
|
||||
|
||||
/* 线路横向滚动 */
|
||||
.__PFX__-p5-lines {
|
||||
margin-top:12px;
|
||||
display:flex;
|
||||
overflow-x:auto;
|
||||
gap:8px;
|
||||
}
|
||||
.__PFX__-p5-line {
|
||||
padding:4px 10px;
|
||||
font-size:12px;
|
||||
border-radius:999px;
|
||||
background:#f3f3f3;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.__PFX__-p5-line.active {
|
||||
background:var(--primary-color);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 集数 */
|
||||
.__PFX__-p5-eps {
|
||||
margin-top:8px;
|
||||
}
|
||||
.__PFX__-p5-epbox {
|
||||
display:none;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
}
|
||||
.__PFX__-p5-epbox.active {
|
||||
display:flex;
|
||||
}
|
||||
.__PFX__-p5-epbtn {
|
||||
padding:5px 10px;
|
||||
font-size:12px;
|
||||
border-radius:8px;
|
||||
background:#fafafa;
|
||||
border:1px solid rgba(0,0,0,.06);
|
||||
}
|
||||
.__PFX__-p5-epbtn.active {
|
||||
background:var(--primary-color);
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
/* 简介 + 推荐 */
|
||||
.__PFX__-p5-desc h2 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p5-desc p {
|
||||
margin-top:6px;
|
||||
font-size:14px;
|
||||
line-height:1.7;
|
||||
}
|
||||
.__PFX__-p5-rel h3 {
|
||||
margin-top:18px;
|
||||
font-size:16px;
|
||||
color:var(--primary-color);
|
||||
}
|
||||
.__PFX__-p5-relgrid {
|
||||
margin-top:8px;
|
||||
display:grid;
|
||||
gap:10px;
|
||||
grid-template-columns:repeat(2,1fr);
|
||||
}
|
||||
@media(min-width:768px){
|
||||
.__PFX__-p5-relgrid { grid-template-columns:repeat(4,1fr); }
|
||||
}
|
||||
.__PFX__-p5-relcard img {
|
||||
width:100%;
|
||||
border-radius:10px;
|
||||
aspect-ratio:2/3;
|
||||
object-fit:cover;
|
||||
}
|
||||
.__PFX__-p5-relcard p {
|
||||
margin-top:4px;
|
||||
font-size:12px;
|
||||
}
|
||||
Reference in New Issue
Block a user