refactor: optimize video & upper rank page
This commit is contained in:
kairee committed
1 parent
cb547e3ced
commit
1b76fdeda1
4 files changed
+132
-125
No files matched your search
@@ -74,7 +74,7 @@ function icon(name) {
|
|||||||
info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="7.5" r="1"/>',
|
info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="7.5" r="1"/>',
|
||||||
};
|
};
|
||||||
return `<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
return `<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ""}</svg>`;
|
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] || ""}</svg>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderNav() {
|
function renderNav() {
|
||||||
|
|||||||
@@ -36,9 +36,11 @@ export function videoCard(item, {
|
|||||||
} = {}) {
|
} = {}) {
|
||||||
const metrics = item.metrics || {};
|
const metrics = item.metrics || {};
|
||||||
const hasMetric = Object.prototype.hasOwnProperty.call(metrics, primary);
|
const hasMetric = Object.prototype.hasOwnProperty.call(metrics, primary);
|
||||||
const primaryValue = primaryText !== null
|
const raw = primaryText !== null
|
||||||
? primaryText
|
? primaryText
|
||||||
: (hasMetric ? metrics[primary] : item[primary]);
|
: (hasMetric ? metrics[primary] : item[primary]);
|
||||||
|
// 指标排序直接返回原始计数，统一走 formatCount，避免同一列混排 “36375” 与 “1.1万”。
|
||||||
|
const primaryValue = typeof raw === "number" ? formatCount(raw) : raw;
|
||||||
const label = primaryLabel || metricLabel(primary);
|
const label = primaryLabel || metricLabel(primary);
|
||||||
const growth = item.growth;
|
const growth = item.growth;
|
||||||
const delta = growth?.available ? growth.delta : null;
|
const delta = growth?.available ? growth.delta : null;
|
||||||
@@ -69,7 +71,6 @@ export function videoCard(item, {
|
|||||||
<span class="secondary-stat">互动 ${formatPercent(item.interaction_rate)}</span>
|
<span class="secondary-stat">互动 ${formatPercent(item.interaction_rate)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-arrow" aria-hidden="true">›</span>
|
|
||||||
</a>`;
|
</a>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -100,7 +101,6 @@ export function upCard(item, {
|
|||||||
<span class="secondary-stat">${escapeHtml(secondaryLabel)} ${escapeHtml(secondary)}</span>
|
<span class="secondary-stat">${escapeHtml(secondaryLabel)} ${escapeHtml(secondary)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="card-arrow" aria-hidden="true">›</span>
|
|
||||||
</a>`;
|
</a>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+119
-113
@@ -23,7 +23,8 @@
|
|||||||
--success: #5f7a4e;
|
--success: #5f7a4e;
|
||||||
--radius: 16px;
|
--radius: 16px;
|
||||||
--radius-small: 10px;
|
--radius-small: 10px;
|
||||||
--shadow: 0 10px 30px rgba(42, 32, 26, 0.08);
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-float: 0 10px 28px rgba(0, 0, 0, 0.14);
|
||||||
--nav-width: 220px;
|
--nav-width: 220px;
|
||||||
--nav-height: 64px;
|
--nav-height: 64px;
|
||||||
}
|
}
|
||||||
@@ -51,7 +52,8 @@
|
|||||||
--warning-soft: #e9b97c1f;
|
--warning-soft: #e9b97c1f;
|
||||||
--danger: #e3958c;
|
--danger: #e3958c;
|
||||||
--success: #a7b98f;
|
--success: #a7b98f;
|
||||||
--shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||||
|
--shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -68,6 +70,7 @@ body {
|
|||||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,6 +78,7 @@ a { color: inherit; text-decoration: none; }
|
|||||||
button, input, select { font: inherit; color: inherit; }
|
button, input, select { font: inherit; color: inherit; }
|
||||||
img { max-width: 100%; }
|
img { max-width: 100%; }
|
||||||
h1, h2, h3, p { margin: 0; }
|
h1, h2, h3, p { margin: 0; }
|
||||||
|
h1, h2, h3, strong, b { font-weight: 600; }
|
||||||
|
|
||||||
:focus-visible {
|
:focus-visible {
|
||||||
outline: 2px solid var(--accent);
|
outline: 2px solid var(--accent);
|
||||||
@@ -105,15 +109,14 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border-radius: 11px;
|
border-radius: 10px;
|
||||||
background: linear-gradient(135deg, var(--accent-strong), var(--accent));
|
background: var(--accent);
|
||||||
color: var(--accent-contrast);
|
color: var(--accent-contrast);
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
|
|
||||||
}
|
}
|
||||||
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
|
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
|
||||||
.brand-text strong { font-size: 15px; letter-spacing: 0.2px; white-space: nowrap; }
|
.brand-text strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
|
||||||
.brand-text small { color: var(--muted); font-size: 11px; white-space: nowrap; }
|
.brand-text small { color: var(--muted); font-size: 11px; white-space: nowrap; }
|
||||||
.topbar-hint {
|
.topbar-hint {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@@ -157,10 +160,10 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 60px;
|
top: 60px;
|
||||||
z-index: 19;
|
z-index: 19;
|
||||||
padding: 8px 14px;
|
padding: 6px 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: var(--accent-contrast);
|
color: var(--accent-contrast);
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
}
|
}
|
||||||
@@ -175,7 +178,7 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
.page {
|
.page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 16px;
|
||||||
max-width: 1120px;
|
max-width: 1120px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@@ -185,10 +188,10 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 4px 2px;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
.page-head h1 { font-size: 24px; letter-spacing: -0.4px; }
|
.page-head h1 { font-size: 24px; font-weight: 600; }
|
||||||
.page-sub { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
|
.page-sub { margin-top: 4px; color: var(--muted); font-size: 13px; }
|
||||||
.page-head h1 .page-sub { margin-top: 0; margin-left: 8px; font-weight: 400; }
|
.page-head h1 .page-sub { margin-top: 0; margin-left: 8px; font-weight: 400; }
|
||||||
.home-head { align-items: center; }
|
.home-head { align-items: center; }
|
||||||
.back-link { color: var(--muted); font-size: 13px; }
|
.back-link { color: var(--muted); font-size: 13px; }
|
||||||
@@ -207,7 +210,7 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: var(--accent-contrast);
|
color: var(--accent-contrast);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 650;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -257,14 +260,14 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
gap: 2px;
|
gap: 2px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 10.5px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
.nav-item.active { color: var(--accent); background: var(--accent-soft); }
|
.nav-item.active { color: var(--accent); background: var(--accent-soft); }
|
||||||
.nav-icon { width: 21px; height: 21px; }
|
.nav-icon { width: 18px; height: 18px; }
|
||||||
.nav-label { line-height: 1; }
|
.nav-label { line-height: 1; }
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
padding: 14px;
|
padding: 16px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
@@ -275,10 +278,10 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.section-head h2 { font-size: 16px; letter-spacing: -0.2px; }
|
.section-head h2 { font-size: 16px; font-weight: 600; }
|
||||||
.section-note { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
|
.section-note { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
|
||||||
.warning-text { color: var(--warning); }
|
.warning-text { color: var(--warning); }
|
||||||
.danger { color: var(--danger); }
|
.danger { color: var(--danger); }
|
||||||
.up { color: var(--success); }
|
.up { color: var(--success); }
|
||||||
@@ -296,7 +299,7 @@ h1, h2, h3, p { margin: 0; }
|
|||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
}
|
}
|
||||||
.live-chip span { display: block; color: var(--muted); font-size: 11px; }
|
.live-chip span { display: block; color: var(--muted); font-size: 11px; }
|
||||||
.live-chip strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.2px; }
|
.live-chip strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
|
||||||
a.live-chip { text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
|
a.live-chip { text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
|
||||||
a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
|
a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
|
||||||
.live-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
|
.live-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
|
||||||
@@ -308,7 +311,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 4px 12px;
|
gap: 4px 12px;
|
||||||
padding: 11px 14px;
|
padding: 12px 16px;
|
||||||
border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
|
border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||||
border-radius: 13px;
|
border-radius: 13px;
|
||||||
background: var(--accent-soft);
|
background: var(--accent-soft);
|
||||||
@@ -324,20 +327,23 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.video-card, .up-card {
|
.video-card, .up-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 26px 96px minmax(0, 1fr) 12px;
|
grid-template-columns: 24px 96px minmax(0, 1fr);
|
||||||
align-items: start;
|
align-items: start;
|
||||||
gap: 9px;
|
gap: 12px;
|
||||||
padding: 9px;
|
padding: 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 13px;
|
border-radius: 16px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
transition: border-color 0.15s, transform 0.15s;
|
transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
}
|
}
|
||||||
.video-card:hover, .up-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
|
.video-card:hover, .up-card:hover {
|
||||||
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr) 12px; }
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||||
|
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
|
||||||
|
}
|
||||||
|
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 96px minmax(0, 1fr); }
|
||||||
.video-card.no-rank .video-thumb, .up-card.no-rank .video-thumb { grid-column: 1; }
|
.video-card.no-rank .video-thumb, .up-card.no-rank .video-thumb { grid-column: 1; }
|
||||||
.video-card.no-rank .video-card-body, .up-card.no-rank .up-card-body { grid-column: 2; }
|
.video-card.no-rank .video-card-body, .up-card.no-rank .up-card-body { grid-column: 2; }
|
||||||
.video-card.no-rank .card-arrow, .up-card.no-rank .card-arrow { grid-column: 3; }
|
|
||||||
.rank-badge {
|
.rank-badge {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
@@ -346,19 +352,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border-radius: 8px;
|
border-radius: 6px;
|
||||||
background: var(--surface-2);
|
background: transparent;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
|
.rank-badge.rank-1 { background: var(--accent); color: var(--accent-contrast); }
|
||||||
.rank-badge.rank-2 { background: var(--accent-soft); color: var(--accent-strong); }
|
.rank-badge.rank-2, .rank-badge.rank-3 { background: var(--surface-2); color: var(--text); }
|
||||||
.rank-badge.rank-3 { background: var(--surface-3); color: var(--muted); }
|
|
||||||
.video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
|
.video-thumb, .hero-cover, .media-thumb, .candidate-thumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 9px;
|
border-radius: 6px;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
}
|
}
|
||||||
.video-thumb {
|
.video-thumb {
|
||||||
@@ -368,10 +373,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
aspect-ratio: 16 / 9;
|
aspect-ratio: 16 / 9;
|
||||||
}
|
}
|
||||||
.video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
.video-thumb img, .hero-cover img, .media-thumb img, .candidate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
|
.cover-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
|
||||||
.cover-placeholder img.image-error { opacity: 0; }
|
.cover-placeholder img.image-error { opacity: 0; }
|
||||||
.video-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
|
.video-card-body, .up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
|
||||||
.up-card-body { grid-column: 3; grid-row: 1; min-width: 0; }
|
|
||||||
.up-avatar {
|
.up-avatar {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
@@ -386,7 +390,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
.up-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
.up-card.no-rank > .up-avatar { grid-column: 1; }
|
.up-card.no-rank > .up-avatar { grid-column: 1; }
|
||||||
@@ -398,13 +402,14 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
font-weight: 650;
|
font-weight: 600;
|
||||||
letter-spacing: -0.1px;
|
|
||||||
}
|
}
|
||||||
|
/* 标题固定占两行高度（line-height 1.35 × 2），让单行与两行标题的行高一致。 */
|
||||||
|
.video-card .video-title, .media-title { min-height: 2.7em; }
|
||||||
.video-meta {
|
.video-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 3px 9px;
|
gap: 4px 10px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -413,45 +418,39 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
gap: 4px 9px;
|
gap: 4px 10px;
|
||||||
margin-top: 5px;
|
margin-top: 6px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
.primary-stat { display: inline-flex; align-items: baseline; gap: 3px; color: var(--text); }
|
.primary-stat { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text); }
|
||||||
.primary-stat b { font-size: 15px; letter-spacing: -0.3px; }
|
.primary-stat b { font-size: 15px; font-weight: 600; }
|
||||||
.primary-stat small { color: var(--muted); font-size: 10px; }
|
.primary-stat small { color: var(--muted); font-size: 11px; }
|
||||||
.secondary-stat { white-space: nowrap; }
|
.secondary-stat { white-space: nowrap; }
|
||||||
.secondary-stat.optional { display: none; }
|
.secondary-stat.optional { display: none; }
|
||||||
.delta { font-weight: 650; font-size: 11px; }
|
.delta { font-weight: 600; font-size: 11px; }
|
||||||
.delta.up { color: var(--success); }
|
.delta.up { color: var(--success); }
|
||||||
.delta.down { color: var(--danger); }
|
.delta.down { color: var(--danger); }
|
||||||
.card-arrow {
|
|
||||||
grid-column: 4;
|
|
||||||
grid-row: 1;
|
|
||||||
align-self: center;
|
|
||||||
color: var(--muted);
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 统一的响应式媒体网格：移动端 2 列（图片自动缩放），PC 端 3 列。 */
|
/* 统一的响应式媒体网格：移动端 2 列（图片自动缩放），PC 端 3 列。 */
|
||||||
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
||||||
@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
@media (min-width: 900px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||||
/* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
|
/* 统一的竖排媒体卡：图 + 两行截断标题 + 作者/数据行 + 高亮数据行。 */
|
||||||
.media-card {
|
.media-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 6px;
|
||||||
padding: 9px;
|
padding: 10px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 13px;
|
border-radius: 16px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
transition: border-color 0.15s, transform 0.15s;
|
transition: border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
|
background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
}
|
}
|
||||||
.media-card:hover {
|
.media-card:hover {
|
||||||
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||||
transform: translateY(-1px);
|
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
|
||||||
}
|
}
|
||||||
.media-rank {
|
.media-rank {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -460,13 +459,13 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
width: 22px;
|
width: 24px;
|
||||||
height: 22px;
|
height: 24px;
|
||||||
border-radius: 7px;
|
border-radius: 6px;
|
||||||
background: rgba(0, 0, 0, 0.62);
|
background: rgba(0, 0, 0, 0.62);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.media-thumb { width: 100%; aspect-ratio: 16 / 9; }
|
.media-thumb { width: 100%; aspect-ratio: 16 / 9; }
|
||||||
.media-title {
|
.media-title {
|
||||||
@@ -474,12 +473,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 12.5px;
|
font-size: 13px;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
font-weight: 650;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.media-meta { color: var(--muted); font-size: 10.5px; }
|
.media-meta { color: var(--muted); font-size: 11px; }
|
||||||
.media-highlight { color: var(--accent); font-size: 10.5px; font-weight: 650; }
|
.media-highlight { color: var(--accent-strong); font-size: 11px; font-weight: 600; }
|
||||||
|
|
||||||
.status-grid {
|
.status-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -491,8 +490,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
}
|
}
|
||||||
.status-grid span { display: block; color: var(--muted); font-size: 10.5px; }
|
.status-grid span { display: block; color: var(--muted); font-size: 11px; }
|
||||||
.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 650; }
|
.status-grid strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }
|
||||||
/* 预计下次运行等 3 项：PC 与移动端都保持一行 */
|
/* 预计下次运行等 3 项：PC 与移动端都保持一行 */
|
||||||
.status-grid.status-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
.status-grid.status-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
|
|
||||||
@@ -531,7 +530,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; }
|
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
|
||||||
.chip-label { color: var(--muted); font-size: 11px; padding-right: 2px; }
|
.chip-label { color: var(--muted); font-size: 11px; padding-right: 2px; }
|
||||||
.range-row { margin-top: 8px; }
|
.range-row { margin-top: 8px; }
|
||||||
|
|
||||||
@@ -539,10 +538,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
padding-bottom: 2px;
|
/* 为键盘焦点环留出绘制空间；负外边距抵消内边距，保持与标题、列表左对齐。 */
|
||||||
|
padding: 4px;
|
||||||
|
margin: -4px;
|
||||||
}
|
}
|
||||||
.rank-toolbar::-webkit-scrollbar { display: none; }
|
.rank-toolbar::-webkit-scrollbar { display: none; }
|
||||||
.rank-toolbar .select-label {
|
.rank-toolbar .select-label {
|
||||||
@@ -587,8 +588,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.search-button svg { width: 18px; height: 18px; }
|
.search-button svg { width: 18px; height: 18px; }
|
||||||
.search-button:hover { color: var(--accent); }
|
.search-button:hover { color: var(--accent); }
|
||||||
.search-input, .select {
|
.search-input, .select {
|
||||||
min-height: 38px;
|
min-height: 36px;
|
||||||
padding: 8px 11px;
|
padding: 8px 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
@@ -643,7 +644,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow-float);
|
||||||
}
|
}
|
||||||
.range-popover-head {
|
.range-popover-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -689,7 +690,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.range-day:hover { background: var(--surface-2); }
|
.range-day:hover { background: var(--surface-2); }
|
||||||
.range-day.in-range { background: var(--accent-soft); color: var(--accent-strong); }
|
.range-day.in-range { background: var(--accent-soft); color: var(--accent-strong); }
|
||||||
.range-day.is-start,
|
.range-day.is-start,
|
||||||
.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 650; }
|
.range-day.is-end { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
|
||||||
.range-popover-foot {
|
.range-popover-foot {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -699,13 +700,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
}
|
}
|
||||||
.range-hint { color: var(--muted); font-size: 11.5px; }
|
.range-hint { color: var(--muted); font-size: 11.5px; }
|
||||||
|
|
||||||
.rank-list { display: flex; flex-direction: column; gap: 8px; }
|
.rank-list {
|
||||||
|
display: grid;
|
||||||
|
/* 桌面端自动两列；单列时最低 440px，避免整行过宽。 */
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
.pager {
|
.pager {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 8px 0;
|
padding: 16px 0;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
@@ -715,9 +721,9 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 28px 16px;
|
padding: 32px 16px;
|
||||||
border: 1px dashed var(--border);
|
border: 1px dashed var(--border);
|
||||||
border-radius: 13px;
|
border-radius: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
@@ -748,10 +754,10 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
.detail-hero-body h1 { font-size: 19px; line-height: 1.35; letter-spacing: -0.3px; }
|
.detail-hero-body h1 { font-size: 19px; line-height: 1.35; }
|
||||||
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
|
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
|
||||||
.compact-hero { padding: 18px; }
|
.compact-hero { padding: 18px; }
|
||||||
|
|
||||||
@@ -762,7 +768,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 10.5px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -775,33 +781,33 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.metric-grid {
|
.metric-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
gap: 7px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
.metric-cell {
|
.metric-cell {
|
||||||
padding: 10px;
|
padding: 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
}
|
}
|
||||||
.metric-label { display: block; color: var(--muted); font-size: 10.5px; }
|
.metric-label { display: block; color: var(--muted); font-size: 11px; }
|
||||||
.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -0.3px; }
|
.metric-cell strong { display: block; margin-top: 2px; font-size: 17px; font-weight: 600; }
|
||||||
.metric-delta { display: inline-block; margin-top: 2px; font-size: 10.5px; font-weight: 650; }
|
.metric-delta { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; }
|
||||||
.metric-delta.up { color: var(--success); }
|
.metric-delta.up { color: var(--success); }
|
||||||
.metric-delta.down { color: var(--danger); }
|
.metric-delta.down { color: var(--danger); }
|
||||||
|
|
||||||
.mini-stats {
|
.mini-stats {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 7px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
.mini-stats > div {
|
.mini-stats > div {
|
||||||
padding: 9px 10px;
|
padding: 10px 12px;
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
}
|
}
|
||||||
.mini-stats span { display: block; color: var(--muted); font-size: 10.5px; }
|
.mini-stats span { display: block; color: var(--muted); font-size: 11px; }
|
||||||
.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; }
|
.mini-stats strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; }
|
||||||
.up-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
.up-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
|
|
||||||
.chart-panel .chart { width: 100%; height: 240px; margin-top: 8px; }
|
.chart-panel .chart { width: 100%; height: 240px; margin-top: 8px; }
|
||||||
@@ -824,7 +830,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
color: var(--accent-contrast);
|
color: var(--accent-contrast);
|
||||||
}
|
}
|
||||||
.hero-number span { display: block; font-size: 12px; opacity: 0.72; }
|
.hero-number span { display: block; font-size: 12px; opacity: 0.72; }
|
||||||
.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -1px; }
|
.hero-number strong { display: block; margin: 4px 0 2px; font-size: 34px; letter-spacing: -0.02em; }
|
||||||
.hero-number small { opacity: 0.68; font-size: 11px; }
|
.hero-number small { opacity: 0.68; font-size: 11px; }
|
||||||
|
|
||||||
.candidate-list { display: flex; flex-direction: column; gap: 10px; }
|
.candidate-list { display: flex; flex-direction: column; gap: 10px; }
|
||||||
@@ -844,8 +850,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.score-badge {
|
.score-badge {
|
||||||
padding: 2px 7px;
|
padding: 2px 7px;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-size: 10.5px;
|
font-size: 11px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
background: var(--surface-2);
|
background: var(--surface-2);
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
@@ -906,8 +912,8 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.detail-hero { flex-direction: row; align-items: flex-start; }
|
.detail-hero { flex-direction: row; align-items: flex-start; }
|
||||||
.hero-cover { width: 300px; flex: 0 0 300px; }
|
.hero-cover { width: 300px; flex: 0 0 300px; }
|
||||||
.video-thumb { width: 112px; }
|
.video-thumb { width: 112px; }
|
||||||
.video-card, .up-card { grid-template-columns: 28px 112px minmax(0, 1fr) 14px; }
|
.video-card, .up-card { grid-template-columns: 24px 112px minmax(0, 1fr); }
|
||||||
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr) 14px; }
|
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 112px minmax(0, 1fr); }
|
||||||
.secondary-stat.optional { display: inline; }
|
.secondary-stat.optional { display: inline; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -917,7 +923,7 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
.preview-banner { top: 0; margin-left: var(--nav-width); }
|
.preview-banner { top: 0; margin-left: var(--nav-width); }
|
||||||
.main-shell {
|
.main-shell {
|
||||||
margin-left: var(--nav-width);
|
margin-left: var(--nav-width);
|
||||||
padding: 16px 28px 40px;
|
padding: 16px 24px 40px;
|
||||||
}
|
}
|
||||||
.bottom-nav {
|
.bottom-nav {
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -941,12 +947,12 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 11px 14px;
|
padding: 10px 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
border-radius: 11px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.nav-item.active { background: var(--accent-soft); }
|
.nav-item.active { background: var(--accent-soft); }
|
||||||
.nav-icon { width: 20px; height: 20px; }
|
.nav-icon { width: 18px; height: 18px; }
|
||||||
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
.detail-hero .hero-cover { width: 360px; flex-basis: 360px; }
|
.detail-hero .hero-cover { width: 360px; flex-basis: 360px; }
|
||||||
.toast { left: calc(50% + var(--nav-width) / 2); bottom: 28px; }
|
.toast { left: calc(50% + var(--nav-width) / 2); bottom: 28px; }
|
||||||
@@ -954,18 +960,18 @@ a.live-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--bo
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
.main-shell { padding-left: 36px; padding-right: 36px; }
|
.main-shell { padding-left: 32px; padding-right: 32px; }
|
||||||
.video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
.video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||||
.metric-grid { gap: 9px; }
|
.metric-grid { gap: 8px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
@media (max-width: 380px) {
|
||||||
.video-card, .up-card { grid-template-columns: 22px 82px minmax(0, 1fr) 10px; gap: 7px; }
|
.video-card, .up-card { grid-template-columns: 20px 80px minmax(0, 1fr); gap: 8px; }
|
||||||
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 82px minmax(0, 1fr) 10px; }
|
.video-card.no-rank, .up-card.no-rank { grid-template-columns: 80px minmax(0, 1fr); }
|
||||||
.video-thumb { width: 82px; }
|
.video-thumb { width: 80px; }
|
||||||
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||||
.candidate-card { grid-template-columns: 84px minmax(0, 1fr); }
|
.candidate-card { grid-template-columns: 80px minmax(0, 1fr); }
|
||||||
.candidate-thumb { width: 84px; }
|
.candidate-thumb { width: 80px; }
|
||||||
}
|
}
|
||||||
.about-page .panel + .panel { margin-top: 12px; }
|
.about-page .panel + .panel { margin-top: 12px; }
|
||||||
.about-page .panel h2 { font-size: 15px; margin-bottom: 8px; }
|
.about-page .panel h2 { font-size: 15px; margin-bottom: 8px; }
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ function controls({ scope, sort, within, year, growthDays, q, years }) {
|
|||||||
<input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
|
<input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
|
||||||
placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
|
placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
|
||||||
<button class="search-button" type="submit" aria-label="搜索" title="搜索">
|
<button class="search-button" type="submit" aria-label="搜索" title="搜索">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
|
||||||
stroke-linecap="round" aria-hidden="true">
|
stroke-linecap="round" aria-hidden="true">
|
||||||
<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path>
|
<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -100,10 +100,10 @@ function controls({ scope, sort, within, year, growthDays, q, years }) {
|
|||||||
|
|
||||||
function videoPrimary(item, sort) {
|
function videoPrimary(item, sort) {
|
||||||
if (sort === "efficiency") {
|
if (sort === "efficiency") {
|
||||||
return { primary: "efficiency_score", label: "播放/小时·收缩", text: formatCount(item.efficiency_score) };
|
return { primary: "efficiency_score", label: "播放/小时", text: formatCount(item.efficiency_score) };
|
||||||
}
|
}
|
||||||
if (sort === "interaction_efficiency") {
|
if (sort === "interaction_efficiency") {
|
||||||
return { primary: "interaction_efficiency_score", label: "互动/小时·收缩", text: formatCount(item.interaction_efficiency_score) };
|
return { primary: "interaction_efficiency_score", label: "互动/小时", text: formatCount(item.interaction_efficiency_score) };
|
||||||
}
|
}
|
||||||
if (sort === "interaction") {
|
if (sort === "interaction") {
|
||||||
return { primary: "view", label: "互动率", text: formatPercent(item.interaction_rate) };
|
return { primary: "view", label: "互动率", text: formatPercent(item.interaction_rate) };
|
||||||
@@ -143,9 +143,11 @@ function upSecondary(item, sort) {
|
|||||||
|
|
||||||
function listHtml(data, scope, sort, startRank) {
|
function listHtml(data, scope, sort, startRank) {
|
||||||
if (!data.items.length) {
|
if (!data.items.length) {
|
||||||
|
const unavailable = data.available === false;
|
||||||
|
const hint = "换个筛选条件或清空搜索关键词试试。";
|
||||||
return emptyState(
|
return emptyState(
|
||||||
data.available === false ? "当前榜单暂不可用" : (scope === "up" ? "没有匹配的 UP" : "没有匹配的视频"),
|
unavailable ? "当前榜单暂不可用" : (scope === "up" ? "没有匹配的 UP" : "没有匹配的视频"),
|
||||||
data.reason || "换个筛选条件或清空搜索关键词试试。",
|
unavailable ? hint : (data.reason || hint),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (scope === "up") {
|
if (scope === "up") {
|
||||||
@@ -172,10 +174,9 @@ function durationNote(data) {
|
|||||||
const filter = data.duration_filter;
|
const filter = data.duration_filter;
|
||||||
if (!filter) return "";
|
if (!filter) return "";
|
||||||
const shrink = filter.shrink_minutes
|
const shrink = filter.shrink_minutes
|
||||||
? `并按 ${filter.shrink_minutes} 分钟的先验暴露量向全库均值收缩`
|
? `，按 ${filter.shrink_minutes} 分钟先验向全库均值收缩`
|
||||||
: "";
|
: "";
|
||||||
return `<div class="section-note">内容效率与互动效率仅统计时长 ≥ ${filter.min_duration_seconds} 秒、
|
return `<div class="section-note">内容效率与互动效率：时长 ≥ ${filter.min_duration_seconds} 秒、发布满 ${filter.maturity_days} 天、播放 ≥ ${filter.min_view}${shrink}；时长缺失不参与。</div>`;
|
||||||
发布满 ${filter.maturity_days} 天、播放 ≥ ${filter.min_view} 的视频${shrink}；时长缺失的视频不参与排序。</div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function bindControls(root) {
|
function bindControls(root) {
|
||||||
|
|||||||
Reference in new issue
Block a user