gpttemp
This commit is contained in:
69
code/public/static/css/modules/detail_main/action.css
Normal file
69
code/public/static/css/modules/detail_main/action.css
Normal file
@@ -0,0 +1,69 @@
|
||||
/* ===================== Action Base ===================== */
|
||||
|
||||
.__PFX__-dm-action {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action a,
|
||||
.__PFX__-dm-action button {
|
||||
display: inline-block;
|
||||
padding: 8px 14px;
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action span,
|
||||
.__PFX__-dm-action small,
|
||||
.__PFX__-dm-action em {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-action button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===================== Structure Differences ===================== */
|
||||
|
||||
.__PFX__-dm-action.v2 a,
|
||||
.__PFX__-dm-action.v12 a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v3 li {
|
||||
list-style: none;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v3 a {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v7 small,
|
||||
.__PFX__-dm-action.v17 em {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v13 a {
|
||||
font-size: 20px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v15,
|
||||
.__PFX__-dm-action.v19 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.__PFX__-dm-action.v18 {
|
||||
border-top: 1px dashed var(--border-color);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.__PFX__-dm-action {
|
||||
margin-top: 12px;
|
||||
}
|
||||
101
code/public/static/css/modules/detail_main/cover.css
Normal file
101
code/public/static/css/modules/detail_main/cover.css
Normal file
@@ -0,0 +1,101 @@
|
||||
/* ===================== Cover Base ===================== */
|
||||
|
||||
.__PFX__-dm-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-bg {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* ===================== Overlays ===================== */
|
||||
|
||||
.__PFX__-dm-cover-badge,
|
||||
.__PFX__-dm-cover-score,
|
||||
.__PFX__-dm-cover-tag,
|
||||
.__PFX__-dm-cover-year,
|
||||
.__PFX__-dm-cover-free,
|
||||
.__PFX__-dm-cover-top {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
background: rgba(0,0,0,.6);
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-score {
|
||||
top: auto;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-remark {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-play {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-play::after {
|
||||
content: "▶";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ===================== Variant Differences ===================== */
|
||||
|
||||
.__PFX__-dm-cover.v3,
|
||||
.__PFX__-dm-cover.v6,
|
||||
.__PFX__-dm-cover.v10,
|
||||
.__PFX__-dm-cover.v11,
|
||||
.__PFX__-dm-cover.v14 {
|
||||
aspect-ratio: 2 / 3;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover.v8 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover.v16 .__PFX__-dm-cover-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0,0,0,0),
|
||||
rgba(0,0,0,.6)
|
||||
);
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover.v18 {
|
||||
aspect-ratio: 2 / 3;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
58
code/public/static/css/modules/detail_main/desc.css
Normal file
58
code/public/static/css/modules/detail_main/desc.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* ===================== Desc Base ===================== */
|
||||
|
||||
.__PFX__-dm-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc-more {
|
||||
margin-left: 6px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc-note {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================== Variant Helpers ===================== */
|
||||
|
||||
.__PFX__-dm-desc.v1,
|
||||
.__PFX__-dm-desc.v2,
|
||||
.__PFX__-dm-desc.v3,
|
||||
.__PFX__-dm-desc.v7,
|
||||
.__PFX__-dm-desc.v12,
|
||||
.__PFX__-dm-desc.v17 {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc.v5 summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc.v8 blockquote {
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid var(--border-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc.v11 {
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc.v14 {
|
||||
background: var(--bg-soft-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-desc.v19 header {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.__PFX__-dm-root{
|
||||
margin:20px 0;
|
||||
display:grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap:14px;
|
||||
align-items:start;
|
||||
}
|
||||
|
||||
/* 所有模块默认在右侧 */
|
||||
.__PFX__-dm-title,
|
||||
.__PFX__-dm-title-box,
|
||||
.__PFX__-dm-title-wrap,
|
||||
.__PFX__-dm-meta,
|
||||
.__PFX__-dm-desc,
|
||||
.__PFX__-dm-action{
|
||||
grid-column:2;
|
||||
}
|
||||
|
||||
/* 封面永远左侧 */
|
||||
.__PFX__-dm-cover{
|
||||
grid-column:1;
|
||||
grid-row:1 / span 8;
|
||||
border-radius:10px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.__PFX__-dm-cover-img,
|
||||
.__PFX__-dm-cover-bg{
|
||||
width:100%;
|
||||
aspect-ratio:2 / 3;
|
||||
object-fit:cover;
|
||||
}
|
||||
|
||||
|
||||
40
code/public/static/css/modules/detail_main/detail_main.css
Normal file
40
code/public/static/css/modules/detail_main/detail_main.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.__PFX__-detail {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.__PFX__-detail.B,
|
||||
.__PFX__-detail.D {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.__PFX__-detail-cover img {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
aspect-ratio: 2 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.__PFX__-detail-title {
|
||||
font-size: 22px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.__PFX__-detail-title .score {
|
||||
margin-left: 8px;
|
||||
color: var(--accent-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.__PFX__-detail-meta span {
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.__PFX__-detail-desc {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* ================= Layout A ================= */
|
||||
|
||||
.__PFX__-layout-a{
|
||||
margin:24px 0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:20px;
|
||||
}
|
||||
|
||||
/* ---------- Cover(主视觉) ---------- */
|
||||
.__PFX__-layout-a .__PFX__-dm-row-cover{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
|
||||
width:60%;
|
||||
max-width:420px; /* PC 不霸屏 */
|
||||
}
|
||||
|
||||
/* ---------- 信息区 ---------- */
|
||||
.__PFX__-layout-a .__PFX__-dm-row-info{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* action 不要贴太近 */
|
||||
.__PFX__-layout-a .__PFX__-dm-row-info .__PFX__-dm-action{
|
||||
margin-top:6px;
|
||||
}
|
||||
|
||||
/* ---------- 描述区 ---------- */
|
||||
.__PFX__-layout-a .__PFX__-dm-row-desc{
|
||||
max-width:760px;
|
||||
margin:0 auto;
|
||||
line-height:1.8;
|
||||
}
|
||||
|
||||
/* ================= H5 优化 ================= */
|
||||
|
||||
@media (max-width:767px){
|
||||
|
||||
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
|
||||
width:80%;
|
||||
max-width:none;
|
||||
}
|
||||
|
||||
.__PFX__-layout-a .__PFX__-dm-row-desc{
|
||||
max-width:none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= 大屏优化 ================= */
|
||||
|
||||
@media (min-width:1200px){
|
||||
|
||||
.__PFX__-layout-a .__PFX__-dm-row-cover .__PFX__-dm-cover{
|
||||
max-width:480px;
|
||||
}
|
||||
|
||||
.__PFX__-layout-a .__PFX__-dm-row-desc{
|
||||
max-width:860px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/* ================= Layout B ================= */
|
||||
|
||||
.__PFX__-dm-root.__PFX__-layout-B{
|
||||
margin:20px 0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16px;
|
||||
}
|
||||
|
||||
/* 顶部左右 */
|
||||
.__PFX__-layout-B .__PFX__-dm-row-top{
|
||||
display:flex;
|
||||
gap:16px;
|
||||
align-items:flex-start;
|
||||
}
|
||||
|
||||
/* 左:封面 */
|
||||
.__PFX__-layout-B .__PFX__-dm-col-cover{
|
||||
width:33%;
|
||||
max-width:280px;
|
||||
}
|
||||
|
||||
/* 右:信息区 */
|
||||
.__PFX__-layout-B .__PFX__-dm-col-info{
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
/* 底部 desc */
|
||||
.__PFX__-layout-B .__PFX__-dm-row-bottom{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* ================= H5 优化 ================= */
|
||||
|
||||
@media (max-width:767px){
|
||||
.__PFX__-layout-B .__PFX__-dm-row-top{
|
||||
gap:12px;
|
||||
}
|
||||
|
||||
.__PFX__-layout-B .__PFX__-dm-col-cover{
|
||||
width:40%;
|
||||
max-width:none;
|
||||
}
|
||||
|
||||
.__PFX__-layout-B .__PFX__-dm-col-info{
|
||||
gap:8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* ================= Layout C ================= */
|
||||
|
||||
.__PFX__-dm-root.__PFX__-layout-C{
|
||||
margin:20px 0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:16px;
|
||||
}
|
||||
|
||||
/* 顶部 */
|
||||
.__PFX__-layout-C .__PFX__-dm-row-top{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* 中间:左右 */
|
||||
.__PFX__-layout-C .__PFX__-dm-row-middle{
|
||||
display:flex;
|
||||
gap:16px;
|
||||
}
|
||||
|
||||
/* 左:封面 */
|
||||
.__PFX__-layout-C .__PFX__-dm-col-cover{
|
||||
width:33%;
|
||||
max-width:280px;
|
||||
}
|
||||
|
||||
/* 右:信息 */
|
||||
.__PFX__-layout-C .__PFX__-dm-col-info{
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:12px;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.__PFX__-layout-C .__PFX__-dm-row-bottom{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* H5 适配 */
|
||||
@media (max-width:767px){
|
||||
.__PFX__-layout-C .__PFX__-dm-row-middle{
|
||||
gap:12px;
|
||||
}
|
||||
.__PFX__-layout-C .__PFX__-dm-col-cover{
|
||||
width:40%;
|
||||
}
|
||||
}
|
||||
102
code/public/static/css/modules/detail_main/meta.css
Normal file
102
code/public/static/css/modules/detail_main/meta.css
Normal file
@@ -0,0 +1,102 @@
|
||||
/* ===================== Meta Base ===================== */
|
||||
|
||||
.__PFX__-dm-meta {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted-color);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta-label {
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta-sep {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================== Structure Helpers ===================== */
|
||||
|
||||
.__PFX__-dm-meta.v0 li,
|
||||
.__PFX__-dm-meta.v1 li,
|
||||
.__PFX__-dm-meta.v2 li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v3 span,
|
||||
.__PFX__-dm-meta.v7 span,
|
||||
.__PFX__-dm-meta.v8 span,
|
||||
.__PFX__-dm-meta.v9 span,
|
||||
.__PFX__-dm-meta.v13 span,
|
||||
.__PFX__-dm-meta.v14 span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v5 dt,
|
||||
.__PFX__-dm-meta.v6 dt {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v5 dd,
|
||||
.__PFX__-dm-meta.v6 dd {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v10 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v10 td {
|
||||
padding: 2px 6px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v12 strong {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v15 {
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
/* ===================== Variant Differences ===================== */
|
||||
|
||||
.__PFX__-dm-meta.v3 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v4 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v11 {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v16 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-meta.v19 p {
|
||||
margin: 0;
|
||||
}
|
||||
.__PFX__-dm-meta-chip {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 999px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--text-muted-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
.__PFX__-dm-meta {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
103
code/public/static/css/modules/detail_main/title.css
Normal file
103
code/public/static/css/modules/detail_main/title.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/* ===================== Detail Title Base ===================== */
|
||||
|
||||
.__PFX__-dm-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-box {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.__PFX__-dm-sub {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-tag {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-score {
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================== Variant Differences ===================== */
|
||||
|
||||
.__PFX__-dm-title.v1 small {
|
||||
font-size: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title.v5 sup {
|
||||
font-size: 12px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v3 {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v6 {
|
||||
background: var(--bg-soft-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v7 {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v8 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title.v9 .__PFX__-dm-tag {
|
||||
background: var(--bg-soft-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-box.v12 {
|
||||
background: var(--bg-soft-color);
|
||||
}
|
||||
|
||||
.__PFX__-dm-title.v13 .__PFX__-dm-score {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v14 .__PFX__-dm-icon {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title.v15 {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.__PFX__-dm-title-wrap.v19 {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.__PFX__-dm-title,
|
||||
.__PFX__-dm-title-wrap {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
Reference in New Issue
Block a user