优化结果
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
/* 彩虹背景相关样式 */
|
||||
body {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#ff6b6b 0%,
|
||||
#4ecdc4 12.5%,
|
||||
#45b7d1 25%,
|
||||
#96ceb4 37.5%,
|
||||
#feca57 50%,
|
||||
#ff9ff3 62.5%,
|
||||
#54a0ff 75%,
|
||||
#5f27cd 87.5%,
|
||||
#00d2d3 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: rainbowGradient 15s ease infinite;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes rainbowGradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
25% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
75% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 彩虹装饰层 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 80%, rgba(69, 183, 209, 0.12) 0%, transparent 40%),
|
||||
radial-gradient(circle at 60% 20%, rgba(150, 206, 180, 0.12) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 40%, rgba(254, 202, 87, 0.1) 0%, transparent 35%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
animation: float 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* 彩虹粒子效果 */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 10%, rgba(255, 107, 107, 0.8) 2px, transparent 2px),
|
||||
radial-gradient(circle at 30% 20%, rgba(78, 205, 196, 0.8) 1.5px, transparent 1.5px),
|
||||
radial-gradient(circle at 50% 30%, rgba(69, 183, 209, 0.8) 1px, transparent 1px),
|
||||
radial-gradient(circle at 70% 40%, rgba(150, 206, 180, 0.8) 2px, transparent 2px),
|
||||
radial-gradient(circle at 90% 50%, rgba(254, 202, 87, 0.8) 1.5px, transparent 1.5px),
|
||||
radial-gradient(circle at 20% 60%, rgba(255, 159, 243, 0.8) 1px, transparent 1px),
|
||||
radial-gradient(circle at 40% 70%, rgba(84, 160, 255, 0.8) 2px, transparent 2px),
|
||||
radial-gradient(circle at 60% 80%, rgba(95, 39, 205, 0.8) 1.5px, transparent 1.5px),
|
||||
radial-gradient(circle at 80% 90%, rgba(0, 210, 211, 0.8) 1px, transparent 1px);
|
||||
background-size: 200px 200px, 250px 250px, 180px 180px, 300px 300px, 220px 220px, 160px 160px, 280px 280px, 240px 240px, 200px 200px;
|
||||
animation: sparkle 25s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-15px) rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
transform: translateX(0) translateY(0) scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px) translateY(-5px) scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(10px) translateY(-10px) scale(0.9);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-5px) translateY(-15px) scale(1.05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,863 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header, .header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
header h1, .title {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, #4096ff, #40a9ff);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(64, 150, 255, 0.3);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
background: linear-gradient(135deg, #52c41a, #73d13d);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
margin-top: 15px;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(82, 196, 26, 0.4);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rainbow-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid transparent;
|
||||
border-top: 4px solid #4096ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff, #5f27cd);
|
||||
background-size: 400% 400%;
|
||||
animation: spin 1s linear infinite, rainbowGradient 3s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.loading-emoji {
|
||||
font-size: 2rem;
|
||||
animation: bounce 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #4096ff;
|
||||
border-radius: 50%;
|
||||
animation: loadingDots 1.4s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
|
||||
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
|
||||
.loading-dots span:nth-child(3) { animation-delay: 0s; }
|
||||
|
||||
@keyframes loadingDots {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* 新闻项目卡片 - 移动端优先设计 */
|
||||
.news-item {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(64, 169, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 排名容器 */
|
||||
.news-rank-container {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.news-rank {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.news-rank.rank-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.news-rank.rank-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
|
||||
}
|
||||
|
||||
.news-rank.rank-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: #333;
|
||||
box-shadow: 0 4px 12px rgba(255, 169, 64, 0.3);
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rank-emoji {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* 内容包装器 */
|
||||
.news-content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.news-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.news-title:hover {
|
||||
color: #4096ff;
|
||||
}
|
||||
|
||||
/* 元信息行 */
|
||||
.news-meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-author, .news-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 统计信息行 */
|
||||
.news-stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.news-score {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.heat-level {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.score-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: linear-gradient(135deg, #4096ff, #40a9ff);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.news-link:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(64, 150, 255, 0.4);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.error-content h3 {
|
||||
color: #ff4d4f;
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
color: #666;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(255, 77, 79, 0.4);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 - 移动端优化 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header, .header {
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
header h1, .title {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
gap: 8px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.8rem;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.news-rank {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.rank-emoji {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-meta-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-author, .news-time {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.news-score {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
header h1, .title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-rank {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.news-meta-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.news-stats-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-author, .news-time {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.news-score {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
font-size: 0.65rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🔥 HackerNews 热门榜单</title>
|
||||
<link rel="stylesheet" href="css/background.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<div class="header-icon">🌈</div>
|
||||
<h1 class="title">🔥 HackerNews 热门榜单 💻</h1>
|
||||
<p class="subtitle">全球技术社区 · 实时热门话题</p>
|
||||
|
||||
<div class="tab-container">
|
||||
<button class="tab-btn active" data-type="top">
|
||||
<span class="tab-icon">🏆</span>
|
||||
热门榜
|
||||
</button>
|
||||
<button class="tab-btn" data-type="new">
|
||||
<span class="tab-icon">🆕</span>
|
||||
最新榜
|
||||
</button>
|
||||
<button class="tab-btn" data-type="best">
|
||||
<span class="tab-icon">⭐</span>
|
||||
最佳榜
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="update-time">
|
||||
<span class="time-icon">⏰</span>
|
||||
<span id="updateTime">加载中...</span>
|
||||
</div>
|
||||
|
||||
<button id="refreshBtn" class="refresh-btn">
|
||||
<span class="btn-icon">🔄</span>
|
||||
刷新数据
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-content">
|
||||
<div class="rainbow-spinner"></div>
|
||||
<div class="loading-text">
|
||||
<span class="loading-emoji">🚀</span>
|
||||
<p>正在获取最新榜单...</p>
|
||||
<div class="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-list" id="newsList">
|
||||
<!-- 新闻列表将动态生成 -->
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage" style="display: none;">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">💥</div>
|
||||
<h3>加载失败了</h3>
|
||||
<p>网络连接出现问题，请稍后重试</p>
|
||||
<button onclick="loadNewsList()" class="retry-btn">
|
||||
<span>🔄</span>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,349 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top",
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
let currentType = 'top';
|
||||
|
||||
// DOM元素
|
||||
const loadingElement = document.getElementById('loading');
|
||||
const newsListElement = document.getElementById('newsList');
|
||||
const errorMessageElement = document.getElementById('errorMessage');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
const tabBtns = document.querySelectorAll('.tab-btn');
|
||||
|
||||
// 页面加载完成后自动加载数据
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadNewsList();
|
||||
initTabEvents();
|
||||
});
|
||||
|
||||
// 初始化标签事件
|
||||
function initTabEvents() {
|
||||
tabBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const type = this.getAttribute('data-type');
|
||||
if (type !== currentType) {
|
||||
currentType = type;
|
||||
updateActiveTab(this);
|
||||
loadNewsList();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 更新活跃标签
|
||||
function updateActiveTab(activeBtn) {
|
||||
tabBtns.forEach(btn => btn.classList.remove('active'));
|
||||
activeBtn.classList.add('active');
|
||||
}
|
||||
|
||||
// 刷新按钮点击事件
|
||||
refreshBtn.addEventListener('click', function() {
|
||||
loadNewsList();
|
||||
});
|
||||
|
||||
// 加载新闻列表
|
||||
async function loadNewsList() {
|
||||
showLoading();
|
||||
hideError();
|
||||
|
||||
try {
|
||||
const data = await fetchData();
|
||||
displayNewsList(data.data);
|
||||
updateRefreshTime();
|
||||
} catch (error) {
|
||||
console.error('加载失败:', error);
|
||||
showError();
|
||||
}
|
||||
|
||||
hideLoading();
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
async function fetchData() {
|
||||
for (let i = 0; i < API_ENDPOINTS.length; i++) {
|
||||
const apiUrl = API_ENDPOINTS[currentApiIndex];
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/v2/hacker-news/${currentType}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
timeout: 10000
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
return data;
|
||||
} else {
|
||||
throw new Error('数据格式错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`API ${apiUrl} 请求失败:`, error);
|
||||
currentApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
if (i === API_ENDPOINTS.length - 1) {
|
||||
throw new Error('所有API接口都无法访问');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示新闻列表
|
||||
function displayNewsList(newsData) {
|
||||
newsListElement.innerHTML = '';
|
||||
|
||||
newsData.forEach((item, index) => {
|
||||
const newsItem = createNewsItem(item, index + 1);
|
||||
newsListElement.appendChild(newsItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建新闻项目
|
||||
function createNewsItem(item, rank) {
|
||||
const newsItem = document.createElement('div');
|
||||
newsItem.className = 'news-item';
|
||||
|
||||
const rankClass = rank <= 3 ? `news-rank rank-${rank}` : 'news-rank';
|
||||
const formattedScore = formatScore(item.score);
|
||||
const formattedTime = formatTime(item.created);
|
||||
|
||||
// 根据排名添加特殊标识
|
||||
let rankEmoji = '';
|
||||
if (rank === 1) rankEmoji = '🏆';
|
||||
else if (rank === 2) rankEmoji = '🥈';
|
||||
else if (rank === 3) rankEmoji = '🥉';
|
||||
|
||||
// 根据评分添加热度指示
|
||||
let heatLevel = '';
|
||||
if (item.score >= 1000) heatLevel = '🔥🔥🔥';
|
||||
else if (item.score >= 500) heatLevel = '🔥🔥';
|
||||
else if (item.score >= 100) heatLevel = '🔥';
|
||||
else heatLevel = '💫';
|
||||
|
||||
newsItem.innerHTML = `
|
||||
<div class="news-rank-container">
|
||||
<div class="${rankClass}">
|
||||
<span class="rank-number">${rank}</span>
|
||||
<span class="rank-emoji">${rankEmoji}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-content-wrapper">
|
||||
<h3 class="news-title">${escapeHtml(item.title)}</h3>
|
||||
<div class="news-meta-row">
|
||||
<div class="news-author">
|
||||
<span class="meta-icon">👤</span>
|
||||
<span class="meta-text">${escapeHtml(item.author)}</span>
|
||||
</div>
|
||||
<div class="news-time">
|
||||
<span class="meta-icon">🕒</span>
|
||||
<span class="meta-text">${formattedTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-stats-row">
|
||||
<div class="news-score">
|
||||
<span class="heat-level">${heatLevel}</span>
|
||||
<span class="score-text">${formattedScore} 分</span>
|
||||
</div>
|
||||
<a href="${item.link}" target="_blank" class="news-link">
|
||||
<span class="link-icon">🚀</span>
|
||||
<span class="link-text">阅读全文</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return newsItem;
|
||||
}
|
||||
|
||||
// 格式化评分
|
||||
function formatScore(score) {
|
||||
if (score >= 1000) {
|
||||
return (score / 1000).toFixed(1) + 'K';
|
||||
} else {
|
||||
return score.toString();
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr) {
|
||||
try {
|
||||
const date = new Date(timeStr);
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
const minutes = Math.floor(diff / (1000 * 60));
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天前`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}小时前`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}分钟前`;
|
||||
} else {
|
||||
return '刚刚';
|
||||
}
|
||||
} catch (error) {
|
||||
return timeStr;
|
||||
}
|
||||
}
|
||||
|
||||
// HTML转义
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 更新刷新时间
|
||||
function updateRefreshTime() {
|
||||
const now = new Date();
|
||||
const timeStr = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
updateTimeElement.textContent = `最后更新: ${timeStr}`;
|
||||
|
||||
// 添加成功提示
|
||||
showSuccessMessage('🌈 数据已更新');
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
function showSuccessMessage(message) {
|
||||
// 移除之前的提示
|
||||
const existingToast = document.querySelector('.success-toast');
|
||||
if (existingToast) {
|
||||
existingToast.remove();
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
|
||||
z-index: 1000;
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
animation: rainbowToastSlide 0.5s ease-out;
|
||||
backdrop-filter: blur(10px);
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// 3秒后自动移除
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'rainbowToastSlideOut 0.5s ease-in forwards';
|
||||
setTimeout(() => toast.remove(), 500);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingElement.style.display = 'block';
|
||||
newsListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
loadingElement.style.display = 'none';
|
||||
newsListElement.style.display = 'block';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError() {
|
||||
errorMessageElement.style.display = 'block';
|
||||
newsListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏错误信息
|
||||
function hideError() {
|
||||
errorMessageElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 添加CSS动画到页面
|
||||
if (!document.querySelector('#toast-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'toast-styles';
|
||||
style.textContent = `
|
||||
@keyframes rainbowToastSlide {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100px) scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbowToastSlideOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100px) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.success-toast {
|
||||
background-size: 200% 200%;
|
||||
animation: rainbowToastSlide 0.5s ease-out, toastRainbow 2s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
@keyframes toastRainbow {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 自动刷新 (每5分钟)
|
||||
setInterval(function() {
|
||||
loadNewsList();
|
||||
}, 5 * 60 * 1000);
|
||||
|
||||
// 键盘快捷键支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'r' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
loadNewsList();
|
||||
}
|
||||
|
||||
// 数字键切换标签
|
||||
if (e.key >= '1' && e.key <= '3') {
|
||||
e.preventDefault();
|
||||
const typeMap = { '1': 'top', '2': 'new', '3': 'best' };
|
||||
const targetType = typeMap[e.key];
|
||||
const targetBtn = document.querySelector(`[data-type="${targetType}"]`);
|
||||
if (targetBtn && targetType !== currentType) {
|
||||
currentType = targetType;
|
||||
updateActiveTab(targetBtn);
|
||||
loadNewsList();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"id": 45087396,
|
||||
"title": "We should have the ability to run any code we want on hardware we own",
|
||||
"link": "https://hugotunius.se/2025/08/31/what-every-argument-about-sideloading-gets-wrong.html",
|
||||
"score": 995,
|
||||
"author": "K0nserv",
|
||||
"created": "2025-08-31 21:46:26",
|
||||
"created_at": 1756676786000
|
||||
},
|
||||
{
|
||||
"id": 45053029,
|
||||
"title": "Why countries trade with each other while fighting",
|
||||
"link": "https://news.mit.edu/2025/why-countries-trade-each-other-while-fighting-mariya-grinberg-book-0828",
|
||||
"score": 32,
|
||||
"author": "LorenDB",
|
||||
"created": "2025-08-28 14:58:28",
|
||||
"created_at": 1756393108000
|
||||
},
|
||||
{
|
||||
"id": 45086020,
|
||||
"title": "Eternal Struggle",
|
||||
"link": "https://yoavg.github.io/eternal/",
|
||||
"score": 481,
|
||||
"author": "yurivish",
|
||||
"created": "2025-08-31 19:04:03",
|
||||
"created_at": 1756667043000
|
||||
},
|
||||
{
|
||||
"id": 45052960,
|
||||
"title": "C++: Strongly Happens Before?",
|
||||
"link": "https://nekrozqliphort.github.io/posts/happens-b4/",
|
||||
"score": 16,
|
||||
"author": "signa11",
|
||||
"created": "2025-08-28 14:54:37",
|
||||
"created_at": 1756392877000
|
||||
},
|
||||
{
|
||||
"id": 45087971,
|
||||
"title": "Nintendo Switch 2 Dock USB-C Compatibility",
|
||||
"link": "https://www.lttlabs.com/blog/2025/08/30/nintendo-switch-2-dock",
|
||||
"score": 192,
|
||||
"author": "croes",
|
||||
"created": "2025-08-31 23:21:46",
|
||||
"created_at": 1756682506000
|
||||
},
|
||||
{
|
||||
"id": 45082731,
|
||||
"title": "“This telegram must be closely paraphrased before being communicated to anyone”",
|
||||
"link": "https://history.stackexchange.com/questions/79371/this-telegram-must-be-closely-paraphrased-before-being-communicated-to-anyone",
|
||||
"score": 645,
|
||||
"author": "azeemba",
|
||||
"created": "2025-08-31 12:39:47",
|
||||
"created_at": 1756643987000
|
||||
},
|
||||
{
|
||||
"id": 45089256,
|
||||
"title": "What Is Complexity in Chess?",
|
||||
"link": "https://lichess.org/@/Toadofsky/blog/what-is-complexity/pKo1swFh",
|
||||
"score": 41,
|
||||
"author": "fzliu",
|
||||
"created": "2025-09-01 03:45:33",
|
||||
"created_at": 1756698333000
|
||||
},
|
||||
{
|
||||
"id": 45087815,
|
||||
"title": "Lewis and Clark marked their trail with laxatives",
|
||||
"link": "https://offbeatoregon.com/2501d1006d_biliousPills-686.077.html",
|
||||
"score": 141,
|
||||
"author": "toomuchtodo",
|
||||
"created": "2025-08-31 22:54:26",
|
||||
"created_at": 1756680866000
|
||||
},
|
||||
{
|
||||
"id": 45083952,
|
||||
"title": "Jujutsu for everyone",
|
||||
"link": "https://jj-for-everyone.github.io/",
|
||||
"score": 363,
|
||||
"author": "Bogdanp",
|
||||
"created": "2025-08-31 15:31:04",
|
||||
"created_at": 1756654264000
|
||||
}
|
||||
]
|
||||
}
|
||||
203
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
203
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css
Normal file
@@ -0,0 +1,203 @@
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
/* 太阳元素 */
|
||||
.sun {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 35%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle, #ffeb3b 30%, #ff9800 70%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
||||
z-index: 0;
|
||||
animation: sun-pulse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 蓝色云元素 */
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background: rgba(135, 206, 250, 0.8);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.cloud-1 {
|
||||
top: 120px;
|
||||
left: -150px;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
animation: cloud-float 15s linear infinite;
|
||||
}
|
||||
|
||||
.cloud-2 {
|
||||
top: 180px;
|
||||
right: -150px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
animation: cloud-float 20s linear infinite reverse;
|
||||
}
|
||||
|
||||
.cloud-3 {
|
||||
top: 60px;
|
||||
left: -100px;
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
animation: cloud-float 12s linear infinite;
|
||||
}
|
||||
|
||||
/* 云朵的伪元素，创建更自然的形状 */
|
||||
.cloud::before,
|
||||
.cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(135, 206, 250, 0.8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cloud::before {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.cloud::after {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
top: -30px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
@keyframes sun-pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 40px rgba(255, 152, 0, 0.6);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 60px rgba(255, 152, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cloud-float {
|
||||
0% {
|
||||
transform: translateX(-150px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(100vw + 150px));
|
||||
}
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(24, 144, 255, 0.6) 0%,
|
||||
rgba(64, 169, 255, 0.5) 20%,
|
||||
rgba(135, 208, 255, 0.4) 40%,
|
||||
rgba(255, 175, 64, 0.4) 60%,
|
||||
rgba(255, 122, 69, 0.5) 80%,
|
||||
rgba(245, 85, 65, 0.6) 100%
|
||||
);
|
||||
animation: gradient-flow 25s ease-in-out infinite;
|
||||
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
||||
filter: blur(30px);
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 25% 65%,
|
||||
rgba(24, 144, 255, 0.6) 0%,
|
||||
transparent 60%
|
||||
), radial-gradient(
|
||||
circle at 75% 35%,
|
||||
rgba(245, 85, 65, 0.5) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
animation: pulse-effect 18s ease-in-out infinite alternate;
|
||||
border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端背景优化 */
|
||||
@media (max-width: 768px) {
|
||||
.modern-gradient {
|
||||
animation-duration: 25s;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
animation-duration: 18s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
352
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
352
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css
Normal file
@@ -0,0 +1,352 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f0f7ff;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 28px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #1890ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 16px;
|
||||
font-size: 2.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 22px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 16px;
|
||||
background-color: white;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
34
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html
Normal file
34
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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/style.css">
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-container">
|
||||
<div class="modern-gradient"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>哔哩哔哩热搜榜</h1>
|
||||
<div class="update-time" id="updateTime"></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="hot-list" id="hotList">
|
||||
<div class="loading">加载中...</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>数据来源于哔哩哔哩热搜榜</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
130
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
130
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/js/main.js
Normal file
@@ -0,0 +1,130 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/v2/bili"
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
|
||||
// DOM元素
|
||||
const hotListElement = document.getElementById('hotList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 格式化时间
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 渲染热搜列表
|
||||
function renderHotList(data) {
|
||||
hotListElement.innerHTML = '';
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const hotItem = document.createElement('div');
|
||||
hotItem.className = 'hot-item';
|
||||
|
||||
const rankClass = index < 3 ? `top-${index + 1}` : '';
|
||||
|
||||
hotItem.innerHTML = `
|
||||
<div class="hot-rank ${rankClass}">${index + 1}</div>
|
||||
<div class="hot-content">
|
||||
<a href="${item.link}" class="hot-title" target="_blank">${item.title}</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
hotListElement.appendChild(hotItem);
|
||||
});
|
||||
|
||||
// 更新时间
|
||||
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
hotListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
function showError(message) {
|
||||
hotListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||
}
|
||||
|
||||
// 获取哔哩哔哩热搜数据
|
||||
async function fetchBiliHotList() {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINTS[currentApiIndex]);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 200 && result.data && Array.isArray(result.data)) {
|
||||
if (result.data.length > 0) {
|
||||
renderHotList(result.data);
|
||||
} else {
|
||||
showError('暂无热搜数据');
|
||||
}
|
||||
} else {
|
||||
throw new Error('数据格式错误或无数据');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
|
||||
// 尝试切换到下一个API
|
||||
const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
if (nextApiIndex !== 0) {
|
||||
// 还有其他API可以尝试
|
||||
currentApiIndex = nextApiIndex;
|
||||
showError('获取数据失败，正在尝试其他接口...');
|
||||
|
||||
// 延迟后重试
|
||||
setTimeout(fetchBiliHotList, 2000);
|
||||
} else {
|
||||
// 所有API都尝试过了
|
||||
currentApiIndex = 0;
|
||||
showError('所有接口都无法访问，请稍后再试');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 手动刷新数据
|
||||
function refreshData() {
|
||||
currentApiIndex = 0; // 重置API索引
|
||||
fetchBiliHotList();
|
||||
}
|
||||
|
||||
// 页面加载完成后获取数据
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchBiliHotList();
|
||||
|
||||
// 每隔5分钟刷新一次数据
|
||||
setInterval(fetchBiliHotList, 5 * 60 * 1000);
|
||||
|
||||
// 添加键盘快捷键支持（按R键刷新）
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 页面可见性变化时的处理
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
// 页面重新可见时刷新数据
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
18
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json
Normal file
18
InfoGenie-frontend/public/60sapi/热搜榜单/哔哩哔哩热搜榜/返回接口.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"title": "18次阅兵76年逆袭路",
|
||||
"link": "https://search.bilibili.com/all?keyword=18%E6%AC%A1%E9%98%85%E5%85%B576%E5%B9%B4%E9%80%86%E8%A2%AD%E8%B7%AF"
|
||||
},
|
||||
{
|
||||
"title": "80年前的今天日本签署投降书",
|
||||
"link": "https://search.bilibili.com/all?keyword=80%E5%B9%B4%E5%89%8D%E7%9A%84%E4%BB%8A%E5%A4%A9%E6%97%A5%E6%9C%AC%E7%AD%BE%E7%BD%B2%E6%8A%95%E9%99%8D%E4%B9%A6"
|
||||
},
|
||||
{
|
||||
"title": "九三阅兵具体安排公布",
|
||||
"link": "https://search.bilibili.com/all?keyword=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E5%85%B7%E4%BD%93%E5%AE%89%E6%8E%92%E5%85%AC%E5%B8%83"
|
||||
}
|
||||
]
|
||||
}
|
||||
107
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/background.css
Normal file
107
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/background.css
Normal file
@@ -0,0 +1,107 @@
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.green-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(240, 20, 20, 0.3) 0%,
|
||||
rgba(255, 60, 60, 0.2) 25%,
|
||||
rgba(255, 100, 100, 0.1) 50%,
|
||||
rgba(255, 150, 150, 0.2) 75%,
|
||||
rgba(240, 20, 20, 0.3) 100%
|
||||
);
|
||||
animation: green-flow 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.green-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(255, 45, 45, 0.4) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 100, 100, 0.3) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: green-pulse 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes green-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green-pulse {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端背景优化 */
|
||||
@media (max-width: 768px) {
|
||||
.green-gradient {
|
||||
animation-duration: 25s;
|
||||
}
|
||||
|
||||
.green-gradient::before {
|
||||
animation-duration: 18s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.green-gradient,
|
||||
.green-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.green-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(76, 175, 80, 0.2) 0%,
|
||||
rgba(165, 214, 167, 0.1) 50%,
|
||||
rgba(200, 230, 201, 0.15) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
578
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/style.css
Normal file
578
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/css/style.css
Normal file
@@ -0,0 +1,578 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 几何装饰样式 */
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.geometric-decoration {
|
||||
font-size: 20px;
|
||||
color: #f04040;
|
||||
margin: 0 15px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 5px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
animation: float-effect 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.geometric-decoration.left {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.geometric-decoration.right {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
@keyframes float-effect {
|
||||
0% {
|
||||
transform: translateY(0) rotate(-10deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-5px) rotate(-8deg);
|
||||
}
|
||||
}
|
||||
|
||||
.update-time-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.time-decoration {
|
||||
color: #f04040;
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.geometric-header, .geometric-footer {
|
||||
text-align: center;
|
||||
color: #f04040;
|
||||
margin: 15px 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.geometric-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.geometric-footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(240, 64, 64, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container::before,
|
||||
.container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-color: #f04040;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
border-top: 3px solid;
|
||||
border-left: 3px solid;
|
||||
border-radius: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-bottom: 3px solid;
|
||||
border-right: 3px solid;
|
||||
border-radius: 0 0 10px 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
border: 1px dashed rgba(240, 64, 64, 0.3);
|
||||
}
|
||||
|
||||
.update-time::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
border: 1px solid rgba(240, 64, 64, 0.3);
|
||||
border-radius: 28px;
|
||||
animation: pulse-border 2s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-border {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hot-item::before {
|
||||
content: '◆';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
color: #f04040;
|
||||
opacity: 0.2;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hot-item::after {
|
||||
content: '◆';
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 10px;
|
||||
color: #f04040;
|
||||
opacity: 0.2;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.even-item {
|
||||
border-left: 3px solid #f04040;
|
||||
}
|
||||
|
||||
.odd-item {
|
||||
border-right: 3px solid #f04040;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
color: #f04040;
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.source-icon, .time-icon {
|
||||
color: #f04040;
|
||||
font-size: 14px;
|
||||
margin-right: 3px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hot-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-decoration {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.geo-symbol {
|
||||
color: #f04040;
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
animation: color-shift 5s infinite alternate;
|
||||
}
|
||||
|
||||
.geo-symbol:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.2) rotate(15deg);
|
||||
}
|
||||
|
||||
@keyframes color-shift {
|
||||
0% {
|
||||
color: #f04040;
|
||||
}
|
||||
50% {
|
||||
color: #ff7a45;
|
||||
}
|
||||
100% {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
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/style.css">
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-container">
|
||||
<div class="green-gradient"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="title-container">
|
||||
<div class="geometric-decoration left">◢ ◣ ▲</div>
|
||||
<h1>头条热搜榜</h1>
|
||||
<div class="geometric-decoration right">▼ ◥ ◤</div>
|
||||
</div>
|
||||
<div class="update-time-container">
|
||||
<span class="time-decoration">◇</span>
|
||||
<div class="update-time" id="updateTime"></div>
|
||||
<span class="time-decoration">◇</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="geometric-header">
|
||||
<span>◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆</span>
|
||||
</div>
|
||||
<div class="hot-list" id="hotList">
|
||||
<div class="loading">加载中...</div>
|
||||
</div>
|
||||
<div class="geometric-footer">
|
||||
<span>◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆</span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-decoration">
|
||||
<span class="geo-symbol">◆</span>
|
||||
<span class="geo-symbol">■</span>
|
||||
<span class="geo-symbol">▲</span>
|
||||
<span class="geo-symbol">●</span>
|
||||
<span class="geo-symbol">★</span>
|
||||
</div>
|
||||
<p>数据来源于头条热搜榜</p>
|
||||
<div class="footer-decoration">
|
||||
<span class="geo-symbol">★</span>
|
||||
<span class="geo-symbol">●</span>
|
||||
<span class="geo-symbol">▲</span>
|
||||
<span class="geo-symbol">■</span>
|
||||
<span class="geo-symbol">◆</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
171
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/js/main.js
Normal file
171
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/js/main.js
Normal file
@@ -0,0 +1,171 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/v2/toutiao",
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
|
||||
// DOM元素
|
||||
const hotListElement = document.getElementById('hotList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 格式化时间
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 格式化数字
|
||||
function formatNumber(num) {
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return num.toString();
|
||||
}
|
||||
|
||||
// 渲染热搜列表
|
||||
function renderHotList(data) {
|
||||
hotListElement.innerHTML = '';
|
||||
|
||||
// 几何装饰符号数组
|
||||
const geometricSymbols = ['◆', '■', '▲', '●', '★', '◈', '◇', '□', '△', '○'];
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const hotItem = document.createElement('div');
|
||||
hotItem.className = 'hot-item';
|
||||
|
||||
const rankClass = index < 3 ? `top-${index + 1}` : '';
|
||||
|
||||
// 随机选择几何符号作为装饰
|
||||
const randomSymbol = geometricSymbols[index % geometricSymbols.length];
|
||||
|
||||
// 处理热度值显示
|
||||
const hotValueDisplay = item.hot_value ?
|
||||
`<div class="stat-item"><span class="hot-value">${randomSymbol} ${formatNumber(item.hot_value)} 热度</span></div>` : '';
|
||||
|
||||
// 处理标签显示
|
||||
const tagDisplay = item.tag ?
|
||||
`<div class="stat-item"><span class="hot-tag">${randomSymbol} ${item.tag}</span></div>` : '';
|
||||
|
||||
hotItem.innerHTML = `
|
||||
<div class="hot-rank ${rankClass}">${index + 1}</div>
|
||||
<div class="hot-content">
|
||||
<a href="${item.link}" class="hot-title" target="_blank">
|
||||
<span class="title-decoration">${randomSymbol}</span> ${item.title}
|
||||
</a>
|
||||
<div class="hot-stats">
|
||||
${hotValueDisplay}
|
||||
${tagDisplay}
|
||||
${item.source ? `<div class="stat-item"><span class="source-icon">${randomSymbol}</span> ${item.source}</div>` : ''}
|
||||
${item.time ? `<div class="stat-item"><span class="time-icon">${randomSymbol}</span> ${item.time}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
hotListElement.appendChild(hotItem);
|
||||
});
|
||||
|
||||
// 添加几何装饰到列表项
|
||||
const hotItems = document.querySelectorAll('.hot-item');
|
||||
hotItems.forEach((item, index) => {
|
||||
// 为奇数和偶数项添加不同的装饰类
|
||||
if (index % 2 === 0) {
|
||||
item.classList.add('even-item');
|
||||
} else {
|
||||
item.classList.add('odd-item');
|
||||
}
|
||||
});
|
||||
|
||||
// 更新时间
|
||||
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
hotListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
function showError(message) {
|
||||
hotListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||
}
|
||||
|
||||
// 获取头条热搜数据
|
||||
async function fetchToutiaoHotList() {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINTS[currentApiIndex]);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 200 && result.data && Array.isArray(result.data)) {
|
||||
if (result.data.length > 0) {
|
||||
renderHotList(result.data);
|
||||
} else {
|
||||
showError('暂无热搜数据');
|
||||
}
|
||||
} else {
|
||||
throw new Error('数据格式错误或无数据');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
|
||||
// 尝试切换到下一个API
|
||||
const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
if (nextApiIndex !== 0) {
|
||||
// 还有其他API可以尝试
|
||||
currentApiIndex = nextApiIndex;
|
||||
showError('获取数据失败，正在尝试其他接口...');
|
||||
|
||||
// 延迟后重试
|
||||
setTimeout(fetchToutiaoHotList, 2000);
|
||||
} else {
|
||||
// 所有API都尝试过了
|
||||
currentApiIndex = 0;
|
||||
showError('所有接口都无法访问，请稍后再试');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 手动刷新数据
|
||||
function refreshData() {
|
||||
currentApiIndex = 0; // 重置API索引
|
||||
fetchToutiaoHotList();
|
||||
}
|
||||
|
||||
// 页面加载完成后获取数据
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchToutiaoHotList();
|
||||
|
||||
// 每隔5分钟刷新一次数据
|
||||
setInterval(fetchToutiaoHotList, 5 * 60 * 1000);
|
||||
|
||||
// 添加键盘快捷键支持（按R键刷新）
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 页面可见性变化时的处理
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
// 页面重新可见时刷新数据
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
30
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/返回接口.json
Normal file
30
InfoGenie-frontend/public/60sapi/热搜榜单/头条热搜榜/返回接口.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"title": "九三阅兵具体安排公布",
|
||||
"hot_value": 11821633,
|
||||
"tag": "热",
|
||||
"source": "头条新闻",
|
||||
"time": "2小时前",
|
||||
"link": "https://www.toutiao.com/article/7404567890123456789/"
|
||||
},
|
||||
{
|
||||
"title": "九月第一天",
|
||||
"hot_value": 11327170,
|
||||
"tag": "新",
|
||||
"source": "今日头条",
|
||||
"time": "1小时前",
|
||||
"link": "https://www.toutiao.com/article/7404567890123456790/"
|
||||
},
|
||||
{
|
||||
"title": "遇见上合共享津彩",
|
||||
"hot_value": 11222444,
|
||||
"tag": "推荐",
|
||||
"source": "头条资讯",
|
||||
"time": "3小时前",
|
||||
"link": "https://www.toutiao.com/article/7404567890123456791/"
|
||||
}
|
||||
]
|
||||
}
|
||||
144
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/background.css
Normal file
144
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/background.css
Normal file
@@ -0,0 +1,144 @@
|
||||
/* 背景样式文件 - 独立管理所有背景相关样式 */
|
||||
|
||||
/* 页面主背景 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #f8fffe 0%, #f0f9f4 50%, #e8f5e8 100%);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(168, 230, 207, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(39, 174, 96, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(46, 204, 113, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 容器背景 */
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8px 32px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
/* 头部背景 */
|
||||
.header {
|
||||
background: linear-gradient(135deg, rgba(168, 230, 207, 0.2) 0%, rgba(39, 174, 96, 0.1) 100%);
|
||||
border-radius: 20px 20px 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(39, 174, 96, 0.05) 0%, transparent 70%);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-10px, -10px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 热点项目背景 */
|
||||
.hot-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(5px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hot-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: radial-gradient(circle, rgba(168, 230, 207, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: translate(30px, -30px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 前三名特殊背景效果 */
|
||||
.hot-item:nth-child(1) {
|
||||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
.hot-item:nth-child(2) {
|
||||
background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
.hot-item:nth-child(3) {
|
||||
background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
/* 底部背景 */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, rgba(168, 230, 207, 0.1) 0%, rgba(39, 174, 96, 0.05) 100%);
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
/* 加载状态背景 */
|
||||
.loading {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
/* 错误信息背景 */
|
||||
.error-message {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(231, 76, 60, 0.2);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
/* 响应式背景调整 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 85%, rgba(168, 230, 207, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 85% 15%, rgba(39, 174, 96, 0.12) 0%, transparent 50%),
|
||||
radial-gradient(circle at 50% 50%, rgba(46, 204, 113, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 25% 25%, rgba(168, 230, 207, 0.06) 0%, transparent 50%);
|
||||
}
|
||||
}
|
||||
40
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/index.html
Normal file
40
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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="styles.css">
|
||||
<link rel="stylesheet" href="background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="title">小红书热点榜单</h1>
|
||||
<p class="subtitle">实时热门话题，发现精彩内容</p>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载热点数据...</p>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="error" style="display: none;">
|
||||
<p>数据加载失败，请稍后重试</p>
|
||||
<button class="retry-btn" onclick="loadData()">重新加载</button>
|
||||
</div>
|
||||
|
||||
<div class="hot-list" id="hotList" style="display: none;">
|
||||
<!-- 热点列表将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="update-time" id="updateTime"></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
180
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/script.js
Normal file
180
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/script.js
Normal file
@@ -0,0 +1,180 @@
|
||||
// 小红书热点榜单 JavaScript 逻辑
|
||||
|
||||
// DOM 元素
|
||||
const loadingEl = document.getElementById('loading');
|
||||
const errorEl = document.getElementById('error');
|
||||
const hotListEl = document.getElementById('hotList');
|
||||
const updateTimeEl = document.getElementById('updateTime');
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadData();
|
||||
});
|
||||
|
||||
// 加载数据函数
|
||||
async function loadData() {
|
||||
try {
|
||||
showLoading();
|
||||
|
||||
// 从API接口获取数据
|
||||
const response = await fetch('https://60s.api.shumengya.top/v2/rednote');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
renderHotList(data.data);
|
||||
updateTime();
|
||||
showSuccess();
|
||||
} else {
|
||||
throw new Error('数据格式错误');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingEl.style.display = 'block';
|
||||
errorEl.style.display = 'none';
|
||||
hotListEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
function showError() {
|
||||
loadingEl.style.display = 'none';
|
||||
errorEl.style.display = 'block';
|
||||
hotListEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示成功状态
|
||||
function showSuccess() {
|
||||
loadingEl.style.display = 'none';
|
||||
errorEl.style.display = 'none';
|
||||
hotListEl.style.display = 'block';
|
||||
}
|
||||
|
||||
// 渲染热点列表
|
||||
function renderHotList(hotData) {
|
||||
hotListEl.innerHTML = '';
|
||||
|
||||
hotData.forEach((item, index) => {
|
||||
const hotItem = createHotItem(item, index);
|
||||
hotListEl.appendChild(hotItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建热点项目元素
|
||||
function createHotItem(item, index) {
|
||||
const itemEl = document.createElement('div');
|
||||
itemEl.className = 'hot-item';
|
||||
|
||||
// 添加点击事件
|
||||
itemEl.addEventListener('click', () => {
|
||||
if (item.link) {
|
||||
window.open(item.link, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
// 构建HTML内容
|
||||
itemEl.innerHTML = `
|
||||
<div class="item-header">
|
||||
<div class="rank ${item.rank <= 3 ? 'top3' : ''}">${item.rank}</div>
|
||||
<div class="word-type">
|
||||
${item.work_type_icon ? `<img src="${item.work_type_icon}" alt="${item.word_type}" class="type-icon">` : ''}
|
||||
${item.word_type && item.word_type !== '无' ? `<span class="type-text type-${getTypeClass(item.word_type)}">${item.word_type}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3 class="item-title">${escapeHtml(item.title)}</h3>
|
||||
<p class="item-score">热度: ${item.score}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return itemEl;
|
||||
}
|
||||
|
||||
// 获取类型样式类名
|
||||
function getTypeClass(wordType) {
|
||||
switch (wordType) {
|
||||
case '热':
|
||||
return 'hot';
|
||||
case '新':
|
||||
return 'new';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
}
|
||||
|
||||
// HTML转义函数
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 更新时间显示
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
updateTimeEl.textContent = `最后更新: ${timeString}`;
|
||||
}
|
||||
|
||||
// 添加页面可见性变化监听，当页面重新可见时刷新数据
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (!document.hidden) {
|
||||
// 页面变为可见时，延迟1秒后刷新数据
|
||||
setTimeout(() => {
|
||||
loadData();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加网络状态监听
|
||||
window.addEventListener('online', function() {
|
||||
// 网络恢复时自动重新加载
|
||||
setTimeout(() => {
|
||||
loadData();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// 添加错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.error);
|
||||
});
|
||||
|
||||
// 添加未处理的Promise拒绝监听
|
||||
window.addEventListener('unhandledrejection', function(e) {
|
||||
console.error('未处理的Promise拒绝:', e.reason);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 添加触摸设备的优化
|
||||
if ('ontouchstart' in window) {
|
||||
// 为触摸设备添加触摸反馈
|
||||
document.addEventListener('touchstart', function() {}, { passive: true });
|
||||
}
|
||||
|
||||
// 添加键盘导航支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
|
||||
e.preventDefault();
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
|
||||
// 导出函数供全局使用
|
||||
window.loadData = loadData;
|
||||
299
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/styles.css
Normal file
299
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/styles.css
Normal file
@@ -0,0 +1,299 @@
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2c3e50;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 2px solid #a8e6cf;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #27ae60;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #a8e6cf;
|
||||
border-top: 3px solid #27ae60;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 错误信息 */
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
background: #219a52;
|
||||
}
|
||||
|
||||
/* 热点列表 */
|
||||
.hot-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8f5e8;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(39, 174, 96, 0.15);
|
||||
border-color: #a8e6cf;
|
||||
}
|
||||
|
||||
.hot-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #27ae60, #a8e6cf);
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rank {
|
||||
background: linear-gradient(135deg, #27ae60, #2ecc71);
|
||||
color: white;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank.top3 {
|
||||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||||
}
|
||||
|
||||
.word-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-hot {
|
||||
background: #ffe6e6;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.type-new {
|
||||
background: #e6f3ff;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.item-title:hover {
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.item-score {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid #e8f5e8;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
/* 手机端优化 (默认) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.rank {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 电脑端适配 */
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1400px) {
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
166
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/返回接口.json
Normal file
166
InfoGenie-frontend/public/60sapi/热搜榜单/小红书热点/返回接口.json
Normal file
@@ -0,0 +1,166 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"rank": 1,
|
||||
"title": "九三阅兵",
|
||||
"score": "908.5w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"title": "我镜头下的中式建筑美学",
|
||||
"score": "872.9w",
|
||||
"word_type": "新",
|
||||
"work_type_icon": "https://sns-img-qc.xhscdn.com/search/trends/icon/label/new/version/1",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%88%91%E9%95%9C%E5%A4%B4%E4%B8%8B%E7%9A%84%E4%B8%AD%E5%BC%8F%E5%BB%BA%E7%AD%91%E7%BE%8E%E5%AD%A6&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"title": "原来人机感才是出片的秘诀",
|
||||
"score": "754.4w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E5%8E%9F%E6%9D%A5%E4%BA%BA%E6%9C%BA%E6%84%9F%E6%89%8D%E6%98%AF%E5%87%BA%E7%89%87%E7%9A%84%E7%A7%98%E8%AF%80&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"title": "我的二十年航天路",
|
||||
"score": "703.9w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%88%91%E7%9A%84%E4%BA%8C%E5%8D%81%E5%B9%B4%E8%88%AA%E5%A4%A9%E8%B7%AF&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"title": "用横图的方式打开香格里拉",
|
||||
"score": "458.5w",
|
||||
"word_type": "新",
|
||||
"work_type_icon": "https://sns-img-qc.xhscdn.com/search/trends/icon/label/new/version/1",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E7%94%A8%E6%A8%AA%E5%9B%BE%E7%9A%84%E6%96%B9%E5%BC%8F%E6%89%93%E5%BC%80%E9%A6%99%E6%A0%BC%E9%87%8C%E6%8B%89&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"title": "我拍到了苏州丰收的景象",
|
||||
"score": "392w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%88%91%E6%8B%8D%E5%88%B0%E4%BA%86%E8%8B%8F%E5%B7%9E%E4%B8%B0%E6%94%B6%E7%9A%84%E6%99%AF%E8%B1%A1&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"title": "我拍下了960万平方公里的中国",
|
||||
"score": "390.7w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%88%91%E6%8B%8D%E4%B8%8B%E4%BA%86960%E4%B8%87%E5%B9%B3%E6%96%B9%E5%85%AC%E9%87%8C%E7%9A%84%E4%B8%AD%E5%9B%BD&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"title": "12岁冰岛少年的川剧变脸梦",
|
||||
"score": "389.7w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=12%E5%B2%81%E5%86%B0%E5%B2%9B%E5%B0%91%E5%B9%B4%E7%9A%84%E5%B7%9D%E5%89%A7%E5%8F%98%E8%84%B8%E6%A2%A6&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"title": "人生总要去一次阿勒泰吧",
|
||||
"score": "389.6w",
|
||||
"word_type": "新",
|
||||
"work_type_icon": "https://sns-img-qc.xhscdn.com/search/trends/icon/label/new/version/1",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%BA%BA%E7%94%9F%E6%80%BB%E8%A6%81%E5%8E%BB%E4%B8%80%E6%AC%A1%E9%98%BF%E5%8B%92%E6%B3%B0%E5%90%A7&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"title": "普通人的10年绘画进步史",
|
||||
"score": "389.4w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%99%AE%E9%80%9A%E4%BA%BA%E7%9A%8410%E5%B9%B4%E7%BB%98%E7%94%BB%E8%BF%9B%E6%AD%A5%E5%8F%B2&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"title": "过生日不要忘记反转镜头",
|
||||
"score": "389.2w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E8%BF%87%E7%94%9F%E6%97%A5%E4%B8%8D%E8%A6%81%E5%BF%98%E8%AE%B0%E5%8F%8D%E8%BD%AC%E9%95%9C%E5%A4%B4&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"title": "低卡又解馋的报恩零食",
|
||||
"score": "389.2w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%BD%8E%E5%8D%A1%E5%8F%88%E8%A7%A3%E9%A6%8B%E7%9A%84%E6%8A%A5%E6%81%A9%E9%9B%B6%E9%A3%9F&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"title": "和爸妈去旅游 我是水印",
|
||||
"score": "389w",
|
||||
"word_type": "新",
|
||||
"work_type_icon": "https://sns-img-qc.xhscdn.com/search/trends/icon/label/new/version/1",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E5%92%8C%E7%88%B8%E5%A6%88%E5%8E%BB%E6%97%85%E6%B8%B8%20%E6%88%91%E6%98%AF%E6%B0%B4%E5%8D%B0&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"title": "一种很新的镜子拍谷法出现了",
|
||||
"score": "389w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%B8%80%E7%A7%8D%E5%BE%88%E6%96%B0%E7%9A%84%E9%95%9C%E5%AD%90%E6%8B%8D%E8%B0%B7%E6%B3%95%E5%87%BA%E7%8E%B0%E4%BA%86&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"title": "二次构图带来的故事感",
|
||||
"score": "389w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%BA%8C%E6%AC%A1%E6%9E%84%E5%9B%BE%E5%B8%A6%E6%9D%A5%E7%9A%84%E6%95%85%E4%BA%8B%E6%84%9F&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"title": "当我在老动画片里找美妆灵感",
|
||||
"score": "389w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E5%BD%93%E6%88%91%E5%9C%A8%E8%80%81%E5%8A%A8%E7%94%BB%E7%89%87%E9%87%8C%E6%89%BE%E7%BE%8E%E5%A6%86%E7%81%B5%E6%84%9F&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"title": "在蓝调时刻起舞告别夏天",
|
||||
"score": "389w",
|
||||
"word_type": "热",
|
||||
"work_type_icon": "https://picasso-static.xiaohongshu.com/fe-platform/cfd317ff14757c7ede6ef5176ec487589565e49e.png",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E5%9C%A8%E8%93%9D%E8%B0%83%E6%97%B6%E5%88%BB%E8%B5%B7%E8%88%9E%E5%91%8A%E5%88%AB%E5%A4%8F%E5%A4%A9&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"title": "人生建议：去看一次鱼灯巡游",
|
||||
"score": "389w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E4%BA%BA%E7%94%9F%E5%BB%BA%E8%AE%AE%EF%BC%9A%E5%8E%BB%E7%9C%8B%E4%B8%80%E6%AC%A1%E9%B1%BC%E7%81%AF%E5%B7%A1%E6%B8%B8&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"title": "夜晚的树是大自然送给天空的星星",
|
||||
"score": "389w",
|
||||
"word_type": "新",
|
||||
"work_type_icon": "https://sns-img-qc.xhscdn.com/search/trends/icon/label/new/version/1",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E5%A4%9C%E6%99%9A%E7%9A%84%E6%A0%91%E6%98%AF%E5%A4%A7%E8%87%AA%E7%84%B6%E9%80%81%E7%BB%99%E5%A4%A9%E7%A9%BA%E7%9A%84%E6%98%9F%E6%98%9F&type=51"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"title": "欢迎收看老师开学的一天",
|
||||
"score": "389w",
|
||||
"word_type": "无",
|
||||
"work_type_icon": "",
|
||||
"link": "https://www.xiaohongshu.com/search_result?keyword=%E6%AC%A2%E8%BF%8E%E6%94%B6%E7%9C%8B%E8%80%81%E5%B8%88%E5%BC%80%E5%AD%A6%E7%9A%84%E4%B8%80%E5%A4%A9&type=51"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(230, 22, 45, 0.4) 0%,
|
||||
rgba(245, 80, 80, 0.3) 25%,
|
||||
rgba(250, 120, 110, 0.2) 50%,
|
||||
rgba(255, 140, 140, 0.3) 75%,
|
||||
rgba(255, 90, 90, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes rainbow-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
384
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/css/style.css
Normal file
384
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/css/style.css
Normal file
@@ -0,0 +1,384 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 微博Logo样式 */
|
||||
.title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.weibo-logo-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.weibo-logo {
|
||||
background-color: #e6162d;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 4px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Q版眨眼动画样式 */
|
||||
.qeye-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.qeye {
|
||||
width: 80px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
42
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/img/qeye.svg
Normal file
42
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/img/qeye.svg
Normal file
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 脸部 -->
|
||||
<circle cx="50" cy="30" r="25" fill="#FFD6A5" />
|
||||
|
||||
<!-- 左眼 -->
|
||||
<g id="left-eye">
|
||||
<circle cx="40" cy="25" r="5" fill="white" />
|
||||
<circle cx="40" cy="25" r="2.5" fill="#333" class="pupil" />
|
||||
<!-- 眨眼动画 -->
|
||||
<animate
|
||||
xlink:href="#left-eye"
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="scale"
|
||||
values="1 1; 1 0.1; 1 1"
|
||||
dur="3s"
|
||||
repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<!-- 右眼 -->
|
||||
<g id="right-eye">
|
||||
<circle cx="60" cy="25" r="5" fill="white" />
|
||||
<circle cx="60" cy="25" r="2.5" fill="#333" class="pupil" />
|
||||
<!-- 眨眼动画 -->
|
||||
<animate
|
||||
xlink:href="#right-eye"
|
||||
attributeName="transform"
|
||||
attributeType="XML"
|
||||
type="scale"
|
||||
values="1 1; 1 0.1; 1 1"
|
||||
dur="3s"
|
||||
repeatCount="indefinite" />
|
||||
</g>
|
||||
|
||||
<!-- 嘴巴 -->
|
||||
<path d="M45,35 Q50,40 55,35" stroke="#FF9999" stroke-width="2" fill="none" />
|
||||
|
||||
<!-- 腮红 -->
|
||||
<circle cx="35" cy="30" r="3" fill="#FF9999" opacity="0.5" />
|
||||
<circle cx="65" cy="30" r="3" fill="#FF9999" opacity="0.5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
34
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/index.html
Normal file
34
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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/style.css">
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-container">
|
||||
<div class="modern-gradient"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🌈 微博热搜榜 🌈</h1>
|
||||
<div class="update-time" id="updateTime"></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="hot-list" id="hotList">
|
||||
<div class="loading">加载中...</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>数据来源于微博热搜榜</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
90
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/js/main.js
Normal file
90
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/js/main.js
Normal file
@@ -0,0 +1,90 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/v2/weibo",
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
|
||||
// DOM元素
|
||||
const hotListElement = document.getElementById('hotList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 格式化时间
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 渲染热搜列表
|
||||
function renderHotList(data) {
|
||||
hotListElement.innerHTML = '';
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const hotItem = document.createElement('div');
|
||||
hotItem.className = 'hot-item';
|
||||
|
||||
const rankClass = index < 3 ? `top-${index + 1}` : '';
|
||||
|
||||
hotItem.innerHTML = `
|
||||
<div class="hot-rank ${rankClass}">${index + 1}</div>
|
||||
<div class="hot-content">
|
||||
<a href="${item.link}" class="hot-title" target="_blank">${item.title}</a>
|
||||
${item.hot_value ? `<div class="hot-value">${item.hot_value}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
hotListElement.appendChild(hotItem);
|
||||
});
|
||||
|
||||
// 更新时间
|
||||
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||
}
|
||||
|
||||
// 获取微博热搜数据
|
||||
async function fetchWeiboHotList() {
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINTS[currentApiIndex]);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('网络响应不正常');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 200 && result.data) {
|
||||
renderHotList(result.data);
|
||||
} else {
|
||||
throw new Error('数据格式错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
|
||||
// 尝试切换到下一个API
|
||||
currentApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
// 显示错误信息
|
||||
hotListElement.innerHTML = `
|
||||
<div class="loading">
|
||||
获取数据失败，正在尝试其他接口...
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 延迟后重试
|
||||
setTimeout(fetchWeiboHotList, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后获取数据
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchWeiboHotList();
|
||||
|
||||
// 每隔5分钟刷新一次数据
|
||||
setInterval(fetchWeiboHotList, 5 * 60 * 1000);
|
||||
});
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
261
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/返回接口.json
Normal file
261
InfoGenie-frontend/public/60sapi/热搜榜单/微博热搜榜/返回接口.json
Normal file
@@ -0,0 +1,261 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"title": "00后男生0.6秒飞针采血惊呆患者",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=00%E5%90%8E%E7%94%B7%E7%94%9F0.6%E7%A7%92%E9%A3%9E%E9%92%88%E9%87%87%E8%A1%80%E6%83%8A%E5%91%86%E6%82%A3%E8%80%85"
|
||||
},
|
||||
{
|
||||
"title": "普京带3位副总理10多位部长到中国",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%99%AE%E4%BA%AC%E5%B8%A63%E4%BD%8D%E5%89%AF%E6%80%BB%E7%90%8610%E5%A4%9A%E4%BD%8D%E9%83%A8%E9%95%BF%E5%88%B0%E4%B8%AD%E5%9B%BD"
|
||||
},
|
||||
{
|
||||
"title": "始终高举上海精神旗帜",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%A7%8B%E7%BB%88%E9%AB%98%E4%B8%BE%E4%B8%8A%E6%B5%B7%E7%B2%BE%E7%A5%9E%E6%97%97%E5%B8%9C"
|
||||
},
|
||||
{
|
||||
"title": "女生苦练化妆1年的变化",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%A5%B3%E7%94%9F%E8%8B%A6%E7%BB%83%E5%8C%96%E5%A6%861%E5%B9%B4%E7%9A%84%E5%8F%98%E5%8C%96"
|
||||
},
|
||||
{
|
||||
"title": "香港1200架无人机重现日本投降矣",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%A6%99%E6%B8%AF1200%E6%9E%B6%E6%97%A0%E4%BA%BA%E6%9C%BA%E9%87%8D%E7%8E%B0%E6%97%A5%E6%9C%AC%E6%8A%95%E9%99%8D%E7%9F%A3"
|
||||
},
|
||||
{
|
||||
"title": "尚公主全阵容官宣",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%B0%9A%E5%85%AC%E4%B8%BB%E5%85%A8%E9%98%B5%E5%AE%B9%E5%AE%98%E5%AE%A3"
|
||||
},
|
||||
{
|
||||
"title": "真的可以永远相信刘宇舞台",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E7%9C%9F%E7%9A%84%E5%8F%AF%E4%BB%A5%E6%B0%B8%E8%BF%9C%E7%9B%B8%E4%BF%A1%E5%88%98%E5%AE%87%E8%88%9E%E5%8F%B0"
|
||||
},
|
||||
{
|
||||
"title": "九三阅兵徒步方队铿锵步伐",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E5%BE%92%E6%AD%A5%E6%96%B9%E9%98%9F%E9%93%BF%E9%94%B5%E6%AD%A5%E4%BC%90"
|
||||
},
|
||||
{
|
||||
"title": "唐朝诡事录",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%94%90%E6%9C%9D%E8%AF%A1%E4%BA%8B%E5%BD%95"
|
||||
},
|
||||
{
|
||||
"title": "抗战胜利80周年第3场记者招待会",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%8A%97%E6%88%98%E8%83%9C%E5%88%A980%E5%91%A8%E5%B9%B4%E7%AC%AC3%E5%9C%BA%E8%AE%B0%E8%80%85%E6%8B%9B%E5%BE%85%E4%BC%9A"
|
||||
},
|
||||
{
|
||||
"title": "王曼昱钱天一3比2蒯曼孙颖莎",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E7%8E%8B%E6%9B%BC%E6%98%B1%E9%92%B1%E5%A4%A9%E4%B8%803%E6%AF%942%E8%92%AF%E6%9B%BC%E5%AD%99%E9%A2%96%E8%8E%8E"
|
||||
},
|
||||
{
|
||||
"title": "张维伊对96岁的姥姥说长命百岁",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%BC%A0%E7%BB%B4%E4%BC%8A%E5%AF%B996%E5%B2%81%E7%9A%84%E5%A7%A5%E5%A7%A5%E8%AF%B4%E9%95%BF%E5%91%BD%E7%99%BE%E5%B2%81"
|
||||
},
|
||||
{
|
||||
"title": "孟子义李昀锐定妆照",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%AD%9F%E5%AD%90%E4%B9%89%E6%9D%8E%E6%98%80%E9%94%90%E5%AE%9A%E5%A6%86%E7%85%A7"
|
||||
},
|
||||
{
|
||||
"title": "以为张艺兴穿的蓝色抹胸",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E4%BB%A5%E4%B8%BA%E5%BC%A0%E8%89%BA%E5%85%B4%E7%A9%BF%E7%9A%84%E8%93%9D%E8%89%B2%E6%8A%B9%E8%83%B8"
|
||||
},
|
||||
{
|
||||
"title": "尚公主开机",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%B0%9A%E5%85%AC%E4%B8%BB%E5%BC%80%E6%9C%BA"
|
||||
},
|
||||
{
|
||||
"title": "心动的信号8",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%BF%83%E5%8A%A8%E7%9A%84%E4%BF%A1%E5%8F%B78"
|
||||
},
|
||||
{
|
||||
"title": "霍建华病娇疯批演爽了",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%9C%8D%E5%BB%BA%E5%8D%8E%E7%97%85%E5%A8%87%E7%96%AF%E6%89%B9%E6%BC%94%E7%88%BD%E4%BA%86"
|
||||
},
|
||||
{
|
||||
"title": "普京抵达天津",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%99%AE%E4%BA%AC%E6%8A%B5%E8%BE%BE%E5%A4%A9%E6%B4%A5"
|
||||
},
|
||||
{
|
||||
"title": "龚俊的体面只给旅游前几天",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%BE%9A%E4%BF%8A%E7%9A%84%E4%BD%93%E9%9D%A2%E5%8F%AA%E7%BB%99%E6%97%85%E6%B8%B8%E5%89%8D%E5%87%A0%E5%A4%A9"
|
||||
},
|
||||
{
|
||||
"title": "开学焦虑更严重的另有其人",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%BC%80%E5%AD%A6%E7%84%A6%E8%99%91%E6%9B%B4%E4%B8%A5%E9%87%8D%E7%9A%84%E5%8F%A6%E6%9C%89%E5%85%B6%E4%BA%BA"
|
||||
},
|
||||
{
|
||||
"title": "那英小发雷霆",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%82%A3%E8%8B%B1%E5%B0%8F%E5%8F%91%E9%9B%B7%E9%9C%86"
|
||||
},
|
||||
{
|
||||
"title": "居然有演员一句台词背1小时",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%B1%85%E7%84%B6%E6%9C%89%E6%BC%94%E5%91%98%E4%B8%80%E5%8F%A5%E5%8F%B0%E8%AF%8D%E8%83%8C1%E5%B0%8F%E6%97%B6"
|
||||
},
|
||||
{
|
||||
"title": "谁教魏哲鸣冷脸跳这些的",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%B0%81%E6%95%99%E9%AD%8F%E5%93%B2%E9%B8%A3%E5%86%B7%E8%84%B8%E8%B7%B3%E8%BF%99%E4%BA%9B%E7%9A%84"
|
||||
},
|
||||
{
|
||||
"title": "朱孝天爆冷出局",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%9C%B1%E5%AD%9D%E5%A4%A9%E7%88%86%E5%86%B7%E5%87%BA%E5%B1%80"
|
||||
},
|
||||
{
|
||||
"title": "俄军称掌握战略主动权",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E4%BF%84%E5%86%9B%E7%A7%B0%E6%8E%8C%E6%8F%A1%E6%88%98%E7%95%A5%E4%B8%BB%E5%8A%A8%E6%9D%83"
|
||||
},
|
||||
{
|
||||
"title": "谈恋爱3个月定律",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%B0%88%E6%81%8B%E7%88%B13%E4%B8%AA%E6%9C%88%E5%AE%9A%E5%BE%8B"
|
||||
},
|
||||
{
|
||||
"title": "沈腾说错了最怕人笨还不勤快",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%B2%88%E8%85%BE%E8%AF%B4%E9%94%99%E4%BA%86%E6%9C%80%E6%80%95%E4%BA%BA%E7%AC%A8%E8%BF%98%E4%B8%8D%E5%8B%A4%E5%BF%AB"
|
||||
},
|
||||
{
|
||||
"title": "王菲最新状态",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E7%8E%8B%E8%8F%B2%E6%9C%80%E6%96%B0%E7%8A%B6%E6%80%81"
|
||||
},
|
||||
{
|
||||
"title": "张紫宁转行当拉拉队经理人了",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%BC%A0%E7%B4%AB%E5%AE%81%E8%BD%AC%E8%A1%8C%E5%BD%93%E6%8B%89%E6%8B%89%E9%98%9F%E7%BB%8F%E7%90%86%E4%BA%BA%E4%BA%86"
|
||||
},
|
||||
{
|
||||
"title": "金价大涨两大原因",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%87%91%E4%BB%B7%E5%A4%A7%E6%B6%A8%E4%B8%A4%E5%A4%A7%E5%8E%9F%E5%9B%A0"
|
||||
},
|
||||
{
|
||||
"title": "陕西Shaanxi官方标准拼音",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E9%99%95%E8%A5%BFShaanxi%E5%AE%98%E6%96%B9%E6%A0%87%E5%87%86%E6%8B%BC%E9%9F%B3"
|
||||
},
|
||||
{
|
||||
"title": "边伯贤跳刀马刀马",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%BE%B9%E4%BC%AF%E8%B4%A4%E8%B7%B3%E5%88%80%E9%A9%AC%E5%88%80%E9%A9%AC"
|
||||
},
|
||||
{
|
||||
"title": "冷冻太久的肉就不要再吃了",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%86%B7%E5%86%BB%E5%A4%AA%E4%B9%85%E7%9A%84%E8%82%89%E5%B0%B1%E4%B8%8D%E8%A6%81%E5%86%8D%E5%90%83%E4%BA%86"
|
||||
},
|
||||
{
|
||||
"title": "95后00后恋爱有代沟",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=95%E5%90%8E00%E5%90%8E%E6%81%8B%E7%88%B1%E6%9C%89%E4%BB%A3%E6%B2%9F"
|
||||
},
|
||||
{
|
||||
"title": "易烊千玺抢票",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA%E6%8A%A2%E7%A5%A8"
|
||||
},
|
||||
{
|
||||
"title": "孙闻被乒协处罚",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%AD%99%E9%97%BB%E8%A2%AB%E4%B9%92%E5%8D%8F%E5%A4%84%E7%BD%9A"
|
||||
},
|
||||
{
|
||||
"title": "这居然是白举纲",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%BF%99%E5%B1%85%E7%84%B6%E6%98%AF%E7%99%BD%E4%B8%BE%E7%BA%B2"
|
||||
},
|
||||
{
|
||||
"title": "纪凌尘出演孟子义新剧",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E7%BA%AA%E5%87%8C%E5%B0%98%E5%87%BA%E6%BC%94%E5%AD%9F%E5%AD%90%E4%B9%89%E6%96%B0%E5%89%A7"
|
||||
},
|
||||
{
|
||||
"title": "外卖员妈妈暴雨中将孩子托付派出所",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%A4%96%E5%8D%96%E5%91%98%E5%A6%88%E5%A6%88%E6%9A%B4%E9%9B%A8%E4%B8%AD%E5%B0%86%E5%AD%A9%E5%AD%90%E6%89%98%E4%BB%98%E6%B4%BE%E5%87%BA%E6%89%80"
|
||||
},
|
||||
{
|
||||
"title": "我点外卖没用上券就这样",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%88%91%E7%82%B9%E5%A4%96%E5%8D%96%E6%B2%A1%E7%94%A8%E4%B8%8A%E5%88%B8%E5%B0%B1%E8%BF%99%E6%A0%B7"
|
||||
},
|
||||
{
|
||||
"title": "孙颖莎小时候真来过新疆",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%AD%99%E9%A2%96%E8%8E%8E%E5%B0%8F%E6%97%B6%E5%80%99%E7%9C%9F%E6%9D%A5%E8%BF%87%E6%96%B0%E7%96%86"
|
||||
},
|
||||
{
|
||||
"title": "印尼首都交通瘫痪",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%8D%B0%E5%B0%BC%E9%A6%96%E9%83%BD%E4%BA%A4%E9%80%9A%E7%98%AB%E7%97%AA"
|
||||
},
|
||||
{
|
||||
"title": "停狗位停满了小狗",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%81%9C%E7%8B%97%E4%BD%8D%E5%81%9C%E6%BB%A1%E4%BA%86%E5%B0%8F%E7%8B%97"
|
||||
},
|
||||
{
|
||||
"title": "怪不得校服裤子屁股锃亮",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%80%AA%E4%B8%8D%E5%BE%97%E6%A0%A1%E6%9C%8D%E8%A3%A4%E5%AD%90%E5%B1%81%E8%82%A1%E9%94%83%E4%BA%AE"
|
||||
},
|
||||
{
|
||||
"title": "这一幕幕中国浪漫看得心暖暖",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%BF%99%E4%B8%80%E5%B9%95%E5%B9%95%E4%B8%AD%E5%9B%BD%E6%B5%AA%E6%BC%AB%E7%9C%8B%E5%BE%97%E5%BF%83%E6%9A%96%E6%9A%96"
|
||||
},
|
||||
{
|
||||
"title": "林书豪退役",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E6%9E%97%E4%B9%A6%E8%B1%AA%E9%80%80%E5%BD%B9"
|
||||
},
|
||||
{
|
||||
"title": "小猫咪舔毛把自己累睡着",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%B0%8F%E7%8C%AB%E5%92%AA%E8%88%94%E6%AF%9B%E6%8A%8A%E8%87%AA%E5%B7%B1%E7%B4%AF%E7%9D%A1%E7%9D%80"
|
||||
},
|
||||
{
|
||||
"title": "iPhone17国行预计涨价500元",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=iPhone17%E5%9B%BD%E8%A1%8C%E9%A2%84%E8%AE%A1%E6%B6%A8%E4%BB%B7500%E5%85%83"
|
||||
},
|
||||
{
|
||||
"title": "土耳其总统埃尔多安抵达天津",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%9C%9F%E8%80%B3%E5%85%B6%E6%80%BB%E7%BB%9F%E5%9F%83%E5%B0%94%E5%A4%9A%E5%AE%89%E6%8A%B5%E8%BE%BE%E5%A4%A9%E6%B4%A5"
|
||||
},
|
||||
{
|
||||
"title": "脱口秀和Ta的朋友们",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E8%84%B1%E5%8F%A3%E7%A7%80%E5%92%8CTa%E7%9A%84%E6%9C%8B%E5%8F%8B%E4%BB%AC"
|
||||
},
|
||||
{
|
||||
"title": "孟子义暮晚摇",
|
||||
"hot_value": 0,
|
||||
"link": "https://s.weibo.com/weibo?q=%E5%AD%9F%E5%AD%90%E4%B9%89%E6%9A%AE%E6%99%9A%E6%91%87"
|
||||
}
|
||||
]
|
||||
}
|
||||
180
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/api.js
Normal file
180
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/api.js
Normal file
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 懂车帝热搜API模块
|
||||
* 负责数据获取、验证和格式化
|
||||
*/
|
||||
class CarHotTopicsAPI {
|
||||
constructor() {
|
||||
this.baseURL = 'https://60s.api.shumengya.top/v2/dongchedi';
|
||||
this.timeout = 10000; // 10秒超时
|
||||
this.retryCount = 3;
|
||||
this.retryDelay = 1000; // 1秒重试延迟
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取热搜数据
|
||||
* @param {string} encoding - 编码格式（可选）
|
||||
* @returns {Promise<Object>} 热搜数据
|
||||
*/
|
||||
async fetchHotTopics(encoding = '') {
|
||||
const url = encoding ? `${this.baseURL}?encoding=${encodeURIComponent(encoding)}` : this.baseURL;
|
||||
|
||||
for (let attempt = 1; attempt <= this.retryCount; attempt++) {
|
||||
try {
|
||||
console.log(`[API] 尝试获取数据 (${attempt}/${this.retryCount}): ${url}`);
|
||||
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), this.timeout);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
|
||||
},
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('[API] 数据获取成功:', data);
|
||||
|
||||
// 验证数据格式
|
||||
const validatedData = this.validateData(data);
|
||||
return this.formatData(validatedData);
|
||||
|
||||
} catch (error) {
|
||||
console.error(`[API] 第${attempt}次请求失败:`, error.message);
|
||||
|
||||
if (attempt === this.retryCount) {
|
||||
throw new Error(`获取数据失败: ${error.message}`);
|
||||
}
|
||||
|
||||
// 等待后重试
|
||||
await this.delay(this.retryDelay * attempt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证API返回数据格式
|
||||
* @param {Object} data - API返回的原始数据
|
||||
* @returns {Object} 验证后的数据
|
||||
*/
|
||||
validateData(data) {
|
||||
if (!data || typeof data !== 'object') {
|
||||
throw new Error('数据格式错误：响应不是有效的JSON对象');
|
||||
}
|
||||
|
||||
if (data.code !== 200) {
|
||||
throw new Error(`API错误：${data.message || '未知错误'}`);
|
||||
}
|
||||
|
||||
if (!Array.isArray(data.data)) {
|
||||
throw new Error('数据格式错误：data字段不是数组');
|
||||
}
|
||||
|
||||
// 验证每个热搜项目的必需字段
|
||||
data.data.forEach((item, index) => {
|
||||
const requiredFields = ['rank', 'title', 'score', 'score_desc'];
|
||||
const missingFields = requiredFields.filter(field => !(field in item));
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
console.warn(`[API] 第${index + 1}项数据缺少字段:`, missingFields);
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化数据
|
||||
* @param {Object} data - 验证后的数据
|
||||
* @returns {Object} 格式化后的数据
|
||||
*/
|
||||
formatData(data) {
|
||||
const formattedTopics = data.data.map(item => ({
|
||||
rank: parseInt(item.rank) || 0,
|
||||
title: String(item.title || '').trim(),
|
||||
score: parseInt(item.score) || 0,
|
||||
scoreDesc: String(item.score_desc || '').trim(),
|
||||
// 添加一些计算字段
|
||||
isTop3: parseInt(item.rank) <= 3,
|
||||
formattedScore: this.formatScore(item.score),
|
||||
searchUrl: this.generateSearchUrl(item.title)
|
||||
}));
|
||||
|
||||
return {
|
||||
code: data.code,
|
||||
message: data.message,
|
||||
data: formattedTopics,
|
||||
updateTime: new Date().toLocaleString('zh-CN'),
|
||||
total: formattedTopics.length
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化分数显示
|
||||
* @param {number} score - 原始分数
|
||||
* @returns {string} 格式化后的分数
|
||||
*/
|
||||
formatScore(score) {
|
||||
if (!score || isNaN(score)) return '0';
|
||||
|
||||
if (score >= 10000) {
|
||||
return (score / 10000).toFixed(1) + 'w';
|
||||
}
|
||||
|
||||
return score.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成搜索URL
|
||||
* @param {string} title - 热搜标题
|
||||
* @returns {string} 搜索URL
|
||||
*/
|
||||
generateSearchUrl(title) {
|
||||
const encodedTitle = encodeURIComponent(title);
|
||||
return `https://www.dongchedi.com/search?query=${encodedTitle}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 延迟函数
|
||||
* @param {number} ms - 延迟毫秒数
|
||||
* @returns {Promise} Promise对象
|
||||
*/
|
||||
delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取API状态
|
||||
* @returns {Promise<Object>} API状态信息
|
||||
*/
|
||||
async getAPIStatus() {
|
||||
try {
|
||||
const startTime = Date.now();
|
||||
await this.fetchHotTopics();
|
||||
const responseTime = Date.now() - startTime;
|
||||
|
||||
return {
|
||||
status: 'online',
|
||||
responseTime: responseTime,
|
||||
message: 'API服务正常'
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 'offline',
|
||||
responseTime: null,
|
||||
message: error.message
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出API实例
|
||||
window.CarHotTopicsAPI = CarHotTopicsAPI;
|
||||
313
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/app.js
Normal file
313
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/app.js
Normal file
@@ -0,0 +1,313 @@
|
||||
/**
|
||||
* 懂车帝热搜应用主程序
|
||||
* 整合API和UI模块，管理应用生命周期
|
||||
*/
|
||||
class CarHotTopicsApp {
|
||||
constructor() {
|
||||
this.api = null;
|
||||
this.ui = null;
|
||||
this.autoRefreshInterval = null;
|
||||
this.autoRefreshDelay = 5 * 60 * 1000; // 5分钟自动刷新
|
||||
this.isInitialized = false;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化应用
|
||||
*/
|
||||
async init() {
|
||||
try {
|
||||
console.log('[App] 开始初始化懂车帝热搜应用...');
|
||||
|
||||
// 等待DOM加载完成
|
||||
if (document.readyState === 'loading') {
|
||||
await new Promise(resolve => {
|
||||
document.addEventListener('DOMContentLoaded', resolve);
|
||||
});
|
||||
}
|
||||
|
||||
// 检查必需的类是否存在
|
||||
if (!window.CarHotTopicsAPI || !window.UIManager) {
|
||||
throw new Error('缺少必需的模块：CarHotTopicsAPI 或 UIManager');
|
||||
}
|
||||
|
||||
// 初始化模块
|
||||
this.api = new window.CarHotTopicsAPI();
|
||||
this.ui = new window.UIManager();
|
||||
|
||||
// 检查必需的DOM元素
|
||||
this.checkRequiredElements();
|
||||
|
||||
// 绑定事件
|
||||
this.bindEvents();
|
||||
|
||||
// 首次加载数据
|
||||
await this.loadData();
|
||||
|
||||
// 设置自动刷新
|
||||
this.setupAutoRefresh();
|
||||
|
||||
// 设置页面可见性监听
|
||||
this.setupVisibilityListener();
|
||||
|
||||
this.isInitialized = true;
|
||||
console.log('[App] 应用初始化完成');
|
||||
|
||||
} catch (error) {
|
||||
console.error('[App] 初始化失败:', error);
|
||||
this.handleInitError(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查必需的DOM元素
|
||||
*/
|
||||
checkRequiredElements() {
|
||||
const requiredIds = ['loading', 'error', 'hotList', 'topicsContainer', 'refreshBtn'];
|
||||
const missingElements = requiredIds.filter(id => !document.getElementById(id));
|
||||
|
||||
if (missingElements.length > 0) {
|
||||
throw new Error(`缺少必需的DOM元素: ${missingElements.join(', ')}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定事件监听器
|
||||
*/
|
||||
bindEvents() {
|
||||
// 监听UI触发的刷新事件
|
||||
document.addEventListener('refreshData', () => {
|
||||
this.handleManualRefresh();
|
||||
});
|
||||
|
||||
// 监听网络状态变化
|
||||
window.addEventListener('online', () => {
|
||||
console.log('[App] 网络已连接，尝试刷新数据');
|
||||
this.ui.showToast('网络已连接');
|
||||
this.loadData();
|
||||
});
|
||||
|
||||
window.addEventListener('offline', () => {
|
||||
console.log('[App] 网络已断开');
|
||||
this.ui.showToast('网络连接已断开');
|
||||
});
|
||||
|
||||
// 监听页面错误
|
||||
window.addEventListener('error', (event) => {
|
||||
console.error('[App] 页面错误:', event.error);
|
||||
});
|
||||
|
||||
// 监听未处理的Promise拒绝
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
console.error('[App] 未处理的Promise拒绝:', event.reason);
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载热搜数据
|
||||
* @param {boolean} showLoading - 是否显示加载状态
|
||||
*/
|
||||
async loadData(showLoading = true) {
|
||||
try {
|
||||
if (showLoading) {
|
||||
this.ui.showLoading();
|
||||
}
|
||||
|
||||
console.log('[App] 开始加载热搜数据...');
|
||||
const data = await this.api.fetchHotTopics();
|
||||
|
||||
console.log('[App] 数据加载成功:', data);
|
||||
this.ui.showHotList(data);
|
||||
|
||||
// 重置自动刷新计时器
|
||||
this.resetAutoRefresh();
|
||||
|
||||
} catch (error) {
|
||||
console.error('[App] 数据加载失败:', error);
|
||||
this.ui.showError(error.message);
|
||||
|
||||
// 如果是网络错误，延迟重试
|
||||
if (this.isNetworkError(error)) {
|
||||
setTimeout(() => {
|
||||
if (navigator.onLine) {
|
||||
this.loadData(false);
|
||||
}
|
||||
}, 30000); // 30秒后重试
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理手动刷新
|
||||
*/
|
||||
async handleManualRefresh() {
|
||||
console.log('[App] 手动刷新数据');
|
||||
await this.loadData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置自动刷新
|
||||
*/
|
||||
setupAutoRefresh() {
|
||||
if (this.autoRefreshInterval) {
|
||||
clearInterval(this.autoRefreshInterval);
|
||||
}
|
||||
|
||||
this.autoRefreshInterval = setInterval(() => {
|
||||
if (document.visibilityState === 'visible' && navigator.onLine) {
|
||||
console.log('[App] 自动刷新数据');
|
||||
this.loadData(false);
|
||||
}
|
||||
}, this.autoRefreshDelay);
|
||||
|
||||
console.log(`[App] 自动刷新已设置，间隔: ${this.autoRefreshDelay / 1000}秒`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置自动刷新计时器
|
||||
*/
|
||||
resetAutoRefresh() {
|
||||
this.setupAutoRefresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置页面可见性监听
|
||||
*/
|
||||
setupVisibilityListener() {
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
console.log('[App] 页面变为可见');
|
||||
|
||||
// 检查数据是否需要更新
|
||||
const currentData = this.ui.getCurrentData();
|
||||
if (currentData) {
|
||||
const lastUpdate = new Date(currentData.updateTime);
|
||||
const now = new Date();
|
||||
const timeDiff = now - lastUpdate;
|
||||
|
||||
// 如果数据超过3分钟，自动刷新
|
||||
if (timeDiff > 3 * 60 * 1000) {
|
||||
console.log('[App] 数据已过期，自动刷新');
|
||||
this.loadData(false);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('[App] 页面变为隐藏');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为网络错误
|
||||
* @param {Error} error - 错误对象
|
||||
* @returns {boolean} 是否为网络错误
|
||||
*/
|
||||
isNetworkError(error) {
|
||||
const networkErrorMessages = [
|
||||
'fetch',
|
||||
'network',
|
||||
'timeout',
|
||||
'connection',
|
||||
'offline'
|
||||
];
|
||||
|
||||
return networkErrorMessages.some(msg =>
|
||||
error.message.toLowerCase().includes(msg)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理初始化错误
|
||||
* @param {Error} error - 错误对象
|
||||
*/
|
||||
handleInitError(error) {
|
||||
// 显示基本错误信息
|
||||
const errorContainer = document.getElementById('error');
|
||||
if (errorContainer) {
|
||||
errorContainer.style.display = 'flex';
|
||||
const errorMessage = errorContainer.querySelector('.error-message');
|
||||
if (errorMessage) {
|
||||
errorMessage.textContent = `初始化失败: ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
const loadingContainer = document.getElementById('loading');
|
||||
if (loadingContainer) {
|
||||
loadingContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取应用状态
|
||||
* @returns {Object} 应用状态信息
|
||||
*/
|
||||
getStatus() {
|
||||
return {
|
||||
isInitialized: this.isInitialized,
|
||||
hasData: !!this.ui?.getCurrentData(),
|
||||
autoRefreshEnabled: !!this.autoRefreshInterval,
|
||||
isOnline: navigator.onLine,
|
||||
isVisible: document.visibilityState === 'visible'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁应用
|
||||
*/
|
||||
destroy() {
|
||||
console.log('[App] 销毁应用');
|
||||
|
||||
if (this.autoRefreshInterval) {
|
||||
clearInterval(this.autoRefreshInterval);
|
||||
this.autoRefreshInterval = null;
|
||||
}
|
||||
|
||||
if (this.ui) {
|
||||
this.ui.clearData();
|
||||
}
|
||||
|
||||
this.isInitialized = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 全局错误处理
|
||||
window.addEventListener('error', (event) => {
|
||||
console.error('[Global] JavaScript错误:', {
|
||||
message: event.message,
|
||||
filename: event.filename,
|
||||
lineno: event.lineno,
|
||||
colno: event.colno,
|
||||
error: event.error
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
console.error('[Global] 未处理的Promise拒绝:', event.reason);
|
||||
});
|
||||
|
||||
// 应用启动
|
||||
let app;
|
||||
|
||||
// 确保在DOM加载完成后启动应用
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
app = new CarHotTopicsApp();
|
||||
});
|
||||
} else {
|
||||
app = new CarHotTopicsApp();
|
||||
}
|
||||
|
||||
// 导出应用实例（用于调试）
|
||||
window.CarHotTopicsApp = CarHotTopicsApp;
|
||||
window.app = app;
|
||||
|
||||
// 调试信息
|
||||
console.log('[App] 懂车帝热搜应用脚本已加载');
|
||||
console.log('[Debug] 可用的全局对象:', {
|
||||
CarHotTopicsAPI: !!window.CarHotTopicsAPI,
|
||||
UIManager: !!window.UIManager,
|
||||
CarHotTopicsApp: !!window.CarHotTopicsApp
|
||||
});
|
||||
55
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/background.css
Normal file
55
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/background.css
Normal file
@@ -0,0 +1,55 @@
|
||||
/* 背景样式文件 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 25%, #f5f9f5 50%, #fafcfa 75%, #ffffff 100%);
|
||||
background-attachment: fixed;
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
}
|
||||
|
||||
/* 背景动画 */
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 容器背景 */
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8px 32px rgba(139, 195, 74, 0.1);
|
||||
}
|
||||
|
||||
/* 移动端背景优化 */
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: linear-gradient(135deg, #1a2e1a 0%, #2d4a2d 25%, #3a5a3a 50%, #4a6a4a 75%, #5a7a5a 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
72
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/index.html
Normal file
72
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/index.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="懂车帝热搜榜单 - 实时汽车资讯热点">
|
||||
<meta name="keywords" content="懂车帝,热搜,汽车,资讯,榜单">
|
||||
<title>懂车帝热搜榜单</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="background.css">
|
||||
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<i class="fas fa-car"></i>
|
||||
<h1>懂车帝热搜</h1>
|
||||
</div>
|
||||
<button class="refresh-btn" id="refreshBtn">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<span>刷新</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main-content">
|
||||
<!-- 加载状态 -->
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载热搜数据...</p>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div class="error" id="error" style="display: none;">
|
||||
<div class="error-icon">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<p class="error-message">加载失败，请稍后重试</p>
|
||||
<button class="retry-btn" onclick="loadHotTopics()">重新加载</button>
|
||||
</div>
|
||||
|
||||
<!-- 热搜列表 -->
|
||||
<div class="hot-list" id="hotList" style="display: none;">
|
||||
<div class="list-header">
|
||||
<h2>汽车热搜榜</h2>
|
||||
<span class="update-time" id="updateTime"></span>
|
||||
</div>
|
||||
<div class="topics-container" id="topicsContainer">
|
||||
<!-- 动态生成的热搜项目 -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<p class="data-source">数据来源：懂车帝官方</p>
|
||||
<p class="update-info">实时更新 · 权威数据</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- 提示消息 -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script src="api.js"></script>
|
||||
<script src="ui.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
532
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/styles.css
Normal file
532
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/styles.css
Normal file
@@ -0,0 +1,532 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 容器布局 */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid rgba(139, 195, 74, 0.2);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 28px;
|
||||
color: #8bc34a;
|
||||
background: linear-gradient(135deg, #a5d6a7, #81c784);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2e7d32;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: linear-gradient(135deg, #a5d6a7, #81c784);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
background: linear-gradient(135deg, #81c784, #66bb6a);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(139, 195, 74, 0.4);
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.refresh-btn i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.refresh-btn.loading i {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(139, 195, 74, 0.2);
|
||||
border-top: 3px solid #8bc34a;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.loading p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-icon i {
|
||||
font-size: 48px;
|
||||
color: #ff7043;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, #a5d6a7, #81c784);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
background: linear-gradient(135deg, #81c784, #66bb6a);
|
||||
}
|
||||
|
||||
/* 热搜列表 */
|
||||
.hot-list {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid rgba(139, 195, 74, 0.2);
|
||||
}
|
||||
|
||||
.list-header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2e7d32;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
background: rgba(139, 195, 74, 0.1);
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.topics-container {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 热搜项目 */
|
||||
.topic-item {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(139, 195, 74, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topic-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(139, 195, 74, 0.15);
|
||||
border-color: rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.topic-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #a5d6a7, #81c784);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.topic-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.topic-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank-badge.top-3 {
|
||||
background: linear-gradient(135deg, #ffb74d, #ff9800);
|
||||
box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.rank-badge.normal {
|
||||
background: linear-gradient(135deg, #a5d6a7, #81c784);
|
||||
box-shadow: 0 2px 6px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.topic-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(139, 195, 74, 0.1);
|
||||
}
|
||||
|
||||
.topic-score {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.topic-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 4px 8px;
|
||||
background: rgba(139, 195, 74, 0.1);
|
||||
color: #8bc34a;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: rgba(139, 195, 74, 0.2);
|
||||
}
|
||||
|
||||
/* 底部样式 */
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid rgba(139, 195, 74, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-content p {
|
||||
margin: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.data-source {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 提示消息 */
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(46, 125, 50, 0.9);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.topics-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面端适配 */
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.topics-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 12px 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.refresh-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topics-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.topic-score {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 3px 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.list-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.toast {
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
transform: none;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕优化 */
|
||||
@media (max-width: 360px) {
|
||||
.container {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(139, 195, 74, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 195, 74, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(139, 195, 74, 0.7);
|
||||
}
|
||||
410
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/ui.js
Normal file
410
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/ui.js
Normal file
@@ -0,0 +1,410 @@
|
||||
/**
|
||||
* UI管理模块
|
||||
* 负责页面渲染、交互和状态管理
|
||||
*/
|
||||
class UIManager {
|
||||
constructor() {
|
||||
this.elements = {};
|
||||
this.isLoading = false;
|
||||
this.currentData = null;
|
||||
this.touchStartY = 0;
|
||||
this.pullThreshold = 80;
|
||||
this.isPulling = false;
|
||||
|
||||
this.initElements();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化DOM元素引用
|
||||
*/
|
||||
initElements() {
|
||||
this.elements = {
|
||||
loading: document.getElementById('loading'),
|
||||
error: document.getElementById('error'),
|
||||
hotList: document.getElementById('hotList'),
|
||||
topicsContainer: document.getElementById('topicsContainer'),
|
||||
refreshBtn: document.getElementById('refreshBtn'),
|
||||
updateTime: document.getElementById('updateTime'),
|
||||
toast: document.getElementById('toast')
|
||||
};
|
||||
|
||||
// 检查必需元素
|
||||
const missingElements = Object.entries(this.elements)
|
||||
.filter(([key, element]) => !element)
|
||||
.map(([key]) => key);
|
||||
|
||||
if (missingElements.length > 0) {
|
||||
console.error('[UI] 缺少必需的DOM元素:', missingElements);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定事件监听器
|
||||
*/
|
||||
bindEvents() {
|
||||
// 刷新按钮点击事件
|
||||
if (this.elements.refreshBtn) {
|
||||
this.elements.refreshBtn.addEventListener('click', () => {
|
||||
this.handleRefresh();
|
||||
});
|
||||
}
|
||||
|
||||
// 键盘快捷键
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
|
||||
e.preventDefault();
|
||||
this.handleRefresh();
|
||||
}
|
||||
});
|
||||
|
||||
// 移动端下拉刷新
|
||||
this.initPullToRefresh();
|
||||
|
||||
// 页面可见性变化
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden && this.currentData) {
|
||||
// 页面重新可见时检查数据是否过期（5分钟）
|
||||
const lastUpdate = new Date(this.currentData.updateTime);
|
||||
const now = new Date();
|
||||
if (now - lastUpdate > 5 * 60 * 1000) {
|
||||
this.handleRefresh();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化下拉刷新功能
|
||||
*/
|
||||
initPullToRefresh() {
|
||||
let startY = 0;
|
||||
let currentY = 0;
|
||||
let pullDistance = 0;
|
||||
|
||||
document.addEventListener('touchstart', (e) => {
|
||||
if (window.scrollY === 0) {
|
||||
startY = e.touches[0].clientY;
|
||||
this.isPulling = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
document.addEventListener('touchmove', (e) => {
|
||||
if (!this.isPulling || this.isLoading) return;
|
||||
|
||||
currentY = e.touches[0].clientY;
|
||||
pullDistance = currentY - startY;
|
||||
|
||||
if (pullDistance > 0 && window.scrollY === 0) {
|
||||
e.preventDefault();
|
||||
|
||||
// 添加视觉反馈
|
||||
const progress = Math.min(pullDistance / this.pullThreshold, 1);
|
||||
document.body.style.transform = `translateY(${pullDistance * 0.3}px)`;
|
||||
document.body.style.opacity = 1 - progress * 0.1;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
document.addEventListener('touchend', () => {
|
||||
if (this.isPulling) {
|
||||
document.body.style.transform = '';
|
||||
document.body.style.opacity = '';
|
||||
|
||||
if (pullDistance > this.pullThreshold && !this.isLoading) {
|
||||
this.handleRefresh();
|
||||
}
|
||||
|
||||
this.isPulling = false;
|
||||
pullDistance = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理刷新操作
|
||||
*/
|
||||
async handleRefresh() {
|
||||
if (this.isLoading) return;
|
||||
|
||||
this.showToast('正在刷新数据...');
|
||||
|
||||
// 触发自定义刷新事件
|
||||
const refreshEvent = new CustomEvent('refreshData');
|
||||
document.dispatchEvent(refreshEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
*/
|
||||
showLoading() {
|
||||
this.isLoading = true;
|
||||
this.hideAllStates();
|
||||
if (this.elements.loading) {
|
||||
this.elements.loading.style.display = 'flex';
|
||||
}
|
||||
|
||||
// 刷新按钮加载状态
|
||||
if (this.elements.refreshBtn) {
|
||||
this.elements.refreshBtn.classList.add('loading');
|
||||
this.elements.refreshBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示错误状态
|
||||
* @param {string} message - 错误消息
|
||||
*/
|
||||
showError(message = '加载失败，请稍后重试') {
|
||||
this.isLoading = false;
|
||||
this.hideAllStates();
|
||||
|
||||
if (this.elements.error) {
|
||||
this.elements.error.style.display = 'flex';
|
||||
const errorMessage = this.elements.error.querySelector('.error-message');
|
||||
if (errorMessage) {
|
||||
errorMessage.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
this.resetRefreshButton();
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示热搜列表
|
||||
* @param {Object} data - 热搜数据
|
||||
*/
|
||||
showHotList(data) {
|
||||
this.isLoading = false;
|
||||
this.currentData = data;
|
||||
this.hideAllStates();
|
||||
|
||||
if (this.elements.hotList) {
|
||||
this.elements.hotList.style.display = 'block';
|
||||
}
|
||||
|
||||
this.renderTopics(data.data);
|
||||
this.updateTime(data.updateTime);
|
||||
this.resetRefreshButton();
|
||||
|
||||
this.showToast(`已更新 ${data.total} 条热搜数据`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有状态
|
||||
*/
|
||||
hideAllStates() {
|
||||
['loading', 'error', 'hotList'].forEach(state => {
|
||||
if (this.elements[state]) {
|
||||
this.elements[state].style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置刷新按钮状态
|
||||
*/
|
||||
resetRefreshButton() {
|
||||
if (this.elements.refreshBtn) {
|
||||
this.elements.refreshBtn.classList.remove('loading');
|
||||
this.elements.refreshBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染热搜话题列表
|
||||
* @param {Array} topics - 话题数组
|
||||
*/
|
||||
renderTopics(topics) {
|
||||
if (!this.elements.topicsContainer) return;
|
||||
|
||||
this.elements.topicsContainer.innerHTML = '';
|
||||
|
||||
topics.forEach((topic, index) => {
|
||||
const topicElement = this.createTopicElement(topic, index);
|
||||
this.elements.topicsContainer.appendChild(topicElement);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建单个话题元素
|
||||
* @param {Object} topic - 话题数据
|
||||
* @param {number} index - 索引
|
||||
* @returns {HTMLElement} 话题元素
|
||||
*/
|
||||
createTopicElement(topic, index) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'topic-item';
|
||||
item.style.animationDelay = `${index * 0.1}s`;
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="topic-header">
|
||||
<div class="rank-badge ${topic.isTop3 ? 'top-3' : 'normal'}">
|
||||
${topic.rank}
|
||||
</div>
|
||||
<div class="topic-title">${this.escapeHtml(topic.title)}</div>
|
||||
</div>
|
||||
<div class="topic-footer">
|
||||
<div class="topic-score">${topic.scoreDesc}</div>
|
||||
<div class="topic-actions">
|
||||
<button class="action-btn copy-btn" data-text="${this.escapeHtml(topic.title)}">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button class="action-btn search-btn" data-url="${topic.searchUrl}">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindTopicEvents(item, topic);
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定话题元素事件
|
||||
* @param {HTMLElement} element - 话题元素
|
||||
* @param {Object} topic - 话题数据
|
||||
*/
|
||||
bindTopicEvents(element, topic) {
|
||||
// 点击整个项目跳转搜索
|
||||
element.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.action-btn')) {
|
||||
window.open(topic.searchUrl, '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
// 复制按钮
|
||||
const copyBtn = element.querySelector('.copy-btn');
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.copyToClipboard(topic.title);
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
const searchBtn = element.querySelector('.search-btn');
|
||||
if (searchBtn) {
|
||||
searchBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
window.open(topic.searchUrl, '_blank');
|
||||
});
|
||||
}
|
||||
|
||||
// 长按显示详情
|
||||
let longPressTimer;
|
||||
element.addEventListener('touchstart', () => {
|
||||
longPressTimer = setTimeout(() => {
|
||||
this.showTopicDetails(topic);
|
||||
}, 800);
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', () => {
|
||||
clearTimeout(longPressTimer);
|
||||
});
|
||||
|
||||
element.addEventListener('touchmove', () => {
|
||||
clearTimeout(longPressTimer);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示话题详情
|
||||
* @param {Object} topic - 话题数据
|
||||
*/
|
||||
showTopicDetails(topic) {
|
||||
const details = `
|
||||
标题: ${topic.title}
|
||||
排名: 第${topic.rank}名
|
||||
热度: ${topic.scoreDesc}
|
||||
原始分数: ${topic.score.toLocaleString()}
|
||||
`;
|
||||
|
||||
this.showToast(details, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
* @param {string} text - 要复制的文本
|
||||
*/
|
||||
async copyToClipboard(text) {
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
// 降级方案
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.opacity = '0';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
this.showToast('已复制到剪贴板');
|
||||
} catch (error) {
|
||||
console.error('[UI] 复制失败:', error);
|
||||
this.showToast('复制失败');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新时间显示
|
||||
* @param {string} time - 更新时间
|
||||
*/
|
||||
updateTime(time) {
|
||||
if (this.elements.updateTime) {
|
||||
this.elements.updateTime.textContent = `更新时间: ${time}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示提示消息
|
||||
* @param {string} message - 消息内容
|
||||
* @param {number} duration - 显示时长（毫秒）
|
||||
*/
|
||||
showToast(message, duration = 2000) {
|
||||
if (!this.elements.toast) return;
|
||||
|
||||
this.elements.toast.textContent = message;
|
||||
this.elements.toast.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
this.elements.toast.classList.remove('show');
|
||||
}, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML转义
|
||||
* @param {string} text - 原始文本
|
||||
* @returns {string} 转义后的文本
|
||||
*/
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前数据
|
||||
* @returns {Object|null} 当前数据
|
||||
*/
|
||||
getCurrentData() {
|
||||
return this.currentData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除当前数据
|
||||
*/
|
||||
clearData() {
|
||||
this.currentData = null;
|
||||
if (this.elements.topicsContainer) {
|
||||
this.elements.topicsContainer.innerHTML = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出UI管理器
|
||||
window.UIManager = UIManager;
|
||||
66
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/返回接口.json
Normal file
66
InfoGenie-frontend/public/60sapi/热搜榜单/懂车帝热搜/返回接口.json
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"rank": 1,
|
||||
"title": "吉利银河星耀6将于9月5日发布",
|
||||
"score": 846099,
|
||||
"score_desc": "84.6w"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"title": "销售称Model Y L日均订单近万辆",
|
||||
"score": 602350,
|
||||
"score_desc": "60.2w"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"title": "极氪9X将于9月底上市",
|
||||
"score": 241114,
|
||||
"score_desc": "24.1w"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"title": "比亚迪“全家福”亮相齐鲁秋季车展",
|
||||
"score": 239586,
|
||||
"score_desc": "24.0w"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"title": "新一代宝马X5内饰曝光",
|
||||
"score": 209847,
|
||||
"score_desc": "21.0w"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"title": "LOL前职业选手PDD喜提理想MEGA",
|
||||
"score": 204628,
|
||||
"score_desc": "20.5w"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"title": "零跑Lafa5伪装车曝光",
|
||||
"score": 143127,
|
||||
"score_desc": "14.3w"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"title": "方程豹钛7将于9月9日上市",
|
||||
"score": 135759,
|
||||
"score_desc": "13.6w"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"title": "零跑9月购车政策",
|
||||
"score": 94419,
|
||||
"score_desc": "9.4w"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"title": "捷途X70L将于9月10日预售",
|
||||
"score": 74292,
|
||||
"score_desc": "7.4w"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/* 背景相关样式 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 25%, #a5d6a7 50%, #81c784 75%, #66bb6a 100%);
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 200, 120, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(100, 180, 100, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(140, 220, 140, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 60% 70%, rgba(160, 240, 160, 0.08) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 浮动装饰圆点 */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 10%, rgba(76, 175, 80, 0.1) 2px, transparent 2px),
|
||||
radial-gradient(circle at 90% 90%, rgba(76, 175, 80, 0.08) 1px, transparent 1px),
|
||||
radial-gradient(circle at 30% 80%, rgba(76, 175, 80, 0.06) 1.5px, transparent 1.5px),
|
||||
radial-gradient(circle at 70% 20%, rgba(76, 175, 80, 0.05) 1px, transparent 1px);
|
||||
background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px;
|
||||
animation: float 20s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10px) rotate(1deg);
|
||||
}
|
||||
}
|
||||
535
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css
Normal file
535
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css
Normal file
@@ -0,0 +1,535 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* 热搜列表 - 移动端优先设计 */
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(64, 169, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 排名容器 */
|
||||
.hot-rank-container {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hot-rank.rank-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank.rank-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 122, 69, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank.rank-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: #333;
|
||||
box-shadow: 0 4px 12px rgba(255, 169, 64, 0.3);
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rank-emoji {
|
||||
font-size: 0.7rem;
|
||||
line-height: 1;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* 内容包装器 */
|
||||
.hot-content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
}
|
||||
|
||||
/* 底部行 */
|
||||
.hot-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.hot-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
font-size: 0.9rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hot-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.heat-level {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
.hot-cover {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hot-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: linear-gradient(135deg, #4096ff, #40a9ff);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(64, 150, 255, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hot-link:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(64, 150, 255, 0.4);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 响应式设计 - 移动端优化 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding: 12px 0 16px 0;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.rank-emoji {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hot-meta-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hot-time {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.hot-value {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.hot-cover {
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.hot-link {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.hot-meta-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.hot-media-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hot-time {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.hot-value {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.hot-cover {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.hot-link {
|
||||
font-size: 0.65rem;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
60
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/index.html
Normal file
60
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/index.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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="container">
|
||||
<header class="header">
|
||||
<div class="header-icon">🔥</div>
|
||||
<h1 class="title">📱 抖音热搜榜 🎵</h1>
|
||||
<p class="subtitle">实时热门话题 · 紧跟潮流趋势</p>
|
||||
<div class="update-time">
|
||||
<span class="time-icon">⏰</span>
|
||||
<span id="updateTime">加载中...</span>
|
||||
</div>
|
||||
<button id="refreshBtn" class="refresh-btn">
|
||||
<span class="btn-icon">🔄</span>
|
||||
刷新数据
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-content">
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">
|
||||
<span class="loading-emoji">🎭</span>
|
||||
<p>正在获取最新热搜...</p>
|
||||
<div class="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hot-list" id="hotList">
|
||||
<!-- 热搜列表将动态生成 -->
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage" style="display: none;">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">😵</div>
|
||||
<h3>加载失败了</h3>
|
||||
<p>网络连接出现问题，请稍后重试</p>
|
||||
<button onclick="loadHotList()" class="retry-btn">
|
||||
<span>🔄</span>
|
||||
重新加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
332
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/js/script.js
Normal file
332
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/js/script.js
Normal file
@@ -0,0 +1,332 @@
|
||||
// 本地后端API接口
|
||||
const LOCAL_API_BASE = 'https://infogenie.api.shumengya.top/api/60s';
|
||||
|
||||
// API接口列表（备用）
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top",
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
let useLocalApi = true;
|
||||
|
||||
// DOM元素
|
||||
const loadingElement = document.getElementById('loading');
|
||||
const hotListElement = document.getElementById('hotList');
|
||||
const errorMessageElement = document.getElementById('errorMessage');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
|
||||
// 页面加载完成后自动加载数据
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadHotList();
|
||||
});
|
||||
|
||||
// 刷新按钮点击事件
|
||||
refreshBtn.addEventListener('click', function() {
|
||||
loadHotList();
|
||||
});
|
||||
|
||||
// 加载热搜列表
|
||||
async function loadHotList() {
|
||||
showLoading();
|
||||
hideError();
|
||||
|
||||
try {
|
||||
const data = await fetchData();
|
||||
displayHotList(data.data);
|
||||
updateRefreshTime();
|
||||
} catch (error) {
|
||||
console.error('加载失败:', error);
|
||||
showError();
|
||||
}
|
||||
|
||||
hideLoading();
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
async function fetchData() {
|
||||
// 优先尝试本地API
|
||||
if (useLocalApi) {
|
||||
try {
|
||||
const response = await fetch(`${LOCAL_API_BASE}/douyin`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
timeout: 10000
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.code === 200 && data.data) {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('本地API请求失败，切换到外部API:', error);
|
||||
useLocalApi = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 使用外部API作为备用
|
||||
for (let i = 0; i < API_ENDPOINTS.length; i++) {
|
||||
const apiUrl = API_ENDPOINTS[currentApiIndex];
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/v2/douyin`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
timeout: 10000
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
return data;
|
||||
} else {
|
||||
throw new Error('数据格式错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`API ${apiUrl} 请求失败:`, error);
|
||||
currentApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
if (i === API_ENDPOINTS.length - 1) {
|
||||
throw new Error('所有API接口都无法访问');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 显示热搜列表
|
||||
function displayHotList(hotData) {
|
||||
hotListElement.innerHTML = '';
|
||||
|
||||
hotData.forEach((item, index) => {
|
||||
const hotItem = createHotItem(item, index + 1);
|
||||
hotListElement.appendChild(hotItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建热搜项目
|
||||
function createHotItem(item, rank) {
|
||||
const hotItem = document.createElement('div');
|
||||
hotItem.className = 'hot-item';
|
||||
|
||||
// 排名样式类
|
||||
let rankClass = 'hot-rank';
|
||||
if (rank === 1) rankClass += ' rank-1';
|
||||
else if (rank === 2) rankClass += ' rank-2';
|
||||
else if (rank === 3) rankClass += ' rank-3';
|
||||
|
||||
const formattedHotValue = formatHotValue(item.hot_value);
|
||||
const formattedTime = formatTime(item.event_time);
|
||||
|
||||
// 根据排名添加特殊标识
|
||||
let rankEmoji = '';
|
||||
if (rank === 1) rankEmoji = '👑';
|
||||
else if (rank === 2) rankEmoji = '🥈';
|
||||
else if (rank === 3) rankEmoji = '🥉';
|
||||
else if (rank <= 10) rankEmoji = '🔥';
|
||||
|
||||
// 根据热度值添加火焰等级
|
||||
let fireLevel = '';
|
||||
if (item.hot_value >= 10000000) fireLevel = '🔥🔥🔥';
|
||||
else if (item.hot_value >= 5000000) fireLevel = '🔥🔥';
|
||||
else fireLevel = '🔥';
|
||||
|
||||
hotItem.innerHTML = `
|
||||
<div class="hot-rank-container">
|
||||
<div class="${rankClass}">
|
||||
<div class="rank-number">${rank}</div>
|
||||
<div class="rank-emoji">${rankEmoji}</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="${item.cover}" alt="${escapeHtml(item.title)}" class="hot-cover" onerror="handleImageError(this)">
|
||||
<div class="hot-content-wrapper">
|
||||
<div class="hot-title">${escapeHtml(item.title)}</div>
|
||||
<div class="hot-bottom-row">
|
||||
<div class="hot-time">
|
||||
<span class="meta-icon">⏰</span>
|
||||
<span class="meta-text">${formattedTime}</span>
|
||||
</div>
|
||||
<div class="hot-value">
|
||||
<span class="heat-level">${fireLevel}</span>
|
||||
<span class="value-text">${formattedHotValue}</span>
|
||||
</div>
|
||||
<a href="${item.link}" target="_blank" class="hot-link">
|
||||
<span class="link-icon">🎬</span>
|
||||
<span class="link-text">观看视频</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return hotItem;
|
||||
}
|
||||
|
||||
// 格式化热度值
|
||||
function formatHotValue(value) {
|
||||
if (value >= 100000000) {
|
||||
return (value / 100000000).toFixed(1) + '亿';
|
||||
} else if (value >= 10000) {
|
||||
return (value / 10000).toFixed(1) + '万';
|
||||
} else {
|
||||
return value.toLocaleString();
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(timeStr) {
|
||||
try {
|
||||
const formattedTime = timeStr.replace(/\//g, '-');
|
||||
const date = new Date(formattedTime);
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
const minutes = Math.floor(diff / (1000 * 60));
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天前`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}小时前`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}分钟前`;
|
||||
} else {
|
||||
return '刚刚';
|
||||
}
|
||||
} catch (error) {
|
||||
return timeStr;
|
||||
}
|
||||
}
|
||||
|
||||
// HTML转义
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 图片加载错误处理
|
||||
function handleImageError(img) {
|
||||
img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZjVmNWY1Ii8+CjxwYXRoIGQ9Ik00MCAyMEM0NCAyMCA0NyAyMyA0NyAyN1Y1M0M0NyA1NyA0NCA2MCA0MCA2MEgxNkMxMiA2MCA5IDU3IDkgNTNWMjdDOSAyMyAxMiAyMCAxNiAyMEg0MFoiIHN0cm9rZT0iI2NjY2NjYyIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxjaXJjbGUgY3g9IjMzIiBjeT0iMzIiIHI9IjMiIGZpbGw9IiNjY2NjY2MiLz4KPHBhdGggZD0iTTEzIDQ4TDIzIDM4TDMzIDQ4TDQzIDM4TDUzIDQ4IiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
|
||||
img.alt = '图片加载失败';
|
||||
}
|
||||
|
||||
// 更新刷新时间
|
||||
function updateRefreshTime() {
|
||||
const now = new Date();
|
||||
const timeStr = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
updateTimeElement.textContent = `最后更新: ${timeStr}`;
|
||||
|
||||
// 添加成功提示
|
||||
showSuccessMessage('🎉 数据已更新');
|
||||
}
|
||||
|
||||
// 显示成功消息
|
||||
function showSuccessMessage(message) {
|
||||
// 移除之前的提示
|
||||
const existingToast = document.querySelector('.success-toast');
|
||||
if (existingToast) {
|
||||
existingToast.remove();
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'success-toast';
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: linear-gradient(135deg, #4caf50, #66bb6a);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 4px 20px rgba(76, 175, 80, 0.3);
|
||||
z-index: 1000;
|
||||
font-weight: 600;
|
||||
font-size: 0.9em;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
backdrop-filter: blur(10px);
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// 3秒后自动移除
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideOut 0.3s ease-in forwards';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 添加CSS动画到页面
|
||||
if (!document.querySelector('#toast-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'toast-styles';
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingElement.style.display = 'block';
|
||||
hotListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
loadingElement.style.display = 'none';
|
||||
hotListElement.style.display = 'block';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError() {
|
||||
errorMessageElement.style.display = 'block';
|
||||
hotListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏错误信息
|
||||
function hideError() {
|
||||
errorMessageElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 自动刷新 (每5分钟)
|
||||
setInterval(function() {
|
||||
loadHotList();
|
||||
}, 5 * 60 * 1000);
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
496
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/返回接口.json
Normal file
496
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/返回接口.json
Normal file
@@ -0,0 +1,496 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"title": "九三阅兵具体安排公布",
|
||||
"hot_value": 11821633,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oY1c972B7QzApGweaeQD3fGRo5aLIBrpCAuUSa~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=q01Se46GlLKYNv2klGKP1aM1cT0%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E5%85%B7%E4%BD%93%E5%AE%89%E6%8E%92%E5%85%AC%E5%B8%83",
|
||||
"event_time": "2025/09/01 15:20:34",
|
||||
"event_time_at": 1756711234,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "九月第一天",
|
||||
"hot_value": 11327170,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oofTvDaDRCSs4hBFEFVJlAI9BBs0faZAc7IpGf~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=otkowVCSglk%2BS3tPrmBQFq6rIDw%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%B9%9D%E6%9C%88%E7%AC%AC%E4%B8%80%E5%A4%A9",
|
||||
"event_time": "2025/09/01 07:28:57",
|
||||
"event_time_at": 1756682937,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "遇见上合共享津彩",
|
||||
"hot_value": 11222444,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oIJeINhBDBAiHADD4gi9Ae0CGALg1BqWI7vg0i~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=K%2BaEx5p%2BDv%2B1h3RgNnH0Yb9WT%2B8%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E9%81%87%E8%A7%81%E4%B8%8A%E5%90%88%E5%85%B1%E4%BA%AB%E6%B4%A5%E5%BD%A9",
|
||||
"event_time": "2025/09/01 11:46:59",
|
||||
"event_time_at": 1756698419,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "2025年开学第一课铭记与奋斗",
|
||||
"hot_value": 11078403,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oA9NgVCRBABg7r70pQue8IzAUlfMaXf3hawOIB~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=3xYeXsD6JpXLDOVp6gYRxrvKFaM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/2025%E5%B9%B4%E5%BC%80%E5%AD%A6%E7%AC%AC%E4%B8%80%E8%AF%BE%E9%93%AD%E8%AE%B0%E4%B8%8E%E5%A5%8B%E6%96%97",
|
||||
"event_time": "2025/09/01 11:21:13",
|
||||
"event_time_at": 1756696873,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "石宇奇首夺世锦赛男单冠军",
|
||||
"hot_value": 10395092,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oAf9IAlEuyE3lFiogfBuQFl8gDFqAoAHtFDNkE~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=tamoorhMGYhajvpmVNdX0TuUuZM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%9F%B3%E5%AE%87%E5%A5%87%E9%A6%96%E5%A4%BA%E4%B8%96%E9%94%A6%E8%B5%9B%E7%94%B7%E5%8D%95%E5%86%A0%E5%86%9B",
|
||||
"event_time": "2025/09/01 07:47:03",
|
||||
"event_time_at": 1756684023,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "告别信息裸奔 国家网络身份认证来了",
|
||||
"hot_value": 10255200,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oskNjrEUQIN9BBRCfeiDTGPE0geX0q6eAAyLr2~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=FrZQSxERPOBd6ktV8K%2Bt%2F3LgJ4A%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%91%8A%E5%88%AB%E4%BF%A1%E6%81%AF%E8%A3%B8%E5%A5%94%20%E5%9B%BD%E5%AE%B6%E7%BD%91%E7%BB%9C%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81%E6%9D%A5%E4%BA%86",
|
||||
"event_time": "2025/09/01 10:28:41",
|
||||
"event_time_at": 1756693721,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "记录我的开学第一天",
|
||||
"hot_value": 9133236,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/owTXhhk40MlJDQHi8P2B07AviaBqAL0VI9EQi~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=pTEfiV%2FfsmGuQxNllsV8PqT0RYc%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%AE%B0%E5%BD%95%E6%88%91%E7%9A%84%E5%BC%80%E5%AD%A6%E7%AC%AC%E4%B8%80%E5%A4%A9",
|
||||
"event_time": "2025/09/01 12:43:33",
|
||||
"event_time_at": 1756701813,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "9月起这些新规开始施行",
|
||||
"hot_value": 9105252,
|
||||
"cover": "https://p26-sign.douyinpic.com/tos-cn-p-0015/oEE9BseGagtA7JRBmzYA1aRMoCMAeIxfLFY5gA~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=YgH%2BJdVPmi76okIWTRoyEEZ3iDg%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/9%E6%9C%88%E8%B5%B7%E8%BF%99%E4%BA%9B%E6%96%B0%E8%A7%84%E5%BC%80%E5%A7%8B%E6%96%BD%E8%A1%8C",
|
||||
"event_time": "2025/09/01 11:48:01",
|
||||
"event_time_at": 1756698481,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "李幼斌与李云龙跨时空对话",
|
||||
"hot_value": 8998174,
|
||||
"cover": "https://p26-sign.douyinpic.com/tos-cn-p-0015/oAarINBoAgRIPi9VTEMIfHeA11nDtF7hRDuGcA~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=3x7yTXHYKiIcnNJjznvZjCw%2FW94%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E6%9D%8E%E5%B9%BC%E6%96%8C%E4%B8%8E%E6%9D%8E%E4%BA%91%E9%BE%99%E8%B7%A8%E6%97%B6%E7%A9%BA%E5%AF%B9%E8%AF%9D",
|
||||
"event_time": "2025/09/01 12:01:05",
|
||||
"event_time_at": 1756699265,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "幼儿园第一天开学哀嚎一片",
|
||||
"hot_value": 8962824,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/osbXMAQYgIwwpkDCfeiDpGaE0gb9MXfeAAuLV2~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=w1l8V4VvjuO%2BvOvuQkXiEuXYko0%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%B9%BC%E5%84%BF%E5%9B%AD%E7%AC%AC%E4%B8%80%E5%A4%A9%E5%BC%80%E5%AD%A6%E5%93%80%E5%9A%8E%E4%B8%80%E7%89%87",
|
||||
"event_time": "2025/09/01 11:05:01",
|
||||
"event_time_at": 1756695901,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "田汉把国歌歌词写烟盒上系谣传",
|
||||
"hot_value": 8930615,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-i-0813c001/ogA2AoCCXZMEAGF9f9QAlSACKRgfsC2oAFtIgD~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=7%2F8qsoQJd6TgpAEylOW1VyQrqeY%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%94%B0%E6%B1%89%E6%8A%8A%E5%9B%BD%E6%AD%8C%E6%AD%8C%E8%AF%8D%E5%86%99%E7%83%9F%E7%9B%92%E4%B8%8A%E7%B3%BB%E8%B0%A3%E4%BC%A0",
|
||||
"event_time": "2025/09/01 13:51:28",
|
||||
"event_time_at": 1756705888,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "苏超联赛积分榜",
|
||||
"hot_value": 8838219,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/o4vPLtWIQAaiggBRkQq5kw9ZlIVA0v1iDAILU~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=JJlPUPmWRzT3UPMenizW639pqVg%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%8B%8F%E8%B6%85%E8%81%94%E8%B5%9B%E7%A7%AF%E5%88%86%E6%A6%9C",
|
||||
"event_time": "2025/08/31 22:01:53",
|
||||
"event_time_at": 1756648913,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "一切正开始",
|
||||
"hot_value": 8609507,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/o8wN0EuXoETsyMz0ADCFFaAsFFTQeQf9fAublW~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=5I8uLkfpNYrGArQm%2BXLBa81NhYY%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%B8%80%E5%88%87%E6%AD%A3%E5%BC%80%E5%A7%8B",
|
||||
"event_time": "2025/09/01 11:56:50",
|
||||
"event_time_at": 1756699010,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "张玉宁为与球迷起冲突致歉",
|
||||
"hot_value": 8511631,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oMfoIAFMN5GEWOzpBCDAQfaj7yRArCdByaEUfE~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=59ipMtNxZ8W3R5NNAJamlSOEbPo%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%BC%A0%E7%8E%89%E5%AE%81%E4%B8%BA%E4%B8%8E%E7%90%83%E8%BF%B7%E8%B5%B7%E5%86%B2%E7%AA%81%E8%87%B4%E6%AD%89",
|
||||
"event_time": "2025/09/01 07:53:39",
|
||||
"event_time_at": 1756684419,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "这一口会很疯狂",
|
||||
"hot_value": 8454971,
|
||||
"cover": "https://p26-sign.douyinpic.com/tos-cn-p-0015/oUIozRIBqC0ahA7FimIAmFEBeqDFfZK3Qfo8PE~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=ZBSuTMuu4678gSfReaVIfdK22J8%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%BF%99%E4%B8%80%E5%8F%A3%E4%BC%9A%E5%BE%88%E7%96%AF%E7%8B%82",
|
||||
"event_time": "2025/09/01 10:36:16",
|
||||
"event_time_at": 1756694176,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "邓超鹿晗合唱超级英雄",
|
||||
"hot_value": 8357197,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oUBPIdtyQx0j8THRZAmZbyATihavQHI0niLIP~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=%2F66dsj8evHN94wNNFCn%2Bfhagee0%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E9%82%93%E8%B6%85%E9%B9%BF%E6%99%97%E5%90%88%E5%94%B1%E8%B6%85%E7%BA%A7%E8%8B%B1%E9%9B%84",
|
||||
"event_time": "2025/09/01 07:45:11",
|
||||
"event_time_at": 1756683911,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "伊萨克加盟利物浦",
|
||||
"hot_value": 7963081,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/ocAw2yaT4I99iDIPh9I3LaIiLBTnBASvH0Q1a~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=v4Gq0Iz87wyZ6lEYYOnKmaeur%2FM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%BC%8A%E8%90%A8%E5%85%8B%E5%8A%A0%E7%9B%9F%E5%88%A9%E7%89%A9%E6%B5%A6",
|
||||
"event_time": "2025/09/01 09:12:12",
|
||||
"event_time_at": 1756689132,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "山东泰山6:0北京国安",
|
||||
"hot_value": 7830358,
|
||||
"cover": "https://p9-sign.douyinpic.com/tos-cn-p-0015/ogtA9BEEJZDJ9SgzBBLfFN0AflNDGoIAQ2I8A8~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=gu6O%2BhGDarr%2BHQe1P%2BHo9pUmBGU%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%B1%B1%E4%B8%9C%E6%B3%B0%E5%B1%B16%3A0%E5%8C%97%E4%BA%AC%E5%9B%BD%E5%AE%89",
|
||||
"event_time": "2025/08/31 20:32:53",
|
||||
"event_time_at": 1756643573,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "又到开学你包书皮了吗",
|
||||
"hot_value": 7828995,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oUAwaPjCIiLAQI6ADQMAm06TBJxPJFAkCpIIi~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=aUkYTtkfaUKbK2DhznXU69sg8SU%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%8F%88%E5%88%B0%E5%BC%80%E5%AD%A6%E4%BD%A0%E5%8C%85%E4%B9%A6%E7%9A%AE%E4%BA%86%E5%90%97",
|
||||
"event_time": "2025/08/31 17:04:09",
|
||||
"event_time_at": 1756631049,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "樊振东德甲首秀两连败",
|
||||
"hot_value": 7754365,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/osOdEdibznClYwP0AABAIZW1eg0gbBmAzjiJfl~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=AyWBGXt%2FFFSp0QBM%2Bd5%2F9B4GPvo%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E6%A8%8A%E6%8C%AF%E4%B8%9C%E5%BE%B7%E7%94%B2%E9%A6%96%E7%A7%80%E4%B8%A4%E8%BF%9E%E8%B4%A5",
|
||||
"event_time": "2025/09/01 07:16:58",
|
||||
"event_time_at": 1756682218,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "为什么说00后的童年含金量高",
|
||||
"hot_value": 7735122,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/ogOQEQsnAACDBICh7LeFWRGCjeZneIB9I3oVFy~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=Htnqu7SupC%2FmvQpF2DDsLDh5FYA%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%B8%BA%E4%BB%80%E4%B9%88%E8%AF%B400%E5%90%8E%E7%9A%84%E7%AB%A5%E5%B9%B4%E5%90%AB%E9%87%91%E9%87%8F%E9%AB%98",
|
||||
"event_time": "2025/08/31 16:38:30",
|
||||
"event_time_at": 1756629510,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "刘宇千年直拍",
|
||||
"hot_value": 7734149,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/ostjBSmQ78E8estIXgFlHQxZQALRFfMepbTJWC~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=CPNw9h%2BpBB82qBykpuT11uMVFjo%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%88%98%E5%AE%87%E5%8D%83%E5%B9%B4%E7%9B%B4%E6%8B%8D",
|
||||
"event_time": "2025/08/31 21:39:38",
|
||||
"event_time_at": 1756647578,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "胡塞武装称将对以军袭击发起报复",
|
||||
"hot_value": 7728698,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oseWgjCRBAfgft7c3QUm8JGApnYMaWdJdGj0SB~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=fX6AvTWQvNrihcvEraPHjJIS9iY%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%83%A1%E5%A1%9E%E6%AD%A6%E8%A3%85%E7%A7%B0%E5%B0%86%E5%AF%B9%E4%BB%A5%E5%86%9B%E8%A2%AD%E5%87%BB%E5%8F%91%E8%B5%B7%E6%8A%A5%E5%A4%8D",
|
||||
"event_time": "2025/09/01 09:40:13",
|
||||
"event_time_at": 1756690813,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "手把手教你手机变车机",
|
||||
"hot_value": 7725104,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/o47qAXUjDQN6KLr9AjFSCq92ZBf4okAQEfgSAp~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=OoNNciUVTOwZbl17IUYBOjFyBJ4%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E6%89%8B%E6%9C%BA%E5%8F%98%E8%BD%A6%E6%9C%BA",
|
||||
"event_time": "2025/09/01 11:15:15",
|
||||
"event_time_at": 1756696515,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "莫迪与普京拥抱手拉手热聊",
|
||||
"hot_value": 7723445,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oIaWAojVPLRUILGIyvvg1Sd1ZiLAKiCB6zQIX~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=u1IGnKz%2FAckLe%2BYFCQulFw0ioB8%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%8E%AB%E8%BF%AA%E4%B8%8E%E6%99%AE%E4%BA%AC%E6%8B%A5%E6%8A%B1%E6%89%8B%E6%8B%89%E6%89%8B%E7%83%AD%E8%81%8A",
|
||||
"event_time": "2025/09/01 15:38:27",
|
||||
"event_time_at": 1756712307,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "原来猪猪侠搞抽象领先我20年",
|
||||
"hot_value": 7706786,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oINGyAfS2oFpfAgF2kYxEJAqTbSeEcgotfxeHv~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=S1Ve0ORP5%2BrHumx%2FK7uJbfm8PbM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%8E%9F%E6%9D%A5%E7%8C%AA%E7%8C%AA%E4%BE%A0%E6%90%9E%E6%8A%BD%E8%B1%A1%E9%A2%86%E5%85%88%E6%88%9120%E5%B9%B4",
|
||||
"event_time": "2025/09/01 10:52:59",
|
||||
"event_time_at": 1756695179,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "北京国安就惨败道歉",
|
||||
"hot_value": 7702358,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oYiXICjfn7uEi3AeK6W04BiXu3iBjigAAs9W0B~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=hgh%2Bfy4Ul82LWgXAL2hkIBMEpJM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%8C%97%E4%BA%AC%E5%9B%BD%E5%AE%89%E5%B0%B1%E6%83%A8%E8%B4%A5%E9%81%93%E6%AD%89",
|
||||
"event_time": "2025/09/01 09:21:10",
|
||||
"event_time_at": 1756689670,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "港姐冠军陈咏诗是博士生",
|
||||
"hot_value": 7702059,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/okoRaMGvQBCI6KmVeBAAQ1eLEg1HK2foQuM7aB~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=5Lattu1v38oeQ8xGdXiDLcK4fwM%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E6%B8%AF%E5%A7%90%E5%86%A0%E5%86%9B%E9%99%88%E5%92%8F%E8%AF%97%E6%98%AF%E5%8D%9A%E5%A3%AB%E7%94%9F",
|
||||
"event_time": "2025/09/01 10:47:23",
|
||||
"event_time_at": 1756694843,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "王楚钦2:3徐瑛彬",
|
||||
"hot_value": 7699514,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/o00BTIi1ogMR8LBAiQdLmSaIPAuEyIQv1IP48~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=2%2BI5KkQpEugBkQcVCrSLgOtC088%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%8E%8B%E6%A5%9A%E9%92%A62%3A3%E5%BE%90%E7%91%9B%E5%BD%AC",
|
||||
"event_time": "2025/08/31 21:21:08",
|
||||
"event_time_at": 1756646468,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "王源 高音",
|
||||
"hot_value": 7693290,
|
||||
"cover": "https://p26-sign.douyinpic.com/tos-cn-p-0015/oYzDIaQiavwPRBUpanIkjAIWzwLCIgPkAyiOj~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=uXVN6xfkB3tz3iVo0DQuxqeaGk0%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%8E%8B%E6%BA%90%20%E9%AB%98%E9%9F%B3",
|
||||
"event_time": "2025/08/31 20:30:04",
|
||||
"event_time_at": 1756643404,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "俄乌在苏贾前线展开阵地争夺",
|
||||
"hot_value": 7691808,
|
||||
"cover": "https://p9-sign.douyinpic.com/tos-cn-p-0015/oo7iATIG8vA5hIIQBILB4oCgvygsUNzBS1aPi~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=SNzQbbxAJqqtdIkck9kvtRUJnZg%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%BF%84%E4%B9%8C%E5%9C%A8%E8%8B%8F%E8%B4%BE%E5%89%8D%E7%BA%BF%E5%B1%95%E5%BC%80%E9%98%B5%E5%9C%B0%E4%BA%89%E5%A4%BA",
|
||||
"event_time": "2025/09/01 12:56:05",
|
||||
"event_time_at": 1756702565,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "范丞丞温柔版一个人的夜变装",
|
||||
"hot_value": 7689433,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oAPLWIAoR3CsXgVBuIQIRiTDyS14gaLPwELAi~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=yp9l95J9xlKf55IEP14P7sD7J%2F4%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%8C%83%E4%B8%9E%E4%B8%9E%E6%B8%A9%E6%9F%94%E7%89%88%E4%B8%80%E4%B8%AA%E4%BA%BA%E7%9A%84%E5%A4%9C%E5%8F%98%E8%A3%85",
|
||||
"event_time": "2025/09/01 15:32:00",
|
||||
"event_time_at": 1756711920,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "用美食致敬这场胜利",
|
||||
"hot_value": 7681826,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oIFcUfHotAXxALhJEj2EK9SBNp0fQwKhAbCgQD~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=Dkuyg5REqCAMEIsp0Dr%2B%2BkAO%2BmQ%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%94%A8%E7%BE%8E%E9%A3%9F%E8%87%B4%E6%95%AC%E8%BF%99%E5%9C%BA%E8%83%9C%E5%88%A9",
|
||||
"event_time": "2025/09/01 12:08:24",
|
||||
"event_time_at": 1756699704,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "田曦薇猫猫本体藏不住了",
|
||||
"hot_value": 7674729,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015c000-ce/oceyeLnbxAXFERxnPfLR2egAkYaXeRpHfhAQME~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=omEVZta%2FQeV%2FSBRNZ3%2BJF0iMXPQ%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%94%B0%E6%9B%A6%E8%96%87%E7%8C%AB%E7%8C%AB%E6%9C%AC%E4%BD%93%E8%97%8F%E4%B8%8D%E4%BD%8F%E4%BA%86",
|
||||
"event_time": "2025/09/01 14:33:25",
|
||||
"event_time_at": 1756708405,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "少年心气是不可再生之物",
|
||||
"hot_value": 7673518,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-i-0813c001/oAUJIWFyAFCmtGpmAADAQis69JogkCFAA0Eqff~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=YHeldSJZXPEBMLF2i%2Bj%2Fc60oKsQ%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%B0%91%E5%B9%B4%E5%BF%83%E6%B0%94%E6%98%AF%E4%B8%8D%E5%8F%AF%E5%86%8D%E7%94%9F%E4%B9%8B%E7%89%A9",
|
||||
"event_time": "2025/09/01 07:54:31",
|
||||
"event_time_at": 1756684471,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "南通2:1战胜苏州",
|
||||
"hot_value": 7670255,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/o4WAaBigTGBaeBgrqm5Kir0Af6DGO0IAF6IQPA~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=uV2f%2FvbzU4Y9DfhXxnPBc3hOAxY%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%8D%97%E9%80%9A2%3A1%E6%88%98%E8%83%9C%E8%8B%8F%E5%B7%9E",
|
||||
"event_time": "2025/08/31 18:02:42",
|
||||
"event_time_at": 1756634562,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "起猛了差点以为入冬了",
|
||||
"hot_value": 7669368,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/ogA5HPw1xiIwS2szhaBPMZvC1P0LAPPQAigEZ~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=UQNTgz2vyL2UMvzVj2gzBmPbM2A%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%B5%B7%E7%8C%9B%E4%BA%86%E5%B7%AE%E7%82%B9%E4%BB%A5%E4%B8%BA%E5%85%A5%E5%86%AC%E4%BA%86",
|
||||
"event_time": "2025/09/01 14:23:50",
|
||||
"event_time_at": 1756707830,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "终于轮到我围观军训了",
|
||||
"hot_value": 7655201,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/oobwIeLUf4O7iiazJOGAQLZO7DRgCDCBLhI2ez~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=WQn5PvdzvIerbF%2B1iNjF3b6itqQ%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%BB%88%E4%BA%8E%E8%BD%AE%E5%88%B0%E6%88%91%E5%9B%B4%E8%A7%82%E5%86%9B%E8%AE%AD%E4%BA%86",
|
||||
"event_time": "2025/08/31 13:09:34",
|
||||
"event_time_at": 1756616974,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "金铲铲陪伴是李现最长情的告白",
|
||||
"hot_value": 7653496,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/oYPAKIM2vpBnPULXOmBbAEac6KzbOhSiILiLP~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=rsA7DcONzMySFGRNa4PMk6ftyBk%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E9%87%91%E9%93%B2%E9%93%B2%E9%99%AA%E4%BC%B4%E6%98%AF%E6%9D%8E%E7%8E%B0%E6%9C%80%E9%95%BF%E6%83%85%E7%9A%84%E5%91%8A%E7%99%BD",
|
||||
"event_time": "2025/08/31 22:58:48",
|
||||
"event_time_at": 1756652328,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "张予曦妈妈不介意女儿谈姐弟恋",
|
||||
"hot_value": 7650811,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/oEB5A1NsLFeadA9HQoED9TfmQ8jHgUPxACzjw9~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=KF3nedfpt5iPcUZ%2Fv9SyYI0ZSWg%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%BC%A0%E4%BA%88%E6%9B%A6%E5%A6%88%E5%A6%88%E4%B8%8D%E4%BB%8B%E6%84%8F%E5%A5%B3%E5%84%BF%E8%B0%88%E5%A7%90%E5%BC%9F%E6%81%8B",
|
||||
"event_time": "2025/08/31 17:44:23",
|
||||
"event_time_at": 1756633463,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "边伯贤也来刀马刀马了",
|
||||
"hot_value": 7650164,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/ogfBltLZDIGmRGCAseKAeaIBRnQH79gBGOb4kC~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=nLrGTCoyqEGU882IYRhJOStMdpg%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%BE%B9%E4%BC%AF%E8%B4%A4%E4%B9%9F%E6%9D%A5%E5%88%80%E9%A9%AC%E5%88%80%E9%A9%AC%E4%BA%86",
|
||||
"event_time": "2025/08/31 13:44:44",
|
||||
"event_time_at": 1756619084,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "金靖演绎甜美女孩",
|
||||
"hot_value": 7649913,
|
||||
"cover": "https://p11-sign.douyinpic.com/tos-cn-p-0015/o0cBcsRQjiGGFCOOArGzzeIfLBA7FEYojeKwGQ~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=9BY7gGsW39uBcs06t%2BrXTCQ5J5k%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E9%87%91%E9%9D%96%E6%BC%94%E7%BB%8E%E7%94%9C%E7%BE%8E%E5%A5%B3%E5%AD%A9",
|
||||
"event_time": "2025/08/31 19:00:32",
|
||||
"event_time_at": 1756638032,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "一口气看日本如何造出反华体制",
|
||||
"hot_value": 7648850,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oUoyIxcAADE55goYWdhBfFF4HACpRIpy9Xse6K~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=xjjRJGl0AzxkaEnOiVrzRx1hoZ8%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E4%B8%80%E5%8F%A3%E6%B0%94%E7%9C%8B%E6%97%A5%E6%9C%AC%E5%A6%82%E4%BD%95%E9%80%A0%E5%87%BA%E5%8F%8D%E5%8D%8E%E4%BD%93%E5%88%B6",
|
||||
"event_time": "2025/08/30 21:50:31",
|
||||
"event_time_at": 1756561831,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "张艺兴真空西装跳狼与美女",
|
||||
"hot_value": 7646868,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015c000-ce/o4YKfLEIEEwo5stfDSFe0s2TFRjxXAAZDCE9Bl~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=gqBuLvszd8eew81uXP8rf7idtog%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%BC%A0%E8%89%BA%E5%85%B4%E7%9C%9F%E7%A9%BA%E8%A5%BF%E8%A3%85%E8%B7%B3%E7%8B%BC%E4%B8%8E%E7%BE%8E%E5%A5%B3",
|
||||
"event_time": "2025/08/31 22:12:44",
|
||||
"event_time_at": 1756649564,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "罗永浩对谈脱口秀新王何广智",
|
||||
"hot_value": 7644688,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/okQ0qo1AKBQP3g981qQA1FEAzGDYjtFFdfYVeD~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=Mg24ss6tlv%2FY%2B%2B9PS5UdijEG1Dw%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E7%BD%97%E6%B0%B8%E6%B5%A9%E5%AF%B9%E8%B0%88%E8%84%B1%E5%8F%A3%E7%A7%80%E6%96%B0%E7%8E%8B%E4%BD%95%E5%B9%BF%E6%99%BA",
|
||||
"event_time": "2025/09/01 13:56:14",
|
||||
"event_time_at": 1756706174,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "周深的刀马刀马好可爱",
|
||||
"hot_value": 7644052,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/osAPL0laAbWHtEmVBUIKMQDypItTiF3HI0PQi~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=qcK3K8uko38iBuRXDg4uCTaqEPc%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%91%A8%E6%B7%B1%E7%9A%84%E5%88%80%E9%A9%AC%E5%88%80%E9%A9%AC%E5%A5%BD%E5%8F%AF%E7%88%B1",
|
||||
"event_time": "2025/08/31 18:31:56",
|
||||
"event_time_at": 1756636316,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "杜克一哥的对话太好哭了",
|
||||
"hot_value": 7639907,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oofoeQ9VAPDsphKEAiFQbQwCAEwoQgBpLtBC0A~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=wulyNlwPrSoIJu1JKBdKpE142mA%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E6%9D%9C%E5%85%8B%E4%B8%80%E5%93%A5%E7%9A%84%E5%AF%B9%E8%AF%9D%E5%A4%AA%E5%A5%BD%E5%93%AD%E4%BA%86",
|
||||
"event_time": "2025/08/30 21:17:58",
|
||||
"event_time_at": 1756559878,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "外媒全景记录普京抵华现场",
|
||||
"hot_value": 7637541,
|
||||
"cover": "https://p3-sign.douyinpic.com/tos-cn-p-0015/oIGC9LxDIQ6QAI1fG1eEipfA2eZjiGInCHFFEJ~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=HiKj%2FiLGiaN2D5GdS5OlAISbGHo%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E5%A4%96%E5%AA%92%E5%85%A8%E6%99%AF%E8%AE%B0%E5%BD%95%E6%99%AE%E4%BA%AC%E6%8A%B5%E5%8D%8E%E7%8E%B0%E5%9C%BA",
|
||||
"event_time": "2025/09/01 11:59:34",
|
||||
"event_time_at": 1756699174,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
},
|
||||
{
|
||||
"title": "赵丽颖工作室明兰代班营业",
|
||||
"hot_value": 7635755,
|
||||
"cover": "https://p26-sign.douyinpic.com/tos-cn-p-0015c000-ce/oIhHELPBeI6Ieb0A9OpCuWXh0CAAgiuniEweIw~noop.jpeg?lk3s=bfd515bb&x-expires=1756735200&x-signature=xmQOeLdWN4FaeZjFBqtMQuctYv8%3D&from=3218412987",
|
||||
"link": "https://www.douyin.com/search/%E8%B5%B5%E4%B8%BD%E9%A2%96%E5%B7%A5%E4%BD%9C%E5%AE%A4%E6%98%8E%E5%85%B0%E4%BB%A3%E7%8F%AD%E8%90%A5%E4%B8%9A",
|
||||
"event_time": "2025/08/31 20:52:34",
|
||||
"event_time_at": 1756644754,
|
||||
"active_time": "2025-09-01 16:46:46",
|
||||
"active_time_at": 1756745206000
|
||||
}
|
||||
]
|
||||
}
|
||||
582
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
Normal file
582
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
Normal file
@@ -0,0 +1,582 @@
|
||||
/* 现代化猫眼票房排行榜样式 */
|
||||
|
||||
/* 全局重置和基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--primary-color: #667eea;
|
||||
--primary-light: #764ba2;
|
||||
--secondary-color: #f093fb;
|
||||
--accent-color: #4facfe;
|
||||
|
||||
/* 中性色 */
|
||||
--text-primary: #2d3748;
|
||||
--text-secondary: #4a5568;
|
||||
--text-muted: #718096;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f7fafc;
|
||||
--bg-tertiary: #edf2f7;
|
||||
|
||||
/* 状态色 */
|
||||
--success-color: #48bb78;
|
||||
--warning-color: #ed8936;
|
||||
--error-color: #f56565;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
|
||||
/* 间距 */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 动态背景效果 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
|
||||
z-index: -1;
|
||||
animation: backgroundShift 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes backgroundShift {
|
||||
0%, 100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(180deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: var(--space-lg) auto;
|
||||
padding: var(--space-xl);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
position: relative;
|
||||
animation: slideUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
padding-bottom: var(--space-lg);
|
||||
border-bottom: 2px solid var(--bg-tertiary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header h1 .icon {
|
||||
font-size: 1.2em;
|
||||
animation: bounce 2s infinite;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
.header h1 .title-text {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header h1 .update-badge {
|
||||
font-size: 0.4em;
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
|
||||
color: white;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--radius-xl);
|
||||
font-weight: 600;
|
||||
box-shadow: var(--shadow-md);
|
||||
animation: pulse 3s infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.header-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: var(--space-2xl);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto var(--space-md);
|
||||
border: 3px solid var(--bg-tertiary);
|
||||
border-top: 3px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
animation: fadeIn 0.6s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 电影列表 */
|
||||
.movie-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.movie-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.02) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.movie-item:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.movie-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 特殊排名样式 */
|
||||
.movie-item.top-1 {
|
||||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, var(--bg-primary) 100%);
|
||||
border-color: rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.movie-item.top-2 {
|
||||
background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, var(--bg-primary) 100%);
|
||||
border-color: rgba(192, 192, 192, 0.3);
|
||||
}
|
||||
|
||||
.movie-item.top-3 {
|
||||
background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, var(--bg-primary) 100%);
|
||||
border-color: rgba(205, 127, 50, 0.3);
|
||||
}
|
||||
|
||||
/* 排名徽章 */
|
||||
.movie-rank {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.movie-item:hover .movie-rank {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.movie-rank.gold {
|
||||
background: linear-gradient(135deg, #ffd700, #ffb700);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.movie-rank.silver {
|
||||
background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4);
|
||||
}
|
||||
|
||||
.movie-rank.bronze {
|
||||
background: linear-gradient(135deg, #cd7f32, #b06728);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4);
|
||||
}
|
||||
|
||||
.movie-rank.regular {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* 电影内容 */
|
||||
.movie-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.movie-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.movie-year {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.movie-boxoffice {
|
||||
font-weight: 700;
|
||||
color: var(--warning-color);
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 更新时间 */
|
||||
.update-time {
|
||||
text-align: center;
|
||||
margin-top: var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: var(--space-2xl);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.error h3 {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.error p {
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: var(--space-lg);
|
||||
padding-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.8rem;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.header h1 .update-badge {
|
||||
font-size: 0.35em;
|
||||
padding: 2px var(--space-sm);
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
padding: var(--space-md);
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.movie-rank {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.movie-meta {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.movie-year {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.movie-boxoffice {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: var(--space-sm);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.6rem;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.movie-list {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.movie-rank {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.movie-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.movie-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
body::before {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-primary: #f7fafc;
|
||||
--text-secondary: #e2e8f0;
|
||||
--text-muted: #a0aec0;
|
||||
--bg-primary: #2d3748;
|
||||
--bg-secondary: #4a5568;
|
||||
--bg-tertiary: #718096;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
|
||||
}
|
||||
|
||||
.container {
|
||||
background: rgba(45, 55, 72, 0.95);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
background: var(--bg-primary);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.movie-item:hover {
|
||||
border-color: rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
body::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header h1 .update-badge {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
41
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/index.html
Normal file
41
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/index.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="猫眼票房排行榜 - 展示全球电影总票房排行榜">
|
||||
<meta name="keywords" content="猫眼, 票房, 排行榜, 电影票房, 全球票房">
|
||||
<title>猫眼票房排行榜 | 全球电影总票房</title>
|
||||
|
||||
<!-- 引入CSS样式 -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<!-- 网站图标（SVG内联为data URL，避免外部依赖） -->
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 页面头部 -->
|
||||
<header class="header">
|
||||
<h1>
|
||||
<span class="icon">🎬</span>
|
||||
<span class="title-text">猫眼票房排行榜</span>
|
||||
<span class="update-badge">实时更新</span>
|
||||
</h1>
|
||||
<p class="header-desc">全球电影总票房榜单 | 权威数据 | 实时更新</p>
|
||||
</header>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div id="loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>正在加载票房数据...</p>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<main id="ranking-content" class="content" style="display: none;"></main>
|
||||
</div>
|
||||
|
||||
<!-- 引入JavaScript -->
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
266
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
Normal file
266
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
Normal file
@@ -0,0 +1,266 @@
|
||||
// 猫眼票房排行榜 - JavaScript 实现
|
||||
|
||||
const API = {
|
||||
endpoints: [],
|
||||
currentIndex: 0,
|
||||
params: {
|
||||
encoding: 'json'
|
||||
},
|
||||
localFallback: '返回接口.json',
|
||||
// 初始化API接口列表
|
||||
async init() {
|
||||
try {
|
||||
const res = await fetch('./接口集合.json');
|
||||
const endpoints = await res.json();
|
||||
this.endpoints = endpoints.map(endpoint => `${endpoint}/v2/maoyan`);
|
||||
} catch (e) {
|
||||
// 如果无法加载接口集合，使用默认接口
|
||||
this.endpoints = ['https://60s.api.shumengya.top/v2/maoyan'];
|
||||
}
|
||||
},
|
||||
// 获取当前接口URL
|
||||
getCurrentUrl() {
|
||||
if (this.endpoints.length === 0) return null;
|
||||
const url = new URL(this.endpoints[this.currentIndex]);
|
||||
Object.entries(this.params).forEach(([k, v]) => url.searchParams.append(k, v));
|
||||
return url.toString();
|
||||
},
|
||||
// 切换到下一个接口
|
||||
switchToNext() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.endpoints.length;
|
||||
return this.currentIndex < this.endpoints.length;
|
||||
},
|
||||
// 重置到第一个接口
|
||||
reset() {
|
||||
this.currentIndex = 0;
|
||||
}
|
||||
};
|
||||
|
||||
let elements = {};
|
||||
|
||||
// 初始化
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
initElements();
|
||||
loadMaoyanList();
|
||||
});
|
||||
|
||||
function initElements() {
|
||||
elements = {
|
||||
container: document.getElementById('ranking-content'),
|
||||
loading: document.getElementById('loading'),
|
||||
updateTime: document.getElementById('api-update-time'),
|
||||
statsTotal: document.getElementById('stats-total'),
|
||||
statsTop10: document.getElementById('stats-top10')
|
||||
};
|
||||
}
|
||||
|
||||
async function loadMaoyanList() {
|
||||
try {
|
||||
showLoading(true);
|
||||
|
||||
// 优先从线上API请求
|
||||
let data = await fetchFromAPI();
|
||||
|
||||
// 如果线上失败，尝试从本地返回接口.json加载
|
||||
if (!data) {
|
||||
data = await fetchFromLocal();
|
||||
}
|
||||
|
||||
if (!data || data.code !== 200 || !data.data) {
|
||||
throw new Error(data && data.message ? data.message : '未能获取到有效数据');
|
||||
}
|
||||
|
||||
renderRanking(data.data);
|
||||
} catch (error) {
|
||||
console.error('加载排行榜失败:', error);
|
||||
showError(error.message || '加载失败，请稍后重试');
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFromAPI() {
|
||||
// 初始化API接口列表
|
||||
await API.init();
|
||||
|
||||
// 重置API索引到第一个接口
|
||||
API.reset();
|
||||
|
||||
// 尝试所有API接口
|
||||
for (let i = 0; i < API.endpoints.length; i++) {
|
||||
try {
|
||||
const url = API.getCurrentUrl();
|
||||
console.log(`尝试接口 ${i + 1}/${API.endpoints.length}: ${url}`);
|
||||
|
||||
const resp = await fetch(url, {
|
||||
cache: 'no-store',
|
||||
timeout: 10000 // 10秒超时
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data && data.code === 200) {
|
||||
console.log(`接口 ${i + 1} 请求成功`);
|
||||
return data;
|
||||
}
|
||||
|
||||
throw new Error(data && data.message ? data.message : '接口返回异常');
|
||||
|
||||
} catch (e) {
|
||||
console.warn(`接口 ${i + 1} 失败:`, e.message);
|
||||
|
||||
// 如果不是最后一个接口，切换到下一个
|
||||
if (i < API.endpoints.length - 1) {
|
||||
API.switchToNext();
|
||||
continue;
|
||||
}
|
||||
|
||||
// 所有接口都失败了
|
||||
console.warn('所有远程接口都失败，尝试本地数据');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFromLocal() {
|
||||
try {
|
||||
const resp = await fetch(API.localFallback + `?t=${Date.now()}`);
|
||||
if (!resp.ok) throw new Error(`本地文件HTTP ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
return data;
|
||||
} catch (e) {
|
||||
console.error('读取本地返回接口.json失败:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function renderRanking(payload) {
|
||||
const { list = [], tip = '', update_time = '', update_time_at } = payload || {};
|
||||
|
||||
// 更新时间
|
||||
if (elements.updateTime) {
|
||||
elements.updateTime.textContent = update_time ? `更新时间：${update_time}` : '';
|
||||
}
|
||||
|
||||
// 统计信息
|
||||
if (elements.statsTotal) {
|
||||
elements.statsTotal.textContent = list.length;
|
||||
}
|
||||
if (elements.statsTop10) {
|
||||
elements.statsTop10.textContent = Math.min(10, list.length);
|
||||
}
|
||||
|
||||
// 渲染列表
|
||||
const html = `
|
||||
<section class="ranking-container">
|
||||
<h2 class="ranking-title">全球电影总票房排行榜</h2>
|
||||
<div class="movie-list">
|
||||
${list.map(item => renderMovieItem(item)).join('')}
|
||||
</div>
|
||||
</section>
|
||||
${tip ? `<div class="update-time">${escapeHtml(tip)}</div>` : ''}
|
||||
${update_time ? `<div class="update-time" id="api-update-time">更新时间：${escapeHtml(update_time)}</div>` : ''}
|
||||
`;
|
||||
|
||||
elements.container.innerHTML = html;
|
||||
elements.container.classList.add('fade-in');
|
||||
}
|
||||
|
||||
// 格式化票房数据，将数字转换为更易读的形式
|
||||
function formatBoxOffice(value) {
|
||||
if (!value) return '未知';
|
||||
|
||||
// 将字符串转换为数字
|
||||
const num = typeof value === 'string' ? parseFloat(value.replace(/[^0-9.]/g, '')) : value;
|
||||
|
||||
if (isNaN(num)) return value;
|
||||
|
||||
if (num >= 100000000) {
|
||||
return (num / 100000000).toFixed(2) + ' 亿';
|
||||
} else if (num >= 10000) {
|
||||
return (num / 10000).toFixed(2) + ' 万';
|
||||
} else {
|
||||
return num.toLocaleString();
|
||||
}
|
||||
}
|
||||
|
||||
function renderMovieItem(item) {
|
||||
const rank = item.rank;
|
||||
const cls = rank === 1 ? 'top-1' : rank === 2 ? 'top-2' : rank === 3 ? 'top-3' : '';
|
||||
const badgeCls = rank === 1 ? 'gold' : rank === 2 ? 'silver' : rank === 3 ? 'bronze' : 'regular';
|
||||
|
||||
// 格式化票房数据
|
||||
const boxOffice = formatBoxOffice(item.boxoffice || item.box_office);
|
||||
|
||||
// 美化排名显示
|
||||
let rankDisplay;
|
||||
if (rank === 1) {
|
||||
rankDisplay = '🏆';
|
||||
} else if (rank === 2) {
|
||||
rankDisplay = '🥈';
|
||||
} else if (rank === 3) {
|
||||
rankDisplay = '🥉';
|
||||
} else {
|
||||
rankDisplay = rank;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="movie-item ${cls}">
|
||||
<div class="movie-rank ${badgeCls}">${rankDisplay}</div>
|
||||
<div class="movie-content">
|
||||
<div class="movie-title">${escapeHtml(item.movie_name)}</div>
|
||||
<div class="movie-meta">
|
||||
<span class="movie-year">${escapeHtml(item.release_year || '未知')}</span>
|
||||
<span class="movie-boxoffice">¥${boxOffice}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
||||
function formatCurrencyDesc(desc, num) {
|
||||
if (desc && typeof desc === 'string' && desc.trim()) return desc;
|
||||
if (typeof num === 'number') {
|
||||
// 人民币按亿元显示
|
||||
if (num >= 1e8) return (num / 1e8).toFixed(2) + '亿元';
|
||||
if (num >= 1e4) return (num / 1e4).toFixed(2) + '万元';
|
||||
return num.toLocaleString('zh-CN') + '元';
|
||||
}
|
||||
return '—';
|
||||
}
|
||||
|
||||
function showLoading(show) {
|
||||
if (elements.loading) elements.loading.style.display = show ? 'block' : 'none';
|
||||
if (elements.container) elements.container.style.display = show ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
if (!elements.container) return;
|
||||
elements.container.innerHTML = `
|
||||
<div class="error">
|
||||
<h3>⚠️ 加载失败</h3>
|
||||
<p>${escapeHtml(message)}</p>
|
||||
<p>请稍后重试</p>
|
||||
</div>
|
||||
`;
|
||||
elements.container.style.display = 'block';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (text == null) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = String(text);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// 键盘刷新快捷键 Ctrl/Cmd + R 刷新数据区域（不刷新整页）
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'r') {
|
||||
e.preventDefault();
|
||||
loadMaoyanList();
|
||||
}
|
||||
});
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
171
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/返回接口.json
Normal file
171
InfoGenie-frontend/public/60sapi/热搜榜单/猫眼票房排行榜/返回接口.json
Normal file
@@ -0,0 +1,171 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"rank": 1,
|
||||
"maoyan_id": 243,
|
||||
"movie_name": "阿凡达",
|
||||
"release_year": "2009",
|
||||
"box_office": 21200972239,
|
||||
"box_office_desc": "212.01亿元"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"maoyan_id": 248172,
|
||||
"movie_name": "复仇者联盟 4：终局之战",
|
||||
"release_year": "2019",
|
||||
"box_office": 20299852689,
|
||||
"box_office_desc": "203亿元"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"maoyan_id": 78461,
|
||||
"movie_name": "阿凡达：水之道",
|
||||
"release_year": "2022",
|
||||
"box_office": 16825062887,
|
||||
"box_office_desc": "168.25亿元"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"maoyan_id": 267,
|
||||
"movie_name": "泰坦尼克号",
|
||||
"release_year": "1997",
|
||||
"box_office": 16423064756,
|
||||
"box_office_desc": "164.23亿元"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"maoyan_id": 1294273,
|
||||
"movie_name": "哪吒之魔童闹海",
|
||||
"release_year": "2025",
|
||||
"box_office": 15908714214,
|
||||
"box_office_desc": "159.09亿元"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"maoyan_id": 78536,
|
||||
"movie_name": "星球大战：原力觉醒",
|
||||
"release_year": "2015",
|
||||
"box_office": 15019898914,
|
||||
"box_office_desc": "150.2亿元"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"maoyan_id": 248170,
|
||||
"movie_name": "复仇者联盟 3：无限战争",
|
||||
"release_year": "2018",
|
||||
"box_office": 14882882413,
|
||||
"box_office_desc": "148.83亿元"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"maoyan_id": 1254435,
|
||||
"movie_name": "蜘蛛侠：英雄无归",
|
||||
"release_year": "2021",
|
||||
"box_office": 14160042137,
|
||||
"box_office_desc": "141.6亿元"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"maoyan_id": 1479534,
|
||||
"movie_name": "头脑特工队 2",
|
||||
"release_year": "2024",
|
||||
"box_office": 12319141075,
|
||||
"box_office_desc": "123.19亿元"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"maoyan_id": 78602,
|
||||
"movie_name": "侏罗纪世界",
|
||||
"release_year": "2015",
|
||||
"box_office": 12120986621,
|
||||
"box_office_desc": "121.21亿元"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"maoyan_id": 1189879,
|
||||
"movie_name": "狮子王",
|
||||
"release_year": "2019",
|
||||
"box_office": 12051977766,
|
||||
"box_office_desc": "120.52亿元"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"maoyan_id": 262,
|
||||
"movie_name": "复仇者联盟",
|
||||
"release_year": "2012",
|
||||
"box_office": 11026033139,
|
||||
"box_office_desc": "110.26亿元"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"maoyan_id": 78405,
|
||||
"movie_name": "速度与激情 7",
|
||||
"release_year": "2015",
|
||||
"box_office": 10988354292,
|
||||
"box_office_desc": "109.88亿元"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"maoyan_id": 341152,
|
||||
"movie_name": "壮志凌云 2：独行侠",
|
||||
"release_year": "2022",
|
||||
"box_office": 10845892091,
|
||||
"box_office_desc": "108.46亿元"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"maoyan_id": 247949,
|
||||
"movie_name": "冰雪奇缘 2",
|
||||
"release_year": "2019",
|
||||
"box_office": 10541240357,
|
||||
"box_office_desc": "105.41亿元"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"maoyan_id": 344942,
|
||||
"movie_name": "芭比",
|
||||
"release_year": "2023",
|
||||
"box_office": 10493054406,
|
||||
"box_office_desc": "104.93亿元"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"maoyan_id": 78429,
|
||||
"movie_name": "复仇者联盟 2：奥创纪元",
|
||||
"release_year": "2015",
|
||||
"box_office": 10188347873,
|
||||
"box_office_desc": "101.88亿元"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"maoyan_id": 1250896,
|
||||
"movie_name": "超级马里奥兄弟大电影",
|
||||
"release_year": "2023",
|
||||
"box_office": 9868050757,
|
||||
"box_office_desc": "98.68亿元"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"maoyan_id": 341138,
|
||||
"movie_name": "黑豹",
|
||||
"release_year": "2018",
|
||||
"box_office": 9788853998,
|
||||
"box_office_desc": "97.89亿元"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"maoyan_id": 916,
|
||||
"movie_name": "哈利・波特与死亡圣器（下）",
|
||||
"release_year": "2011",
|
||||
"box_office": 9735002643,
|
||||
"box_office_desc": "97.35亿元"
|
||||
}
|
||||
],
|
||||
"tip": "注：内地票房数据实时更新，包括点映及预售票房。港澳台及海外票房为统计数据，每小时更新。汇率采用 2025年1月31日市场汇率，1美元≈7.2514人民币",
|
||||
"update_time": "2025/08/19 14:41:34",
|
||||
"update_time_at": 1755585694385
|
||||
}
|
||||
}
|
||||
196
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/background.css
Normal file
196
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/background.css
Normal file
@@ -0,0 +1,196 @@
|
||||
/* 页面主背景 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #f8fffe 0%, #e8f5e8 50%, #d4f1d4 100%);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(39, 174, 96, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(168, 230, 207, 0.08) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 容器背景 */
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(39, 174, 96, 0.1);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 头部背景 */
|
||||
.header {
|
||||
background: linear-gradient(135deg, rgba(39, 174, 96, 0.05) 0%, rgba(168, 230, 207, 0.05) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(39, 174, 96, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(circle at 70% 80%, rgba(46, 204, 113, 0.08) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 热搜项目背景 */
|
||||
.hot-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hot-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(39, 174, 96, 0.02) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 前三名特殊背景效果 */
|
||||
.hot-item:nth-child(1) {
|
||||
background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
|
||||
}
|
||||
|
||||
.hot-item:nth-child(2) {
|
||||
background: linear-gradient(135deg, rgba(243, 156, 18, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
|
||||
}
|
||||
|
||||
.hot-item:nth-child(3) {
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
|
||||
}
|
||||
|
||||
/* 加载状态背景 */
|
||||
.loading {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* 错误信息背景 */
|
||||
.error-message {
|
||||
background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(231, 76, 60, 0.1);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* 底部背景 */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, rgba(39, 174, 96, 0.03) 0%, rgba(168, 230, 207, 0.03) 100%);
|
||||
border-radius: 0 0 16px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(39, 174, 96, 0.3) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/* 响应式背景调整 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(39, 174, 96, 0.03) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.03) 0%, transparent 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 85%, rgba(39, 174, 96, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(circle at 85% 15%, rgba(46, 204, 113, 0.06) 0%, transparent 60%),
|
||||
radial-gradient(circle at 50% 50%, rgba(168, 230, 207, 0.04) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes backgroundShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬浮时的背景变化 */
|
||||
.hot-item:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.hot-item:hover::after {
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(39, 174, 96, 0.05) 100%);
|
||||
}
|
||||
|
||||
/* 排名背景渐变 */
|
||||
.rank {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
40
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/index.html
Normal file
40
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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="styles.css">
|
||||
<link rel="stylesheet" href="background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="title">百度实时热搜榜单</h1>
|
||||
<p class="subtitle">实时热门搜索，掌握网络脉搏</p>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载热搜数据...</p>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="error" style="display: none;">
|
||||
<p>数据加载失败，请稍后重试</p>
|
||||
<button class="retry-btn" onclick="loadData()">重新加载</button>
|
||||
</div>
|
||||
|
||||
<div class="hot-list" id="hotList" style="display: none;">
|
||||
<!-- 热搜列表将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="update-time" id="updateTime"></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
196
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/script.js
Normal file
196
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/script.js
Normal file
@@ -0,0 +1,196 @@
|
||||
// DOM元素获取
|
||||
const loadingElement = document.getElementById('loading');
|
||||
const errorElement = document.getElementById('error');
|
||||
const hotListElement = document.getElementById('hotList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadData();
|
||||
|
||||
// 每5分钟自动刷新数据
|
||||
setInterval(loadData, 5 * 60 * 1000);
|
||||
|
||||
// 监听页面可见性变化，页面重新可见时刷新数据
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (!document.hidden) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听网络状态变化
|
||||
window.addEventListener('online', loadData);
|
||||
});
|
||||
|
||||
// 加载数据函数
|
||||
async function loadData() {
|
||||
try {
|
||||
showLoading();
|
||||
|
||||
// 调用百度实时热搜API
|
||||
const response = await fetch('https://60s.api.shumengya.top/v2/baidu/realtime');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
renderHotList(data.data);
|
||||
updateTime();
|
||||
hideLoading();
|
||||
} else {
|
||||
throw new Error(data.message || '数据格式错误');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染热搜列表
|
||||
function renderHotList(hotData) {
|
||||
if (!hotData || !Array.isArray(hotData)) {
|
||||
showError();
|
||||
return;
|
||||
}
|
||||
|
||||
const listHTML = hotData.map((item, index) => {
|
||||
const rank = index + 1;
|
||||
const rankClass = rank <= 3 ? (rank === 1 ? 'top1' : 'top3') : '';
|
||||
|
||||
// 处理封面图片
|
||||
const coverImg = item.pic ?
|
||||
`<img src="${item.pic}" alt="${item.title}" class="item-cover" onerror="this.style.display='none'">` :
|
||||
'';
|
||||
|
||||
// 处理描述信息
|
||||
const description = item.desc || '';
|
||||
|
||||
// 处理热度值
|
||||
const hotValue = item.hot || '';
|
||||
|
||||
// 处理链接
|
||||
const linkUrl = item.url || '#';
|
||||
|
||||
return `
|
||||
<div class="hot-item" onclick="openLink('${linkUrl}')">
|
||||
<div class="rank ${rankClass}">${rank}</div>
|
||||
${coverImg}
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<h3 class="item-title">${item.title || '无标题'}</h3>
|
||||
</div>
|
||||
${description ? `<p class="item-desc">${description}</p>` : ''}
|
||||
<div class="item-footer">
|
||||
${hotValue ? `<span class="item-score">${formatHotValue(hotValue)}</span>` : ''}
|
||||
<div class="item-type">
|
||||
<span class="type-text type-hot">热搜</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
hotListElement.innerHTML = listHTML;
|
||||
hotListElement.style.display = 'block';
|
||||
}
|
||||
|
||||
// 格式化热度值
|
||||
function formatHotValue(value) {
|
||||
if (!value) return '';
|
||||
|
||||
// 如果是数字，进行格式化
|
||||
if (typeof value === 'number') {
|
||||
if (value >= 10000) {
|
||||
return (value / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return value.toString();
|
||||
}
|
||||
|
||||
// 如果是字符串，直接返回
|
||||
return value.toString();
|
||||
}
|
||||
|
||||
// 打开链接
|
||||
function openLink(url) {
|
||||
if (url && url !== '#') {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingElement.style.display = 'block';
|
||||
errorElement.style.display = 'none';
|
||||
hotListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
loadingElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError() {
|
||||
loadingElement.style.display = 'none';
|
||||
errorElement.style.display = 'block';
|
||||
hotListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 更新时间显示
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
updateTimeElement.textContent = `最后更新时间: ${timeString}`;
|
||||
}
|
||||
|
||||
// 重试加载数据
|
||||
function retryLoad() {
|
||||
loadData();
|
||||
}
|
||||
|
||||
// 页面滚动优化
|
||||
let ticking = false;
|
||||
|
||||
function updateScrollPosition() {
|
||||
// 可以在这里添加滚动相关的优化逻辑
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateScrollPosition);
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 错误处理和日志记录
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.error);
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', function(e) {
|
||||
console.error('未处理的Promise拒绝:', e.reason);
|
||||
});
|
||||
|
||||
// 性能监控
|
||||
if ('performance' in window) {
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(function() {
|
||||
const perfData = performance.timing;
|
||||
const loadTime = perfData.loadEventEnd - perfData.navigationStart;
|
||||
console.log('页面加载时间:', loadTime + 'ms');
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
371
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/styles.css
Normal file
371
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/styles.css
Normal file
@@ -0,0 +1,371 @@
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2c3e50;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 2px solid #a8e6cf;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #27ae60;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(39, 174, 96, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #a8e6cf;
|
||||
border-top: 3px solid #27ae60;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 错误信息 */
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
background: #219a52;
|
||||
}
|
||||
|
||||
/* 热搜列表 */
|
||||
.hot-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e8f5e8;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(39, 174, 96, 0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(39, 174, 96, 0.15);
|
||||
border-color: #a8e6cf;
|
||||
}
|
||||
|
||||
.hot-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #27ae60, #a8e6cf);
|
||||
}
|
||||
|
||||
/* 排名样式 */
|
||||
.rank {
|
||||
background: linear-gradient(135deg, #27ae60, #2ecc71);
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.rank.top3 {
|
||||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||||
}
|
||||
|
||||
.rank.top1 {
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
}
|
||||
|
||||
/* 封面图片 */
|
||||
.item-cover {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #e8f5e8;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
transition: color 0.3s ease;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-title:hover {
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 13px;
|
||||
color: #7f8c8d;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-score {
|
||||
font-size: 14px;
|
||||
color: #27ae60;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-hot {
|
||||
background: #ffe6e6;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.type-new {
|
||||
background: #e6f3ff;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.type-default {
|
||||
background: #f8f9fa;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid #e8f5e8;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
/* 手机端优化 (默认) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.rank {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 电脑端适配 */
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
width: 100px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1400px) {
|
||||
.hot-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
606
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/返回接口.json
Normal file
606
InfoGenie-frontend/public/60sapi/热搜榜单/百度实时热搜/返回接口.json
Normal file
@@ -0,0 +1,606 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"rank": 1,
|
||||
"title": "102岁老兵ICU看阅兵后安详离世",
|
||||
"desc": "",
|
||||
"score": "7807952",
|
||||
"score_desc": "780.8w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/e190dea8327f8295c8a5883878fe6d14",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=102%E5%B2%81%E8%80%81%E5%85%B5ICU%E7%9C%8B%E9%98%85%E5%85%B5%E5%90%8E%E5%AE%89%E8%AF%A6%E7%A6%BB%E4%B8%96&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"title": "看阅兵明白了耿爽联合国发言含金量",
|
||||
"desc": "",
|
||||
"score": "7714187",
|
||||
"score_desc": "771.42w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/83340b647c7a2f569c0a03482d5b40f1",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%9C%8B%E9%98%85%E5%85%B5%E6%98%8E%E7%99%BD%E4%BA%86%E8%80%BF%E7%88%BD%E8%81%94%E5%90%88%E5%9B%BD%E5%8F%91%E8%A8%80%E5%90%AB%E9%87%91%E9%87%8F&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"title": "80秒带你回顾阅兵“高燃瞬间”",
|
||||
"desc": "",
|
||||
"score": "7616477",
|
||||
"score_desc": "761.65w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/a64eb808789c7bae99eb3e0f98a20621",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=80%E7%A7%92%E5%B8%A6%E4%BD%A0%E5%9B%9E%E9%A1%BE%E9%98%85%E5%85%B5%E2%80%9C%E9%AB%98%E7%87%83%E7%9E%AC%E9%97%B4%E2%80%9D&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"title": "新华社认证的帅兵哥已婚",
|
||||
"desc": "",
|
||||
"score": "7522472",
|
||||
"score_desc": "752.25w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/493dd01d2abf915809eb1387e5b8a026",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%96%B0%E5%8D%8E%E7%A4%BE%E8%AE%A4%E8%AF%81%E7%9A%84%E5%B8%85%E5%85%B5%E5%93%A5%E5%B7%B2%E5%A9%9A&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"title": "普京记者会身后的大红灯笼亮了",
|
||||
"desc": "",
|
||||
"score": "7426902",
|
||||
"score_desc": "742.69w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/1e895a56da47054e111ce225b1efd58f",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%99%AE%E4%BA%AC%E8%AE%B0%E8%80%85%E4%BC%9A%E8%BA%AB%E5%90%8E%E7%9A%84%E5%A4%A7%E7%BA%A2%E7%81%AF%E7%AC%BC%E4%BA%AE%E4%BA%86&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"title": "中国网警：烽火烬处 赓续前行",
|
||||
"desc": "",
|
||||
"score": "7332067",
|
||||
"score_desc": "733.21w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/0d872743f2cfabc8fd9ee1da970a5fed",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E7%BD%91%E8%AD%A6%EF%BC%9A%E7%83%BD%E7%81%AB%E7%83%AC%E5%A4%84+%E8%B5%93%E7%BB%AD%E5%89%8D%E8%A1%8C&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"title": "“呼叫81192！” 这一刻含泪量太高",
|
||||
"desc": "",
|
||||
"score": "7237296",
|
||||
"score_desc": "723.73w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/552c202f87db2219d6e150a39976bad7",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E2%80%9C%E5%91%BC%E5%8F%AB81192%EF%BC%81%E2%80%9D+%E8%BF%99%E4%B8%80%E5%88%BB%E5%90%AB%E6%B3%AA%E9%87%8F%E5%A4%AA%E9%AB%98&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"title": "天津和平鸽归巢主人激动吹哨迎接",
|
||||
"desc": "",
|
||||
"score": "7139286",
|
||||
"score_desc": "713.93w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/1c5dfd83c55b6482d1307f310d5642a7",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%A4%A9%E6%B4%A5%E5%92%8C%E5%B9%B3%E9%B8%BD%E5%BD%92%E5%B7%A2%E4%B8%BB%E4%BA%BA%E6%BF%80%E5%8A%A8%E5%90%B9%E5%93%A8%E8%BF%8E%E6%8E%A5&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"title": "中国排面给全世界亿点点震撼",
|
||||
"desc": "",
|
||||
"score": "7042854",
|
||||
"score_desc": "704.29w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/986b69bb82a32bbd72f4c90281ece503",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E6%8E%92%E9%9D%A2%E7%BB%99%E5%85%A8%E4%B8%96%E7%95%8C%E4%BA%BF%E7%82%B9%E7%82%B9%E9%9C%87%E6%92%BC&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"title": "8万只气球缘何直径都是26厘米左右",
|
||||
"desc": "",
|
||||
"score": "6943236",
|
||||
"score_desc": "694.32w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/783293899ac972283b13501deb5772fa",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=8%E4%B8%87%E5%8F%AA%E6%B0%94%E7%90%83%E7%BC%98%E4%BD%95%E7%9B%B4%E5%BE%84%E9%83%BD%E6%98%AF26%E5%8E%98%E7%B1%B3%E5%B7%A6%E5%8F%B3&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"title": "江苏足协辟谣“苏超”要改名",
|
||||
"desc": "近日，有部分自媒体称“苏超”已改名，对此，江苏省足协回应：“苏超”没有改名，也没有想过要改名。",
|
||||
"score": "6853163",
|
||||
"score_desc": "685.32w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/fe16124a5cd018feee2e941d05850e00",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%B1%9F%E8%8B%8F%E8%B6%B3%E5%8D%8F%E8%BE%9F%E8%B0%A3%E2%80%9C%E8%8B%8F%E8%B6%85%E2%80%9D%E8%A6%81%E6%94%B9%E5%90%8D&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"title": "金正恩只回了韩议长一个字",
|
||||
"desc": "",
|
||||
"score": "6760236",
|
||||
"score_desc": "676.02w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/68824cd0db12d3d6b71f6d79dc9cd1e4",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E9%87%91%E6%AD%A3%E6%81%A9%E5%8F%AA%E5%9B%9E%E4%BA%86%E9%9F%A9%E8%AE%AE%E9%95%BF%E4%B8%80%E4%B8%AA%E5%AD%97&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"title": "特朗普称看了九三阅兵：很精彩很震撼",
|
||||
"desc": "",
|
||||
"score": "6656922",
|
||||
"score_desc": "665.69w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/bb902e423148eb1e83e78955f2eb9adb",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%89%B9%E6%9C%97%E6%99%AE%E7%A7%B0%E7%9C%8B%E4%BA%86%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%EF%BC%9A%E5%BE%88%E7%B2%BE%E5%BD%A9%E5%BE%88%E9%9C%87%E6%92%BC&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"title": "韩国高铁站直播九三阅兵",
|
||||
"desc": "",
|
||||
"score": "6566970",
|
||||
"score_desc": "656.7w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/b68cb01b4b20989cea82c78c9fe39c3b",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E9%9F%A9%E5%9B%BD%E9%AB%98%E9%93%81%E7%AB%99%E7%9B%B4%E6%92%AD%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"title": "在中国的加沙人看阅兵时落泪",
|
||||
"desc": "",
|
||||
"score": "6476621",
|
||||
"score_desc": "647.66w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/f16f082786ac14ea20dc709c527dec4b",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%9C%A8%E4%B8%AD%E5%9B%BD%E7%9A%84%E5%8A%A0%E6%B2%99%E4%BA%BA%E7%9C%8B%E9%98%85%E5%85%B5%E6%97%B6%E8%90%BD%E6%B3%AA&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"title": "专家：东风-61出现改变命名规则",
|
||||
"desc": "",
|
||||
"score": "6376137",
|
||||
"score_desc": "637.61w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/66c1c659e7b1a37732b2735253716d60",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%93%E5%AE%B6%EF%BC%9A%E4%B8%9C%E9%A3%8E-61%E5%87%BA%E7%8E%B0%E6%94%B9%E5%8F%98%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"title": "军嫂盯着徒步方队找丈夫迷糊了",
|
||||
"desc": "",
|
||||
"score": "6274961",
|
||||
"score_desc": "627.5w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/90ac62b9f3b3365dc7fed40c62259a9f",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E5%86%9B%E5%AB%82%E7%9B%AF%E7%9D%80%E5%BE%92%E6%AD%A5%E6%96%B9%E9%98%9F%E6%89%BE%E4%B8%88%E5%A4%AB%E8%BF%B7%E7%B3%8A%E4%BA%86&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"title": "普京调侃佩斯科夫：懒虫 不想工作",
|
||||
"desc": "",
|
||||
"score": "6180590",
|
||||
"score_desc": "618.06w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/8e9fae0b3a1b23049cfdb9323d6a1efe",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%99%AE%E4%BA%AC%E8%B0%83%E4%BE%83%E4%BD%A9%E6%96%AF%E7%A7%91%E5%A4%AB%EF%BC%9A%E6%87%92%E8%99%AB+%E4%B8%8D%E6%83%B3%E5%B7%A5%E4%BD%9C&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"title": "原陆军第31集团军军长王昭堃逝世",
|
||||
"desc": "",
|
||||
"score": "6089180",
|
||||
"score_desc": "608.92w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/778f1aa16cdfc4db09926956ae5b5741",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E5%8E%9F%E9%99%86%E5%86%9B%E7%AC%AC31%E9%9B%86%E5%9B%A2%E5%86%9B%E5%86%9B%E9%95%BF%E7%8E%8B%E6%98%AD%E5%A0%83%E9%80%9D%E4%B8%96&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"title": "“防霸凌”儿童指纹水杯被吐槽费妈",
|
||||
"desc": "",
|
||||
"score": "5986581",
|
||||
"score_desc": "598.66w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/c590f4412c1aa6904b65a94cba7de275",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E2%80%9C%E9%98%B2%E9%9C%B8%E5%87%8C%E2%80%9D%E5%84%BF%E7%AB%A5%E6%8C%87%E7%BA%B9%E6%B0%B4%E6%9D%AF%E8%A2%AB%E5%90%90%E6%A7%BD%E8%B4%B9%E5%A6%88&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 21,
|
||||
"title": "特朗普下令重振美国军队",
|
||||
"desc": "",
|
||||
"score": "5902417",
|
||||
"score_desc": "590.24w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/de99b4697f6d926890dc31d686c1222c",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E7%89%B9%E6%9C%97%E6%99%AE%E4%B8%8B%E4%BB%A4%E9%87%8D%E6%8C%AF%E7%BE%8E%E5%9B%BD%E5%86%9B%E9%98%9F&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 22,
|
||||
"title": "间谍张某某死缓：出轨外国女官员生子",
|
||||
"desc": "",
|
||||
"score": "5790606",
|
||||
"score_desc": "579.06w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/f93c1366d41c7cfbb2383dcb17449c28",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E9%97%B4%E8%B0%8D%E5%BC%A0%E6%9F%90%E6%9F%90%E6%AD%BB%E7%BC%93%EF%BC%9A%E5%87%BA%E8%BD%A8%E5%A4%96%E5%9B%BD%E5%A5%B3%E5%AE%98%E5%91%98%E7%94%9F%E5%AD%90&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 23,
|
||||
"title": "5万余人观礼离场后干干净净",
|
||||
"desc": "",
|
||||
"score": "5717616",
|
||||
"score_desc": "571.76w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/53c6b971cef08daf3104bb5133b4b6ed",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=5%E4%B8%87%E4%BD%99%E4%BA%BA%E8%A7%82%E7%A4%BC%E7%A6%BB%E5%9C%BA%E5%90%8E%E5%B9%B2%E5%B9%B2%E5%87%80%E5%87%80&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 24,
|
||||
"title": "普京乘机回国 王毅送行",
|
||||
"desc": "",
|
||||
"score": "5607811",
|
||||
"score_desc": "560.78w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/5f7afddd2e0a570573b245b6f31a1338",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%99%AE%E4%BA%AC%E4%B9%98%E6%9C%BA%E5%9B%9E%E5%9B%BD+%E7%8E%8B%E6%AF%85%E9%80%81%E8%A1%8C&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 25,
|
||||
"title": "刘老庄连战旗为何多了一个点",
|
||||
"desc": "",
|
||||
"score": "5513446",
|
||||
"score_desc": "551.34w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/7084449234aed77c74438ca263fdcd58",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%88%98%E8%80%81%E5%BA%84%E8%BF%9E%E6%88%98%E6%97%97%E4%B8%BA%E4%BD%95%E5%A4%9A%E4%BA%86%E4%B8%80%E4%B8%AA%E7%82%B9&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 26,
|
||||
"title": "迎面感受东风-61东风-5C的视觉冲击",
|
||||
"desc": "",
|
||||
"score": "5426660",
|
||||
"score_desc": "542.67w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/40210a63cf69ddbbedbe59a19730e374",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E8%BF%8E%E9%9D%A2%E6%84%9F%E5%8F%97%E4%B8%9C%E9%A3%8E-61%E4%B8%9C%E9%A3%8E-5C%E7%9A%84%E8%A7%86%E8%A7%89%E5%86%B2%E5%87%BB&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 27,
|
||||
"title": "阅兵当天的北京处处都有追飞机的人",
|
||||
"desc": "",
|
||||
"score": "5336487",
|
||||
"score_desc": "533.65w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/1513230ae41ba37f680dccbc526b7145",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E9%98%85%E5%85%B5%E5%BD%93%E5%A4%A9%E7%9A%84%E5%8C%97%E4%BA%AC%E5%A4%84%E5%A4%84%E9%83%BD%E6%9C%89%E8%BF%BD%E9%A3%9E%E6%9C%BA%E7%9A%84%E4%BA%BA&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 28,
|
||||
"title": "歼-35大片来了",
|
||||
"desc": "",
|
||||
"score": "5240364",
|
||||
"score_desc": "524.04w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/017c3b52514fb3ae83405da1da5fc350",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%AD%BC-35%E5%A4%A7%E7%89%87%E6%9D%A5%E4%BA%86&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 29,
|
||||
"title": "普京透露与特朗普“车内密谈”细节",
|
||||
"desc": "",
|
||||
"score": "5123571",
|
||||
"score_desc": "512.36w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/5548e90353e4696a1116ffc0e65e086d",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%99%AE%E4%BA%AC%E9%80%8F%E9%9C%B2%E4%B8%8E%E7%89%B9%E6%9C%97%E6%99%AE%E2%80%9C%E8%BD%A6%E5%86%85%E5%AF%86%E8%B0%88%E2%80%9D%E7%BB%86%E8%8A%82&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 30,
|
||||
"title": "和平鸽从天津到北京出差参加阅兵",
|
||||
"desc": "",
|
||||
"score": "5037077",
|
||||
"score_desc": "503.71w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/f4558c31275119cfab564cadeddf6f50",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E5%92%8C%E5%B9%B3%E9%B8%BD%E4%BB%8E%E5%A4%A9%E6%B4%A5%E5%88%B0%E5%8C%97%E4%BA%AC%E5%87%BA%E5%B7%AE%E5%8F%82%E5%8A%A0%E9%98%85%E5%85%B5&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 31,
|
||||
"title": "王毅送中国跑鞋 匈牙利外长爱不释手",
|
||||
"desc": "",
|
||||
"score": "4950481",
|
||||
"score_desc": "495.05w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/95df9511f4c0951f823f387f3286c029",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E7%8E%8B%E6%AF%85%E9%80%81%E4%B8%AD%E5%9B%BD%E8%B7%91%E9%9E%8B+%E5%8C%88%E7%89%99%E5%88%A9%E5%A4%96%E9%95%BF%E7%88%B1%E4%B8%8D%E9%87%8A%E6%89%8B&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 32,
|
||||
"title": "郑钦文晒东风5C帅照",
|
||||
"desc": "",
|
||||
"score": "4841678",
|
||||
"score_desc": "484.17w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/5e2fec1c090ce966a2dd89071342d3e9",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E9%83%91%E9%92%A6%E6%96%87%E6%99%92%E4%B8%9C%E9%A3%8E5C%E5%B8%85%E7%85%A7&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 33,
|
||||
"title": "阅兵当天 北京街头成为别样观礼台",
|
||||
"desc": "",
|
||||
"score": "4760831",
|
||||
"score_desc": "476.08w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/a6495a07da318dc9644f77de370b8035",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E9%98%85%E5%85%B5%E5%BD%93%E5%A4%A9+%E5%8C%97%E4%BA%AC%E8%A1%97%E5%A4%B4%E6%88%90%E4%B8%BA%E5%88%AB%E6%A0%B7%E8%A7%82%E7%A4%BC%E5%8F%B0&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 34,
|
||||
"title": "华春莹与记者互动：我的心情和你一样",
|
||||
"desc": "",
|
||||
"score": "4651512",
|
||||
"score_desc": "465.15w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/4377037f24b931479efc20e2a7b87776",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%8D%8E%E6%98%A5%E8%8E%B9%E4%B8%8E%E8%AE%B0%E8%80%85%E4%BA%92%E5%8A%A8%EF%BC%9A%E6%88%91%E7%9A%84%E5%BF%83%E6%83%85%E5%92%8C%E4%BD%A0%E4%B8%80%E6%A0%B7&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 35,
|
||||
"title": "父亲称女民兵方队领队是全家的骄傲",
|
||||
"desc": "",
|
||||
"score": "4566469",
|
||||
"score_desc": "456.65w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/79b1620e703b1e73fd5db686d6314ea0",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E7%88%B6%E4%BA%B2%E7%A7%B0%E5%A5%B3%E6%B0%91%E5%85%B5%E6%96%B9%E9%98%9F%E9%A2%86%E9%98%9F%E6%98%AF%E5%85%A8%E5%AE%B6%E7%9A%84%E9%AA%84%E5%82%B2&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 36,
|
||||
"title": "宝宝出生恰逢阅兵 家人取名袁安阅",
|
||||
"desc": "",
|
||||
"score": "4470561",
|
||||
"score_desc": "447.06w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/a5063fd737daf1da7a969e36ab672ed8",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E5%AE%9D%E5%AE%9D%E5%87%BA%E7%94%9F%E6%81%B0%E9%80%A2%E9%98%85%E5%85%B5+%E5%AE%B6%E4%BA%BA%E5%8F%96%E5%90%8D%E8%A2%81%E5%AE%89%E9%98%85&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 37,
|
||||
"title": "特朗普承认观看中国阅兵",
|
||||
"desc": "",
|
||||
"score": "4353451",
|
||||
"score_desc": "435.35w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/e7c27a7640bc0f9d25dcd7ad79026ce7",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%89%B9%E6%9C%97%E6%99%AE%E6%89%BF%E8%AE%A4%E8%A7%82%E7%9C%8B%E4%B8%AD%E5%9B%BD%E9%98%85%E5%85%B5&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 38,
|
||||
"title": "一地官宣：3孩家庭购房补贴20万元",
|
||||
"desc": "",
|
||||
"score": "4290101",
|
||||
"score_desc": "429.01w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/507444a742944d2ed619b480fdab147e",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%80%E5%9C%B0%E5%AE%98%E5%AE%A3%EF%BC%9A3%E5%AD%A9%E5%AE%B6%E5%BA%AD%E8%B4%AD%E6%88%BF%E8%A1%A5%E8%B4%B420%E4%B8%87%E5%85%83&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 39,
|
||||
"title": "OpenAI启动员工百亿美元售股",
|
||||
"desc": "",
|
||||
"score": "4172580",
|
||||
"score_desc": "417.26w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/fc06e36007c4b957bee693b9abe64693",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=OpenAI%E5%90%AF%E5%8A%A8%E5%91%98%E5%B7%A5%E7%99%BE%E4%BA%BF%E7%BE%8E%E5%85%83%E5%94%AE%E8%82%A1&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 40,
|
||||
"title": "想入军迷圈的 现在正是好时候",
|
||||
"desc": "",
|
||||
"score": "4098627",
|
||||
"score_desc": "409.86w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/d5bde24cc4eed187d500f3e7a9d73f2d",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%83%B3%E5%85%A5%E5%86%9B%E8%BF%B7%E5%9C%88%E7%9A%84+%E7%8E%B0%E5%9C%A8%E6%AD%A3%E6%98%AF%E5%A5%BD%E6%97%B6%E5%80%99&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 41,
|
||||
"title": "九三阅兵台湾线上播放超500万",
|
||||
"desc": "",
|
||||
"score": "3999782",
|
||||
"score_desc": "399.98w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/ebfee25839294c24ca24af788fbd92bd",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E5%8F%B0%E6%B9%BE%E7%BA%BF%E4%B8%8A%E6%92%AD%E6%94%BE%E8%B6%85500%E4%B8%87&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 42,
|
||||
"title": "信鸽协会回应市民救助落水和平鸽",
|
||||
"desc": "",
|
||||
"score": "3886482",
|
||||
"score_desc": "388.65w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/dc5ce78481f36774922add0eb7076ec7",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%BF%A1%E9%B8%BD%E5%8D%8F%E4%BC%9A%E5%9B%9E%E5%BA%94%E5%B8%82%E6%B0%91%E6%95%91%E5%8A%A9%E8%90%BD%E6%B0%B4%E5%92%8C%E5%B9%B3%E9%B8%BD&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 43,
|
||||
"title": "台退将看阅兵新装备直呼自己是军盲",
|
||||
"desc": "",
|
||||
"score": "3794294",
|
||||
"score_desc": "379.43w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/686bb8c544ec3d0bc9f01f7ccd31195c",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E5%8F%B0%E9%80%80%E5%B0%86%E7%9C%8B%E9%98%85%E5%85%B5%E6%96%B0%E8%A3%85%E5%A4%87%E7%9B%B4%E5%91%BC%E8%87%AA%E5%B7%B1%E6%98%AF%E5%86%9B%E7%9B%B2&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 44,
|
||||
"title": "多国来华领导人接连发声",
|
||||
"desc": "",
|
||||
"score": "3679787",
|
||||
"score_desc": "367.98w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/a7f9ac9aaeb54422c70870ac9ab36d09",
|
||||
"type": "3",
|
||||
"type_desc": "热",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/54a1ed72d00cd07334860b0509489d8b.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%A4%9A%E5%9B%BD%E6%9D%A5%E5%8D%8E%E9%A2%86%E5%AF%BC%E4%BA%BA%E6%8E%A5%E8%BF%9E%E5%8F%91%E5%A3%B0&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 45,
|
||||
"title": "河南佛教协会：释永信枉费僧众信任",
|
||||
"desc": "",
|
||||
"score": "3589427",
|
||||
"score_desc": "358.94w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/279b2b9632b9d7776a62fccefbc058db",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E6%B2%B3%E5%8D%97%E4%BD%9B%E6%95%99%E5%8D%8F%E4%BC%9A%EF%BC%9A%E9%87%8A%E6%B0%B8%E4%BF%A1%E6%9E%89%E8%B4%B9%E5%83%A7%E4%BC%97%E4%BF%A1%E4%BB%BB&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 46,
|
||||
"title": "揭秘阅兵地铁专列：143趟车接送2万人",
|
||||
"desc": "",
|
||||
"score": "3501916",
|
||||
"score_desc": "350.19w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/711c2769ad7f6071171e7c11908c9f7a",
|
||||
"type": "1",
|
||||
"type_desc": "新",
|
||||
"type_icon": "https://search-operate.cdn.bcebos.com/42e626c5469cc4cd3b91131bcfe53d44.png",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%8F%AD%E7%A7%98%E9%98%85%E5%85%B5%E5%9C%B0%E9%93%81%E4%B8%93%E5%88%97%EF%BC%9A143%E8%B6%9F%E8%BD%A6%E6%8E%A5%E9%80%812%E4%B8%87%E4%BA%BA&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 47,
|
||||
"title": "苑举正观礼听到《黄河大合唱》落泪",
|
||||
"desc": "",
|
||||
"score": "3431345",
|
||||
"score_desc": "343.13w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/ea02d87734137d71f4a1529a5cb864c7",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E8%8B%91%E4%B8%BE%E6%AD%A3%E8%A7%82%E7%A4%BC%E5%90%AC%E5%88%B0%E3%80%8A%E9%BB%84%E6%B2%B3%E5%A4%A7%E5%90%88%E5%94%B1%E3%80%8B%E8%90%BD%E6%B3%AA&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 48,
|
||||
"title": "九三阅兵解锁了这些“首次”",
|
||||
"desc": "",
|
||||
"score": "3339123",
|
||||
"score_desc": "333.91w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/35812fb7bcf6ff0d71f52f60fb9055fa",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B9%9D%E4%B8%89%E9%98%85%E5%85%B5%E8%A7%A3%E9%94%81%E4%BA%86%E8%BF%99%E4%BA%9B%E2%80%9C%E9%A6%96%E6%AC%A1%E2%80%9D&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 49,
|
||||
"title": "中国首起反规避调查",
|
||||
"desc": "",
|
||||
"score": "3210675",
|
||||
"score_desc": "321.07w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/fa9ce1dd50ddb58eab40b7de920a0d79",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E9%A6%96%E8%B5%B7%E5%8F%8D%E8%A7%84%E9%81%BF%E8%B0%83%E6%9F%A5&sa=fyb_news&rsv_dl=fyb_news"
|
||||
},
|
||||
{
|
||||
"rank": 50,
|
||||
"title": "王楚钦：被祖国的强大深深触动",
|
||||
"desc": "",
|
||||
"score": "3147784",
|
||||
"score_desc": "314.78w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/d8ae151e1eefdec0449a52574f58ee51",
|
||||
"type": "0",
|
||||
"type_desc": null,
|
||||
"type_icon": null,
|
||||
"url": "https://www.baidu.com/s?wd=%E7%8E%8B%E6%A5%9A%E9%92%A6%EF%BC%9A%E8%A2%AB%E7%A5%96%E5%9B%BD%E7%9A%84%E5%BC%BA%E5%A4%A7%E6%B7%B1%E6%B7%B1%E8%A7%A6%E5%8A%A8&sa=fyb_news&rsv_dl=fyb_news"
|
||||
}
|
||||
]
|
||||
}
|
||||
242
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/background.css
Normal file
242
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/background.css
Normal file
@@ -0,0 +1,242 @@
|
||||
/* 页面主背景 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #f9fbe7 0%, #f1f8e9 25%, #e8f5e8 50%, #dcedc8 75%, #c5e1a5 100%);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 背景装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(139, 195, 74, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(205, 220, 57, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(212, 225, 87, 0.08) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 容器背景 */
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(139, 195, 74, 0.12);
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid rgba(241, 248, 233, 0.5);
|
||||
}
|
||||
|
||||
/* 头部背景 */
|
||||
.header {
|
||||
background: linear-gradient(135deg, rgba(139, 195, 74, 0.08) 0%, rgba(205, 220, 57, 0.08) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgba(139, 195, 74, 0.12) 0%, transparent 40%),
|
||||
radial-gradient(circle at 70% 80%, rgba(205, 220, 57, 0.1) 0%, transparent 40%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 电视剧项目背景 */
|
||||
.tv-item {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tv-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(139, 195, 74, 0.03) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 前三名特殊背景效果 */
|
||||
.tv-item:nth-child(1) {
|
||||
background: linear-gradient(135deg, rgba(244, 67, 54, 0.06) 0%, rgba(255, 255, 255, 0.96) 100%);
|
||||
}
|
||||
|
||||
.tv-item:nth-child(2) {
|
||||
background: linear-gradient(135deg, rgba(255, 152, 0, 0.06) 0%, rgba(255, 255, 255, 0.96) 100%);
|
||||
}
|
||||
|
||||
.tv-item:nth-child(3) {
|
||||
background: linear-gradient(135deg, rgba(255, 193, 7, 0.06) 0%, rgba(255, 255, 255, 0.96) 100%);
|
||||
}
|
||||
|
||||
/* 加载状态背景 */
|
||||
.loading {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px;
|
||||
margin: 20px;
|
||||
border: 1px solid rgba(241, 248, 233, 0.3);
|
||||
}
|
||||
|
||||
/* 错误信息背景 */
|
||||
.error-message {
|
||||
background: linear-gradient(135deg, rgba(231, 76, 60, 0.06) 0%, rgba(255, 255, 255, 0.92) 100%);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(231, 76, 60, 0.1);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* 底部背景 */
|
||||
.footer {
|
||||
background: linear-gradient(135deg, rgba(139, 195, 74, 0.04) 0%, rgba(205, 220, 57, 0.04) 100%);
|
||||
border-radius: 0 0 16px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(139, 195, 74, 0.4) 50%, transparent 100%);
|
||||
}
|
||||
|
||||
/* 封面图片背景效果 */
|
||||
.item-cover {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-cover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(139, 195, 74, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tv-item:hover .item-cover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 响应式背景调整 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(139, 195, 74, 0.04) 0%, transparent 40%),
|
||||
radial-gradient(circle at 80% 20%, rgba(205, 220, 57, 0.04) 0%, transparent 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 85%, rgba(139, 195, 74, 0.08) 0%, transparent 60%),
|
||||
radial-gradient(circle at 85% 15%, rgba(205, 220, 57, 0.08) 0%, transparent 60%),
|
||||
radial-gradient(circle at 50% 50%, rgba(212, 225, 87, 0.06) 0%, transparent 70%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes backgroundShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬浮时的背景变化 */
|
||||
.tv-item:hover {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.tv-item:hover::after {
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(139, 195, 74, 0.06) 100%);
|
||||
}
|
||||
|
||||
/* 排名背景渐变 */
|
||||
.rank {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 按钮背景效果 */
|
||||
.retry-btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.retry-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.retry-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
40
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/index.html
Normal file
40
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/index.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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="styles.css">
|
||||
<link rel="stylesheet" href="background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1 class="title">百度电视剧榜单</h1>
|
||||
<p class="subtitle">实时热门电视剧，追剧必看榜单</p>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载电视剧榜单...</p>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="error" style="display: none;">
|
||||
<p>数据加载失败，请稍后重试</p>
|
||||
<button class="retry-btn" onclick="loadData()">重新加载</button>
|
||||
</div>
|
||||
|
||||
<div class="tv-list" id="tvList" style="display: none;">
|
||||
<!-- 电视剧列表将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p class="update-time" id="updateTime"></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
267
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/script.js
Normal file
267
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/script.js
Normal file
@@ -0,0 +1,267 @@
|
||||
// DOM元素获取
|
||||
const loadingElement = document.getElementById('loading');
|
||||
const errorElement = document.getElementById('error');
|
||||
const tvListElement = document.getElementById('tvList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadData();
|
||||
|
||||
// 每5分钟自动刷新数据
|
||||
setInterval(loadData, 5 * 60 * 1000);
|
||||
|
||||
// 监听页面可见性变化，页面重新可见时刷新数据
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (!document.hidden) {
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听网络状态变化
|
||||
window.addEventListener('online', loadData);
|
||||
});
|
||||
|
||||
// 加载数据函数
|
||||
async function loadData() {
|
||||
try {
|
||||
showLoading();
|
||||
|
||||
// 调用百度电视剧榜API
|
||||
const response = await fetch('https://60s.api.shumengya.top/v2/baidu/teleplay');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data) {
|
||||
renderTvList(data.data);
|
||||
updateTime();
|
||||
hideLoading();
|
||||
} else {
|
||||
throw new Error(data.message || '数据格式错误');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染电视剧列表
|
||||
function renderTvList(tvData) {
|
||||
if (!tvData || !Array.isArray(tvData)) {
|
||||
showError();
|
||||
return;
|
||||
}
|
||||
|
||||
const listHTML = tvData.map((item, index) => {
|
||||
const rank = item.rank || (index + 1);
|
||||
const rankClass = rank <= 3 ? (rank === 1 ? 'top1' : 'top3') : '';
|
||||
|
||||
// 处理封面图片
|
||||
const coverImg = item.cover ?
|
||||
`<img src="${item.cover}" alt="${item.title}" class="item-cover" onerror="this.style.display='none'">` :
|
||||
'';
|
||||
|
||||
// 处理描述信息
|
||||
const description = item.desc || '';
|
||||
|
||||
// 处理评分信息
|
||||
const score = item.score || '';
|
||||
const scoreDesc = item.score_desc || '';
|
||||
|
||||
// 处理链接
|
||||
const linkUrl = item.url || '#';
|
||||
|
||||
return `
|
||||
<div class="tv-item" onclick="openLink('${linkUrl}')">
|
||||
<div class="rank ${rankClass}">${rank}</div>
|
||||
${coverImg}
|
||||
<div class="item-content">
|
||||
<div class="item-header">
|
||||
<h3 class="item-title">${item.title || '无标题'}</h3>
|
||||
</div>
|
||||
${description ? `<p class="item-desc">${description}</p>` : ''}
|
||||
<div class="item-footer">
|
||||
<div class="item-score">
|
||||
${score ? `<span>${formatScore(score)}</span>` : ''}
|
||||
${scoreDesc ? `<span class="item-score-desc">${scoreDesc}</span>` : ''}
|
||||
</div>
|
||||
<div class="item-type">
|
||||
<span class="type-text">电视剧</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
tvListElement.innerHTML = listHTML;
|
||||
tvListElement.style.display = 'block';
|
||||
}
|
||||
|
||||
// 格式化评分
|
||||
function formatScore(score) {
|
||||
if (!score) return '';
|
||||
|
||||
// 如果是数字，进行格式化
|
||||
if (typeof score === 'number') {
|
||||
if (score >= 10000) {
|
||||
return (score / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return score.toString();
|
||||
}
|
||||
|
||||
// 如果是字符串，直接返回
|
||||
return score.toString();
|
||||
}
|
||||
|
||||
// 打开链接
|
||||
function openLink(url) {
|
||||
if (url && url !== '#') {
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
loadingElement.style.display = 'block';
|
||||
errorElement.style.display = 'none';
|
||||
tvListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
function hideLoading() {
|
||||
loadingElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError() {
|
||||
loadingElement.style.display = 'none';
|
||||
errorElement.style.display = 'block';
|
||||
tvListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 更新时间显示
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
updateTimeElement.textContent = `最后更新时间: ${timeString}`;
|
||||
}
|
||||
|
||||
// 重试加载数据
|
||||
function retryLoad() {
|
||||
loadData();
|
||||
}
|
||||
|
||||
// 页面滚动优化
|
||||
let ticking = false;
|
||||
|
||||
function updateScrollPosition() {
|
||||
// 可以在这里添加滚动相关的优化逻辑
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateScrollPosition);
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 错误处理和日志记录
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.error);
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', function(e) {
|
||||
console.error('未处理的Promise拒绝:', e.reason);
|
||||
});
|
||||
|
||||
// 性能监控
|
||||
if ('performance' in window) {
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(function() {
|
||||
const perfData = performance.timing;
|
||||
const loadTime = perfData.loadEventEnd - perfData.navigationStart;
|
||||
console.log('页面加载时间:', loadTime + 'ms');
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载优化
|
||||
function lazyLoadImages() {
|
||||
const images = document.querySelectorAll('.item-cover');
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => imageObserver.observe(img));
|
||||
}
|
||||
|
||||
// 添加键盘导航支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
const items = document.querySelectorAll('.tv-item');
|
||||
const currentFocus = document.activeElement;
|
||||
let currentIndex = Array.from(items).indexOf(currentFocus);
|
||||
|
||||
switch(e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
currentIndex = Math.min(currentIndex + 1, items.length - 1);
|
||||
items[currentIndex]?.focus();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
currentIndex = Math.max(currentIndex - 1, 0);
|
||||
items[currentIndex]?.focus();
|
||||
break;
|
||||
case 'Enter':
|
||||
if (currentFocus && currentFocus.classList.contains('tv-item')) {
|
||||
currentFocus.click();
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// 使电视剧项目可聚焦
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.tv-item {
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.tv-item:focus {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(139, 195, 74, 0.25);
|
||||
border-color: #8bc34a;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// 为所有电视剧项目添加tabindex
|
||||
setTimeout(() => {
|
||||
const items = document.querySelectorAll('.tv-item');
|
||||
items.forEach((item, index) => {
|
||||
item.setAttribute('tabindex', '0');
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
378
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/styles.css
Normal file
378
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/styles.css
Normal file
@@ -0,0 +1,378 @@
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2c3e50;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 2px solid #d4e157;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #8bc34a, #cddc39);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(139, 195, 74, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #7f8c8d;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #d4e157;
|
||||
border-top: 3px solid #8bc34a;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 错误信息 */
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: linear-gradient(135deg, #8bc34a, #cddc39);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(139, 195, 74, 0.4);
|
||||
}
|
||||
|
||||
/* 电视剧列表 */
|
||||
.tv-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tv-item {
|
||||
background: #ffffff;
|
||||
border: 1px solid #f1f8e9;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(139, 195, 74, 0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tv-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(139, 195, 74, 0.15);
|
||||
border-color: #d4e157;
|
||||
}
|
||||
|
||||
.tv-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #8bc34a, #cddc39);
|
||||
}
|
||||
|
||||
/* 排名样式 */
|
||||
.rank {
|
||||
background: linear-gradient(135deg, #8bc34a, #cddc39);
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
box-shadow: 0 2px 6px rgba(139, 195, 74, 0.3);
|
||||
}
|
||||
|
||||
.rank.top3 {
|
||||
background: linear-gradient(135deg, #ff9800, #ffc107);
|
||||
}
|
||||
|
||||
.rank.top1 {
|
||||
background: linear-gradient(135deg, #f44336, #e91e63);
|
||||
}
|
||||
|
||||
/* 封面图片 */
|
||||
.item-cover {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #f1f8e9;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
transition: color 0.3s ease;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-title:hover {
|
||||
background: linear-gradient(135deg, #8bc34a, #cddc39);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 13px;
|
||||
color: #7f8c8d;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-score {
|
||||
font-size: 14px;
|
||||
background: linear-gradient(135deg, #8bc34a, #cddc39);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.item-score-desc {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.type-text {
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #f1f8e9, #e8f5e8);
|
||||
color: #689f38;
|
||||
border: 1px solid #d4e157;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid #f1f8e9;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 12px;
|
||||
color: #95a5a6;
|
||||
}
|
||||
|
||||
/* 手机端优化 (默认) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tv-item {
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 12px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.rank {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端适配 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.tv-list {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.tv-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 电脑端适配 */
|
||||
@media (min-width: 1025px) {
|
||||
.container {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.tv-list {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.tv-item {
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.item-cover {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕优化 */
|
||||
@media (min-width: 1400px) {
|
||||
.tv-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
276
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/返回接口.json
Normal file
276
InfoGenie-frontend/public/60sapi/热搜榜单/百度电视剧榜/返回接口.json
Normal file
@@ -0,0 +1,276 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"rank": 1,
|
||||
"title": "子夜归",
|
||||
"desc": "改编自扶华的小说《梅夫人宠夫日常》。",
|
||||
"score": "511898",
|
||||
"score_desc": "51.19w",
|
||||
"cover": "https://gips2.baidu.com/it/u=2155452125,2802752464&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%AD%90%E5%A4%9C%E5%BD%92+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"title": "献鱼",
|
||||
"desc": "该剧改编自扶华的小说《向师祖献上咸鱼》,由浙江东阳奔兔影业有限公司备案。主要讲述了多年前,一位高僧曾在庚辰仙府的大魔头师祖司马焦满是血腥杀戮的未来里窥见过一线生机,给他留下一枚佛珠,希望他对生灵有慈心,能将杀心归藏。后来,被“逼上梁山”的廖停雁接受挑战,两手用力直接扯断了红线木珠,依靠咸鱼的本能降服了司马焦,成为改变他的人,也成为了黎民苍生的生机。从此廖停雁开始了引导大魔头向善的任务。",
|
||||
"score": "334613",
|
||||
"score_desc": "33.46w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/74230ae3ec03042a352809630060ed6b",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%8C%AE%E9%B1%BC+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"title": "锦月如歌",
|
||||
"desc": "该剧改编自千山茶客的小说《女将星》。",
|
||||
"score": "261451",
|
||||
"score_desc": "26.15w",
|
||||
"cover": "https://gips1.baidu.com/it/u=1353858050,567139191&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E9%94%A6%E6%9C%88%E5%A6%82%E6%AD%8C+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"title": "生万物",
|
||||
"desc": "天牛庙村首富之女宁绣绣出嫁当天被土匪绑架,父亲宁学祥舍不得卖地赎她,将她的妹妹嫁给她青梅竹马的恋人费文典。绣绣决绝地与父亲断绝了关系,嫁给庄户汉子封大脚,学着干农活并慢慢明白了土地对于农民的意义。受杜春林等人的革命思想的启发,她用所学的知识帮助邻居们,带领村里的妇女一起摆脱封建思想桎梏。她和乡亲们一起除匪患、抗日、拥军,在清苦但又充满传奇的二十年岁月中,绣绣最终和她父亲达成了和解,也实现了自我价值。",
|
||||
"score": "246220",
|
||||
"score_desc": "24.62w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/956386852c3948e1539daf2a9e8316c5",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%94%9F%E4%B8%87%E7%89%A9+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"title": "归队",
|
||||
"desc": "故事遵循东北抗联的真实发展轨迹,由小人物视角切入,以小见大的展现了战士们“勇赴国难、自觉担当、顽强苦斗、舍生取义、团结御侮”的东北抗联精神。",
|
||||
"score": "174373",
|
||||
"score_desc": "17.44w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/41092aaebdbee0a4a9382c182b913f99",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%BD%92%E9%98%9F+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"title": "滤镜",
|
||||
"desc": "一个新科技产品“滤镜手镯”让普通平凡的苏橙橙（李兰迪 饰）拥有了改变容貌的能力。苏橙橙变成大美女“苏渺”、变成女博士“方谨”、变成撕漫男“全胜唐”，让自己咸鱼翻身爽了一把的同时，帮助弱小伸张正义。与此同时，唐奇（檀健次 饰）对见义勇为的苏渺怦然心动，与志同道合的方谨惺惺相惜，对阳光帅气的全胜唐欣赏称赞。为了保住秘密，苏橙橙不得不一次次撒下弥天大谎，让唐奇一次又一次失去了爱人。唐奇在接连的打击下，眼睛的病情逐渐加重，苏橙橙愧疚心虚。终于，唐奇揭开了苏橙橙变换身份的真相，明白自己爱的只有苏橙橙。真诚炙热的心不会被外在迷惑，心意相通的二人要一起面对滤镜手镯带来的严峻挑战。为了将“千鸟集”培育为独具中国特色的高端美妆品牌，苏橙橙和唐奇携手策划了一系列新的国货美妆产品，号召大家享受“自然自信的真实美”。经历重重考验的苏橙橙最终明白，美不应该被单一固化，要用最真实的自己去面对最现实的生活，依靠努力奋斗去追逐梦想，幸福就在眼前。",
|
||||
"score": "93122",
|
||||
"score_desc": "9.31w",
|
||||
"cover": "https://gips2.baidu.com/it/u=3795500355,4042026657&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%BB%A4%E9%95%9C+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"title": "与晋长安",
|
||||
"desc": "该剧改编自九鹭非香的同名小说。太晋女将军黎霜骁勇善战,她受命在一个月之内找出隐藏的奸细。某日,黎霜偶然间救下身负重伤记忆全失的男子,将其带回军营。男子恳求黎霜收留并跟随她征战。黎霜为其赐名晋安,寓意太晋长治久安。二人合力揪出奸细,却接连遭遇新任监军的蓄意为难和邻国大姚的屡屡犯境,晋安凭借自己过人的智谋与黎霜一起克服困难与险境,二人暗生情愫。晋安逐渐想起自己的真实身份竟是大姚的镇世王,而彼时战事一触即发,二人不得已刀兵相见,本就厌倦战争的二人决定联手化解家国危机,帮助百姓安居乐业。",
|
||||
"score": "63645",
|
||||
"score_desc": "6.36w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/f9e7c5bfe847536bca743e3e397b7bff",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%8E%E6%99%8B%E9%95%BF%E5%AE%89+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"title": "暗潮缉凶",
|
||||
"desc": "",
|
||||
"score": "56675",
|
||||
"score_desc": "5.67w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/52c73cc7cd55674511becbabd16aca37",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%9A%97%E6%BD%AE%E7%BC%89%E5%87%B6+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"title": "深情眼",
|
||||
"desc": "改编自耳东兔子的同名小说。年过三十的叶蒙遭遇职场不顺,辞职后带着积蓄回到家乡开启惬意的小镇生活,机缘巧合之下,她偶遇了长着一双深情眼的李靳屿,并被他的神秘和冷峻吸引。两个陌生的灵魂不断触碰,叶蒙因李靳屿的艰辛生活而心生怜爱,热情主动地给予帮助;李靳屿也在叶蒙的追求下敞开了心扉,变得自信开朗起来。他们相互温暖、相互治愈,努力经营着这段来之不易的爱情。一枚戒指的到来打破了两人之间的平静,叶蒙母亲多年前患病去世的谜团缓缓浮出水面,叶蒙不得不面对残酷的真相--母亲的离去与李靳屿家有着千丝万缕的联系。此时李靳屿内心的天平早已偏向叶漾,叶蒙给他带来了阳光,现在轮到他来帮助叶蒙解开心结。最终,两人携手揭开上一辈的纠葛,放下过往恩怨,迎接美好的明天。",
|
||||
"score": "56341",
|
||||
"score_desc": "5.63w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/f09c4b963cd3cc3062d38e9182be750e",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%B7%B1%E6%83%85%E7%9C%BC+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"title": "定风波",
|
||||
"desc": "《定风波》聚焦宋韵文化传承传播,围绕诗文、书画、美食、旅游、民生等主题,多维度描绘苏东坡的为官之道、志趣审美和精神世界,深入解读苏东坡的当代价值。全片共5集,每集50分钟。第一集“出川记”讲述苏东坡的成长与家风,建构其人生起始动力,探索其后来到杭州的动因;第二集“湖山记”讲述苏东坡首次为官杭州,受到湖山的滋养,实现真正的“胸有丘壑”;第三集“摩羯记”讲述苏东坡应对乌台诗案带来的种种影响,以乐观精神渡过人生的劫难;第四集“悬壶记”讲述苏东坡二度为官杭州,负责防疫,建安乐坊以及重新治理西湖;第五集“筑巢记”讲述苏东坡济苍生、度余生,保持“此心安处是吾乡”的人生态度。",
|
||||
"score": "51095",
|
||||
"score_desc": "5.11w",
|
||||
"cover": "https://gips0.baidu.com/it/u=2177619972,3043234332&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%AE%9A%E9%A3%8E%E6%B3%A2+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"title": "白月梵星",
|
||||
"desc": "本剧改编自星零小说《白烁上神》,讲述将军府嫡女白烁为报恩而立志修仙,寻仙途中意外搭救妖族大神梵樾,二人不打不相识,从相互利用到互生爱意、双向奔赴,纵然隔着千重困难,但爱足以打破一切限制,拥抱最真的彼此的故事。",
|
||||
"score": "44201",
|
||||
"score_desc": "4.42w",
|
||||
"cover": "https://gips3.baidu.com/it/u=1404661215,4211295377&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%99%BD%E6%9C%88%E6%A2%B5%E6%98%9F+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"title": "我在顶峰等你",
|
||||
"desc": "上一世,顾雪茭曾因恋爱脑而高考失利,职场打拼多年,归来仍是底层外包人员,还首当其冲地成为了“黑心老板”蔺之华的裁员目标。顾雪茭找蔺之华理论,意外重生回到高三那年。有机会重新开局,顾雪茭吸取前世教训,痛定思痛,将学习作为人生第一要务,由恋爱脑扭转为事业脑,在爆改人生的同时,还共同成就一段双向奔赴、互为变量的甜美爱情。",
|
||||
"score": "37003",
|
||||
"score_desc": "3.7w",
|
||||
"cover": "https://gips2.baidu.com/it/u=3240531593,2885940403&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%88%91%E5%9C%A8%E9%A1%B6%E5%B3%B0%E7%AD%89%E4%BD%A0+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"title": "六姊妹",
|
||||
"desc": "本剧改编自豆瓣阅读连载小说《六姊妹》，作者伊北。新中国成立后，何常胜为支援社会主义建设，携家带口从扬州江都移居安徽淮南，在淮河边上扎下了根。在接下来的二十年中，何常胜连得六个女儿，却在一场车祸中告别人世。大姐何家丽和奶奶何文氏、妈妈刘美心一起承担起了家庭重担，安顿妹妹们成家立业。时代在变化，何家六姊妹也经历了婚恋、工 作、生活等命运起伏，但她们团结一心，共同面对人生的风雨，在生活的磨砺中，六姊妹们也终于明白父亲生前反复强调的“家”的意义。",
|
||||
"score": "36574",
|
||||
"score_desc": "3.66w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/9e517a4f66e7fb7106b6333b85f1a5c1",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%85%AD%E5%A7%8A%E5%A6%B9+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"title": "扫毒风暴",
|
||||
"desc": "1995年,缉毒警林强峰(段奕宏 饰)为了追查毒品的线索调到了西港缉毒支队工作。走私商刘少华(秦昊 饰)因偶然的机会接触到了冰毒,毒品带来的巨大利润让他产生邪念,成为了一名制毒师。在林强峰等缉毒警的全力追查下,西港市的涉案的毒贩们一一落网,只剩刘少华在别处鼠窜,企图躲避警方追捕。 1996年,林强峰再次查没了企图东山再起的刘少华的毒品,走投无路的刘少华只能蛰伏了起来,之后刘少华企图再次制毒,被林强峰发现踪迹。1999年,刘少华终于落网。",
|
||||
"score": "32911",
|
||||
"score_desc": "3.29w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/d9e3d21ca332652ffe75d7176bce397f",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%89%AB%E6%AF%92%E9%A3%8E%E6%9A%B4+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"title": "目之所及",
|
||||
"desc": "本剧改编自阅读连载小说《盲目》,作者慕遥而寻。 世纪之交,因为水利工程的蓄水要求,一座江边小城即将被淹没,人们如火如荼地进行着新城的规划建设和人口的迁徙。此时,一桩离奇的杀夫案闯入了警方的视野,嫌疑人中,一个是咬定丈夫杀了女儿的可怜女人曲桐,一个是按摩院身份模糊的盲人薛小伟, 他们相互救赎,甘愿为对方牺牲,疑点重重。警 方锲而不舍的追查,揭秘出一段尘封多年,令人唏嘘的往事。真相可能会被淹没,但终有浮出水面的一天。",
|
||||
"score": "27439",
|
||||
"score_desc": "2.74w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/3b731c9a9e809e7c694a8cc5c65d5a15",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%9B%AE%E4%B9%8B%E6%89%80%E5%8F%8A+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"title": "书卷一梦",
|
||||
"desc": "柠萌影业出品,改编自千山茶客的同名小说,尚书府嫡长女蒋阮被当成一枚棋子送入宫中,爱上温文儒雅的八皇子。谁知一朝宫变,爱人登基,府上鸡犬升天,她却成为一枚弃子,被污蔑为祸国妖女。蒋阮不甘,下定决心要报仇,却在回府之时遭遇暗杀,后借助神秘黑衣人之手才逃过一劫。从危机四伏的宅院到步步惊心的朝堂,她面对的敌人越来越多她暗暗布下陷阱,却误打误撞遇到锦英王萧韶。萧韶性情冷清,却屡次出手相助于她,两人暗生情愫,渐渐结盟,萧韶的身世之谜也随之浮出水面。此后,蒋阮千方百计阻挠八皇子的夺嫡大业,却引起了萧韶的怀疑,两人结下误会八皇子开始进行疯狂的反击行动,蒋阮的处境十分危险。复仇途中,蒋阮发现自己的身世竟和萧韶的身世之谜有关,一个大锦朝隐藏多年的秘密浮出水面此时,南疆人蠢蠢欲动,欲与宣离结为同盟。彼时,蒋阮小时候被继母种下的毒发作,萧韶带她四处求医,生死一线的时候,蒋阮得知了一个更大的秘密",
|
||||
"score": "26702",
|
||||
"score_desc": "2.67w",
|
||||
"cover": "https://gips2.baidu.com/it/u=1593831522,852391480&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B9%A6%E5%8D%B7%E4%B8%80%E6%A2%A6+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"title": "樱桃琥珀",
|
||||
"desc": "《樱桃琥珀》要被影视化了,温柔女主学霸男主,主人公从小城到大都市,直至婚姻殿堂的女孩成长故事,由国内一线知名影视公司出品。",
|
||||
"score": "26660",
|
||||
"score_desc": "2.67w",
|
||||
"cover": "https://gips3.baidu.com/it/u=2643705168,575328711&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E6%A8%B1%E6%A1%83%E7%90%A5%E7%8F%80+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"title": "咒术回战第二季",
|
||||
"desc": "",
|
||||
"score": "26617",
|
||||
"score_desc": "2.66w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/7b3cfcaf3b343d45f5c16f3e47a9f946",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%92%92%E6%9C%AF%E5%9B%9E%E6%88%98%E7%AC%AC%E4%BA%8C%E5%AD%A3+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"title": "偷偷藏不住",
|
||||
"desc": "桑稚高中时期被老师频繁请家长,为了解决麻烦,桑稚决定找哥哥顶包,然而兄妹见面就互怼闹僵,无奈只好求助来家中玩耍的哥哥舍友段嘉许,在桑稚的苦求要挟下,段嘉许帮桑稚去学校见老师,两人因此结缘,段嘉许从此更是把桑稚当成自己的亲妹妹爱护。随着段嘉许大学毕业,两人分隔异地,又因为一些误会,关系疏远。直到成年后的桑稚如愿考到了段嘉许的城市,两人重逢。在日渐亲密的接触下,桑稚渐渐发现了段嘉许一直以来的压力来源,她想要保护这个一直对自己很好的大哥哥,重拾埋藏心底的暗恋。在桑稚的陪伴下,段嘉许慢慢解开心结,他真心喜欢上了长大的桑稚,一段纯真暗恋终于开出美丽的爱情花朵。",
|
||||
"score": "24655",
|
||||
"score_desc": "2.47w",
|
||||
"cover": "https://gips3.baidu.com/it/u=2216037055,3672846777&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%81%B7%E5%81%B7%E8%97%8F%E4%B8%8D%E4%BD%8F+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"title": "一路朝阳",
|
||||
"desc": "北漂女孩李慕嘉毕业后进入北京最知名的律所,靠着自己的勤奋努力从行政助理一路成为独当一面的律师,在职业巅峰切换跑道加入创业公司,大起大落最终创业成功,收获了一个家;闺蜜田蓉毕业求职未果,误打误撞成为房产中介,与北京男孩李万兵仓促结婚,在婚后职业和感情都遭受了巨大考验;表妹陈青斯坦福毕业与男友回国创业,遭遇种种挫折但找到了心之所向。从2007到2019年,三个女孩对人生的追求和希望在现实中身不由己地改变了模样,庆幸的是十年的磨砺最终还是求得了人生的向阳面,得以一路朝阳。",
|
||||
"score": "24482",
|
||||
"score_desc": "2.45w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/356088680f3a962380c8d700cf9a2826",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B8%80%E8%B7%AF%E6%9C%9D%E9%98%B3+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 21,
|
||||
"title": "她和她的他们",
|
||||
"desc": "《她和她的他们》是由徐麒丰担任总导演、王兵导演，由肖顺尧、贾青、何杜娟领衔主演，胡军特邀领衔主演，袁家欢、王大奇、蒋方婷、郑家彬、钟林煜、李琦、秦奋等主演的都市犯罪悬疑剧。该剧讲述了刑警队副队长赵熵与搭档崔山河,抽丝剥茧,一层层揭开七人之间错综复杂的情感秘密,一场场关于人性、伦理的纠葛,一出出谎言交织的虐戏逐步上演。随着真相步步逼近,赵熵也拉开了自我救赎的序幕。",
|
||||
"score": "24375",
|
||||
"score_desc": "2.44w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/6b5d1065fb78498ab26d77cd0e0c7c27",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%A5%B9%E5%92%8C%E5%A5%B9%E7%9A%84%E4%BB%96%E4%BB%AC+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 22,
|
||||
"title": "卿卿日常",
|
||||
"desc": "《清穿日常》是多木木多所著网络小说，在晋江文学城、中国移动和阅读等网站连载。吃……吃喝喝那些事。反正清穿已经都穿成筛子了。清穿就是为了遇见阿哥，种种田过过日子！今天，你清穿了吗？",
|
||||
"score": "22800",
|
||||
"score_desc": "2.28w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/6caa4eb1bb38d643d7099b060d94acee",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%8D%BF%E5%8D%BF%E6%97%A5%E5%B8%B8+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 23,
|
||||
"title": "初恋，稍显粗糙",
|
||||
"desc": "《初恋，稍显粗糙》是由小野花梨、风间俊介主演的电视剧，于2023年7月7日在东京电视台深夜播出。该剧改编自作者ざくざくろ的同名漫画，讲述一位轻度智力障碍女性的纯爱故事。",
|
||||
"score": "21904",
|
||||
"score_desc": "2.19w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/e4c672a71dfa478102360895a77b4108",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%88%9D%E6%81%8B%EF%BC%8C%E7%A8%8D%E6%98%BE%E7%B2%97%E7%B3%99+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 24,
|
||||
"title": "九重紫",
|
||||
"desc": "年少失母的窦昭因为家庭变故和坎坷波折的命运对人间情爱与亲情失望透顶,她斗继母、保家产,避居冷僻田庄,求学晓事以图自保自强。大雨之夜,窦昭与扮作商贾投宿的宋墨在田庄相逢,用自己的智慧帮其保下平寇有功的定国公一脉遗孤,二人命运也因此紧紧缠绕。出身官宦之家的宋墨深陷家变谜团,而窦昭也在继母的破坏下遭遇换亲流言,二人选择成亲以结同盟、共度困局。曾经彼此猜忌的他们在相互帮扶中共渡难关,也由此渐渐相知相惜、互为知己。不料风雨欲来、朝堂骤变,窦昭与宋墨携手面对危局,共同挽救家族命运、解开英国公府换子疑云、成功阻止辽王谋逆,平忠臣冤案、保家国安宁,活出了真正属于自己的幸福生活。",
|
||||
"score": "21717",
|
||||
"score_desc": "2.17w",
|
||||
"cover": "https://gips3.baidu.com/it/u=1237661084,451511578&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f200_266",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%B9%9D%E9%87%8D%E7%B4%AB+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 25,
|
||||
"title": "香港人在北京",
|
||||
"desc": "《香港人在北京》是由陈展鹏、吴若希、戴祖仪主演的TVB电视剧，在拍摄中。",
|
||||
"score": "21238",
|
||||
"score_desc": "2.12w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/2e5f4d3fe3b36a7d9f4f782c35979016",
|
||||
"url": "https://www.baidu.com/s?wd=%E9%A6%99%E6%B8%AF%E4%BA%BA%E5%9C%A8%E5%8C%97%E4%BA%AC+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 26,
|
||||
"title": "你好，我们是欢喜天团",
|
||||
"desc": "《你好，我们是欢喜天团》是由刘浩南执导，由王艺瑾、千喆、高卿尘领衔主演，易恒、伍雅露、阿克朱力、曹左、贵尚奇、庄逸涵、曲梦婷主演，陈名豪、代少冬特别出演的古代网络微短剧。2022年10月15日，《你好，我们是欢喜天团》杀青。该剧于2023年9月22日在腾讯视频播出。",
|
||||
"score": "20966",
|
||||
"score_desc": "2.1w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/94e45c218022c97e865f68c3a15c9c22",
|
||||
"url": "https://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%88%91%E4%BB%AC%E6%98%AF%E6%AC%A2%E5%96%9C%E5%A4%A9%E5%9B%A2+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 27,
|
||||
"title": "诛仙",
|
||||
"desc": "一夜间惨变孤儿的张小凡被青云门收为弟子，经过五年刻苦修炼，他在师门七脉会武上大放异彩，后被派往空桑山打探魔教行迹，旅程中，他与师姐陆雪琪遭遇危难，并结识救护了魔教女子碧瑶，同时，新的危险也在前方等待着他。",
|
||||
"score": "20659",
|
||||
"score_desc": "2.07w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/ab55434dff2e8c4432119fc980f5a51d",
|
||||
"url": "https://www.baidu.com/s?wd=%E8%AF%9B%E4%BB%99+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 28,
|
||||
"title": "玫瑰的故事",
|
||||
"desc": "电视剧改编自亦舒同名小说,由刘亦菲出演该剧女一号。剧中主要讲述了黄玫瑰一生的情感故事。出身于富贵之家的玫瑰经历了几段刻骨铭心的爱情,在浮浮沉沉中明白自己想要的是什么,为爱放手去追寻,成长为更有勇气的自己。",
|
||||
"score": "20439",
|
||||
"score_desc": "2.04w",
|
||||
"cover": "https://gips1.baidu.com/it/u=1227308879,4121027510&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f608_864",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%8E%AB%E7%91%B0%E7%9A%84%E6%95%85%E4%BA%8B+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 29,
|
||||
"title": "爱你，是我做过最好的事",
|
||||
"desc": "《爱你，是我做过最好的事》笙离的小说。讲述了一个关于青春、成长、初恋、选择的故事。",
|
||||
"score": "20196",
|
||||
"score_desc": "2.02w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/d680ad814edfef5438f7e6175c0456f6",
|
||||
"url": "https://www.baidu.com/s?wd=%E7%88%B1%E4%BD%A0%EF%BC%8C%E6%98%AF%E6%88%91%E5%81%9A%E8%BF%87%E6%9C%80%E5%A5%BD%E7%9A%84%E4%BA%8B+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
},
|
||||
{
|
||||
"rank": 30,
|
||||
"title": "唐朝诡事录",
|
||||
"desc": "暗夜邪仙从天而降,鬼市地宫露出冰山一角,而风靡长安的诡异红茶究竟是养生之药还是害人之物?长安城里新娘失踪案接连发生,似乎与红茶有着千丝万缕的联系案件扑朔迷离,人心玄妙难鉴!金吾卫中郎将卢凌风奉命查案,遭遇平生最强对手狄仁杰关门弟子苏无名,双强携手共破长安奇案!九个不同风格的诡异案件,《长安红茶》《石桥图》《众生堂》《黄梅杀》《甘棠驿怪谈》《鼍神》《人面花》《参天楼》,一一为您揭晓大唐夜色笼罩之下的奇闻异录! 见证唐诗之外,被湮没千年的奇诡想象。千年前的唐朝,万邦来朝,是当之无愧的世界中心。优越的物质生活,多样的文化融合,催生了唐朝人极致的想象力。 除了李白、杜甫、白居易等一代传奇诗人,用唐诗描绘出的华丽的大唐美卷;市井间的贩夫走卒,更用他们更加不羁的想象力,在唐朝的夜幕中 勾勒出神魔鬼怪的憧憧魅影:仙魔精妖、奇闻怪谈、幻术道法、异域传说、珍禽异兽、宫廷轶事",
|
||||
"score": "17785",
|
||||
"score_desc": "1.78w",
|
||||
"cover": "https://fyb-2.cdn.bcebos.com/hotboard_image/5bb62453122a1d67e077b70321676175",
|
||||
"url": "https://www.baidu.com/s?wd=%E5%94%90%E6%9C%9D%E8%AF%A1%E4%BA%8B%E5%BD%95+%E7%94%B5%E8%A7%86%E5%89%A7&sa=fyb_teleplay_all_all&rsv_dl=fyb_teleplay_all_all"
|
||||
}
|
||||
]
|
||||
}
|
||||
146
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/api.js
Normal file
146
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/api.js
Normal file
@@ -0,0 +1,146 @@
|
||||
// API 配置和数据获取模块
|
||||
class HotTopicsAPI {
|
||||
constructor() {
|
||||
this.apiUrl = 'https://60s.api.shumengya.top/v2/baidu/tieba';
|
||||
this.fallbackData = null;
|
||||
}
|
||||
|
||||
// 获取热搜数据
|
||||
async fetchHotTopics() {
|
||||
try {
|
||||
const response = await fetch(this.apiUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
// 添加超时控制
|
||||
signal: AbortSignal.timeout(10000) // 10秒超时
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// 验证数据格式
|
||||
if (!this.validateData(data)) {
|
||||
throw new Error('Invalid data format');
|
||||
}
|
||||
|
||||
// 缓存成功的数据作为备用
|
||||
this.fallbackData = data;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: data,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('API请求失败:', error);
|
||||
|
||||
// 如果有缓存数据，返回缓存数据
|
||||
if (this.fallbackData) {
|
||||
return {
|
||||
success: true,
|
||||
data: this.fallbackData,
|
||||
timestamp: new Date().toISOString(),
|
||||
isCache: true
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: error.message,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 验证数据格式
|
||||
validateData(data) {
|
||||
if (!data || typeof data !== 'object') {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (data.code !== 200) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!Array.isArray(data.data)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证数据项格式
|
||||
return data.data.every(item => {
|
||||
return item.rank &&
|
||||
item.title &&
|
||||
item.desc &&
|
||||
item.score_desc;
|
||||
});
|
||||
}
|
||||
|
||||
// 处理图片URL
|
||||
processImageUrl(url) {
|
||||
if (!url) return null;
|
||||
|
||||
// 处理百度贴吧图片URL的特殊字符
|
||||
try {
|
||||
return url.replace(/&/g, '&');
|
||||
} catch (error) {
|
||||
console.warn('图片URL处理失败:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理跳转URL
|
||||
processTopicUrl(url) {
|
||||
if (!url) return '#';
|
||||
|
||||
try {
|
||||
return url.replace(/&/g, '&');
|
||||
} catch (error) {
|
||||
console.warn('链接URL处理失败:', error);
|
||||
return '#';
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化分数显示
|
||||
formatScore(score, scoreDesc) {
|
||||
if (scoreDesc) {
|
||||
return scoreDesc;
|
||||
}
|
||||
|
||||
if (typeof score === 'number') {
|
||||
if (score >= 10000) {
|
||||
return (score / 10000).toFixed(1) + 'w';
|
||||
}
|
||||
return score.toString();
|
||||
}
|
||||
|
||||
return '0';
|
||||
}
|
||||
|
||||
// 截断文本
|
||||
truncateText(text, maxLength = 100) {
|
||||
if (!text) return '';
|
||||
|
||||
if (text.length <= maxLength) {
|
||||
return text;
|
||||
}
|
||||
|
||||
return text.substring(0, maxLength) + '...';
|
||||
}
|
||||
|
||||
// 获取排名样式类
|
||||
getRankClass(rank) {
|
||||
if (rank === 1) return 'top-1';
|
||||
if (rank === 2) return 'top-2';
|
||||
if (rank === 3) return 'top-3';
|
||||
return 'normal';
|
||||
}
|
||||
}
|
||||
|
||||
// 导出API实例
|
||||
const hotTopicsAPI = new HotTopicsAPI();
|
||||
201
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/app.js
Normal file
201
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/app.js
Normal file
@@ -0,0 +1,201 @@
|
||||
// 主应用程序文件
|
||||
class HotTopicsApp {
|
||||
constructor() {
|
||||
this.isInitialized = false;
|
||||
this.retryCount = 0;
|
||||
this.maxRetries = 3;
|
||||
this.retryDelay = 2000; // 2秒
|
||||
}
|
||||
|
||||
// 初始化应用
|
||||
async init() {
|
||||
if (this.isInitialized) return;
|
||||
|
||||
try {
|
||||
console.log('初始化百度贴吧热搜应用...');
|
||||
|
||||
// 检查必要的元素是否存在
|
||||
this.checkRequiredElements();
|
||||
|
||||
// 加载初始数据
|
||||
await this.loadHotTopics();
|
||||
|
||||
// 设置自动刷新
|
||||
this.setupAutoRefresh();
|
||||
|
||||
// 设置页面可见性监听
|
||||
this.setupVisibilityListener();
|
||||
|
||||
this.isInitialized = true;
|
||||
console.log('应用初始化完成');
|
||||
|
||||
} catch (error) {
|
||||
console.error('应用初始化失败:', error);
|
||||
uiManager.showError('应用初始化失败，请刷新页面重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 检查必要元素
|
||||
checkRequiredElements() {
|
||||
const requiredElements = ['loading', 'error', 'hotList', 'refreshBtn', 'updateTime'];
|
||||
const missingElements = requiredElements.filter(id => !document.getElementById(id));
|
||||
|
||||
if (missingElements.length > 0) {
|
||||
throw new Error(`缺少必要元素: ${missingElements.join(', ')}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载热搜数据
|
||||
async loadHotTopics() {
|
||||
try {
|
||||
console.log('开始获取热搜数据...');
|
||||
uiManager.showLoading();
|
||||
|
||||
const result = await hotTopicsAPI.fetchHotTopics();
|
||||
|
||||
if (result.success) {
|
||||
console.log('数据获取成功:', result.data.data?.length || 0, '条记录');
|
||||
uiManager.renderHotTopics(result.data);
|
||||
this.retryCount = 0; // 重置重试计数
|
||||
|
||||
// 如果是缓存数据，显示提示
|
||||
if (result.isCache) {
|
||||
uiManager.showToast('当前显示缓存数据', 3000);
|
||||
}
|
||||
} else {
|
||||
throw new Error(result.error || '数据获取失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载热搜数据失败:', error);
|
||||
|
||||
// 重试逻辑
|
||||
if (this.retryCount < this.maxRetries) {
|
||||
this.retryCount++;
|
||||
console.log(`第 ${this.retryCount} 次重试...`);
|
||||
|
||||
uiManager.showToast(`加载失败，${this.retryDelay / 1000}秒后重试...`, this.retryDelay);
|
||||
|
||||
setTimeout(() => {
|
||||
this.loadHotTopics();
|
||||
}, this.retryDelay);
|
||||
|
||||
// 增加重试延迟
|
||||
this.retryDelay = Math.min(this.retryDelay * 1.5, 10000);
|
||||
} else {
|
||||
uiManager.showError('数据加载失败，请检查网络连接后重试');
|
||||
this.retryCount = 0;
|
||||
this.retryDelay = 2000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设置自动刷新
|
||||
setupAutoRefresh() {
|
||||
// 每5分钟自动刷新一次
|
||||
setInterval(() => {
|
||||
if (document.visibilityState === 'visible' && !uiManager.isLoading) {
|
||||
console.log('自动刷新数据...');
|
||||
this.loadHotTopics();
|
||||
}
|
||||
}, 5 * 60 * 1000); // 5分钟
|
||||
}
|
||||
|
||||
// 设置页面可见性监听
|
||||
setupVisibilityListener() {
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
// 页面变为可见时，检查是否需要刷新数据
|
||||
const lastUpdate = localStorage.getItem('lastUpdateTime');
|
||||
const now = Date.now();
|
||||
|
||||
if (!lastUpdate || (now - parseInt(lastUpdate)) > 10 * 60 * 1000) {
|
||||
// 超过10分钟没更新，自动刷新
|
||||
console.log('页面重新可见，刷新数据...');
|
||||
this.loadHotTopics();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 手动刷新
|
||||
async refresh() {
|
||||
if (uiManager.isLoading) {
|
||||
console.log('正在加载中，忽略刷新请求');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('手动刷新数据...');
|
||||
this.retryCount = 0;
|
||||
this.retryDelay = 2000;
|
||||
await this.loadHotTopics();
|
||||
}
|
||||
|
||||
// 获取应用状态
|
||||
getStatus() {
|
||||
return {
|
||||
isInitialized: this.isInitialized,
|
||||
isLoading: uiManager.isLoading,
|
||||
retryCount: this.retryCount,
|
||||
lastUpdate: localStorage.getItem('lastUpdateTime')
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 创建应用实例
|
||||
const app = new HotTopicsApp();
|
||||
|
||||
// 全局函数，供HTML调用
|
||||
window.loadHotTopics = () => app.loadHotTopics();
|
||||
window.refreshData = () => app.refresh();
|
||||
window.getAppStatus = () => app.getStatus();
|
||||
|
||||
// 页面加载完成后初始化
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
app.init();
|
||||
});
|
||||
} else {
|
||||
// 如果页面已经加载完成
|
||||
app.init();
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', (event) => {
|
||||
console.error('全局错误:', event.error);
|
||||
|
||||
// 如果是网络错误，显示友好提示
|
||||
if (event.error?.message?.includes('fetch') ||
|
||||
event.error?.message?.includes('network') ||
|
||||
event.error?.message?.includes('Failed to fetch')) {
|
||||
uiManager.showToast('网络连接异常，请检查网络设置');
|
||||
}
|
||||
});
|
||||
|
||||
// 未处理的Promise拒绝
|
||||
window.addEventListener('unhandledrejection', (event) => {
|
||||
console.error('未处理的Promise拒绝:', event.reason);
|
||||
|
||||
// 防止默认的错误处理
|
||||
event.preventDefault();
|
||||
|
||||
// 显示用户友好的错误信息
|
||||
if (event.reason?.message?.includes('fetch') ||
|
||||
event.reason?.message?.includes('network')) {
|
||||
uiManager.showToast('网络请求失败，请稍后重试');
|
||||
}
|
||||
});
|
||||
|
||||
// 导出应用实例（用于调试）
|
||||
window.hotTopicsApp = app;
|
||||
|
||||
// 开发模式下的调试信息
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
console.log('🚀 百度贴吧热搜应用已启动');
|
||||
console.log('📱 响应式设计已启用');
|
||||
console.log('🔄 自动刷新已设置（5分钟间隔）');
|
||||
console.log('💡 可用调试命令:');
|
||||
console.log(' - hotTopicsApp.getStatus() // 获取应用状态');
|
||||
console.log(' - hotTopicsApp.refresh() // 手动刷新');
|
||||
console.log(' - loadHotTopics() // 重新加载数据');
|
||||
}
|
||||
57
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/index.html
Normal file
57
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!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="styles.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<i class="fab fa-reddit-alien"></i>
|
||||
<h1>贴吧热搜</h1>
|
||||
</div>
|
||||
<div class="refresh-btn" id="refreshBtn">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在获取最新热搜...</p>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<div class="error" id="error" style="display: none;">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<p>获取数据失败，请稍后重试</p>
|
||||
<button class="retry-btn" onclick="loadHotTopics()">重新加载</button>
|
||||
</div>
|
||||
|
||||
<!-- 热搜列表 -->
|
||||
<main class="main-content">
|
||||
<div class="hot-list" id="hotList">
|
||||
<!-- 动态生成的热搜项目 -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<footer class="footer">
|
||||
<p class="update-time" id="updateTime">最后更新：--</p>
|
||||
<p class="data-source">数据来源：百度贴吧官方</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="api.js"></script>
|
||||
<script src="ui.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
419
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/styles.css
Normal file
419
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/styles.css
Normal file
@@ -0,0 +1,419 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #e8f5e8 0%, #f9f9e8 50%, #f5f5f5 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
padding: 20px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 0 0 20px 20px;
|
||||
margin-bottom: 20px;
|
||||
z-index: 100;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 28px;
|
||||
color: #7fb069;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #7fb069, #a8cc8c);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(127, 176, 105, 0.3);
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(127, 176, 105, 0.4);
|
||||
}
|
||||
|
||||
.refresh-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.refresh-btn i {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.refresh-btn.loading i {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 3px solid white;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 20px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading p {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.error p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.retry-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 热搜列表 */
|
||||
.hot-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.hot-item-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rank-badge.top-1 {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
||||
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
.rank-badge.top-2 {
|
||||
background: linear-gradient(135deg, #ffa726, #ff7043);
|
||||
box-shadow: 0 4px 15px rgba(255, 167, 38, 0.3);
|
||||
}
|
||||
|
||||
.rank-badge.top-3 {
|
||||
background: linear-gradient(135deg, #ffca28, #ffa000);
|
||||
box-shadow: 0 4px 15px rgba(255, 202, 40, 0.3);
|
||||
}
|
||||
|
||||
.rank-badge.normal {
|
||||
background: linear-gradient(135deg, #7fb069, #a8cc8c);
|
||||
box-shadow: 0 4px 15px rgba(127, 176, 105, 0.3);
|
||||
}
|
||||
|
||||
.hot-item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hot-desc {
|
||||
font-size: 14px;
|
||||
color: #718096;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hot-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hot-score {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #7fb069;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hot-score i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hot-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(127, 176, 105, 0.2);
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.data-source {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.refresh-btn i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.hot-item-header {
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.hot-desc {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-score {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hot-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(127, 176, 105, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hot-desc {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.hot-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.hot-item:nth-child(1) { animation-delay: 0.1s; }
|
||||
.hot-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.hot-item:nth-child(3) { animation-delay: 0.3s; }
|
||||
.hot-item:nth-child(4) { animation-delay: 0.4s; }
|
||||
.hot-item:nth-child(5) { animation-delay: 0.5s; }
|
||||
.hot-item:nth-child(n+6) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
354
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/ui.js
Normal file
354
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/ui.js
Normal file
@@ -0,0 +1,354 @@
|
||||
// UI 渲染和交互模块
|
||||
class UIManager {
|
||||
constructor() {
|
||||
this.elements = {
|
||||
loading: document.getElementById('loading'),
|
||||
error: document.getElementById('error'),
|
||||
hotList: document.getElementById('hotList'),
|
||||
refreshBtn: document.getElementById('refreshBtn'),
|
||||
updateTime: document.getElementById('updateTime')
|
||||
};
|
||||
|
||||
this.isLoading = false;
|
||||
this.initEventListeners();
|
||||
}
|
||||
|
||||
// 初始化事件监听器
|
||||
initEventListeners() {
|
||||
// 刷新按钮点击事件
|
||||
this.elements.refreshBtn.addEventListener('click', () => {
|
||||
if (!this.isLoading) {
|
||||
this.refreshData();
|
||||
}
|
||||
});
|
||||
|
||||
// 键盘快捷键
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
|
||||
e.preventDefault();
|
||||
if (!this.isLoading) {
|
||||
this.refreshData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 下拉刷新（移动端）
|
||||
this.initPullToRefresh();
|
||||
}
|
||||
|
||||
// 初始化下拉刷新
|
||||
initPullToRefresh() {
|
||||
let startY = 0;
|
||||
let currentY = 0;
|
||||
let isPulling = false;
|
||||
const threshold = 80;
|
||||
|
||||
document.addEventListener('touchstart', (e) => {
|
||||
if (window.scrollY === 0) {
|
||||
startY = e.touches[0].clientY;
|
||||
isPulling = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('touchmove', (e) => {
|
||||
if (isPulling && window.scrollY === 0) {
|
||||
currentY = e.touches[0].clientY;
|
||||
const pullDistance = currentY - startY;
|
||||
|
||||
if (pullDistance > 0) {
|
||||
e.preventDefault();
|
||||
|
||||
// 添加视觉反馈
|
||||
if (pullDistance > threshold) {
|
||||
this.elements.refreshBtn.style.transform = 'scale(1.1)';
|
||||
} else {
|
||||
this.elements.refreshBtn.style.transform = 'scale(1)';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', () => {
|
||||
if (isPulling) {
|
||||
const pullDistance = currentY - startY;
|
||||
|
||||
if (pullDistance > threshold && !this.isLoading) {
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
this.elements.refreshBtn.style.transform = 'scale(1)';
|
||||
isPulling = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
showLoading() {
|
||||
this.isLoading = true;
|
||||
this.elements.loading.style.display = 'block';
|
||||
this.elements.error.style.display = 'none';
|
||||
this.elements.hotList.style.display = 'none';
|
||||
this.elements.refreshBtn.classList.add('loading');
|
||||
}
|
||||
|
||||
// 隐藏加载状态
|
||||
hideLoading() {
|
||||
this.isLoading = false;
|
||||
this.elements.loading.style.display = 'none';
|
||||
this.elements.refreshBtn.classList.remove('loading');
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
showError(message = '获取数据失败，请稍后重试') {
|
||||
this.hideLoading();
|
||||
this.elements.error.style.display = 'block';
|
||||
this.elements.hotList.style.display = 'none';
|
||||
|
||||
const errorText = this.elements.error.querySelector('p');
|
||||
if (errorText) {
|
||||
errorText.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
// 显示热搜列表
|
||||
showHotList() {
|
||||
this.hideLoading();
|
||||
this.elements.error.style.display = 'none';
|
||||
this.elements.hotList.style.display = 'grid';
|
||||
}
|
||||
|
||||
// 渲染热搜数据
|
||||
renderHotTopics(data) {
|
||||
if (!data || !data.data || !Array.isArray(data.data)) {
|
||||
this.showError('数据格式错误');
|
||||
return;
|
||||
}
|
||||
|
||||
const hotTopics = data.data;
|
||||
this.elements.hotList.innerHTML = '';
|
||||
|
||||
hotTopics.forEach((topic, index) => {
|
||||
const hotItem = this.createHotItem(topic, index);
|
||||
this.elements.hotList.appendChild(hotItem);
|
||||
});
|
||||
|
||||
this.showHotList();
|
||||
this.updateTimestamp(data.isCache);
|
||||
}
|
||||
|
||||
// 创建热搜项目元素
|
||||
createHotItem(topic, index) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'hot-item';
|
||||
item.style.animationDelay = `${index * 0.1}s`;
|
||||
|
||||
// 处理数据
|
||||
const rank = topic.rank || (index + 1);
|
||||
const title = hotTopicsAPI.truncateText(topic.title, 80);
|
||||
const desc = hotTopicsAPI.truncateText(topic.desc, 120);
|
||||
const score = hotTopicsAPI.formatScore(topic.score, topic.score_desc);
|
||||
const avatarUrl = hotTopicsAPI.processImageUrl(topic.avatar);
|
||||
const topicUrl = hotTopicsAPI.processTopicUrl(topic.url);
|
||||
const rankClass = hotTopicsAPI.getRankClass(rank);
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="hot-item-header">
|
||||
<div class="rank-badge ${rankClass}">
|
||||
${rank}
|
||||
</div>
|
||||
<div class="hot-item-content">
|
||||
<h3 class="hot-title">${title}</h3>
|
||||
<p class="hot-desc">${desc}</p>
|
||||
<div class="hot-meta">
|
||||
<div class="hot-score">
|
||||
<i class="fas fa-fire"></i>
|
||||
<span>${score}</span>
|
||||
</div>
|
||||
${avatarUrl ? `<img class="hot-avatar" src="${avatarUrl}" alt="话题图片" onerror="this.style.display='none'">` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 添加点击事件
|
||||
item.addEventListener('click', () => {
|
||||
this.openTopic(topicUrl, title);
|
||||
});
|
||||
|
||||
// 添加长按事件（移动端）
|
||||
let pressTimer;
|
||||
item.addEventListener('touchstart', (e) => {
|
||||
pressTimer = setTimeout(() => {
|
||||
this.showTopicMenu(topic, e.touches[0].clientX, e.touches[0].clientY);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
item.addEventListener('touchend', () => {
|
||||
clearTimeout(pressTimer);
|
||||
});
|
||||
|
||||
item.addEventListener('touchmove', () => {
|
||||
clearTimeout(pressTimer);
|
||||
});
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
// 打开话题链接
|
||||
openTopic(url, title) {
|
||||
if (url && url !== '#') {
|
||||
// 在新窗口打开
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
} else {
|
||||
this.showToast('链接暂不可用');
|
||||
}
|
||||
}
|
||||
|
||||
// 显示话题菜单（长按）
|
||||
showTopicMenu(topic, x, y) {
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'topic-menu';
|
||||
menu.style.cssText = `
|
||||
position: fixed;
|
||||
left: ${x}px;
|
||||
top: ${y}px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||||
padding: 8px 0;
|
||||
z-index: 1000;
|
||||
min-width: 120px;
|
||||
`;
|
||||
|
||||
const actions = [
|
||||
{ text: '打开链接', action: () => this.openTopic(hotTopicsAPI.processTopicUrl(topic.url), topic.title) },
|
||||
{ text: '复制标题', action: () => this.copyText(topic.title) },
|
||||
{ text: '分享', action: () => this.shareContent(topic) }
|
||||
];
|
||||
|
||||
actions.forEach(action => {
|
||||
const item = document.createElement('div');
|
||||
item.textContent = action.text;
|
||||
item.style.cssText = `
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
`;
|
||||
item.addEventListener('click', () => {
|
||||
action.action();
|
||||
document.body.removeChild(menu);
|
||||
});
|
||||
menu.appendChild(item);
|
||||
});
|
||||
|
||||
document.body.appendChild(menu);
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', function closeMenu() {
|
||||
if (document.body.contains(menu)) {
|
||||
document.body.removeChild(menu);
|
||||
}
|
||||
document.removeEventListener('click', closeMenu);
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 复制文本
|
||||
async copyText(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
this.showToast('已复制到剪贴板');
|
||||
} catch (error) {
|
||||
console.error('复制失败:', error);
|
||||
this.showToast('复制失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 分享内容
|
||||
async shareContent(topic) {
|
||||
const shareData = {
|
||||
title: topic.title,
|
||||
text: topic.desc,
|
||||
url: hotTopicsAPI.processTopicUrl(topic.url)
|
||||
};
|
||||
|
||||
try {
|
||||
if (navigator.share) {
|
||||
await navigator.share(shareData);
|
||||
} else {
|
||||
// 降级到复制链接
|
||||
await this.copyText(`${topic.title} - ${shareData.url}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('分享失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示提示消息
|
||||
showToast(message, duration = 2000) {
|
||||
const toast = document.createElement('div');
|
||||
toast.textContent = message;
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
animation: fadeInUp 0.3s ease;
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'fadeOut 0.3s ease';
|
||||
setTimeout(() => {
|
||||
if (document.body.contains(toast)) {
|
||||
document.body.removeChild(toast);
|
||||
}
|
||||
}, 300);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
// 更新时间戳
|
||||
updateTimestamp(isCache = false) {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const cacheText = isCache ? ' (缓存数据)' : '';
|
||||
this.elements.updateTime.textContent = `最后更新：${timeString}${cacheText}`;
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
async refreshData() {
|
||||
if (window.loadHotTopics) {
|
||||
await window.loadHotTopics();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出UI管理器实例
|
||||
const uiManager = new UIManager();
|
||||
|
||||
// 添加CSS动画
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
to { opacity: 0; transform: translateX(-50%) translateY(10px); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
306
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/返回接口.json
Normal file
306
InfoGenie-frontend/public/60sapi/热搜榜单/百度贴吧话题榜/返回接口.json
Normal file
@@ -0,0 +1,306 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"rank": 1,
|
||||
"title": "MAGA喉舌被枪杀,川普为其降半旗",
|
||||
"desc": "美国知名保守派活动人士、特朗普的政治盟友查理·柯克在大学演讲时遭枪击身亡，特朗普下令全美降半旗致哀。",
|
||||
"abstract": "美国知名保守派活动人士、特朗普的政治盟友查理·柯克在大学演讲时遭枪击身亡，特朗普下令全美降半旗致哀。",
|
||||
"score": 1594980,
|
||||
"score_desc": "159.5w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=7fd9bdea3ad98d1076815f714702803a/a9d3fd1f4134970a614a3b39d3cad1c8a7865dee.jpg?tbpicau=2025-09-22-05_85ec313083b76eb31917067b6948c007",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344923&topic_name=MAGA%E5%96%89%E8%88%8C%E8%A2%AB%E6%9E%AA%E6%9D%80%2C%E5%B7%9D%E6%99%AE%E4%B8%BA%E5%85%B6%E9%99%8D%E5%8D%8A%E6%97%97"
|
||||
},
|
||||
{
|
||||
"rank": 2,
|
||||
"title": "上膛!南理工打响整肃伪拳第一枪",
|
||||
"desc": "终于有学校开了个好头，南京理工大学打响了武汉大学事件之后高校反对极端女权的第一枪。国防七子就是不一样，支持南理工！",
|
||||
"abstract": "终于有学校开了个好头，南京理工大学打响了武汉大学事件之后高校反对极端女权的第一枪。国防七子就是不一样，支持南理工！",
|
||||
"score": 1585575,
|
||||
"score_desc": "158.56w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=45147a89e20f4bfb8c85cd14657240c4/8b13632762d0f703569980ca4efa513d2697c5f9.jpg?tbpicau=2025-09-22-05_8d101b01ab9f7032a8943a8ad9ad3591",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344934&topic_name=%E4%B8%8A%E8%86%9B%21%E5%8D%97%E7%90%86%E5%B7%A5%E6%89%93%E5%93%8D%E6%95%B4%E8%82%83%E4%BC%AA%E6%8B%B3%E7%AC%AC%E4%B8%80%E6%9E%AA"
|
||||
},
|
||||
{
|
||||
"rank": 3,
|
||||
"title": "武大暗中篡改?杨某论文再次上架",
|
||||
"desc": "又反转！武汉大学杨某媛“金牌”论文半夜又偷偷重新上架知网，不会是武大偷改好的版本吧，等热度一过就开始岁月史书？",
|
||||
"abstract": "又反转！武汉大学杨某媛“金牌”论文半夜又偷偷重新上架知网，不会是武大偷改好的版本吧，等热度一过就开始岁月史书？",
|
||||
"score": 1265376,
|
||||
"score_desc": "126.54w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=e3f59fed7fdbb6fd250eb6666f19932c/8601a18b87d6277f2c00192e6e381f30e924fc92.jpg?tbpicau=2025-09-22-05_8c33e404e8488061ca9169977a762457",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344925&topic_name=%E6%AD%A6%E5%A4%A7%E6%9A%97%E4%B8%AD%E7%AF%A1%E6%94%B9%3F%E6%9D%A8%E6%9F%90%E8%AE%BA%E6%96%87%E5%86%8D%E6%AC%A1%E4%B8%8A%E6%9E%B6"
|
||||
},
|
||||
{
|
||||
"rank": 4,
|
||||
"title": "兽王关键吼,XG大逆风翻盘石头人",
|
||||
"desc": "落后1W6翻盘，Xxs刷新兽王关键吼，AME巨魔diff水晶。XG1比0石头人，拿下正赛首局，加油！",
|
||||
"abstract": "落后1W6翻盘，Xxs刷新兽王关键吼，AME巨魔diff水晶。XG1比0石头人，拿下正赛首局，加油！",
|
||||
"score": 893943,
|
||||
"score_desc": "89.39w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=882897db1466d0167e4ccd68f116ec33/86d6277f9e2f070899cb3e16af24b899a801f2de.jpg?tbpicau=2025-09-22-05_625c74153fe7c84accea9ea76d88097b",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344941&topic_name=%E5%85%BD%E7%8E%8B%E5%85%B3%E9%94%AE%E5%90%BC%2CXG%E5%A4%A7%E9%80%86%E9%A3%8E%E7%BF%BB%E7%9B%98%E7%9F%B3%E5%A4%B4%E4%BA%BA"
|
||||
},
|
||||
{
|
||||
"rank": 5,
|
||||
"title": "户圣开炮,安卓旗舰谁敢买?",
|
||||
"desc": "户晨风再现逆天言论，苹果17发布，安卓中高端机遭遇灭顶之灾，两千五以上没人买，有能力的一定要给父母换iPhone！",
|
||||
"abstract": "户晨风再现逆天言论，苹果17发布，安卓中高端机遭遇灭顶之灾，两千五以上没人买，有能力的一定要给父母换iPhone！",
|
||||
"score": 766532,
|
||||
"score_desc": "76.65w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=0eb028f7692eb938ec3829b2b35fbd01/c8177f3e6709c93d2a9825e1d93df8dcd10054b9.jpg?tbpicau=2025-09-22-05_a331d216b4e47c0049889f880fe693e3",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344926&topic_name=%E6%88%B7%E5%9C%A3%E5%BC%80%E7%82%AE%2C%E5%AE%89%E5%8D%93%E6%97%97%E8%88%B0%E8%B0%81%E6%95%A2%E4%B9%B0%3F"
|
||||
},
|
||||
{
|
||||
"rank": 6,
|
||||
"title": "成都诬告偷拍败诉!小叶还能怎?",
|
||||
"desc": "成都地铁诬告偷拍案二审维持原判，追风小叶维权失败，吧友锐评温和派的路走到头了。",
|
||||
"abstract": "成都地铁诬告偷拍案二审维持原判，追风小叶维权失败，吧友锐评温和派的路走到头了。",
|
||||
"score": 663175,
|
||||
"score_desc": "66.32w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=9b41180f6bf5e0feee4dda413a5d0c9c/8694a4c27d1ed21b65aa39f3eb6eddc451da3f40.jpg?tbpicau=2025-09-22-05_db6b89b7846083172cde82c7146ebddc",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344942&topic_name=%E6%88%90%E9%83%BD%E8%AF%AC%E5%91%8A%E5%81%B7%E6%8B%8D%E8%B4%A5%E8%AF%89%21%E5%B0%8F%E5%8F%B6%E8%BF%98%E8%83%BD%E6%80%8E%3F"
|
||||
},
|
||||
{
|
||||
"rank": 7,
|
||||
"title": "绝密飙至60w,盾奶开始泛滥",
|
||||
"desc": "三角洲战备猛涨，玩家钱包 “躺平”！那些攥得紧紧、舍不得动的家底，这下不得不掏出来，打工一局倒贴钱，谁顶得住？",
|
||||
"abstract": "三角洲战备猛涨，玩家钱包 “躺平”！那些攥得紧紧、舍不得动的家底，这下不得不掏出来，打工一局倒贴钱，谁顶得住？",
|
||||
"score": 590856,
|
||||
"score_desc": "59.09w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=61af83ea3ad98d1076815f714702803a/a9d3fd1f4134970a7f3c0539d3cad1c8a7865d5c.jpg?tbpicau=2025-09-22-05_82bc9423e1e1b97f3c071ce96e1cf7e4",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344936&topic_name=%E7%BB%9D%E5%AF%86%E9%A3%99%E8%87%B360w%2C%E7%9B%BE%E5%A5%B6%E5%BC%80%E5%A7%8B%E6%B3%9B%E6%BB%A5"
|
||||
},
|
||||
{
|
||||
"rank": 8,
|
||||
"title": "邓紫棋被扒抢闺蜜男友博上位",
|
||||
"desc": "邓紫棋被曝实锤撬闺蜜墙角，硬生生抢走正与闺蜜浓情蜜意的男友魏俊杰。事后为掩人耳目，还接连拉华晨宇、林宥嘉的绯闻来挡枪，一波操作引得舆论炸开了锅，粉丝纷纷 “跑路” 。",
|
||||
"abstract": "邓紫棋被曝实锤撬闺蜜墙角，硬生生抢走正与闺蜜浓情蜜意的男友魏俊杰。事后为掩人耳目，还接连拉华晨宇、林宥嘉的绯闻来挡枪，一波操作引得舆论炸开了锅，粉丝纷纷 “跑路” 。",
|
||||
"score": 506184,
|
||||
"score_desc": "50.62w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=4d464c04094a20a4314b6f87f66fa016/30adcbef76094b36a2ff0ffbe5cc7cd98d109db2.jpg?tbpicau=2025-09-22-05_ed8c8f84187ef131dbb94421e614577b",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344937&topic_name=%E9%82%93%E7%B4%AB%E6%A3%8B%E8%A2%AB%E6%89%92%E6%8A%A2%E9%97%BA%E8%9C%9C%E7%94%B7%E5%8F%8B%E5%8D%9A%E4%B8%8A%E4%BD%8D"
|
||||
},
|
||||
{
|
||||
"rank": 9,
|
||||
"title": "小红书被掘,薯民赛博戒网瘾",
|
||||
"desc": "今天，网信办对小红书平台采取约谈、责令限期改正、警告、从严处理责任人等处置处罚措施。这下薯民们该何去何从？",
|
||||
"abstract": "今天，网信办对小红书平台采取约谈、责令限期改正、警告、从严处理责任人等处置处罚措施。这下薯民们该何去何从？",
|
||||
"score": 471548,
|
||||
"score_desc": "47.15w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=51c0d93fc018367aaddc2c9d484eb3e0/bf096b63f6246b60eda2a662adf81a4c510fa27c.jpg?tbpicau=2025-09-22-05_61c56fced5303058de8e34d5f5c2f858",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344940&topic_name=%E5%B0%8F%E7%BA%A2%E4%B9%A6%E8%A2%AB%E6%8E%98%2C%E8%96%AF%E6%B0%91%E8%B5%9B%E5%8D%9A%E6%88%92%E7%BD%91%E7%98%BE"
|
||||
},
|
||||
{
|
||||
"rank": 10,
|
||||
"title": "以军喊话轰全球:导弹是不长眼的",
|
||||
"desc": "轰炸卡塔尔后以总理喊话全世界，称自己要效仿美国“9·11”事件后的行动，谁敢窝藏恐怖分子，以色列统统揍个遍！",
|
||||
"abstract": "轰炸卡塔尔后以总理喊话全世界，称自己要效仿美国“9·11”事件后的行动，谁敢窝藏恐怖分子，以色列统统揍个遍！",
|
||||
"score": 415002,
|
||||
"score_desc": "41.5w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=6e77f03535f082022dc7c27f2dc6c3d9/562c11dfa9ec8a13a01b43f6b103918fa0ecc0a7.jpg?tbpicau=2025-09-22-05_492a74721d2be35b494d022729ab3727",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344938&topic_name=%E4%BB%A5%E5%86%9B%E5%96%8A%E8%AF%9D%E8%BD%B0%E5%85%A8%E7%90%83%3A%E5%AF%BC%E5%BC%B9%E6%98%AF%E4%B8%8D%E9%95%BF%E7%9C%BC%E7%9A%84"
|
||||
},
|
||||
{
|
||||
"rank": 11,
|
||||
"title": "照抄还耗时?紫龙延迟补偿抠到爆",
|
||||
"desc": "《第七史诗》紫龙又拉了，都25年了居然在白天维护服务器长达11个小时。延长这么久不说，打发玩家2000体力就想当无事发生，最起码补个光暗自选吧？",
|
||||
"abstract": "《第七史诗》紫龙又拉了，都25年了居然在白天维护服务器长达11个小时。延长这么久不说，打发玩家2000体力就想当无事发生，最起码补个光暗自选吧？",
|
||||
"score": 316800,
|
||||
"score_desc": "31.68w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=4c344da7c60a19d8cb56d74555c7babf/7a899e510fb30f24c22cf8158e95d143ad4b0375.jpg?tbpicau=2025-09-22-05_ea3299a237a4be90f638d6f54ddfaee7",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344939&topic_name=%E7%85%A7%E6%8A%84%E8%BF%98%E8%80%97%E6%97%B6%3F%E7%B4%AB%E9%BE%99%E5%BB%B6%E8%BF%9F%E8%A1%A5%E5%81%BF%E6%8A%A0%E5%88%B0%E7%88%86"
|
||||
},
|
||||
{
|
||||
"rank": 12,
|
||||
"title": "苹果是懂得维护韩男自尊心的",
|
||||
"desc": "苹果市场部很懂韩国国情，还特意把新机海报上的敏感手势去掉了。",
|
||||
"abstract": "苹果市场部很懂韩国国情，还特意把新机海报上的敏感手势去掉了。",
|
||||
"score": 296609,
|
||||
"score_desc": "29.66w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=16bc6dd6c4025aafd3672d8b9dd09350/10dfa9ec8a136327a57fe925d78fa0ec08fac712.jpg?tbpicau=2025-09-22-05_6d1258c530ad80062d801a0cdf3878c4",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344930&topic_name=%E8%8B%B9%E6%9E%9C%E6%98%AF%E6%87%82%E5%BE%97%E7%BB%B4%E6%8A%A4%E9%9F%A9%E7%94%B7%E8%87%AA%E5%B0%8A%E5%BF%83%E7%9A%84"
|
||||
},
|
||||
{
|
||||
"rank": 13,
|
||||
"title": "米家胜!二游大逃杀,原神未滑档",
|
||||
"desc": "国内畅销榜上，一众作品竞逐热度之际，《原神》稳居前列，凭独特玩法持续圈粉。网友直言：原神团队定是藏着 “神人”，决策方向始终正确，精准踩中玩家心巴。",
|
||||
"abstract": "国内畅销榜上，一众作品竞逐热度之际，《原神》稳居前列，凭独特玩法持续圈粉。网友直言：原神团队定是藏着 “神人”，决策方向始终正确，精准踩中玩家心巴。",
|
||||
"score": 210780,
|
||||
"score_desc": "21.08w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=606b285c9cb44aed591beda4d521bf35/f7246b600c3387440d8b046a170fd9f9d72aa05e.jpg?tbpicau=2025-09-22-05_ac66e09b0535bcca38158c54002fa3c7",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344927&topic_name=%E7%B1%B3%E5%AE%B6%E8%83%9C%21%E4%BA%8C%E6%B8%B8%E5%A4%A7%E9%80%83%E6%9D%80%2C%E5%8E%9F%E7%A5%9E%E6%9C%AA%E6%BB%91%E6%A1%A3"
|
||||
},
|
||||
{
|
||||
"rank": 14,
|
||||
"title": "秽土转生失败,动漫之家GG",
|
||||
"desc": "动漫之家，终究还是停运了。起初反复刷新，还以为是网络出了问题，没想到它已经走了有一会儿了。这个无数漫迷的 “秘密基地”，如今却在激烈竞争与种种困境中再也回不来了。",
|
||||
"abstract": "动漫之家，终究还是停运了。起初反复刷新，还以为是网络出了问题，没想到它已经走了有一会儿了。这个无数漫迷的 “秘密基地”，如今却在激烈竞争与种种困境中再也回不来了。",
|
||||
"score": 207264,
|
||||
"score_desc": "20.73w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=0db5d97a563853438c9ad461f52e884a/bd315c6034a85edfb52ed4350f540923dd547501.jpg?tbpicau=2025-09-22-05_9adff68227c9f67304fffc1a2731d758",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344932&topic_name=%E7%A7%BD%E5%9C%9F%E8%BD%AC%E7%94%9F%E5%A4%B1%E8%B4%A5%2C%E5%8A%A8%E6%BC%AB%E4%B9%8B%E5%AE%B6GG"
|
||||
},
|
||||
{
|
||||
"rank": 15,
|
||||
"title": "张本两连败大飞,日男全军覆没",
|
||||
"desc": "WTT澳门冠军赛男单1/16决赛，薛飞把张本智和打静音，横扫日乒一哥晋级，至此日本男队全部出局，这下真爆冷了。",
|
||||
"abstract": "WTT澳门冠军赛男单1/16决赛，薛飞把张本智和打静音，横扫日乒一哥晋级，至此日本男队全部出局，这下真爆冷了。",
|
||||
"score": 179152,
|
||||
"score_desc": "17.92w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=1be7d7b39743ad4ba67b1580e43f629b/0bd162d9f2d3572cd30bb6cacc13632762d0c33f.jpg?tbpicau=2025-09-22-05_c5e594913af43484029ee1ccf719ee0a",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344933&topic_name=%E5%BC%A0%E6%9C%AC%E4%B8%A4%E8%BF%9E%E8%B4%A5%E5%A4%A7%E9%A3%9E%2C%E6%97%A5%E7%94%B7%E5%85%A8%E5%86%9B%E8%A6%86%E6%B2%A1"
|
||||
},
|
||||
{
|
||||
"rank": 16,
|
||||
"title": "拳愿323:抽象的征西派内战",
|
||||
"desc": "拳愿奥米迦323话大更：征西派的裂痕与王马的抉择，爱德华回生能力过于劣质，雷庵表现力太逆天，怕不是要成为决赛圈垫脚石？",
|
||||
"abstract": "拳愿奥米迦323话大更：征西派的裂痕与王马的抉择，爱德华回生能力过于劣质，雷庵表现力太逆天，怕不是要成为决赛圈垫脚石？",
|
||||
"score": 144915,
|
||||
"score_desc": "14.49w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=65d67ff6b103918fd7846e8a37001ea3/b17eca8065380cd797d28afbe744ad34588281d3.jpg?tbpicau=2025-09-22-05_d45822c1109107fa7baacd2b01fefb61",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344924&topic_name=%E6%8B%B3%E6%84%BF323%3A%E6%8A%BD%E8%B1%A1%E7%9A%84%E5%BE%81%E8%A5%BF%E6%B4%BE%E5%86%85%E6%88%98"
|
||||
},
|
||||
{
|
||||
"rank": 17,
|
||||
"title": "TES 3-1踩头WBG,灯皇薇恩送好局",
|
||||
"desc": "LPL季后赛，TES对阵WBG。Light薇恩0输出葬送优势局，Kanavi潘森天降弑神，最终TES 3-1 WBG挺进胜决。",
|
||||
"abstract": "LPL季后赛，TES对阵WBG。Light薇恩0输出葬送优势局，Kanavi潘森天降弑神，最终TES 3-1 WBG挺进胜决。",
|
||||
"score": 108556,
|
||||
"score_desc": "10.86w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=75e5576c66a446237e9ff622fe1f4a3a/caef76094b36acaf361abbea3ad98d1001e99c29.jpg?tbpicau=2025-09-22-05_dda77f28de2da58e81fcd3b6ff5aaacc",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344917&topic_name=TES%203-1%E8%B8%A9%E5%A4%B4WBG%2C%E7%81%AF%E7%9A%87%E8%96%87%E6%81%A9%E9%80%81%E5%A5%BD%E5%B1%80"
|
||||
},
|
||||
{
|
||||
"rank": 18,
|
||||
"title": "师出有名,黄岩岛建立保护区",
|
||||
"desc": "字少事大，国务院批复同意新建黄岩岛国家级自然保护区，隔壁菲猴还敢乱来吗？",
|
||||
"abstract": "字少事大，国务院批复同意新建黄岩岛国家级自然保护区，隔壁菲猴还敢乱来吗？",
|
||||
"score": 98280,
|
||||
"score_desc": "9.83w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=31dba91375fa828bd176cea39b227900/43a7d933c895d14320aec93535f082025baf07cf.jpg?tbpicau=2025-09-22-05_b0badf07bc38a792ed54b85bb056f5aa",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344916&topic_name=%E5%B8%88%E5%87%BA%E6%9C%89%E5%90%8D%2C%E9%BB%84%E5%B2%A9%E5%B2%9B%E5%BB%BA%E7%AB%8B%E4%BF%9D%E6%8A%A4%E5%8C%BA"
|
||||
},
|
||||
{
|
||||
"rank": 19,
|
||||
"title": "9月10日乐子限定",
|
||||
"desc": "沪姐大战彩礼女，年轻人为了台苹果机不择手段，来看看昨天都有哪些乐子。",
|
||||
"abstract": "沪姐大战彩礼女，年轻人为了台苹果机不择手段，来看看昨天都有哪些乐子。",
|
||||
"score": 75660,
|
||||
"score_desc": "7.57w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=f4c1e0dce951f3dec3e7ea24f2d3c82b/c9fcc3cec3fdfc03fb92cbae923f8794a4c22639.jpg?tbpicau=2025-09-22-05_04534fa7edbe9fa62b6c5170f11f6d42",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344922&topic_name=9%E6%9C%8810%E6%97%A5%E4%B9%90%E5%AD%90%E9%99%90%E5%AE%9A"
|
||||
},
|
||||
{
|
||||
"rank": 20,
|
||||
"title": "每天一个宝藏吧——meme图吧",
|
||||
"desc": "一个用梗图交流、靠表情包续命的赛博快乐老家，进来一个meme图小白，出去就是万人敬仰的meme图大师！",
|
||||
"abstract": "一个用梗图交流、靠表情包续命的赛博快乐老家，进来一个meme图小白，出去就是万人敬仰的meme图大师！",
|
||||
"score": 64691,
|
||||
"score_desc": "6.47w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=366db542454f78f0805ec9b31f0c3261/908fa0ec08fa513deb1747c87b6d55fbb2fbd963.jpg?tbpicau=2025-09-22-05_0f79439d4fa718dccec3909f1093b1a0",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344928&topic_name=%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E5%AE%9D%E8%97%8F%E5%90%A7%E2%80%94%E2%80%94meme%E5%9B%BE%E5%90%A7"
|
||||
},
|
||||
{
|
||||
"rank": 21,
|
||||
"title": "向鹏不敌德国选手,无缘十六强",
|
||||
"desc": "在2025年世界乒乓球职业大联盟澳门冠军赛男子单打首轮比赛中，中国选手向鹏2比3不敌德国选手弗朗西斯卡，无缘16强。",
|
||||
"abstract": "在2025年世界乒乓球职业大联盟澳门冠军赛男子单打首轮比赛中，中国选手向鹏2比3不敌德国选手弗朗西斯卡，无缘16强。",
|
||||
"score": 51010,
|
||||
"score_desc": "5.1w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=5110a6270c90f60304e5cf075f2f8b2f/91529822720e0cf30c5864ed4c46f21fbe09aa7d.jpg?tbpicau=2025-09-22-05_6494ac6b728dc643d62ecdfec9ffc10f",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344931&topic_name=%E5%90%91%E9%B9%8F%E4%B8%8D%E6%95%8C%E5%BE%B7%E5%9B%BD%E9%80%89%E6%89%8B%2C%E6%97%A0%E7%BC%98%E5%8D%81%E5%85%AD%E5%BC%BA"
|
||||
},
|
||||
{
|
||||
"rank": 22,
|
||||
"title": "Faker虐爆许秀,T1险胜DK",
|
||||
"desc": "绝境Faker再现！T1 3-2险胜DK，决胜局T1凭借关键团战逆转取胜。",
|
||||
"abstract": "绝境Faker再现！T1 3-2险胜DK，决胜局T1凭借关键团战逆转取胜。",
|
||||
"score": 47646,
|
||||
"score_desc": "4.76w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=9d867145b0246b607b5be1348dc52278/55e736d12f2eb938b8df55e493628535e5dd6f71.jpg?tbpicau=2025-09-22-05_a1bfae75faab275c23b0f53a0a5b06ef",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344913&topic_name=Faker%E8%99%90%E7%88%86%E8%AE%B8%E7%A7%80%2CT1%E9%99%A9%E8%83%9CDK"
|
||||
},
|
||||
{
|
||||
"rank": 23,
|
||||
"title": "张雪峰愿捐款打台独,媒体狂吠狠批",
|
||||
"desc": "张雪峰说打台独自己捐五千万，大象新闻直接来了个大长篇，上来就给一个普通中国人的朴素爱国情怀扣上“鼓吹战争”的帽子，搞媒体的就这种素质？",
|
||||
"abstract": "张雪峰说打台独自己捐五千万，大象新闻直接来了个大长篇，上来就给一个普通中国人的朴素爱国情怀扣上“鼓吹战争”的帽子，搞媒体的就这种素质？",
|
||||
"score": 40064,
|
||||
"score_desc": "4.01w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=2e4fc1ec3dcb0a468577d8790d5ece10/00e93901213fb80e595042c170d12f2eb9389426.jpg?tbpicau=2025-09-22-05_6e078e9f935aa244e26346ab37187ee2",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344910&topic_name=%E5%BC%A0%E9%9B%AA%E5%B3%B0%E6%84%BF%E6%8D%90%E6%AC%BE%E6%89%93%E5%8F%B0%E7%8B%AC%2C%E5%AA%92%E4%BD%93%E7%8B%82%E5%90%A0%E7%8B%A0%E6%89%B9"
|
||||
},
|
||||
{
|
||||
"rank": 24,
|
||||
"title": "美军压境,委内瑞拉急盼歼10C",
|
||||
"desc": "美军F-35A压境加勒比，委内瑞拉方寸大乱，紧急寻求采购歼10C。",
|
||||
"abstract": "美军F-35A压境加勒比，委内瑞拉方寸大乱，紧急寻求采购歼10C。",
|
||||
"score": 38052,
|
||||
"score_desc": "3.81w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=90d8a718f73533faf5e3c06eceeec52b/0e2442a7d933c8955843b66d971373f0820200e2.jpg?tbpicau=2025-09-22-05_f8126e747fe76e25cfd9b3d3a75d1d54",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344921&topic_name=%E7%BE%8E%E5%86%9B%E5%8E%8B%E5%A2%83%2C%E5%A7%94%E5%86%85%E7%91%9E%E6%8B%89%E6%80%A5%E7%9B%BC%E6%AD%BC10C"
|
||||
},
|
||||
{
|
||||
"rank": 25,
|
||||
"title": "真男人!海贼王龙哥射杀天龙人",
|
||||
"desc": "海贼王1160话情报，龙开枪射击天龙人，救下红发双胞胎。昔日流汗王风评反转，龙哥成为海贼最有种的男人。",
|
||||
"abstract": "海贼王1160话情报，龙开枪射击天龙人，救下红发双胞胎。昔日流汗王风评反转，龙哥成为海贼最有种的男人。",
|
||||
"score": 26682,
|
||||
"score_desc": "2.67w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=f8cb34fbe5cc7cd9fa7867995f3c190b/a71ea8d3fd1f4134c36e2a68631f95cad1c85e4e.jpg?tbpicau=2025-09-22-05_6853585b745b7349ad45ef38cf6df62f",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344920&topic_name=%E7%9C%9F%E7%94%B7%E4%BA%BA%21%E6%B5%B7%E8%B4%BC%E7%8E%8B%E9%BE%99%E5%93%A5%E5%B0%84%E6%9D%80%E5%A4%A9%E9%BE%99%E4%BA%BA"
|
||||
},
|
||||
{
|
||||
"rank": 26,
|
||||
"title": "三角洲免费送点券,玩家争当洲孝子",
|
||||
"desc": "三角洲行动周年庆福利拉满，免费送3900三角券。玩家火速倒戈，暂停讨伐制作组，怒赞策划太良心。",
|
||||
"abstract": "三角洲行动周年庆福利拉满，免费送3900三角券。玩家火速倒戈，暂停讨伐制作组，怒赞策划太良心。",
|
||||
"score": 25255,
|
||||
"score_desc": "2.53w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=c4d99672d2eef01f4d414b8586c3a111/9345d688d43f8794d4946738941b0ef41bd53ab8.jpg?tbpicau=2025-09-22-05_a2046d59aca4681d2f9495edce4c3b25",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344919&topic_name=%E4%B8%89%E8%A7%92%E6%B4%B2%E5%85%8D%E8%B4%B9%E9%80%81%E7%82%B9%E5%88%B8%2C%E7%8E%A9%E5%AE%B6%E4%BA%89%E5%BD%93%E6%B4%B2%E5%AD%9D%E5%AD%90"
|
||||
},
|
||||
{
|
||||
"rank": 27,
|
||||
"title": "以空袭卡塔尔,暗杀哈马斯未得逞",
|
||||
"desc": "以色列对身处卡塔尔首都多哈的哈马斯领导层发动所谓精准打击，并证实哈马斯5名成员死于以军空袭，但以方暗杀哈马斯高层的图谋未能得逞。",
|
||||
"abstract": "以色列对身处卡塔尔首都多哈的哈马斯领导层发动所谓精准打击，并证实哈马斯5名成员死于以军空袭，但以方暗杀哈马斯高层的图谋未能得逞。",
|
||||
"score": 20900,
|
||||
"score_desc": "2.09w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=5eb82d27673fb80e0c84329750ec171a/314e251f95cad1c8f8d7dd31393e6709c93d51b3.jpg?tbpicau=2025-09-22-05_cf088fe88563cb500e0581d892800736",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344898&topic_name=%E4%BB%A5%E7%A9%BA%E8%A2%AD%E5%8D%A1%E5%A1%94%E5%B0%94%2C%E6%9A%97%E6%9D%80%E5%93%88%E9%A9%AC%E6%96%AF%E6%9C%AA%E5%BE%97%E9%80%9E"
|
||||
},
|
||||
{
|
||||
"rank": 28,
|
||||
"title": "局座出山,战忽局要开工了?",
|
||||
"desc": "神隐五年之后，被网友戏称“战略忽悠局局长”的军事评论家张召忠重出江湖参加讲座。国际局势风云变幻，战忽局还有市场吗？",
|
||||
"abstract": "神隐五年之后，被网友戏称“战略忽悠局局长”的军事评论家张召忠重出江湖参加讲座。国际局势风云变幻，战忽局还有市场吗？",
|
||||
"score": 20166,
|
||||
"score_desc": "2.02w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=c4150e6a170fd9f9a04206294310ec1e/d4628535e5dde711bf0262e0e1efce1b9c1661d7.jpg?tbpicau=2025-09-22-05_f7db127146ec115d51ff7ede6261253e",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344903&topic_name=%E5%B1%80%E5%BA%A7%E5%87%BA%E5%B1%B1%2C%E6%88%98%E5%BF%BD%E5%B1%80%E8%A6%81%E5%BC%80%E5%B7%A5%E4%BA%86%3F"
|
||||
},
|
||||
{
|
||||
"rank": 29,
|
||||
"title": "丝之歌光速滑跪,更新补丁降难度",
|
||||
"desc": "《空洞骑士：丝之歌》游戏难度逆天差评不断，制作组官宣更新补丁，前期BOSS难度降低、奖励增加。",
|
||||
"abstract": "《空洞骑士：丝之歌》游戏难度逆天差评不断，制作组官宣更新补丁，前期BOSS难度降低、奖励增加。",
|
||||
"score": 14526,
|
||||
"score_desc": "1.45w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=420c2d34f51bb0518f71e0685047e280/7acb0a46f21fbe098018e2022d600c338744ad66.jpg?tbpicau=2025-09-22-05_95664e9657ba0ab59a428fd9a3db30b7",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344899&topic_name=%E4%B8%9D%E4%B9%8B%E6%AD%8C%E5%85%89%E9%80%9F%E6%BB%91%E8%B7%AA%2C%E6%9B%B4%E6%96%B0%E8%A1%A5%E4%B8%81%E9%99%8D%E9%9A%BE%E5%BA%A6"
|
||||
},
|
||||
{
|
||||
"rank": 30,
|
||||
"title": "倭殖入脑,武大再现逆天论文",
|
||||
"desc": "近日，武汉大学又被挖出一篇关于”传统武士道精神下的女性形象“的逆天论文，武汉大学持续发力，吧友吐槽“武大的文科真是奇迹般的存在 ”",
|
||||
"abstract": "近日，武汉大学又被挖出一篇关于”传统武士道精神下的女性形象“的逆天论文，武汉大学持续发力，吧友吐槽“武大的文科真是奇迹般的存在 ”",
|
||||
"score": 13717,
|
||||
"score_desc": "1.37w",
|
||||
"avatar": "https://tiebapic.baidu.com/forum/whfpf%3D84%2C88%2C40%3Bq%3D90/sign=71b4b4adc1d6277fe94761784e052704/d8f9d72a6059252d229f3d12729b033b5bb5b918.jpg?tbpicau=2025-09-22-05_71986e04f0934ae41569ea8d11844675",
|
||||
"url": "https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=28344905&topic_name=%E5%80%AD%E6%AE%96%E5%85%A5%E8%84%91%2C%E6%AD%A6%E5%A4%A7%E5%86%8D%E7%8E%B0%E9%80%86%E5%A4%A9%E8%AE%BA%E6%96%87"
|
||||
}
|
||||
]
|
||||
}
|
||||
108
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/background.css
Normal file
108
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/background.css
Normal file
@@ -0,0 +1,108 @@
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.green-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 132, 255, 0.4) 0%,
|
||||
rgba(0, 132, 255, 0.3) 25%,
|
||||
rgba(0, 132, 255, 0.2) 50%,
|
||||
rgba(0, 132, 255, 0.3) 75%,
|
||||
rgba(0, 132, 255, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.green-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(139, 195, 74, 0.4) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(102, 187, 106, 0.3) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: green-pulse 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes green-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green-pulse {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端背景优化 */
|
||||
@media (max-width: 768px) {
|
||||
.green-gradient {
|
||||
animation-duration: 25s;
|
||||
}
|
||||
|
||||
.green-gradient::before {
|
||||
animation-duration: 18s;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.green-gradient,
|
||||
.green-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.green-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(76, 175, 80, 0.2) 0%,
|
||||
rgba(165, 214, 167, 0.1) 50%,
|
||||
rgba(200, 230, 201, 0.15) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
499
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css
Normal file
499
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css
Normal file
@@ -0,0 +1,499 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.hot-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 18px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hot-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hot-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 新增样式 */
|
||||
.topic-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 短内容时的布局 - 图片在右侧 */
|
||||
.topic-header.short-content {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* 长内容时的布局 - 图片在下方 */
|
||||
.topic-header.long-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topic-rank {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #4096ff;
|
||||
margin-right: 16px;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topic-rank.top-1 {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7a45);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.topic-rank.top-2 {
|
||||
background: linear-gradient(135deg, #ff7a45, #ffa940);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.topic-rank.top-3 {
|
||||
background: linear-gradient(135deg, #ffa940, #ffec3d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.topic-content {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.topic-title:hover {
|
||||
color: #4096ff;
|
||||
}
|
||||
|
||||
.topic-detail {
|
||||
color: #666;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
text-align: justify;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.topic-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hot-value {
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 短内容时的图片样式 - 在右侧 */
|
||||
.short-content .topic-cover {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
align-self: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 长内容时的图片样式 - 在下方 */
|
||||
.long-content .topic-cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 12px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 12px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.topic-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.topic-cover {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.topic-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.topic-cover {
|
||||
width: 90px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.topic-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.topic-cover {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M53.29,80.035l7.32.002 2.41 8.24 13.128-8.24h15.477v-67.98H53.29v67.978zM46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
|
||||
<path d="M46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
|
||||
<path d="M60.61,26.48H40.11c0-6.505,1.76-14.58,8.04-14.58V5.88H30.79c0,4.44-3.6,20.32-11.21,19.77v6.505h12.93v49.4H16.09v6.56h54.13v-6.56H53.75v-49.4h6.86V26.48z" fill="#FFF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
34
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/index.html
Normal file
34
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!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/style.css">
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-container">
|
||||
<div class="green-gradient"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>知乎热门话题</h1>
|
||||
<div class="update-time" id="updateTime"></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="topic-list" id="topicList">
|
||||
<div class="loading">加载中...</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>数据来源于知乎热门话题</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
159
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/js/main.js
Normal file
159
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/js/main.js
Normal file
@@ -0,0 +1,159 @@
|
||||
// API接口列表
|
||||
const API_ENDPOINTS = [
|
||||
"https://60s.api.shumengya.top/v2/zhihu",
|
||||
];
|
||||
|
||||
// 当前使用的API索引
|
||||
let currentApiIndex = 0;
|
||||
|
||||
// DOM元素
|
||||
const topicListElement = document.getElementById('topicList');
|
||||
const updateTimeElement = document.getElementById('updateTime');
|
||||
|
||||
// 格式化时间
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// 格式化数字
|
||||
function formatNumber(num) {
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(1) + '万';
|
||||
}
|
||||
return num.toString();
|
||||
}
|
||||
|
||||
// 渲染话题列表
|
||||
function renderTopicList(data) {
|
||||
topicListElement.innerHTML = '';
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const topicItem = document.createElement('div');
|
||||
topicItem.className = 'topic-item';
|
||||
|
||||
const rankClass = index < 3 ? `top-${index + 1}` : '';
|
||||
|
||||
// 处理封面图片
|
||||
const coverImg = item.cover ?
|
||||
`<img src="${item.cover}" alt="话题封面" class="topic-cover" onerror="this.style.display='none'">` : '';
|
||||
|
||||
// 判断文本内容长度，决定图片位置
|
||||
// 如果detail存在且长度较长，或者没有detail但标题较长，则图片放在下方
|
||||
const detailLength = item.detail ? item.detail.length : 0;
|
||||
const titleLength = item.title ? item.title.length : 0;
|
||||
const isLongContent = detailLength > 100 || (detailLength === 0 && titleLength > 30);
|
||||
|
||||
// 根据内容长度决定布局类名
|
||||
const layoutClass = isLongContent ? 'long-content' : 'short-content';
|
||||
|
||||
topicItem.innerHTML = `
|
||||
<div class="topic-header ${layoutClass}">
|
||||
<div class="topic-rank ${rankClass}">${index + 1}</div>
|
||||
<div class="topic-content">
|
||||
<a href="${item.link}" class="topic-title" target="_blank">🔥 ${item.title}</a>
|
||||
${item.detail ? `<div class="topic-detail">${item.detail}</div>` : ''}
|
||||
<div class="topic-stats">
|
||||
${item.hot_value_desc ? `<div class="stat-item"><span class="hot-value">🔥 ${item.hot_value_desc}</span></div>` : ''}
|
||||
${item.answer_cnt ? `<div class="stat-item">💬 ${formatNumber(item.answer_cnt)} 回答</div>` : ''}
|
||||
${item.follower_cnt ? `<div class="stat-item">👥 ${formatNumber(item.follower_cnt)} 关注</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
${coverImg}
|
||||
</div>`;
|
||||
|
||||
topicListElement.appendChild(topicItem);
|
||||
});
|
||||
|
||||
// 更新时间
|
||||
updateTimeElement.textContent = `更新时间：${formatDate(new Date())}`;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading() {
|
||||
topicListElement.innerHTML = '<div class="loading">加载中...</div>';
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
function showError(message) {
|
||||
topicListElement.innerHTML = `<div class="loading">${message}</div>`;
|
||||
}
|
||||
|
||||
// 获取知乎热门话题数据
|
||||
async function fetchZhihuTopics() {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const response = await fetch(API_ENDPOINTS[currentApiIndex]);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 200 && result.data && Array.isArray(result.data)) {
|
||||
if (result.data.length > 0) {
|
||||
renderTopicList(result.data);
|
||||
} else {
|
||||
showError('暂无热门话题数据');
|
||||
}
|
||||
} else {
|
||||
throw new Error('数据格式错误或无数据');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
|
||||
// 尝试切换到下一个API
|
||||
const nextApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
|
||||
|
||||
if (nextApiIndex !== 0) {
|
||||
// 还有其他API可以尝试
|
||||
currentApiIndex = nextApiIndex;
|
||||
showError('获取数据失败，正在尝试其他接口...');
|
||||
|
||||
// 延迟后重试
|
||||
setTimeout(fetchZhihuTopics, 2000);
|
||||
} else {
|
||||
// 所有API都尝试过了
|
||||
currentApiIndex = 0;
|
||||
showError('所有接口都无法访问，请稍后再试');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 手动刷新数据
|
||||
function refreshData() {
|
||||
currentApiIndex = 0; // 重置API索引
|
||||
fetchZhihuTopics();
|
||||
}
|
||||
|
||||
// 页面加载完成后获取数据
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchZhihuTopics();
|
||||
|
||||
// 每隔5分钟刷新一次数据
|
||||
setInterval(fetchZhihuTopics, 5 * 60 * 1000);
|
||||
|
||||
// 添加键盘快捷键支持（按R键刷新）
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 页面可见性变化时的处理
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
// 页面重新可见时刷新数据
|
||||
refreshData();
|
||||
}
|
||||
});
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top"
|
||||
]
|
||||
30
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/返回接口.json
Normal file
30
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/返回接口.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"title": "你是什么时候意识到抗日战争很艰难的？",
|
||||
"detail": "就不像抗日神剧",
|
||||
"cover": "https://picx.zhimg.com/v2-a07a53b2e23887c7a2440cc3f1984122.png",
|
||||
"hot_value_desc": "1311 万热度",
|
||||
"answer_cnt": 739,
|
||||
"follower_cnt": 1739,
|
||||
"comment_cnt": 0,
|
||||
"created_at": 1622774952000,
|
||||
"created": "2021/06/04 10:49:12",
|
||||
"link": "https://api.zhihu.com/questions/463076881"
|
||||
},
|
||||
{
|
||||
"title": "为什么中国在很多领域都要求自主研发？",
|
||||
"detail": "中国在很多领域都要求自主研发，似乎确认很多东西都有个中国版本，真有这个必要吗？",
|
||||
"cover": "https://pic3.zhimg.com/80/v2-bb4dfa56f138980078da003df436e661_hd.png",
|
||||
"hot_value_desc": "816 万热度",
|
||||
"answer_cnt": 2476,
|
||||
"follower_cnt": 12545,
|
||||
"comment_cnt": 0,
|
||||
"created_at": 1352205751000,
|
||||
"created": "2012/11/06 20:42:31",
|
||||
"link": "https://api.zhihu.com/questions/20579464"
|
||||
}
|
||||
]
|
||||
}
|
||||
128
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/background.css
Normal file
128
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/background.css
Normal file
@@ -0,0 +1,128 @@
|
||||
/* 网易云音乐特色背景样式 */
|
||||
body {
|
||||
background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 背景渐变动画 */
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 网易云红色装饰元素 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(236, 65, 65, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(236, 65, 65, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(236, 65, 65, 0.08) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
/* 音符装饰效果 */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(2px 2px at 20px 30px, rgba(236, 65, 65, 0.4), transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, rgba(236, 65, 65, 0.3), transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, rgba(236, 65, 65, 0.4), transparent),
|
||||
radial-gradient(1px 1px at 130px 80px, rgba(236, 65, 65, 0.3), transparent),
|
||||
radial-gradient(2px 2px at 160px 30px, rgba(236, 65, 65, 0.4), transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: 200px 100px;
|
||||
animation: particleFloat 20s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 音符浮动动画 */
|
||||
@keyframes particleFloat {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 音符装饰 */
|
||||
.music-note {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
color: rgba(236, 65, 65, 0.3);
|
||||
animation: floatNote 15s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes floatNote {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式背景调整 */
|
||||
@media (max-width: 768px) {
|
||||
body::after {
|
||||
background-size: 150px 75px;
|
||||
animation-duration: 25s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body::after {
|
||||
background-size: 100px 50px;
|
||||
animation-duration: 30s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 高性能模式 - 减少动画 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
animation: none;
|
||||
background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.music-note {
|
||||
animation: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
194
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/responsive.css
Normal file
194
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/responsive.css
Normal file
@@ -0,0 +1,194 @@
|
||||
/* 响应式样式 - 适配不同设备 */
|
||||
|
||||
/* 基础样式 - 移动设备优先 */
|
||||
.container {
|
||||
width: 95%;
|
||||
padding: 15px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.rank-desc {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 10px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.rank-meta {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rank-link {
|
||||
padding: 6px 14px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* 平板设备 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
padding: 20px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 7px 14px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rank-desc {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 12px;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.rank-meta {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.rank-link {
|
||||
padding: 7px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面设备 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
max-width: 1200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rank-desc {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.rank-meta {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.rank-link {
|
||||
padding: 8px 18px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏幕设备 */
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.rank-desc {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.rank-link {
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
474
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/style.css
Normal file
474
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/css/style.css
Normal file
@@ -0,0 +1,474 @@
|
||||
/* 背景样式 */
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.4) 0%,
|
||||
rgba(120, 192, 255, 0.3) 25%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 140, 50, 0.3) 75%,
|
||||
rgba(255, 122, 69, 0.4) 100%
|
||||
);
|
||||
animation: gradient-flow 20s ease-in-out infinite;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
.modern-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 70%,
|
||||
rgba(64, 169, 255, 0.5) 0%,
|
||||
transparent 50%
|
||||
), radial-gradient(
|
||||
circle at 70% 30%,
|
||||
rgba(255, 140, 50, 0.4) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: pulse-effect 15s ease-in-out infinite alternate;
|
||||
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.05);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-effect {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(360deg);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
background: linear-gradient(135deg, #4096ff, #ff7a45);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 14px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 8px 16px;
|
||||
border-radius: 24px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.rank-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
border-color: rgba(236, 65, 65, 0.3);
|
||||
}
|
||||
|
||||
.rank-cover {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rank-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.rank-item:hover .rank-cover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.rank-update {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(236, 65, 65, 0.8);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
font-size: 0.8rem;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
|
||||
.rank-info {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rank-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rank-meta {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rank-link {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #ec4141, #ff7a45);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(236, 65, 65, 0.3);
|
||||
}
|
||||
|
||||
.rank-link:hover {
|
||||
background: linear-gradient(135deg, #d73435, #f06937);
|
||||
box-shadow: 0 4px 12px rgba(236, 65, 65, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.15rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.hot-title:hover {
|
||||
color: #4096ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 3px solid rgba(236, 65, 65, 0.3);
|
||||
border-radius: 50%;
|
||||
border-top-color: #ec4141;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #ff4d4f;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
background: #ec4141;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background: #d73435;
|
||||
box-shadow: 0 2px 8px rgba(236, 65, 65, 0.4);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 音符装饰样式 */
|
||||
.music-note {
|
||||
position: fixed;
|
||||
font-size: 24px;
|
||||
color: rgba(236, 65, 65, 0.6);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: floatNote 20s linear infinite;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@keyframes floatNote {
|
||||
0% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-100px) rotate(180deg);
|
||||
opacity: 0.9;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-200px) rotate(360deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.music-note {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 95%;
|
||||
margin: 12px auto;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.update-time {
|
||||
font-size: 0.85rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1.1rem;
|
||||
margin-right: 14px;
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.music-note {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
margin: 8px auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.hot-item {
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hot-rank {
|
||||
font-size: 1rem;
|
||||
margin-right: 12px;
|
||||
min-width: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.music-note {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 减少动画以节省电池 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modern-gradient,
|
||||
.modern-gradient::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.modern-gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(64, 169, 255, 0.3) 0%,
|
||||
rgba(255, 175, 64, 0.2) 50%,
|
||||
rgba(255, 122, 69, 0.25) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
49
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/index.html
Normal file
49
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/index.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>网易云音乐榜单 - InfoGenie</title>
|
||||
<meta name="description" content="网易云音乐各类榜单，包括飙升榜、热歌榜、新歌榜等">
|
||||
<link rel="stylesheet" href="./css/background.css">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="./css/responsive.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 背景效果 -->
|
||||
<div class="background-container">
|
||||
<div class="modern-gradient"></div>
|
||||
</div>
|
||||
|
||||
<!-- 音符装饰 -->
|
||||
<div id="music-notes-container"></div>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>网易云音乐榜单</h1>
|
||||
<div class="update-time" id="update-time">加载中...</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="loading" class="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>正在加载榜单数据...</p>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error-message" style="display: none;">
|
||||
<p>加载失败，请稍后再试</p>
|
||||
<button id="retry-button" class="retry-button">重试</button>
|
||||
</div>
|
||||
|
||||
<div id="rank-list" class="rank-list" style="display: none;"></div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>数据来源：网易云音乐官方API</p>
|
||||
<p>© 2024 InfoGenie - 网易云音乐榜单</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
252
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/js/app.js
Normal file
252
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/js/app.js
Normal file
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
* 网易云音乐榜单 - 主应用脚本
|
||||
* 功能：获取API数据、渲染榜单、处理错误、自动切换API接口
|
||||
*/
|
||||
|
||||
// 全局变量
|
||||
const apiUrls = [];
|
||||
let currentApiIndex = 0;
|
||||
let rankData = null;
|
||||
|
||||
// DOM元素
|
||||
const loadingElement = document.getElementById('loading');
|
||||
const errorElement = document.getElementById('error-message');
|
||||
const rankListElement = document.getElementById('rank-list');
|
||||
const updateTimeElement = document.getElementById('update-time');
|
||||
const retryButton = document.getElementById('retry-button');
|
||||
|
||||
// 初始化函数
|
||||
async function init() {
|
||||
try {
|
||||
// 获取API接口列表
|
||||
await loadApiUrls();
|
||||
|
||||
// 获取榜单数据
|
||||
await fetchRankData();
|
||||
|
||||
// 添加音符装饰
|
||||
createMusicNotes();
|
||||
} catch (error) {
|
||||
console.error('初始化失败:', error);
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载API接口列表
|
||||
async function loadApiUrls() {
|
||||
try {
|
||||
const response = await fetch('./接口集合.json');
|
||||
if (!response.ok) {
|
||||
throw new Error('无法加载API接口列表');
|
||||
}
|
||||
const data = await response.json();
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
apiUrls.push(...data);
|
||||
console.log('已加载API接口列表:', apiUrls);
|
||||
} else {
|
||||
throw new Error('API接口列表为空');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载API接口列表失败:', error);
|
||||
// 使用默认API
|
||||
apiUrls.push('https://60s.api.shumengya.top/v2/ncm-rank');
|
||||
}
|
||||
}
|
||||
|
||||
// 获取榜单数据
|
||||
async function fetchRankData() {
|
||||
showLoading();
|
||||
|
||||
// 如果没有API接口，显示错误
|
||||
if (apiUrls.length === 0) {
|
||||
throw new Error('没有可用的API接口');
|
||||
}
|
||||
|
||||
try {
|
||||
const apiUrl = apiUrls[currentApiIndex];
|
||||
const response = await fetch(apiUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`API请求失败: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.code === 200 && data.data && Array.isArray(data.data)) {
|
||||
rankData = data;
|
||||
renderRankList(data.data);
|
||||
updateLastUpdateTime(data);
|
||||
hideLoading();
|
||||
} else {
|
||||
throw new Error('API返回数据格式错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取榜单数据失败:', error);
|
||||
// 尝试切换到下一个API
|
||||
if (tryNextApi()) {
|
||||
return fetchRankData();
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 尝试切换到下一个API
|
||||
function tryNextApi() {
|
||||
if (currentApiIndex < apiUrls.length - 1) {
|
||||
currentApiIndex++;
|
||||
console.log(`切换到下一个API: ${apiUrls[currentApiIndex]}`);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 渲染榜单列表
|
||||
function renderRankList(ranks) {
|
||||
if (!Array.isArray(ranks) || ranks.length === 0) {
|
||||
showError('没有榜单数据');
|
||||
return;
|
||||
}
|
||||
|
||||
rankListElement.innerHTML = '';
|
||||
|
||||
ranks.forEach(rank => {
|
||||
const rankItem = document.createElement('div');
|
||||
rankItem.className = 'rank-item';
|
||||
|
||||
// 构建榜单项HTML
|
||||
rankItem.innerHTML = `
|
||||
<div class="rank-cover">
|
||||
<img src="${rank.cover}" alt="${rank.name}" loading="lazy">
|
||||
<div class="rank-update">${rank.update_frequency || '定期更新'}</div>
|
||||
</div>
|
||||
<div class="rank-info">
|
||||
<h3 class="rank-name">${rank.name}</h3>
|
||||
<p class="rank-desc">${rank.description || '暂无描述'}</p>
|
||||
<div class="rank-meta">
|
||||
<span class="rank-updated">更新: ${formatDate(rank.updated)}</span>
|
||||
</div>
|
||||
<a href="${rank.link}" target="_blank" class="rank-link">查看详情</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
rankListElement.appendChild(rankItem);
|
||||
});
|
||||
|
||||
rankListElement.style.display = 'grid';
|
||||
}
|
||||
|
||||
// 更新最后更新时间
|
||||
function updateLastUpdateTime(data) {
|
||||
if (data && data.data && data.data.length > 0) {
|
||||
const latestRank = data.data.reduce((latest, current) => {
|
||||
const latestDate = latest.updated_at || 0;
|
||||
const currentDate = current.updated_at || 0;
|
||||
return currentDate > latestDate ? current : latest;
|
||||
}, data.data[0]);
|
||||
|
||||
if (latestRank && latestRank.updated) {
|
||||
updateTimeElement.textContent = `最近更新: ${formatDate(latestRank.updated)}`;
|
||||
} else {
|
||||
updateTimeElement.textContent = '数据已更新';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '未知';
|
||||
|
||||
try {
|
||||
const date = new Date(dateStr.replace('2025-', '2024-'));
|
||||
if (isNaN(date.getTime())) return dateStr;
|
||||
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}).replace(/\//g, '-');
|
||||
} catch (e) {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建音符装饰
|
||||
function createMusicNotes() {
|
||||
const notesContainer = document.getElementById('music-notes-container');
|
||||
const notes = ['♪', '♫', '♬', '♩', '♭', '♮'];
|
||||
const containerWidth = window.innerWidth;
|
||||
const containerHeight = window.innerHeight;
|
||||
|
||||
// 清空容器
|
||||
notesContainer.innerHTML = '';
|
||||
|
||||
// 创建15个音符
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const note = document.createElement('div');
|
||||
note.className = 'music-note';
|
||||
note.textContent = notes[Math.floor(Math.random() * notes.length)];
|
||||
|
||||
// 随机位置
|
||||
const left = Math.random() * containerWidth;
|
||||
const top = Math.random() * containerHeight;
|
||||
|
||||
// 随机动画延迟
|
||||
const delay = Math.random() * 20;
|
||||
const duration = 15 + Math.random() * 15;
|
||||
|
||||
// 设置样式
|
||||
note.style.left = `${left}px`;
|
||||
note.style.top = `${top}px`;
|
||||
note.style.animationDelay = `${delay}s`;
|
||||
note.style.animationDuration = `${duration}s`;
|
||||
|
||||
notesContainer.appendChild(note);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示加载中
|
||||
function showLoading() {
|
||||
loadingElement.style.display = 'block';
|
||||
errorElement.style.display = 'none';
|
||||
rankListElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 隐藏加载中
|
||||
function hideLoading() {
|
||||
loadingElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
function showError(message = '加载失败，请稍后再试') {
|
||||
loadingElement.style.display = 'none';
|
||||
errorElement.querySelector('p').textContent = message;
|
||||
errorElement.style.display = 'block';
|
||||
}
|
||||
|
||||
// 重试按钮点击事件
|
||||
retryButton.addEventListener('click', () => {
|
||||
// 重置API索引
|
||||
currentApiIndex = 0;
|
||||
// 重新获取数据
|
||||
fetchRankData();
|
||||
});
|
||||
|
||||
// 窗口大小改变时重新创建音符
|
||||
window.addEventListener('resize', debounce(createMusicNotes, 300));
|
||||
|
||||
// 防抖函数
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function() {
|
||||
const context = this;
|
||||
const args = arguments;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(context, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
3
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/接口集合.json
Normal file
3
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/接口集合.json
Normal file
@@ -0,0 +1,3 @@
|
||||
[
|
||||
"https://60s.api.shumengya.top/v2/ncm-rank"
|
||||
]
|
||||
750
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/返回接口.json
Normal file
750
InfoGenie-frontend/public/60sapi/热搜榜单/网易云榜单/返回接口.json
Normal file
@@ -0,0 +1,750 @@
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功。数据来自官方/权威源头，以确保稳定与实时。开源地址 https://github.com/vikiboss/60s，反馈群 595941841",
|
||||
"data": [
|
||||
{
|
||||
"id": 19723756,
|
||||
"name": "飙升榜",
|
||||
"description": "云音乐中每天热度上升最快的100首单曲，每日更新。",
|
||||
"cover": "https://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg",
|
||||
"update_frequency": "更新78首",
|
||||
"updated": "2025-09-05 08:24:41",
|
||||
"updated_at": 1757031881385,
|
||||
"created": "2014-06-30 15:58:56",
|
||||
"created_at": 1404115136883,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=19723756"
|
||||
},
|
||||
{
|
||||
"id": 3779629,
|
||||
"name": "新歌榜",
|
||||
"description": "云音乐新歌榜：云音乐用户一周内收听所有新歌（一月内最新发行） 官方TOP排行榜，每天更新。",
|
||||
"cover": "https://p2.music.126.net/5guhqPBTcIrrhLBotgaT6w==/109951170048511751.jpg",
|
||||
"update_frequency": "刚刚更新",
|
||||
"updated": "2025-09-05 08:24:50",
|
||||
"updated_at": 1757031890587,
|
||||
"created": "2013-09-09 18:09:58",
|
||||
"created_at": 1378721398225,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3779629"
|
||||
},
|
||||
{
|
||||
"id": 2884035,
|
||||
"name": "原创榜",
|
||||
"description": "云音乐独立原创音乐人作品官方榜单，以推荐优秀原创作品为目的。每周四网易云音乐首发。申请网易音乐人：http://music.163.com/nmusician/",
|
||||
"cover": "https://p2.music.126.net/BaP9nrocNTL3gGThysv4eQ==/109951170091896587.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:54:42",
|
||||
"updated_at": 1756954482653,
|
||||
"created": "2013-07-25 14:05:25",
|
||||
"created_at": 1374732325894,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=2884035"
|
||||
},
|
||||
{
|
||||
"id": 3778678,
|
||||
"name": "热歌榜",
|
||||
"description": "云音乐热歌榜：云音乐用户一周内收听所有线上歌曲官方TOP排行榜，每日更新。",
|
||||
"cover": "https://p2.music.126.net/0SUEG8yDACfx0Bw2MYFv4Q==/109951170048519512.jpg",
|
||||
"update_frequency": "更新14首",
|
||||
"updated": "2025-09-05 08:25:03",
|
||||
"updated_at": 1757031903733,
|
||||
"created": "2013-09-09 18:10:06",
|
||||
"created_at": 1378721406014,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3778678"
|
||||
},
|
||||
{
|
||||
"id": 991319590,
|
||||
"name": "网易云中文说唱榜",
|
||||
"description": "网易云原创说唱音乐人作品官方榜单，每周五更新。以网易云用户一周播放热度为主，收录2个月内发行的原创说唱作品，按照综合数据排名取前50名。申请网易音乐人：http://music.163.com/nmusician",
|
||||
"cover": "https://p2.music.126.net/GgHbgDfGXHpE2YTchU7IvA==/109951171510498108.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 10:19:58",
|
||||
"updated_at": 1756433998618,
|
||||
"created": "2017-11-10 13:06:29",
|
||||
"created_at": 1510290389440,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=991319590"
|
||||
},
|
||||
{
|
||||
"id": 71384707,
|
||||
"name": "网易云古典榜",
|
||||
"description": "网易云用户一周内收听所有古典音乐官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/urByD_AmfBDBrs7fA9-O8A==/109951167976973225.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:52:54",
|
||||
"updated_at": 1756954374913,
|
||||
"created": "2015-05-07 11:22:00",
|
||||
"created_at": 1430968920537,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=71384707"
|
||||
},
|
||||
{
|
||||
"id": 1978921795,
|
||||
"name": "网易云电音榜",
|
||||
"description": "网易云用户一周内收听电子音乐官方TOP排行榜，每周五更新。喜力星电音，用先锋电音带你解锁全新维度和体验！",
|
||||
"cover": "https://p2.music.126.net/hXGObvXfsGtFjFvRhOYAkA==/109951170091888741.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 12:00:01",
|
||||
"updated_at": 1756440001367,
|
||||
"created": "2017-11-16 17:47:12",
|
||||
"created_at": 1510825632233,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=1978921795"
|
||||
},
|
||||
{
|
||||
"id": 14028249541,
|
||||
"name": "网易云全球说唱榜",
|
||||
"description": "想聆听世界的说唱节奏？全球说唱榜每周五更新，聚焦华语地区以外的优秀说唱作品。根据云音乐用户每周播放热度数据，按照综合数据排名取前 50 名。",
|
||||
"cover": "https://p2.music.126.net/0hhFjP6WyIjHYDXKW5E7BA==/109951171535150782.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 11:51:16",
|
||||
"updated_at": 1756439476712,
|
||||
"created": "2025-07-24 14:09:26",
|
||||
"created_at": 1753337366883,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=14028249541"
|
||||
},
|
||||
{
|
||||
"id": 13372522766,
|
||||
"name": "潮流风向榜",
|
||||
"description": "精心挑选云音乐极具声量的音乐作品，呈现歌曲真实热度趋势，榜单每日更新。",
|
||||
"cover": "https://p2.music.126.net/dIKA5e7jCncz2Br1Toxgaw==/109951170621574552.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:58",
|
||||
"updated_at": 1756958758114,
|
||||
"created": "2025-02-26 14:01:33",
|
||||
"created_at": 1740549693794,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=13372522766"
|
||||
},
|
||||
{
|
||||
"id": 12911403728,
|
||||
"name": "音乐合伙人推荐榜",
|
||||
"description": "音乐合伙人近一个月内推荐过的歌曲官方TOP排行榜，每周一更新。 跟随音乐合伙人的步伐，一起发现那些隐藏的音乐瑰宝。",
|
||||
"cover": "https://p2.music.126.net/s6ITpmGjKbyDpi7DPkqd2w==/109951170187827373.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 12:06:04",
|
||||
"updated_at": 1756699564013,
|
||||
"created": "2024-11-25 15:14:30",
|
||||
"created_at": 1732518870190,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12911403728"
|
||||
},
|
||||
{
|
||||
"id": 12911589513,
|
||||
"name": "音乐合伙人热歌榜",
|
||||
"description": "音乐合伙人近一周评定过的高分热歌官方TOP排行榜，每周一更新。 跟随音乐合伙人的步伐，一起发现那些隐藏的音乐瑰宝。",
|
||||
"cover": "https://p2.music.126.net/RgYxQmB-ZUjkMRo2N1jWnQ==/109951170187823494.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 12:06:01",
|
||||
"updated_at": 1756699561725,
|
||||
"created": "2024-11-25 15:13:46",
|
||||
"created_at": 1732518826543,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12911589513"
|
||||
},
|
||||
{
|
||||
"id": 12911619970,
|
||||
"name": "音乐合伙人留名榜",
|
||||
"description": "音乐合伙人近一个月内留名过的所有歌曲官方TOP排行榜，每周一更新。 跟随音乐合伙人的步伐，一起发现那些隐藏的音乐瑰宝。",
|
||||
"cover": "https://p2.music.126.net/aJJzGIxhkVaD7dX0XBNUnw==/109951170187831145.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 12:05:49",
|
||||
"updated_at": 1756699549550,
|
||||
"created": "2024-11-25 15:12:50",
|
||||
"created_at": 1732518770868,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12911619970"
|
||||
},
|
||||
{
|
||||
"id": 12911379734,
|
||||
"name": "音乐合伙人高分新歌榜",
|
||||
"description": "音乐合伙人近期评定过的所有新歌（一个月内最新发行）官方TOP排行榜，每周一更新。 跟随音乐合伙人的步伐，一起发现那些隐藏的音乐瑰宝。",
|
||||
"cover": "https://p2.music.126.net/bfk15bvanhdPFU7yjPFgWA==/109951170187832038.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 12:05:54",
|
||||
"updated_at": 1756699554077,
|
||||
"created": "2024-11-25 15:11:53",
|
||||
"created_at": 1732518713161,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12911379734"
|
||||
},
|
||||
{
|
||||
"id": 12768855486,
|
||||
"name": "音乐合伙人高分榜",
|
||||
"description": "音乐合伙人的高分歌曲官方榜单，收录近半年来获得音乐合伙人高分推荐的TOP100首歌曲，每日更新。跟随音乐合伙人的步伐，一起发现那些隐藏的音乐瑰宝。",
|
||||
"cover": "https://p2.music.126.net/fPP5T0Z8Ac15qNvRTcHa6g==/109951170074028970.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:49",
|
||||
"updated_at": 1756958749724,
|
||||
"created": "2024-10-25 11:51:10",
|
||||
"created_at": 1729828270342,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12768855486"
|
||||
},
|
||||
{
|
||||
"id": 5453912201,
|
||||
"name": "黑胶VIP爱听榜",
|
||||
"description": "云音乐站内会员播放热度TOP100的歌曲，每周四更新。\n黑胶们都爱听什么歌曲？\n热门好歌一站式收听，让你念念不忘~\n做尊贵黑胶，畅听品味好歌~",
|
||||
"cover": "https://p2.music.126.net/qo6-o9n5AhMjNyejev38-A==/109951169743111905.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 18:05:01",
|
||||
"updated_at": 1756980301317,
|
||||
"created": "2021-01-08 14:30:24",
|
||||
"created_at": 1610087424470,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5453912201"
|
||||
},
|
||||
{
|
||||
"id": 71385702,
|
||||
"name": "网易云ACG榜",
|
||||
"description": "网易云用户一周内收听所有ACG音乐官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/na1kEeCS1iZEkzOrs9r_9g==/109951167976973667.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:19:13",
|
||||
"updated_at": 1756952353409,
|
||||
"created": "2015-05-07 11:22:15",
|
||||
"created_at": 1430968935040,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=71385702"
|
||||
},
|
||||
{
|
||||
"id": 745956260,
|
||||
"name": "网易云韩语榜",
|
||||
"description": "网易云用户一周内收听所有韩语歌曲官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/5oN9YaFznwNGXkmi8i2Ytw==/109951167430864741.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:30:40",
|
||||
"updated_at": 1756953040555,
|
||||
"created": "2017-05-31 11:34:51",
|
||||
"created_at": 1496201691281,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=745956260"
|
||||
},
|
||||
{
|
||||
"id": 180106,
|
||||
"name": "UK排行榜周榜",
|
||||
"description": "UK排行榜",
|
||||
"cover": "https://p2.music.126.net/fhAqiflLy3eU-ldmBQByrg==/109951165613082765.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-01 10:26:53",
|
||||
"updated_at": 1756693613998,
|
||||
"created": "2013-02-19 10:09:26",
|
||||
"created_at": 1361239766844,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=180106"
|
||||
},
|
||||
{
|
||||
"id": 60198,
|
||||
"name": "美国Billboard榜",
|
||||
"description": "美国Billboard排行榜",
|
||||
"cover": "https://p2.music.126.net/rwRsVIJHQ68gglhA6TNEYA==/109951165611413732.jpg",
|
||||
"update_frequency": "每周三更新",
|
||||
"updated": "2025-09-03 10:40:27",
|
||||
"updated_at": 1756867227129,
|
||||
"created": "2013-01-22 10:51:16",
|
||||
"created_at": 1358823076818,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=60198"
|
||||
},
|
||||
{
|
||||
"id": 3812895,
|
||||
"name": "Beatport全球电子舞曲榜",
|
||||
"description": "Beatport全球电子舞曲排行榜TOP100（本榜每周三更新）",
|
||||
"cover": "https://p2.music.126.net/oT-RHuPBJiD7WMoU7WG5Rw==/109951166093489621.jpg",
|
||||
"update_frequency": "每周三更新",
|
||||
"updated": "2025-09-03 10:51:47",
|
||||
"updated_at": 1756867907849,
|
||||
"created": "2013-09-11 16:03:09",
|
||||
"created_at": 1378886589466,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3812895"
|
||||
},
|
||||
{
|
||||
"id": 21845217,
|
||||
"name": "KTV唛榜",
|
||||
"description": "KTV唛榜是目前国内首个以全国超过200家KTV点歌平台真实数据的当红歌曲榜单。所涉及的KTV店铺覆盖全国近100多个城市，囊括一、二、三线各级城市及地区。在综合全国各地KTV点唱数据的前提下进行汇总与统计。为了保证信息的及时性，唛榜每周五更新。提供给K迷们最新和最准确的数据。",
|
||||
"cover": "https://p2.music.126.net/5wDP78s43ydVTKt62C8OjQ==/109951165613100063.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2021-11-26 17:56:43",
|
||||
"updated_at": 1637920603975,
|
||||
"created": "2014-07-18 11:11:33",
|
||||
"created_at": 1405653093230,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=21845217"
|
||||
},
|
||||
{
|
||||
"id": 60131,
|
||||
"name": "日本Oricon榜",
|
||||
"description": "日本Oricon数字单曲周榜，每周三更新，欢迎关注。",
|
||||
"cover": "https://p2.music.126.net/aXUPgImt8hhf4cMUZEjP4g==/109951165611417794.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-08-29 10:20:10",
|
||||
"updated_at": 1756434010126,
|
||||
"created": "2013-01-08 16:51:24",
|
||||
"created_at": 1357635084874,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=60131"
|
||||
},
|
||||
{
|
||||
"id": 2809513713,
|
||||
"name": "网易云欧美热歌榜",
|
||||
"description": "网易云用户一周内收听所有欧美歌曲官方TOP排行榜，每周四更新。\nWestern Hit Chart (updated every Thursday)",
|
||||
"cover": "https://p2.music.126.net/70_EO_Dc7NT_hhfvsapzcQ==/109951167430862162.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 09:44:52",
|
||||
"updated_at": 1756950292193,
|
||||
"created": "2019-05-22 10:49:33",
|
||||
"created_at": 1558493373769,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=2809513713"
|
||||
},
|
||||
{
|
||||
"id": 2809577409,
|
||||
"name": "网易云欧美新歌榜",
|
||||
"description": "网易云用户一周内收听所有欧美新歌（一月内最新发行）官方TOP排行榜，每天更新。\nWestern New Release Chart (new songs released in last 30 days, updated daily)\n",
|
||||
"cover": "https://p2.music.126.net/0lPWpI9Ejn1OiW2LSbg-qw==/109951167430863224.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 09:44:27",
|
||||
"updated_at": 1756950267625,
|
||||
"created": "2019-05-22 10:46:54",
|
||||
"created_at": 1558493214795,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=2809577409"
|
||||
},
|
||||
{
|
||||
"id": 27135204,
|
||||
"name": "法国 NRJ Vos Hits 周榜",
|
||||
"description": "法国NRJ电台（national Radio de Jeunes）成立于1981年，总部位于法国巴黎。是法国最受欢迎的音乐电台和听众最多的广播电台之一。NRJ音乐奖素有法国的“格莱美”之称。此榜单针对NRJ电台法国本土热门歌曲排行。【每周五更新】",
|
||||
"cover": "https://p2.music.126.net/-fyzrPWd06FfWl_0JDAxMQ==/109951165613108584.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 10:20:26",
|
||||
"updated_at": 1756434026143,
|
||||
"created": "2014-09-04 18:03:33",
|
||||
"created_at": 1409825013948,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=27135204"
|
||||
},
|
||||
{
|
||||
"id": 3001835560,
|
||||
"name": "网易云ACG动画榜",
|
||||
"description": "网易云中每天热度上升最快的100首ACG动画单曲，每日更新。",
|
||||
"cover": "https://p2.music.126.net/SkGlKQ6acixthb77VlD9eQ==/109951164432300406.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:09",
|
||||
"updated_at": 1756958709531,
|
||||
"created": "2019-09-27 10:03:58",
|
||||
"created_at": 1569549838610,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3001835560"
|
||||
},
|
||||
{
|
||||
"id": 3001795926,
|
||||
"name": "网易云ACG游戏榜",
|
||||
"description": "网易云中每天热度上升最快的100首ACG游戏单曲，每日更新。",
|
||||
"cover": "https://p2.music.126.net/hivOOHMwEmnn9s_6rgZwEQ==/109951164432303700.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:17",
|
||||
"updated_at": 1756958717981,
|
||||
"created": "2019-09-27 10:04:56",
|
||||
"created_at": 1569549896656,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3001795926"
|
||||
},
|
||||
{
|
||||
"id": 3001890046,
|
||||
"name": "网易云ACG VOCALOID榜",
|
||||
"description": "",
|
||||
"cover": "https://p2.music.126.net/Ag7RyRCYiINcd9EtRXf6xA==/109951164432303690.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:25",
|
||||
"updated_at": 1756958725790,
|
||||
"created": "2019-09-27 10:05:25",
|
||||
"created_at": 1569549925472,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=3001890046"
|
||||
},
|
||||
{
|
||||
"id": 5059644681,
|
||||
"name": "网易云日语榜",
|
||||
"description": "网易云用户一周内收听所有日语歌曲官方TOP排行榜，每周二更新。",
|
||||
"cover": "https://p2.music.126.net/YFBFNI2F-4BveUpv6FKFuw==/109951167430864069.jpg",
|
||||
"update_frequency": "每周二更新",
|
||||
"updated": "2025-09-02 10:57:27",
|
||||
"updated_at": 1756781847266,
|
||||
"created": "2020-06-11 16:10:00",
|
||||
"created_at": 1591863000459,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5059644681"
|
||||
},
|
||||
{
|
||||
"id": 5059633707,
|
||||
"name": "网易云摇滚榜",
|
||||
"description": "网易云用户一周内收听所有摇滚歌曲官方TOP排行榜，每周五更新。",
|
||||
"cover": "https://p2.music.126.net/LjkX2hktgFD1NXc3W6w0sA==/109951170048522513.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 17:02:04",
|
||||
"updated_at": 1756458124397,
|
||||
"created": "2020-06-11 16:13:33",
|
||||
"created_at": 1591863213389,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5059633707"
|
||||
},
|
||||
{
|
||||
"id": 5059642708,
|
||||
"name": "网易云国风榜",
|
||||
"description": "网易云用户一周内收听所有国风歌曲官方TOP排行榜，每周五更新。",
|
||||
"cover": "https://p2.music.126.net/kTJC5OBhg8I477X_ZmXyDQ==/109951168539740982.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 09:58:05",
|
||||
"updated_at": 1756432685431,
|
||||
"created": "2020-06-11 16:14:18",
|
||||
"created_at": 1591863258438,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5059642708"
|
||||
},
|
||||
{
|
||||
"id": 5338990334,
|
||||
"name": "潜力爆款榜",
|
||||
"description": "全民一起PICK潜力好歌，每周二更新",
|
||||
"cover": "https://p2.music.126.net/Mi4QPklg1mtbWAfq74tEqQ==/109951165498334721.jpg",
|
||||
"update_frequency": "每周二更新",
|
||||
"updated": "2025-09-02 12:05:33",
|
||||
"updated_at": 1756785933871,
|
||||
"created": "2020-11-17 14:24:34",
|
||||
"created_at": 1605594274077,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5338990334"
|
||||
},
|
||||
{
|
||||
"id": 5059661515,
|
||||
"name": "网易云民谣榜",
|
||||
"description": "网易云用户一周内收听所有民谣歌曲官方TOP排行榜，每周五更新。",
|
||||
"cover": "https://p2.music.126.net/Xe9qLTAqtBAWX_hPgFHMyw==/109951170048510929.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 17:00:41",
|
||||
"updated_at": 1756458041706,
|
||||
"created": "2020-06-11 16:10:52",
|
||||
"created_at": 1591863052757,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=5059661515"
|
||||
},
|
||||
{
|
||||
"id": 6688069460,
|
||||
"name": "听歌识曲榜",
|
||||
"description": "网易云音乐站内歌曲按用户“听歌识曲”次数排列，每周四更新",
|
||||
"cover": "https://p2.music.126.net/wJVUAiUuykKk7yGbQxDBug==/109951167430857712.jpg",
|
||||
"update_frequency": "更新24首",
|
||||
"updated": "2025-09-04 23:35:03",
|
||||
"updated_at": 1757000103145,
|
||||
"created": "2021-03-31 16:45:54",
|
||||
"created_at": 1617180354803,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6688069460"
|
||||
},
|
||||
{
|
||||
"id": 6723173524,
|
||||
"name": "网络热歌榜",
|
||||
"description": "网罗一周热门网络歌曲，反映云音乐用户近一周网络热歌收听趋势。每周五更新。",
|
||||
"cover": "https://p2.music.126.net/_kSxOPqQ5J5etC5DKTFwNA==/109951170048519530.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 11:03:41",
|
||||
"updated_at": 1756436621202,
|
||||
"created": "2021-04-22 10:41:46",
|
||||
"created_at": 1619059306654,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6723173524"
|
||||
},
|
||||
{
|
||||
"id": 6732051320,
|
||||
"name": "俄语榜",
|
||||
"description": "网易云音乐用户一周内收听所有俄罗斯语歌曲官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/HbJ0BK5doY4I4pEMY6-FQw==/109951167430852698.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:21:42",
|
||||
"updated_at": 1756952502045,
|
||||
"created": "2021-04-28 12:05:12",
|
||||
"created_at": 1619582712108,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6732051320"
|
||||
},
|
||||
{
|
||||
"id": 6732014811,
|
||||
"name": "越南语榜",
|
||||
"description": "网易云音乐用户一周内收听所有越南语歌曲官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/N-Y5maLGWgrowt3TE6RtSg==/109951167430857045.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:28:52",
|
||||
"updated_at": 1756952932171,
|
||||
"created": "2021-04-28 12:05:49",
|
||||
"created_at": 1619582749349,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6732014811"
|
||||
},
|
||||
{
|
||||
"id": 6886768100,
|
||||
"name": "中文慢摇DJ榜",
|
||||
"description": "搜索“DJ”，进入慢摇DJ专区，探索更多网络热歌！",
|
||||
"cover": "https://p2.music.126.net/w_01BfDU012ojxnzLO6tYw==/109951167977358686.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:00:00",
|
||||
"updated_at": 1756958400638,
|
||||
"created": "2021-07-28 18:09:59",
|
||||
"created_at": 1627466999260,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6886768100"
|
||||
},
|
||||
{
|
||||
"id": 6939992364,
|
||||
"name": "俄罗斯top hit流行音乐榜",
|
||||
"description": "top hit榜根据俄罗斯及全球400多个无线广播的音乐播放量和YouTube播放量计算得来，每周一更新。",
|
||||
"cover": "https://p2.music.126.net/KLVO8PxVZzOoLdWQQNyprA==/109951166327316568.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 17:03:04",
|
||||
"updated_at": 1756458184216,
|
||||
"created": "2021-08-27 11:30:02",
|
||||
"created_at": 1630035002268,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=6939992364"
|
||||
},
|
||||
{
|
||||
"id": 7095271308,
|
||||
"name": "泰语榜",
|
||||
"description": "网易云音乐用户一周内收听所有泰语歌曲官方TOP排行榜，每周四更新。",
|
||||
"cover": "https://p2.music.126.net/4W0WBHBgwYlYfRniuyL47A==/109951167430843284.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 10:41:26",
|
||||
"updated_at": 1756953686280,
|
||||
"created": "2021-11-29 14:22:17",
|
||||
"created_at": 1638166937809,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7095271308"
|
||||
},
|
||||
{
|
||||
"id": 7356827205,
|
||||
"name": "BEAT排行榜",
|
||||
"description": "嘿~朋友，欢迎来到本周的Beat排行榜\n我们挑选了近一周内热门的Beat作品，一起来感受下大家近期的“口味”吧！\n每周都会更新哦，记得按下收藏，我每天都会在这里等你来与我交流！~\n\n关于Beat的必备小知识\nQ1.什么是Beat？\nBeat即节拍，特指嘻哈音乐中的伴奏，现在也可指所有流行音乐的伴奏\nQ2.Beat有什么用？\n在Beat的帮助下，你只需要填词演唱即可完成一首歌曲的创作，而且Beat也可以作为各种流媒体的背景音乐或是多场景现场演出的得力助手，不同风格的Beat还能为你的音乐创作提供灵感哦~\n搜索关注“BEATSOUL激灵”网易云官号，探索更多炸裂音乐内容～",
|
||||
"cover": "https://p2.music.126.net/yhzlQJCJ9NcT4MvJBG_HgQ==/109951167977014958.jpg",
|
||||
"update_frequency": "每周四更新",
|
||||
"updated": "2025-09-04 20:05:00",
|
||||
"updated_at": 1756987500926,
|
||||
"created": "2022-03-29 19:39:58",
|
||||
"created_at": 1648553998273,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7356827205"
|
||||
},
|
||||
{
|
||||
"id": 7325478166,
|
||||
"name": "星云榜VOL.29 Addison Rae新专来袭，寻找最真实的自己",
|
||||
"description": "精心评审，专业推荐。每周五更新，为你呈现宝藏新歌。\n1、《Aquamarinee》歌手：Addison Rae\n2、《羽毛剑》歌手：秦凡淇\n3、《Take me back》歌手：HAIM\n4、《妈妈的眼睛》歌手：张震岳\n5、《25岁永不停下》歌手：张醒婵\n6、《雨季症候》歌手：SHARK卫彬月\n7、《山东王FREESTYLE》歌手：华云龙KLE\n8、《LOVE I NEED》歌手：陈瑜Estelle\n9、《FFFFF》歌手：刘柏辛Lexie\n10、《Vipaśyanā》歌手：Namunong\n本期封面：Addison Rae，Aquamarine",
|
||||
"cover": "https://p2.music.126.net/u440jFG0N5i06C9ejOeMCQ==/109951171381091309.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-06-30 16:17:26",
|
||||
"updated_at": 1751271446032,
|
||||
"created": "2022-03-09 11:24:46",
|
||||
"created_at": 1646796286440,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7325478166"
|
||||
},
|
||||
{
|
||||
"id": 7603212484,
|
||||
"name": "LOOK直播歌曲榜",
|
||||
"description": "LOOK直播好歌共赏，专属你的声音聊愈场。榜单选取符合条件且近7日热度最高的前50首歌曲，每周二更新。",
|
||||
"cover": "https://p1.music.126.net/u-RQC-LyY0aoeseRumJ14A==/109951167977730469.jpg",
|
||||
"update_frequency": "每周二更新",
|
||||
"updated": "2024-05-07 21:23:03",
|
||||
"updated_at": 1715088183913,
|
||||
"created": "2022-08-23 09:54:56",
|
||||
"created_at": 1661219696017,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7603212484"
|
||||
},
|
||||
{
|
||||
"id": 7775163417,
|
||||
"name": "赏音榜",
|
||||
"description": "云音乐歌曲赏音榜，以让用户鉴赏到更多潜力好歌为目的，以用户对歌曲互动热度为核心，按照综合数据排名取前100名，每日更新",
|
||||
"cover": "https://p1.music.126.net/m9hQzC-d5wefBipedNPaHg==/109951168178601971.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:36",
|
||||
"updated_at": 1756958736108,
|
||||
"created": "2022-11-28 14:46:19",
|
||||
"created_at": 1669617979380,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7775163417"
|
||||
},
|
||||
{
|
||||
"id": 7785123708,
|
||||
"name": "黑胶VIP新歌榜",
|
||||
"description": "云音乐站内播放热度TOP50的7日内新晋会员歌曲，每日更新。\n更适合黑胶体质的新歌榜单来啦！\n耳机分你一只，新曲一起来听~\n成为尊贵黑胶，不错过每一首VIP新歌！",
|
||||
"cover": "https://p1.music.126.net/vjitpkT9nXBCth6tvdDMWg==/109951169743115266.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:37",
|
||||
"updated_at": 1756958737548,
|
||||
"created": "2022-12-02 18:51:16",
|
||||
"created_at": 1669978276103,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7785123708"
|
||||
},
|
||||
{
|
||||
"id": 7785066739,
|
||||
"name": "黑胶VIP热歌榜",
|
||||
"description": "云音乐站内播放和付费热度TOP50的会员歌曲，每日更新。\n更适合黑胶体质的热歌榜单来啦！\n哪首是你的单曲循环？\n成为尊贵黑胶，随心畅听热门好歌！",
|
||||
"cover": "https://p1.music.126.net/Ay3mLgQ9weG_c8JjYrD-Bw==/109951169743106495.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:36",
|
||||
"updated_at": 1756958736684,
|
||||
"created": "2022-12-02 18:51:31",
|
||||
"created_at": 1669978291024,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7785066739"
|
||||
},
|
||||
{
|
||||
"id": 7785091694,
|
||||
"name": "黑胶VIP爱搜榜",
|
||||
"description": "云音乐站内会员搜索播放热度TOP50的歌曲，每日更新。\n更适合黑胶体质的搜歌榜单来啦！\n热搜好歌一网打尽，只为有品位的你~\n成为尊贵黑胶，你搜我听畅听不停！",
|
||||
"cover": "https://p1.music.126.net/R7DtZqNraesnsiaIKvzTHA==/109951169743112799.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:41",
|
||||
"updated_at": 1756958741914,
|
||||
"created": "2022-12-02 18:51:43",
|
||||
"created_at": 1669978303210,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=7785091694"
|
||||
},
|
||||
{
|
||||
"id": 8246775932,
|
||||
"name": "实时热度榜",
|
||||
"description": "每天9-23点为你精选当下歌曲热度最高的歌曲",
|
||||
"cover": "https://p1.music.126.net/U7ZbdpWzRdmZVr6Khn_4ag==/109951168673982478.jpg",
|
||||
"update_frequency": "更新65首",
|
||||
"updated": "2025-09-05 09:30:07",
|
||||
"updated_at": 1757035807371,
|
||||
"created": "2023-03-20 10:39:59",
|
||||
"created_at": 1679279999154,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8246775932"
|
||||
},
|
||||
{
|
||||
"id": 8537588450,
|
||||
"name": "喜力®星电音派对潮音榜",
|
||||
"description": "乐无界，越未来！《星电音联盟》歌曲官方榜单，每周一更新，让云村村民们随时随地躁起高燃派对氛围！喜力®星电音构建狂欢永不停歇的新奇电音宇宙，激活潮流基因，释放先锋灵感，跨维开启奇妙电音之旅！",
|
||||
"cover": "https://p1.music.126.net/HVu2hGYvzN5XBuvFc_4Bgg==/109951168730309120.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2024-09-16 12:05:30",
|
||||
"updated_at": 1726459530378,
|
||||
"created": "2023-07-07 10:48:39",
|
||||
"created_at": 1688698119437,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8537588450"
|
||||
},
|
||||
{
|
||||
"id": 8661209031,
|
||||
"name": "乐夏榜",
|
||||
"description": "听乐夏，上网易云，一头扎进爱音乐的人群！ 综艺《乐队的夏天3》官方榜单，每周一更新。和三星折叠屏手机一起畅听《乐队的夏天3》官方榜单，折叠看三星，五代更来劲。",
|
||||
"cover": "https://p1.music.126.net/RlStCmE97y0xYFk7rS3Zww==/109951168864907822.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 12:05:41",
|
||||
"updated_at": 1756699541864,
|
||||
"created": "2023-08-16 17:47:27",
|
||||
"created_at": 1692179247425,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8661209031"
|
||||
},
|
||||
{
|
||||
"id": 8703179781,
|
||||
"name": "特斯拉车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/UL8dhobSa3TR6Wd1JmWe_g==/109951168924385363.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:08",
|
||||
"updated_at": 1756713908385,
|
||||
"created": "2023-08-31 12:29:59",
|
||||
"created_at": 1693456199735,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8703179781"
|
||||
},
|
||||
{
|
||||
"id": 8703052295,
|
||||
"name": "理想车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/U--PWdWupY1ER5cVSjr1jQ==/109951168928365496.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:09",
|
||||
"updated_at": 1756713909830,
|
||||
"created": "2023-08-31 12:38:29",
|
||||
"created_at": 1693456709598,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8703052295"
|
||||
},
|
||||
{
|
||||
"id": 8702582160,
|
||||
"name": "比亚迪车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/S1OG-OLTaofa3HfrHW48kA==/109951168924393585.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:07",
|
||||
"updated_at": 1756713907323,
|
||||
"created": "2023-08-31 12:38:42",
|
||||
"created_at": 1693456722262,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8702582160"
|
||||
},
|
||||
{
|
||||
"id": 8703220480,
|
||||
"name": "蔚来车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/r9kBQNsOro1EAB82Ol51WQ==/109951168924380971.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:04",
|
||||
"updated_at": 1756713904286,
|
||||
"created": "2023-08-31 12:38:56",
|
||||
"created_at": 1693456736086,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8703220480"
|
||||
},
|
||||
{
|
||||
"id": 8702982391,
|
||||
"name": "极氪车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/Cu0RXoKewSPM9Gyc7Cp8jw==/109951168924391596.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:06",
|
||||
"updated_at": 1756713906978,
|
||||
"created": "2023-08-31 12:39:19",
|
||||
"created_at": 1693456759762,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8702982391"
|
||||
},
|
||||
{
|
||||
"id": 8532443277,
|
||||
"name": "蛋仔派对听歌榜",
|
||||
"description": "来自蛋仔岛的热播歌曲速递，网易《蛋仔派对》官方榜单，每周五更新。云村村民们，和蛋仔们一起随歌摇摆吧！",
|
||||
"cover": "https://p1.music.126.net/TMb0be5QLMZKOFeuOKT4tg==/109951168717283910.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 12:05:43",
|
||||
"updated_at": 1756440343562,
|
||||
"created": "2023-07-05 10:32:04",
|
||||
"created_at": 1688524324879,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=8532443277"
|
||||
},
|
||||
{
|
||||
"id": 9651277674,
|
||||
"name": "AI歌曲榜",
|
||||
"description": "精心挑选每日最新最热AI生成歌曲，榜单每日更新，一起感受AI的独特魅力吧！",
|
||||
"cover": "https://p1.music.126.net/M0m6GeZ1Y8Osz9jqxaW8Wg==/109951169462048035.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:43",
|
||||
"updated_at": 1756958743415,
|
||||
"created": "2024-04-02 18:25:12",
|
||||
"created_at": 1712053512213,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=9651277674"
|
||||
},
|
||||
{
|
||||
"id": 10131772880,
|
||||
"name": "昊铂车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/EL7H4rkKejZY7Uv54EFNXg==/109951169655010112.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:03",
|
||||
"updated_at": 1756713903085,
|
||||
"created": "2024-06-04 16:50:00",
|
||||
"created_at": 1717491000945,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=10131772880"
|
||||
},
|
||||
{
|
||||
"id": 10162841534,
|
||||
"name": "埃安车友爱听榜",
|
||||
"description": "埃安车友平时都在听什么？？",
|
||||
"cover": "https://p1.music.126.net/FcP1U6Bck0wPKqd0XgBwSQ==/109951169679731241.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:05",
|
||||
"updated_at": 1756713905568,
|
||||
"created": "2024-06-12 13:31:44",
|
||||
"created_at": 1718170304691,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=10162841534"
|
||||
},
|
||||
{
|
||||
"id": 12225155968,
|
||||
"name": "欧美R&B榜",
|
||||
"description": "云音乐用户一周内收听节奏布鲁斯（R&B）官方TOP排行榜，每周五更新。",
|
||||
"cover": "https://p1.music.126.net/0E6MzYzyA5uvQ4CSoIG2mw==/109951169739660034.jpg",
|
||||
"update_frequency": "每周五更新",
|
||||
"updated": "2025-08-29 12:05:45",
|
||||
"updated_at": 1756440345198,
|
||||
"created": "2024-06-25 18:14:05",
|
||||
"created_at": 1719310445382,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12225155968"
|
||||
},
|
||||
{
|
||||
"id": 12344472377,
|
||||
"name": "黑胶VIP限免榜",
|
||||
"description": "云音乐站内热度最高的限免播放歌曲TOP50，每日更新。\n人气旋律一听就会爱上！现在马上进入免费模式（点击云音乐首页左上角侧边栏，选择“免费听歌”）畅听全榜吧！",
|
||||
"cover": "https://p1.music.126.net/WXCSf4ZNcDCdOTY5ixm3Bg==/109951169809318325.jpg",
|
||||
"update_frequency": "每天更新",
|
||||
"updated": "2025-09-04 12:05:45",
|
||||
"updated_at": 1756958745487,
|
||||
"created": "2024-07-23 16:08:37",
|
||||
"created_at": 1721722117311,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12344472377"
|
||||
},
|
||||
{
|
||||
"id": 12717025277,
|
||||
"name": "吉利车友爱听榜",
|
||||
"description": null,
|
||||
"cover": "https://p1.music.126.net/XVmZb3JSyrwMgqu9WVz61A==/109951170037568570.jpg",
|
||||
"update_frequency": "每周一更新",
|
||||
"updated": "2025-09-01 16:05:01",
|
||||
"updated_at": 1756713901625,
|
||||
"created": "2024-10-12 13:44:04",
|
||||
"created_at": 1728711844151,
|
||||
"link": "https://music.163.com/#/discover/toplist?id=12717025277"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user