shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

热搜榜单

Browse Source 
热搜榜单
This commit is contained in:
yangyaoxiang666
2025-09-06 09:54:49 +08:00
parent b8456c437a
commit bd4c7439be
20 changed files with 1591 additions and 7940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css
View File

@@ -117,14 +117,65 @@ header {
}
header h1 {
background: linear-gradient(135deg, #4096ff, #ff7a45);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.5px;
flex-wrap: wrap;
}
header h1 .icon {
margin-right: 10px;
font-size: 2.6rem;
animation: pulse 2s infinite ease-in-out;
}
header h1 .title-text {
background: linear-gradient(135deg, #4096ff, #ff7a45);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
header h1 .update-badge {
font-size: 0.9rem;
background: linear-gradient(135deg, #ff7a45, #ff4d4f);
color: white;
padding: 4px 10px;
border-radius: 20px;
margin-left: 12px;
font-weight: 500;
box-shadow: 0 2px 8px rgba(255, 122, 69, 0.3);
animation: float 3s infinite ease-in-out;
}
.header-desc {
color: #666;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.5px;
margin-top: 10px;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.update-time {
@@ -135,10 +186,57 @@ header h1 {
border-radius: 24px;
display: inline-block;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
.movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
margin-top: 24px;
animation: fadeInUp 0.8s ease-out;
}
.hot-list {
list-style: none;
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.movie-item {
padding: 20px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
border: 1px solid rgba(0, 0, 0, 0.03);
overflow: hidden;
position: relative;
}
.movie-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
border-color: rgba(64, 169, 255, 0.3);
}
.movie-item.top-1 {
background: linear-gradient(to bottom right, rgba(255, 215, 0, 0.1), white);
border-color: rgba(255, 215, 0, 0.3);
}
.movie-item.top-2 {
background: linear-gradient(to bottom right, rgba(192, 192, 192, 0.1), white);
border-color: rgba(192, 192, 192, 0.3);
}
.movie-item.top-3 {
background: linear-gradient(to bottom right, rgba(205, 127, 50, 0.1), white);
border-color: rgba(205, 127, 50, 0.3);
}
.hot-item {
@@ -159,20 +257,52 @@ header h1 {
border-color: rgba(64, 169, 255, 0.3);
}
.hot-rank {
.rank-badge {
position: absolute;
top: 10px;
left: 10px;
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);
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 2;
transition: all 0.3s ease;
}
.movie-item:hover .rank-badge {
transform: scale(1.1);
}
.rank-badge.gold {
background: linear-gradient(135deg, #ffd700, #ffb700);
color: white;
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}
.rank-badge.silver {
background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
color: white;
box-shadow: 0 2px 10px rgba(192, 192, 192, 0.4);
}
.rank-badge.bronze {
background: linear-gradient(135deg, #cd7f32, #b06728);
color: white;
box-shadow: 0 2px 10px rgba(205, 127, 50, 0.4);
}
.rank-badge.regular {
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
color: #666;
}
.hot-rank.top-1 {
@@ -190,24 +320,50 @@ header h1 {
color: white;
}
.hot-content {
.movie-info {
padding: 25px 0 5px;
flex: 1;
}
.hot-title {
.movie-name {
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;
font-weight: 600;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.hot-title:hover {
color: #4096ff;
text-decoration: none;
.movie-detail {
color: #666;
font-size: 0.9rem;
margin-bottom: 5px;
display: flex;
align-items: center;
}
.movie-detail .label {
color: #999;
margin-right: 5px;
}
.movie-boxoffice {
font-weight: 600;
color: #ff7a45;
font-size: 1.1rem;
margin-top: 10px;
}
.movie-boxoffice .currency {
font-size: 0.85rem;
color: #999;
margin-right: 2px;
}
.loading {

7
frontend/60sapi/热搜榜单/猫眼票房排行榜/index.html
View File

@@ -18,10 +18,11 @@
<!-- 页面头部 -->
<header class="header">
<h1>
<span>🎬</span>
猫眼票房排行榜（时更）
<span class="icon">🎬</span>
<span class="title-text">猫眼票房排行榜</span>
<span class="update-badge">实时更新</span>
</h1>
<p>展示全球电影总票房排行榜，数据来自权威源头，稳定实时</p>
<p class="header-desc">全球电影总票房榜单 | 权威数据 | 实时更新</p>
</header>
<!-- 加载状态 -->

69
frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js
View File

@@ -156,18 +156,6 @@ function renderRanking(payload) {
// 渲染列表
const html = `
<section class="stats-container">
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value" id="stats-total">${list.length}</div>
<div class="stat-label">入榜影片数量</div>
</div>
<div class="stat-item">
<div class="stat-value" id="stats-top10">${Math.min(10, list.length)}</div>
<div class="stat-label">TOP10 数量</div>
</div>
</div>
</section>
<section class="ranking-container">
<h2 class="ranking-title">全球电影总票房排行榜</h2>
<div class="movie-list">
@@ -182,37 +170,56 @@ function renderRanking(payload) {
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';
// 使用猫眼ID获取电影海报图片 - 使用更可靠的图片源
const posterUrl = `https://img.maoyan.com/movie/poster/1${item.maoyan_id}.jpg`;
// 备用图片源
const backupPosterUrl = `https://p0.pipi.cn/mmdb/fb738633ac80c2f8a7a48e5b465128${item.maoyan_id % 10}/${item.maoyan_id}.jpg?imageView2/1/w/160/h/220`;
// 格式化票房数据
const boxOffice = formatBoxOffice(item.boxoffice || item.box_office);
// 美化排名显示
let rankDisplay;
if (rank === 1) {
rankDisplay = '🏆 1';
} else if (rank === 2) {
rankDisplay = '🥈 2';
} else if (rank === 3) {
rankDisplay = '🥉 3';
} else {
rankDisplay = `NO.${rank}`;
}
return `
<div class="movie-item ${cls}">
<div class="rank-badge ${badgeCls}">${rank}</div>
<div class="movie-poster">
<img src="${posterUrl}" alt="${escapeHtml(item.movie_name)}" onerror="this.onerror=null; this.src='${backupPosterUrl}'; this.onerror=function(){this.src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22160%22 height%3D%22220%22 viewBox%3D%220 0 160 220%22%3E%3Crect fill%3D%22%23f0f0f0%22 width%3D%22160%22 height%3D%22220%22%2F%3E%3Ctext fill%3D%22%23999%22 font-family%3D%22Arial%2CSans-serif%22 font-size%3D%2216%22 x%3D%2250%25%22 y%3D%2250%25%22 text-anchor%3D%22middle%22 dominant-baseline%3D%22middle%22%3E无图片%3C%2Ftext%3E%3C%2Fsvg%3E';}">
</div>
<div class="rank-badge ${badgeCls}">${rankDisplay}</div>
<div class="movie-info">
<div class="rank-number">#${rank}</div>
<div class="movie-details">
<div class="movie-name">${escapeHtml(item.movie_name)}</div>
<div class="movie-year">上映年份：${escapeHtml(item.release_year || '')}</div>
</div>
<div class="box-office">
<div class="box-office-amount">${formatCurrencyDesc(item.box_office_desc, item.box_office)}</div>
<div class="box-office-desc">总票房</div>
</div>
<div class="movie-name">${escapeHtml(item.movie_name)}</div>
<div class="movie-detail"><span class="label">上映:</span> ${escapeHtml(item.release_year || '未知')}</div>
<div class="movie-boxoffice"><span class="currency">¥</span> ${boxOffice}</div>
</div>
</div>
`;
</div>`;
}
function formatCurrencyDesc(desc, num) {
if (desc && typeof desc === 'string' && desc.trim()) return desc;
if (typeof num === 'number') {