继续更新
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
.background-canvas {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #f4fff6 0%, #e7f8eb 45%, #def1e4 100%);
|
||||
}
|
||||
|
||||
.glow {
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
border-radius: 55% 45% 60% 40% / 48% 52% 45% 55%;
|
||||
opacity: 0.25;
|
||||
filter: blur(0px);
|
||||
background: radial-gradient(circle at 35% 35%, rgba(140, 214, 167, 0.65), rgba(140, 214, 167, 0));
|
||||
animation: floaty 32s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.glow-1 {
|
||||
top: -140px;
|
||||
left: -160px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.glow-2 {
|
||||
top: 55%;
|
||||
left: 60%;
|
||||
animation-delay: 8s;
|
||||
background: radial-gradient(circle at 60% 60%, rgba(120, 192, 152, 0.55), rgba(120, 192, 152, 0));
|
||||
}
|
||||
|
||||
.glow-3 {
|
||||
bottom: -160px;
|
||||
right: -120px;
|
||||
animation-delay: 16s;
|
||||
background: radial-gradient(circle at 40% 40%, rgba(176, 229, 197, 0.6), rgba(176, 229, 197, 0));
|
||||
}
|
||||
|
||||
@keyframes floaty {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
30% {
|
||||
transform: translate3d(35px, -25px, 0) scale(1.05);
|
||||
}
|
||||
60% {
|
||||
transform: translate3d(-30px, 30px, 0) scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.glow {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
opacity: 0.22;
|
||||
}
|
||||
|
||||
.glow-1 {
|
||||
top: -110px;
|
||||
left: -140px;
|
||||
}
|
||||
|
||||
.glow-2 {
|
||||
top: 48%;
|
||||
left: 38%;
|
||||
}
|
||||
|
||||
.glow-3 {
|
||||
bottom: -140px;
|
||||
right: -120px;
|
||||
}
|
||||
}
|
||||
393
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/css/style.css
Normal file
393
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/css/style.css
Normal file
@@ -0,0 +1,393 @@
|
||||
:root {
|
||||
--surface-base: rgba(255, 255, 255, 0.85);
|
||||
--surface-soft: rgba(248, 253, 249, 0.9);
|
||||
--border-soft: rgba(120, 192, 152, 0.22);
|
||||
--accent-strong: #4caf7a;
|
||||
--accent-soft: #8fd5a4;
|
||||
--accent-pale: #c6efd5;
|
||||
--text-primary: #134a32;
|
||||
--text-muted: #528169;
|
||||
--chip-bg: rgba(140, 214, 167, 0.18);
|
||||
--shadow-soft: 0 16px 40px rgba(31, 74, 53, 0.14);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
||||
color: var(--text-primary);
|
||||
background: transparent;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: min(100%, 930px);
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
background: var(--surface-base);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 22px;
|
||||
padding: 22px 18px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-self: flex-start;
|
||||
padding: 4px 12px;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.08em;
|
||||
border-radius: 999px;
|
||||
background: var(--chip-bg);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
padding: 10px 20px;
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #66bb86, #4caf7a);
|
||||
color: #ffffff;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 12px 30px rgba(76, 175, 122, 0.36);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.refresh:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.refresh:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--surface-soft);
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(143, 213, 164, 0.24);
|
||||
padding: 16px 18px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.84rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-strong);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-value .unit {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.list-section {
|
||||
background: var(--surface-base);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 24px;
|
||||
padding: 24px 18px 28px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-header h2 {
|
||||
font-size: 1.28rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-tag {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.series-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error-message,
|
||||
.empty-message {
|
||||
padding: 18px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 14px;
|
||||
border: 1px dashed rgba(120, 192, 152, 0.32);
|
||||
}
|
||||
|
||||
.series-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(120, 192, 152, 0.2);
|
||||
padding: 16px;
|
||||
box-shadow: 0 14px 32px rgba(31, 74, 53, 0.12);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.series-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 18px 40px rgba(31, 74, 53, 0.16);
|
||||
}
|
||||
|
||||
.rank-pill {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #7ed49b, #5cc88a);
|
||||
}
|
||||
|
||||
.rank-pill.top-1 {
|
||||
background: linear-gradient(135deg, #5cc88a, #3da36b);
|
||||
}
|
||||
|
||||
.rank-pill.top-2 {
|
||||
background: linear-gradient(135deg, #72d0a0, #55be85);
|
||||
}
|
||||
|
||||
.rank-pill.top-3 {
|
||||
background: linear-gradient(135deg, #8fe0b4, #6fd09a);
|
||||
}
|
||||
|
||||
.series-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.series-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.series-name {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.series-meta {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 14px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(120, 192, 152, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(135deg, rgba(120, 192, 152, 0.9), rgba(76, 175, 122, 0.95));
|
||||
width: 0;
|
||||
transition: width 0.45s ease;
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media (min-width: 600px) {
|
||||
.app {
|
||||
padding: 26px 20px 96px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 26px 28px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.series-item {
|
||||
grid-template-columns: 70px 1fr;
|
||||
padding: 18px 22px;
|
||||
}
|
||||
|
||||
.rank-pill {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop */
|
||||
@media (min-width: 1024px) {
|
||||
.app {
|
||||
padding: 34px 24px 110px;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
padding: 30px 32px 36px;
|
||||
}
|
||||
|
||||
.series-item {
|
||||
grid-template-columns: 96px 1fr;
|
||||
padding: 22px 26px;
|
||||
}
|
||||
|
||||
.series-name {
|
||||
font-size: 1.22rem;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
62
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/index.html
Normal file
62
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>猫眼网剧实时热度</title>
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-canvas">
|
||||
<div class="glow glow-1"></div>
|
||||
<div class="glow glow-2"></div>
|
||||
<div class="glow glow-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="app">
|
||||
<header class="hero">
|
||||
<div class="hero-text">
|
||||
<span class="badge">实时热度</span>
|
||||
<h1>猫眼网剧实时热度</h1>
|
||||
<p class="subtitle">网剧热度榜单即时更新，洞察全网追剧风向</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<button type="button" id="refreshButton" class="refresh">手动刷新</button>
|
||||
<span id="updateTime" class="update-time">正在获取最新数据...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="quick-stats" id="quickStats">
|
||||
<div class="stat-card">
|
||||
<p class="stat-label">上榜剧集</p>
|
||||
<p class="stat-value" id="seriesCount">--</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<p class="stat-label">最高热度值</p>
|
||||
<p class="stat-value"><span id="topHeat">--</span><span class="unit">热度</span></p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<p class="stat-label">平均热度值</p>
|
||||
<p class="stat-value"><span id="avgHeat">--</span><span class="unit">热度</span></p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<p class="stat-label">官方刷新频率</p>
|
||||
<p class="stat-value" id="refreshGap">--</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="list-section">
|
||||
<div class="list-header">
|
||||
<h2>网剧热度排行</h2>
|
||||
<span class="list-tag">数据持续刷新</span>
|
||||
</div>
|
||||
<div id="seriesList" class="series-list">
|
||||
<div class="loading">正在载入网剧热度...</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
293
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/js/main.js
Normal file
293
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/js/main.js
Normal file
@@ -0,0 +1,293 @@
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/v2/maoyan/realtime/web"
|
||||
];
|
||||
|
||||
const FALLBACK_ENDPOINT = "./返回接口.json";
|
||||
const REFRESH_INTERVAL = 4500;
|
||||
const MAX_ITEMS = 40;
|
||||
|
||||
const refreshButton = document.getElementById("refreshButton");
|
||||
const updateTimeEl = document.getElementById("updateTime");
|
||||
const seriesListEl = document.getElementById("seriesList");
|
||||
const seriesCountEl = document.getElementById("seriesCount");
|
||||
const topHeatEl = document.getElementById("topHeat");
|
||||
const avgHeatEl = document.getElementById("avgHeat");
|
||||
const refreshGapEl = document.getElementById("refreshGap");
|
||||
|
||||
let isLoading = false;
|
||||
let autoTimer = null;
|
||||
|
||||
function escapeHtml(value) {
|
||||
if (value === undefined || value === null) {
|
||||
return "";
|
||||
}
|
||||
return String(value)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function safeText(value, fallback = "--") {
|
||||
if (value === undefined || value === null || value === "") {
|
||||
return fallback;
|
||||
}
|
||||
return escapeHtml(value);
|
||||
}
|
||||
|
||||
function formatNumber(value, fractionDigits = 2) {
|
||||
const numeric = Number(value);
|
||||
if (!Number.isFinite(numeric)) {
|
||||
return "--";
|
||||
}
|
||||
return numeric.toFixed(fractionDigits);
|
||||
}
|
||||
|
||||
function formatGap(seconds) {
|
||||
const numeric = Number(seconds);
|
||||
if (!Number.isFinite(numeric) || numeric <= 0) {
|
||||
return "--";
|
||||
}
|
||||
|
||||
if (numeric < 60) {
|
||||
return `约每 ${Math.round(numeric)} 秒`;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(numeric / 60);
|
||||
const remainder = Math.round(numeric % 60);
|
||||
if (remainder === 0) {
|
||||
return `约每 ${minutes} 分钟`;
|
||||
}
|
||||
return `约每 ${minutes} 分 ${remainder} 秒`;
|
||||
}
|
||||
|
||||
function formatUpdateTime(data) {
|
||||
if (data && typeof data.updated === "string" && data.updated.trim()) {
|
||||
return data.updated.trim();
|
||||
}
|
||||
if (data && typeof data.updated_at === "number" && Number.isFinite(data.updated_at)) {
|
||||
return new Date(data.updated_at).toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
return new Date().toLocaleString("zh-CN", { hour12: false });
|
||||
}
|
||||
|
||||
function renderStats(list, gapSeconds) {
|
||||
const total = Array.isArray(list) ? list.length : 0;
|
||||
seriesCountEl.textContent = total ? total.toString() : "--";
|
||||
|
||||
if (total) {
|
||||
let maxHeat = 0;
|
||||
let sumHeat = 0;
|
||||
list.forEach(item => {
|
||||
const heat = Number(item?.curr_heat);
|
||||
if (Number.isFinite(heat)) {
|
||||
if (heat > maxHeat) {
|
||||
maxHeat = heat;
|
||||
}
|
||||
sumHeat += heat;
|
||||
}
|
||||
});
|
||||
|
||||
topHeatEl.textContent = maxHeat ? maxHeat.toFixed(2) : "--";
|
||||
const average = sumHeat && total ? (sumHeat / total) : 0;
|
||||
avgHeatEl.textContent = average ? average.toFixed(2) : "--";
|
||||
} else {
|
||||
topHeatEl.textContent = "--";
|
||||
avgHeatEl.textContent = "--";
|
||||
}
|
||||
|
||||
refreshGapEl.textContent = formatGap(gapSeconds);
|
||||
}
|
||||
|
||||
function createMetric(label, value) {
|
||||
return `
|
||||
<div class="metric">
|
||||
<span class="metric-label">${label}</span>
|
||||
<span class="metric-value">${safeText(value)}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function normalizeBarValue(list) {
|
||||
let maxValue = 0;
|
||||
if (Array.isArray(list)) {
|
||||
list.forEach(item => {
|
||||
const bar = Number(item?.bar_value ?? item?.curr_heat);
|
||||
if (Number.isFinite(bar) && bar > maxValue) {
|
||||
maxValue = bar;
|
||||
}
|
||||
});
|
||||
}
|
||||
return maxValue || 1;
|
||||
}
|
||||
|
||||
function createSeriesItem(series, index, maxBar) {
|
||||
const article = document.createElement("article");
|
||||
article.className = "series-item";
|
||||
|
||||
const rankClass = index < 3 ? ` top-${index + 1}` : "";
|
||||
const name = safeText(series?.series_name || "未命名剧集");
|
||||
const releaseInfo = safeText(series?.release_info || "--");
|
||||
const platform = safeText(series?.platform_desc || "--");
|
||||
const heatDesc = safeText(series?.curr_heat_desc || formatNumber(series?.curr_heat));
|
||||
|
||||
const barValue = Number(series?.bar_value ?? series?.curr_heat);
|
||||
const ratio = Number.isFinite(barValue) && maxBar > 0 ? Math.min(100, Math.max(0, (barValue / maxBar) * 100)) : 0;
|
||||
|
||||
article.innerHTML = `
|
||||
<div class="rank-pill${rankClass}">${index + 1}</div>
|
||||
<div class="series-body">
|
||||
<div class="series-head">
|
||||
<div class="series-name">${name}</div>
|
||||
<div class="series-meta">${releaseInfo} · ${platform}</div>
|
||||
</div>
|
||||
<div class="metric-grid">
|
||||
${createMetric("实时热度", heatDesc)}
|
||||
${createMetric("上线信息", releaseInfo)}
|
||||
${createMetric("播出平台", platform)}
|
||||
${createMetric("剧集ID", safeText(series?.series_id))}
|
||||
</div>
|
||||
<div class="progress-wrap">
|
||||
<div class="progress-row">
|
||||
<div class="progress-label">
|
||||
<span>热度走势</span>
|
||||
<span>${heatDesc}</span>
|
||||
</div>
|
||||
<div class="progress-bar"><span style="width: ${ratio}%"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return article;
|
||||
}
|
||||
|
||||
function renderSeriesList(list) {
|
||||
seriesListEl.innerHTML = "";
|
||||
|
||||
if (!Array.isArray(list) || list.length === 0) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "empty-message";
|
||||
empty.textContent = "暂时没有可展示的剧集数据";
|
||||
seriesListEl.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const maxBar = normalizeBarValue(list);
|
||||
list.slice(0, MAX_ITEMS).forEach((series, index) => {
|
||||
seriesListEl.appendChild(createSeriesItem(series, index, maxBar));
|
||||
});
|
||||
}
|
||||
|
||||
async function requestJson(url) {
|
||||
const response = await fetch(url, { cache: "no-store" });
|
||||
if (!response.ok) {
|
||||
throw new Error(`请求失败: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function retrieveData() {
|
||||
for (const endpoint of API_ENDPOINTS) {
|
||||
try {
|
||||
const result = await requestJson(endpoint);
|
||||
if (result?.code === 200 && result?.data) {
|
||||
return result.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("主接口请求失败", error);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const fallbackResult = await requestJson(FALLBACK_ENDPOINT);
|
||||
if (fallbackResult?.data) {
|
||||
return fallbackResult.data;
|
||||
}
|
||||
} catch (fallbackError) {
|
||||
console.warn("本地示例数据读取失败", fallbackError);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
async function loadData(isManual = false) {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
if (isManual) {
|
||||
refreshButton.disabled = true;
|
||||
refreshButton.textContent = "刷新中...";
|
||||
}
|
||||
|
||||
if (!seriesListEl.children.length) {
|
||||
seriesListEl.innerHTML = '<div class="loading">正在载入网剧热度...</div>';
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await retrieveData();
|
||||
if (!data) {
|
||||
throw new Error("无法获取数据");
|
||||
}
|
||||
|
||||
const list = Array.isArray(data.list) ? data.list : [];
|
||||
renderSeriesList(list);
|
||||
renderStats(list, data.update_gap_second);
|
||||
updateTimeEl.textContent = `最近更新 ${formatUpdateTime(data)}`;
|
||||
} catch (error) {
|
||||
console.error("加载数据失败", error);
|
||||
seriesListEl.innerHTML = "";
|
||||
const errBox = document.createElement("div");
|
||||
errBox.className = "error-message";
|
||||
errBox.textContent = "数据获取暂时不可用，系统稍后会自动重试";
|
||||
seriesListEl.appendChild(errBox);
|
||||
updateTimeEl.textContent = "最近更新 --";
|
||||
renderStats([], 0);
|
||||
} finally {
|
||||
if (isManual) {
|
||||
refreshButton.disabled = false;
|
||||
refreshButton.textContent = "手动刷新";
|
||||
}
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startAutoRefresh() {
|
||||
if (autoTimer) {
|
||||
clearInterval(autoTimer);
|
||||
}
|
||||
autoTimer = setInterval(() => {
|
||||
loadData(false);
|
||||
}, REFRESH_INTERVAL);
|
||||
}
|
||||
|
||||
refreshButton.addEventListener("click", () => {
|
||||
loadData(true);
|
||||
});
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
if (autoTimer) {
|
||||
clearInterval(autoTimer);
|
||||
autoTimer = null;
|
||||
}
|
||||
} else {
|
||||
startAutoRefresh();
|
||||
loadData(false);
|
||||
}
|
||||
});
|
||||
|
||||
function init() {
|
||||
loadData(false);
|
||||
startAutoRefresh();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
311
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/返回接口.json
Normal file
311
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼网剧实时热度/返回接口.json
Normal file
@@ -0,0 +1,311 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"update_gap_second": 3,
|
||||
"updated": "2025-09-26 16:36:56",
|
||||
"updated_at": 1758875816062,
|
||||
"list": [
|
||||
{
|
||||
"series_id": 1517707,
|
||||
"series_name": "赴山海",
|
||||
"release_info": "上线16天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 6290.29,
|
||||
"curr_heat_desc": "6290.29",
|
||||
"bar_value": 6290.29
|
||||
},
|
||||
{
|
||||
"series_id": 1528168,
|
||||
"series_name": "许我耀眼",
|
||||
"release_info": "上线首日",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 6231.35,
|
||||
"curr_heat_desc": "6231.35",
|
||||
"bar_value": 5749.54721862606
|
||||
},
|
||||
{
|
||||
"series_id": 1528151,
|
||||
"series_name": "欢乐家长群2",
|
||||
"release_info": "上线12天",
|
||||
"platform_desc": "芒果TV独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 6012.95,
|
||||
"curr_heat_desc": "6012.95",
|
||||
"bar_value": 5119.06438712135
|
||||
},
|
||||
{
|
||||
"series_id": 1492955,
|
||||
"series_name": "吴邪私家笔记",
|
||||
"release_info": "上线7天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5851.91,
|
||||
"curr_heat_desc": "5851.91",
|
||||
"bar_value": 4596.76326056356
|
||||
},
|
||||
{
|
||||
"series_id": 1538034,
|
||||
"series_name": "不眠日",
|
||||
"release_info": "上线10天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5804.09,
|
||||
"curr_heat_desc": "5804.09",
|
||||
"bar_value": 4206.68639815508
|
||||
},
|
||||
{
|
||||
"series_id": 1501684,
|
||||
"series_name": "灼灼韶华",
|
||||
"release_info": "上线16天",
|
||||
"platform_desc": "优酷独播",
|
||||
"platform_txt": 0,
|
||||
"curr_heat": 5799.01,
|
||||
"curr_heat_desc": "5799.01",
|
||||
"bar_value": 3878.03171596132
|
||||
},
|
||||
{
|
||||
"series_id": 1474248,
|
||||
"series_name": "围猎",
|
||||
"release_info": "上线2天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5752.05,
|
||||
"curr_heat_desc": "5752.05",
|
||||
"bar_value": 3549.20963005863
|
||||
},
|
||||
{
|
||||
"series_id": 1501687,
|
||||
"series_name": "守护者们",
|
||||
"release_info": "上线4天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5730.63,
|
||||
"curr_heat_desc": "5730.63",
|
||||
"bar_value": 3262.59275525736
|
||||
},
|
||||
{
|
||||
"series_id": 1520710,
|
||||
"series_name": "生万物",
|
||||
"release_info": "上线45天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 5475.27,
|
||||
"curr_heat_desc": "5475.27",
|
||||
"bar_value": 2876.18977832356
|
||||
},
|
||||
{
|
||||
"series_id": 1520734,
|
||||
"series_name": "芬芳喜事",
|
||||
"release_info": "上线5天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5462.54,
|
||||
"curr_heat_desc": "5462.54",
|
||||
"bar_value": 2647.63508938203
|
||||
},
|
||||
{
|
||||
"series_id": 1506349,
|
||||
"series_name": "子夜归",
|
||||
"release_info": "上线40天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5414.09,
|
||||
"curr_heat_desc": "5414.09",
|
||||
"bar_value": 2421.25465526037
|
||||
},
|
||||
{
|
||||
"series_id": 1568466,
|
||||
"series_name": "照镜辞",
|
||||
"release_info": "上线8天",
|
||||
"platform_desc": "哔哩哔哩独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5405.94,
|
||||
"curr_heat_desc": "5405.94",
|
||||
"bar_value": 2230.68228745166
|
||||
},
|
||||
{
|
||||
"series_id": 1501665,
|
||||
"series_name": "足迹",
|
||||
"release_info": "上线23天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5345.55,
|
||||
"curr_heat_desc": "5345.55",
|
||||
"bar_value": 2035.21546242053
|
||||
},
|
||||
{
|
||||
"series_id": 1481475,
|
||||
"series_name": "与晋长安",
|
||||
"release_info": "上线34天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 5231.26,
|
||||
"curr_heat_desc": "5231.26",
|
||||
"bar_value": 1837.70502435479
|
||||
},
|
||||
{
|
||||
"series_id": 1500426,
|
||||
"series_name": "归队",
|
||||
"release_info": "上线33天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5167.29,
|
||||
"curr_heat_desc": "5167.29",
|
||||
"bar_value": 1674.88052510491
|
||||
},
|
||||
{
|
||||
"series_id": 1513970,
|
||||
"series_name": "阵地",
|
||||
"release_info": "上线11天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5155.5,
|
||||
"curr_heat_desc": "5155.50",
|
||||
"bar_value": 1541.8541283172
|
||||
},
|
||||
{
|
||||
"series_id": 1578416,
|
||||
"series_name": "金式森林",
|
||||
"release_info": "上线10天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5098.99,
|
||||
"curr_heat_desc": "5098.99",
|
||||
"bar_value": 1407.04554929882
|
||||
},
|
||||
{
|
||||
"series_id": 1500365,
|
||||
"series_name": "锦月如歌",
|
||||
"release_info": "上线52天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5082.9,
|
||||
"curr_heat_desc": "5082.90",
|
||||
"bar_value": 1294.15728646218
|
||||
},
|
||||
{
|
||||
"series_id": 1481543,
|
||||
"series_name": "凡人修仙传",
|
||||
"release_info": "上线62天",
|
||||
"platform_desc": "优酷独播",
|
||||
"platform_txt": 0,
|
||||
"curr_heat": 5064.74,
|
||||
"curr_heat_desc": "5064.74",
|
||||
"bar_value": 1189.82790916312
|
||||
},
|
||||
{
|
||||
"series_id": 1521009,
|
||||
"series_name": "十二封信",
|
||||
"release_info": "上线29天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 5029.58,
|
||||
"curr_heat_desc": "5029.58",
|
||||
"bar_value": 1090.21013799029
|
||||
},
|
||||
{
|
||||
"series_id": 1492917,
|
||||
"series_name": "献鱼",
|
||||
"release_info": "上线42天",
|
||||
"platform_desc": "优酷独播",
|
||||
"platform_txt": 0,
|
||||
"curr_heat": 5010.95,
|
||||
"curr_heat_desc": "5010.95",
|
||||
"bar_value": 1002.19
|
||||
},
|
||||
{
|
||||
"series_id": 1444502,
|
||||
"series_name": "利剑·玫瑰",
|
||||
"release_info": "上线61天",
|
||||
"platform_desc": "多平台播放",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 4972.54,
|
||||
"curr_heat_desc": "4972.54",
|
||||
"bar_value": 917.613471447017
|
||||
},
|
||||
{
|
||||
"series_id": 1518217,
|
||||
"series_name": "扫毒风暴",
|
||||
"release_info": "上线77天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 4896.37,
|
||||
"curr_heat_desc": "4896.37",
|
||||
"bar_value": 833.695051286619
|
||||
},
|
||||
{
|
||||
"series_id": 1500364,
|
||||
"series_name": "桃花映江山",
|
||||
"release_info": "上线94天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 4806.34,
|
||||
"curr_heat_desc": "4806.34",
|
||||
"bar_value": 755.090462080828
|
||||
},
|
||||
{
|
||||
"series_id": 1505465,
|
||||
"series_name": "定风波",
|
||||
"release_info": "上线57天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 4744.14,
|
||||
"curr_heat_desc": "4744.14",
|
||||
"bar_value": 687.69123872798
|
||||
},
|
||||
{
|
||||
"series_id": 1531702,
|
||||
"series_name": "书卷一梦",
|
||||
"release_info": "上线93天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 4733.39,
|
||||
"curr_heat_desc": "4733.39",
|
||||
"bar_value": 633.081734434469
|
||||
},
|
||||
{
|
||||
"series_id": 1500328,
|
||||
"series_name": "蓄意宠爱",
|
||||
"release_info": "上线5天",
|
||||
"platform_desc": "优酷独播",
|
||||
"platform_txt": 0,
|
||||
"curr_heat": 4730.18,
|
||||
"curr_heat_desc": "4730.18",
|
||||
"bar_value": 583.736247352187
|
||||
},
|
||||
{
|
||||
"series_id": 1532221,
|
||||
"series_name": "目之所及",
|
||||
"release_info": "上线30天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 4712.48,
|
||||
"curr_heat_desc": "4712.48",
|
||||
"bar_value": 536.586836256929
|
||||
},
|
||||
{
|
||||
"series_id": 1524115,
|
||||
"series_name": "白夜宸缘起三生",
|
||||
"release_info": "上线13天",
|
||||
"platform_desc": "腾讯视频独播",
|
||||
"platform_txt": -1,
|
||||
"curr_heat": 4653.77,
|
||||
"curr_heat_desc": "4653.77",
|
||||
"bar_value": 488.930252012005
|
||||
},
|
||||
{
|
||||
"series_id": 1491942,
|
||||
"series_name": "朝雪录",
|
||||
"release_info": "上线76天",
|
||||
"platform_desc": "爱奇艺独播",
|
||||
"platform_txt": 1,
|
||||
"curr_heat": 4623.3,
|
||||
"curr_heat_desc": "4623.30",
|
||||
"bar_value": 448.172875941959
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user