From 6829a16f966213bf516de624955fb5cb6cfc4aea Mon Sep 17 00:00:00 2001 From: yangyaoxiang666 Date: Thu, 4 Sep 2025 14:07:42 +0800 Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E9=97=A8=E6=8E=A8=E8=8D=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 热门推荐 --- .../热搜榜单/Hacker News 榜单/css/style.css | 1238 ++++------------- .../哔哩哔哩热搜榜/css/background.css | 146 +- .../热搜榜单/哔哩哔哩热搜榜/css/style.css | 256 +++- .../60sapi/热搜榜单/哔哩哔哩热搜榜/index.html | 2 +- .../热搜榜单/头条热搜榜/css/background.css | 14 +- .../60sapi/热搜榜单/头条热搜榜/css/style.css | 519 +++++-- .../60sapi/热搜榜单/头条热搜榜/index.html | 32 +- .../60sapi/热搜榜单/头条热搜榜/js/main.js | 29 +- .../热搜榜单/微博热搜榜/css/background.css | 23 +- .../60sapi/热搜榜单/微博热搜榜/css/style.css | 337 ++++- .../60sapi/热搜榜单/微博热搜榜/img/qeye.svg | 42 + .../60sapi/热搜榜单/微博热搜榜/index.html | 4 +- .../60sapi/热搜榜单/抖音热搜榜/css/style.css | 1131 ++++----------- .../热搜榜单/猫眼票房排行榜/css/style.css | 658 ++++----- .../热搜榜单/猫眼票房排行榜/js/script.js | 8 + .../热搜榜单/知乎热门话题/css/background.css | 13 +- .../热搜榜单/知乎热门话题/css/style.css | 486 ++++--- .../热搜榜单/知乎热门话题/img/zhihu-logo.svg | 6 + .../60sapi/热搜榜单/知乎热门话题/js/main.js | 18 +- .../网易云榜单列表/css/background.css | 128 ++ .../热搜榜单/网易云榜单列表/css/style.css | 389 ++++++ .../60sapi/热搜榜单/网易云榜单列表/index.html | 306 ++++ .../热搜榜单/网易云榜单列表/接口集合.json | 6 +- .../网易云榜单详情/css/background.css | 58 +- .../热搜榜单/网易云榜单详情/css/style.css | 678 ++++----- .../60sapi/热搜榜单/网易云榜单详情/index.html | 45 +- .../热搜榜单/网易云榜单详情/js/script.js | 208 ++- .../热搜榜单/网易云榜单详情/接口集合.json | 3 +- 28 files changed, 3665 insertions(+), 3118 deletions(-) create mode 100644 frontend/60sapi/热搜榜单/微博热搜榜/img/qeye.svg create mode 100644 frontend/60sapi/热搜榜单/知乎热门话题/img/zhihu-logo.svg create mode 100644 frontend/60sapi/热搜榜单/网易云榜单列表/css/background.css create mode 100644 frontend/60sapi/热搜榜单/网易云榜单列表/css/style.css create mode 100644 frontend/60sapi/热搜榜单/网易云榜单列表/index.html diff --git a/frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css b/frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css index caf27e8e..bfbfae9c 100644 --- a/frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css +++ b/frontend/60sapi/热搜榜单/Hacker News 榜单/css/style.css @@ -1,4 +1,88 @@ -/* 重置样式 */ +/* 背景样式 */ +.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; @@ -6,1032 +90,260 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; - line-height: 1.6; - color: #2c3e50; - overflow-x: hidden; + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f8f9fa; + position: relative; + min-height: 100vh; } -/* 容器 */ .container { - max-width: 1200px; + max-width: 800px; margin: 0 auto; - padding: 20px; - animation: containerFadeIn 1s ease-out; -} - -@keyframes containerFadeIn { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* 头部 */ -.header { - text-align: center; - margin-bottom: 40px; - background: rgba(255, 255, 255, 0.95); - padding: 40px 30px; - border-radius: 25px; - box-shadow: - 0 10px 40px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.5); - backdrop-filter: blur(20px); - border: 2px solid transparent; - background-clip: padding-box; + padding: 24px; position: relative; - overflow: hidden; -} - -.header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - rgba(255, 107, 107, 0.1), - rgba(78, 205, 196, 0.1), - rgba(69, 183, 209, 0.1), - rgba(150, 206, 180, 0.1) - ); - animation: headerShimmer 4s ease-in-out infinite; - z-index: -1; -} - -@keyframes headerShimmer { - 0%, 100% { opacity: 0.3; } - 50% { opacity: 0.7; } -} - -.header-icon { - font-size: 4em; - margin-bottom: 15px; - animation: rainbowBounce 3s ease-in-out infinite; - text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); -} - -@keyframes rainbowBounce { - 0%, 100% { - transform: translateY(0) scale(1); - filter: hue-rotate(0deg); - } - 25% { - transform: translateY(-10px) scale(1.05); - filter: hue-rotate(90deg); - } - 50% { - transform: translateY(-15px) scale(1.1); - filter: hue-rotate(180deg); - } - 75% { - transform: translateY(-5px) scale(1.05); - filter: hue-rotate(270deg); - } -} - -.title { - font-size: 3.2em; - font-weight: 800; - background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3); - background-size: 400% 400%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: rainbowText 3s ease-in-out infinite; - margin-bottom: 10px; - text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - letter-spacing: 2px; -} - -@keyframes rainbowText { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } -} - -.subtitle { - font-size: 1.3em; - color: #34495e; - margin-bottom: 25px; - font-weight: 600; - opacity: 0.9; -} - -/* 标签切换 */ -.tab-container { - display: flex; - justify-content: center; - gap: 15px; - margin-bottom: 25px; - flex-wrap: wrap; -} - -.tab-btn { - background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); - border: 2px solid transparent; - padding: 12px 24px; - border-radius: 25px; - cursor: pointer; - font-size: 1em; - font-weight: 600; - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - position: relative; - overflow: hidden; - display: flex; - align-items: center; - gap: 8px; - color: #2c3e50; + 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); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } -.tab-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); - transition: left 0.5s ease; +header { + text-align: center; + margin-bottom: 28px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } -.tab-btn:hover::before { - left: 100%; -} - -.tab-btn.active { - background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - color: white; - transform: translateY(-3px) scale(1.05); - box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); -} - -.tab-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); -} - -.tab-icon { - font-size: 1.2em; - transition: transform 0.3s ease; -} - -.tab-btn:hover .tab-icon { - transform: scale(1.2) rotate(10deg); +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; - gap: 8px; - color: #34495e; - font-size: 1em; - margin-bottom: 20px; - padding: 10px 20px; - background: rgba(52, 73, 94, 0.1); - border-radius: 25px; - display: inline-flex; - backdrop-filter: blur(5px); } -.time-icon { - font-size: 1.2em; - animation: tick 2s infinite; -} - -@keyframes tick { - 0%, 50% { transform: rotate(0deg); } - 25% { transform: rotate(20deg); } - 75% { transform: rotate(-20deg); } -} - -.refresh-btn { - background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1); - background-size: 200% 200%; +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; - border: none; - padding: 15px 35px; - border-radius: 30px; - cursor: pointer; - font-size: 1.1em; - font-weight: 700; - transition: all 0.4s ease; - box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3); - display: inline-flex; - align-items: center; - gap: 10px; - position: relative; - overflow: hidden; - animation: buttonRainbow 3s ease-in-out infinite; } -@keyframes buttonRainbow { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } +.hot-rank.top-2 { + background: linear-gradient(135deg, #ff7a45, #ffa940); + color: white; } -.refresh-btn::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(255, 255, 255, 0.3); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: all 0.6s ease; +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffa940, #ffec3d); + color: white; } -.refresh-btn:hover::before { - width: 300px; - height: 300px; +.hot-content { + flex: 1; } -.refresh-btn:hover { - transform: translateY(-4px) scale(1.05); - box-shadow: 0 10px 30px rgba(255, 107, 107, 0.5); +.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; } -.btn-icon { - font-size: 1.3em; - transition: transform 0.4s ease; +.hot-title:hover { + color: #4096ff; + text-decoration: none; } -.refresh-btn:hover .btn-icon { - transform: rotate(360deg); -} - -/* 彩虹加载动画 */ .loading { text-align: center; - padding: 70px 40px; - background: rgba(255, 255, 255, 0.95); - border-radius: 25px; - margin-bottom: 25px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(20px); + padding: 40px; + color: #666; + font-size: 1.1rem; } -.loading-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 25px; -} - -.rainbow-spinner { - width: 60px; - height: 60px; - border: 6px solid transparent; - border-radius: 50%; - background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3) border-box; - background-clip: padding-box; - position: relative; - animation: rainbowSpin 2s linear infinite; -} - -.rainbow-spinner::before { - content: ''; - position: absolute; - top: -6px; - left: -6px; - right: -6px; - bottom: -6px; - background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3); - border-radius: 50%; - z-index: -1; - animation: rainbowSpin 2s linear infinite reverse; -} - -@keyframes rainbowSpin { - 0% { transform: rotate(0deg); filter: hue-rotate(0deg); } - 100% { transform: rotate(360deg); filter: hue-rotate(360deg); } -} - -.loading-text { - display: flex; - flex-direction: column; - align-items: center; - gap: 15px; -} - -.loading-emoji { - font-size: 3em; - animation: rocketPulse 1.5s ease-in-out infinite alternate; -} - -@keyframes rocketPulse { - 0% { transform: scale(1) rotate(-10deg); } - 100% { transform: scale(1.2) rotate(10deg); } -} - -.loading-text p { - font-size: 1.2em; - color: #34495e; - font-weight: 600; - margin: 0; -} - -.loading-dots { - display: flex; - gap: 8px; -} - -.loading-dots span { - width: 10px; - height: 10px; - border-radius: 50%; - animation: dotRainbow 1.4s ease-in-out infinite both; -} - -.loading-dots span:nth-child(1) { - background: #ff6b6b; - animation-delay: -0.32s; -} -.loading-dots span:nth-child(2) { - background: #4ecdc4; - animation-delay: -0.16s; -} -.loading-dots span:nth-child(3) { - background: #45b7d1; - animation-delay: 0s; -} - -@keyframes dotRainbow { - 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } - 40% { transform: scale(1.3); opacity: 1; } -} - -/* 新闻列表 */ -.news-list { - display: grid; - gap: 25px; - animation: listFadeIn 0.8s ease-out; -} - -@keyframes listFadeIn { - from { - opacity: 0; - transform: translateY(40px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.news-item { - background: rgba(255, 255, 255, 0.98); - border-radius: 20px; - padding: 30px; - box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border: 2px solid transparent; - backdrop-filter: blur(15px); - position: relative; - overflow: hidden; - animation: itemSlideIn 0.6s ease-out; - animation-fill-mode: both; -} - -.news-item:nth-child(odd) { - animation-delay: 0.1s; -} - -.news-item:nth-child(even) { - animation-delay: 0.2s; -} - -@keyframes itemSlideIn { - from { - opacity: 0; - transform: translateX(-60px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.news-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 6px; - height: 100%; - background: linear-gradient(to bottom, #ff6b6b, #4ecdc4, #45b7d1); - transform: scaleY(0); - transition: transform 0.4s ease; -} - -.news-item:hover::before { - transform: scaleY(1); -} - -.news-item:hover { - box-shadow: 0 10px 50px rgba(0, 0, 0, 0.12); - transform: translateY(-8px) scale(1.02); - border-color: rgba(255, 107, 107, 0.3); -} - -.news-header { - display: flex; - align-items: center; - margin-bottom: 20px; - gap: 15px; -} - -.news-rank { - background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - color: white; - min-width: 45px; - height: 45px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 1.1em; - flex-shrink: 0; - position: relative; - box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); - animation: rankGlow 3s ease-in-out infinite; -} - -@keyframes rankGlow { - 0%, 100% { - box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); - background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - } - 33% { - box-shadow: 0 4px 20px rgba(78, 205, 196, 0.4); - background: linear-gradient(135deg, #4ecdc4, #45b7d1); - } - 66% { - box-shadow: 0 4px 20px rgba(69, 183, 209, 0.4); - background: linear-gradient(135deg, #45b7d1, #96ceb4); - } -} - -.news-rank.top-5 { - background: linear-gradient(135deg, #feca57, #ff9ff3, #54a0ff); - animation: topRankGlow 2s ease-in-out infinite alternate; -} - -@keyframes topRankGlow { - 0% { - box-shadow: 0 4px 20px rgba(254, 202, 87, 0.5); - transform: scale(1); - } - 100% { - box-shadow: 0 6px 30px rgba(255, 159, 243, 0.6), 0 0 40px rgba(84, 160, 255, 0.3); - transform: scale(1.05); - } -} - -.news-rank.top-5::before { - content: '⭐'; - position: absolute; - top: -10px; - right: -8px; - font-size: 0.8em; - animation: starTwinkle 1s ease-in-out infinite alternate; -} - -@keyframes starTwinkle { - 0% { transform: translateY(0) rotate(-10deg) scale(1); } - 100% { transform: translateY(-3px) rotate(10deg) scale(1.1); } -} - -.news-score { - background: linear-gradient(135deg, #ff6b6b, #feca57); - color: white; - padding: 8px 16px; - border-radius: 20px; - font-weight: 700; - font-size: 1em; - box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3); - animation: scoreFloat 2s ease-in-out infinite alternate; -} - -@keyframes scoreFloat { - 0% { transform: translateY(0); } - 100% { transform: translateY(-2px); } -} - -.news-title { - font-size: 1.3em; - font-weight: 700; - color: #2c3e50; - line-height: 1.4; - margin-bottom: 15px; - position: relative; -} - -.news-meta { - display: flex; - align-items: center; - gap: 20px; - margin-bottom: 15px; - flex-wrap: wrap; -} - -.news-author { - color: #7f8c8d; - font-size: 1em; - font-weight: 600; - display: flex; - align-items: center; - gap: 6px; -} - -.news-author::before { - content: '👤'; - font-size: 1.1em; -} - -.news-time { - color: #95a5a6; - font-size: 0.95em; - display: flex; - align-items: center; - gap: 6px; -} - -.news-time::before { - content: '🕒'; - font-size: 1em; -} - -.news-link { - display: inline-flex; - align-items: center; - gap: 8px; - color: white; - text-decoration: none; - font-size: 1em; - font-weight: 600; - padding: 12px 24px; - background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - background-size: 200% 200%; - border-radius: 30px; - transition: all 0.4s ease; - position: relative; - overflow: hidden; - animation: linkRainbow 4s ease-in-out infinite; - box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); -} - -@keyframes linkRainbow { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } -} - -.news-link::before { - content: '🚀'; - font-size: 1.1em; -} - -.news-link::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: left 0.6s ease; -} - -.news-link:hover::after { - left: 100%; -} - -.news-link:hover { - transform: scale(1.05) translateY(-2px); - box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5); -} - -/* 错误信息 */ -.error-message { +footer { text-align: center; - padding: 70px 40px; - background: rgba(255, 255, 255, 0.95); - border-radius: 25px; - box-shadow: 0 10px 40px rgba(231, 76, 60, 0.1); - backdrop-filter: blur(20px); + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid rgba(0, 0, 0, 0.06); + color: #666; + font-size: 0.9rem; } -.error-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 25px; -} - -.error-icon { - font-size: 5em; - animation: errorShake 1.5s ease-in-out infinite alternate; -} - -@keyframes errorShake { - 0% { transform: translateX(0) rotate(0deg); } - 25% { transform: translateX(-8px) rotate(-8deg); } - 50% { transform: translateX(8px) rotate(8deg); } - 75% { transform: translateX(-5px) rotate(-5deg); } - 100% { transform: translateX(0) rotate(0deg); } -} - -.error-content h3 { - font-size: 1.8em; - color: #e74c3c; - margin: 0; - font-weight: 700; -} - -.error-content p { - color: #7f8c8d; - font-size: 1.1em; - margin: 0; - line-height: 1.6; -} - -.retry-btn { - background: linear-gradient(135deg, #ff6b6b, #4ecdc4); - color: white; - border: none; - padding: 15px 30px; - border-radius: 30px; - cursor: pointer; - font-size: 1.1em; - font-weight: 700; - transition: all 0.4s ease; - box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3); - display: inline-flex; - align-items: center; - gap: 10px; -} - -.retry-btn:hover { - background: linear-gradient(135deg, #e74c3c, #3498db); - box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5); - transform: translateY(-3px); -} - -.retry-btn span { - font-size: 1.2em; - transition: transform 0.4s ease; -} - -.retry-btn:hover span { - transform: rotate(360deg); -} - -/* 平板端适配 (768px - 1024px) */ -@media (min-width: 768px) and (max-width: 1024px) { +/* 响应式设计 */ +@media (max-width: 1024px) and (min-width: 768px) { .container { - padding: 25px; - } - - .header { - padding: 35px 25px; - } - - .header-icon { - font-size: 3.5em; - } - - .title { - font-size: 2.8em; - letter-spacing: 1.5px; - } - - .subtitle { - font-size: 1.2em; - } - - .news-list { - grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); - gap: 30px; - } - - .news-item { - padding: 25px; - } - - .news-rank { - min-width: 42px; - height: 42px; - font-size: 1.05em; - } - - .news-title { - font-size: 1.25em; - } - - .tab-container { - gap: 12px; - } - - .tab-btn { - padding: 10px 20px; - font-size: 0.95em; - } -} - -/* 电脑端适配 (1025px+) */ -@media (min-width: 1025px) { - .container { - padding: 40px; - } - - .header { - padding: 50px 40px; - margin-bottom: 50px; - } - - .header-icon { - font-size: 4.5em; - } - - .title { - font-size: 3.8em; - letter-spacing: 3px; - } - - .subtitle { - font-size: 1.4em; - } - - .news-list { - grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); - gap: 35px; - } - - .news-item { - padding: 35px; - } - - .news-rank { - min-width: 50px; - height: 50px; - font-size: 1.2em; - } - - .news-title { - font-size: 1.4em; - } - - .news-meta { - gap: 25px; - } - - .news-author { - font-size: 1.05em; - } - - .news-time { - font-size: 1em; - } - - .news-link { - font-size: 1.05em; - padding: 14px 28px; - } - - /* 电脑端特殊效果 */ - .news-item:hover { - transform: translateY(-10px) scale(1.03); - } - - .tab-btn { - padding: 14px 28px; - font-size: 1.05em; - } -} - -/* 手机端适配 (767px以下) */ -@media (max-width: 767px) { - .container { - padding: 15px; - } - - .header { - padding: 25px 20px; - margin-bottom: 25px; - } - - .header-icon { - font-size: 2.8em; - } - - .title { - font-size: 2.2em; - letter-spacing: 1px; - } - - .subtitle { - font-size: 1em; - } - - .tab-container { - gap: 8px; - justify-content: center; - } - - .tab-btn { - padding: 8px 16px; - font-size: 0.85em; - flex-direction: column; - gap: 4px; - } - - .update-time { - font-size: 0.9em; - padding: 8px 16px; - } - - .refresh-btn { - padding: 12px 24px; - font-size: 0.95em; - } - - .news-item { + max-width: 90%; padding: 20px; - border-radius: 15px; } - .news-rank { - min-width: 38px; - height: 38px; - font-size: 0.95em; + header h1 { + font-size: 2.2rem; } - .news-title { - font-size: 1.15em; - line-height: 1.3; + .hot-item { + padding: 18px; } - .news-meta { - flex-direction: column; - align-items: flex-start; - gap: 10px; - } - - .news-author { - font-size: 0.9em; - } - - .news-time { - font-size: 0.85em; - } - - .news-link { - font-size: 0.9em; - padding: 10px 20px; - align-self: flex-start; - } - - /* 手机端动画优化 */ - .news-item { - animation-duration: 0.4s; - } - - .news-item:hover { - transform: translateY(-3px) scale(1.01); + .hot-title { + font-size: 1.1rem; } } -/* 超小屏幕适配 (480px以下) */ -@media (max-width: 480px) { +@media (max-width: 768px) { + body { + background-color: #f8f9fa; + } + .container { - padding: 12px; - } - - .header { - padding: 20px 15px; - margin-bottom: 20px; - } - - .header-icon { - font-size: 2.5em; - } - - .title { - font-size: 1.9em; - letter-spacing: 0.5px; - } - - .subtitle { - font-size: 0.95em; - } - - .tab-container { - gap: 6px; - } - - .tab-btn { - padding: 6px 12px; - font-size: 0.8em; - min-width: auto; - } - - .tab-icon { - font-size: 1em; - } - - .update-time { - font-size: 0.85em; - padding: 6px 12px; - flex-direction: column; - gap: 4px; - } - - .refresh-btn { - padding: 10px 20px; - font-size: 0.9em; - } - - .news-list { - gap: 15px; - } - - .news-item { - padding: 18px 15px; + max-width: 95%; + margin: 12px auto; + padding: 16px; border-radius: 12px; } - .news-header { - gap: 12px; - margin-bottom: 15px; + header { + margin-bottom: 20px; + padding-bottom: 16px; } - .news-rank { - min-width: 35px; - height: 35px; - font-size: 0.9em; + header h1 { + font-size: 1.8rem; + margin-bottom: 10px; } - .news-title { - font-size: 1.05em; - line-height: 1.25; + .update-time { + font-size: 0.85rem; + padding: 6px 12px; } - .news-meta { - gap: 8px; + .hot-item { + padding: 16px; + margin-bottom: 12px; + border-radius: 10px; + flex-direction: row; + align-items: flex-start; } - .news-author { - font-size: 0.85em; + .hot-rank { + font-size: 1.1rem; + margin-right: 14px; + min-width: 32px; + width: 32px; + height: 32px; + margin-top: 2px; } - .news-time { - font-size: 0.8em; + .hot-title { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 6px; } - .news-link { - font-size: 0.85em; - padding: 8px 16px; - } - - /* 超小屏幕性能优化 */ - .news-item { - transition: transform 0.2s ease, box-shadow 0.2s ease; - } - - .news-item::before, - .news-item::after, - .news-link::after { - display: none; - } - - .loading-content { - gap: 15px; - } - - .loading-emoji { - font-size: 2.5em; - } - - .error-icon { - font-size: 3.5em; - } - - .error-content h3 { - font-size: 1.4em; - } - - .error-content p { - font-size: 0.95em; + 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% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css index a7d0b453..7a26d1e7 100644 --- a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/background.css @@ -6,9 +6,100 @@ height: 100%; z-index: -1; overflow: hidden; + background-color: #f0f7ff; } -.green-gradient { +/* 太阳元素 */ +.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%; @@ -16,16 +107,19 @@ height: 200%; background: linear-gradient( 135deg, - rgba(76, 175, 80, 0.3) 0%, - rgba(129, 199, 132, 0.2) 25%, - rgba(165, 214, 167, 0.1) 50%, - rgba(200, 230, 201, 0.2) 75%, - rgba(76, 175, 80, 0.3) 100% + 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: green-flow 20s ease-in-out infinite; + animation: gradient-flow 25s ease-in-out infinite; + border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; + filter: blur(30px); } -.green-gradient::before { +.modern-gradient::before { content: ''; position: absolute; top: 0; @@ -33,18 +127,20 @@ width: 100%; height: 100%; background: radial-gradient( - circle at 30% 70%, - rgba(139, 195, 74, 0.4) 0%, - transparent 50% + circle at 25% 65%, + rgba(24, 144, 255, 0.6) 0%, + transparent 60% ), radial-gradient( - circle at 70% 30%, - rgba(102, 187, 106, 0.3) 0%, - transparent 50% + circle at 75% 35%, + rgba(245, 85, 65, 0.5) 0%, + transparent 60% ); - animation: green-pulse 15s ease-in-out infinite alternate; + animation: pulse-effect 18s ease-in-out infinite alternate; + border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; + filter: blur(20px); } -@keyframes green-flow { +@keyframes gradient-flow { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; @@ -63,7 +159,7 @@ } } -@keyframes green-pulse { +@keyframes pulse-effect { 0% { transform: scale(1) rotate(0deg); opacity: 0.5; @@ -80,28 +176,28 @@ /* 手机端背景优化 */ @media (max-width: 768px) { - .green-gradient { + .modern-gradient { animation-duration: 25s; } - .green-gradient::before { + .modern-gradient::before { animation-duration: 18s; } } /* 减少动画以节省电池 */ @media (prefers-reduced-motion: reduce) { - .green-gradient, - .green-gradient::before { + .modern-gradient, + .modern-gradient::before { animation: none; } - .green-gradient { + .modern-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% + rgba(64, 169, 255, 0.3) 0%, + rgba(255, 175, 64, 0.2) 50%, + rgba(255, 122, 69, 0.25) 100% ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css index a9a4f728..d172b7e7 100644 --- a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/css/style.css @@ -1,3 +1,88 @@ +/* 背景样式 */ +.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; @@ -7,44 +92,52 @@ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; - background-color: #f0f8f0; + background-color: #f0f7ff; position: relative; min-height: 100vh; } .container { max-width: 800px; - margin: 0 auto; - padding: 20px; + margin: 20px auto; + padding: 28px; position: relative; z-index: 1; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0, 128, 0, 0.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: 25px; - padding-bottom: 20px; - border-bottom: 2px solid #e8f5e8; + margin-bottom: 32px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.04); } header h1 { - color: #2d8f47; - margin-bottom: 12px; - font-size: 2.2rem; - font-weight: 600; - text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); + 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: #6b8e6b; - font-size: 0.95rem; - background-color: #f0f8f0; - padding: 8px 16px; - border-radius: 20px; + 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 { @@ -52,51 +145,51 @@ header h1 { } .hot-item { - padding: 18px; - margin-bottom: 12px; - border-radius: 10px; + padding: 22px; + margin-bottom: 20px; + border-radius: 16px; background-color: white; - box-shadow: 0 3px 8px rgba(0, 128, 0, 0.08); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; display: flex; align-items: center; - border-left: 4px solid transparent; + border: 1px solid rgba(255, 255, 255, 0.8); } .hot-item:hover { transform: translateY(-3px); - box-shadow: 0 6px 16px rgba(0, 128, 0, 0.15); - border-left-color: #4caf50; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: rgba(64, 169, 255, 0.3); } .hot-rank { - font-size: 1.3rem; + font-size: 1.2rem; font-weight: bold; - color: #4caf50; + color: #4096ff; margin-right: 18px; - min-width: 35px; + min-width: 38px; text-align: center; - background-color: #f0f8f0; + background-color: rgba(64, 169, 255, 0.1); border-radius: 50%; - width: 35px; - height: 35px; + width: 38px; + height: 38px; display: flex; align-items: center; justify-content: center; } .hot-rank.top-1 { - background: linear-gradient(135deg, #ff6b6b, #ff8e8e); + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; } .hot-rank.top-2 { - background: linear-gradient(135deg, #ffa726, #ffb74d); + background: linear-gradient(135deg, #ff7a45, #ffa940); color: white; } .hot-rank.top-3 { - background: linear-gradient(135deg, #ffca28, #ffd54f); + background: linear-gradient(135deg, #ffa940, #ffec3d); color: white; } @@ -106,23 +199,24 @@ header h1 { .hot-title { font-size: 1.15rem; - margin-bottom: 6px; - color: #2c3e2c; + margin-bottom: 8px; + color: #333; text-decoration: none; display: block; - line-height: 1.4; + line-height: 1.5; font-weight: 500; + transition: color 0.2s ease; } .hot-title:hover { - color: #2d8f47; - text-decoration: underline; + color: #4096ff; + text-decoration: none; } .loading { text-align: center; padding: 40px; - color: #6b8e6b; + color: #666; font-size: 1.1rem; } @@ -130,24 +224,24 @@ footer { text-align: center; margin-top: 30px; padding-top: 20px; - border-top: 1px solid #e8f5e8; - color: #6b8e6b; + border-top: 1px solid rgba(0, 0, 0, 0.06); + color: #666; font-size: 0.9rem; } -/* 平板端适配 (768px - 1024px) */ +/* 响应式设计 */ @media (max-width: 1024px) and (min-width: 768px) { .container { max-width: 90%; - padding: 18px; + padding: 20px; } header h1 { - font-size: 2rem; + font-size: 2.2rem; } .hot-item { - padding: 16px; + padding: 18px; } .hot-title { @@ -155,22 +249,21 @@ footer { } } -/* 手机端适配 (最大768px) */ @media (max-width: 768px) { body { - background-color: #f8fdf8; + background-color: #f8f9fa; } .container { max-width: 95%; - margin: 10px auto; - padding: 15px; - border-radius: 8px; + margin: 12px auto; + padding: 16px; + border-radius: 12px; } header { margin-bottom: 20px; - padding-bottom: 15px; + padding-bottom: 16px; } header h1 { @@ -184,40 +277,39 @@ footer { } .hot-item { - padding: 14px; - margin-bottom: 10px; - border-radius: 8px; + padding: 16px; + margin-bottom: 12px; + border-radius: 10px; flex-direction: row; align-items: flex-start; } .hot-rank { font-size: 1.1rem; - margin-right: 12px; - min-width: 30px; - width: 30px; - height: 30px; + margin-right: 14px; + min-width: 32px; + width: 32px; + height: 32px; margin-top: 2px; } .hot-title { font-size: 1rem; line-height: 1.5; - margin-bottom: 4px; + margin-bottom: 6px; } footer { - margin-top: 20px; - padding-top: 15px; - font-size: 0.8rem; + margin-top: 24px; + padding-top: 16px; + font-size: 0.85rem; } } -/* 小屏手机适配 (最大480px) */ @media (max-width: 480px) { .container { - margin: 5px auto; - padding: 12px; + margin: 8px auto; + padding: 14px; } header h1 { @@ -225,24 +317,36 @@ footer { } .hot-item { - padding: 12px; - margin-bottom: 8px; + padding: 14px; + margin-bottom: 10px; } .hot-rank { font-size: 1rem; - margin-right: 10px; - min-width: 28px; - width: 28px; - height: 28px; + 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; + } - .update-time { - font-size: 0.8rem; - padding: 5px 10px; + .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% + ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html index 1a4c9686..5c58a175 100644 --- a/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html +++ b/frontend/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html @@ -9,7 +9,7 @@
-
+
diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css b/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css index a7d0b453..d3c2c6e3 100644 --- a/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css +++ b/frontend/60sapi/热搜榜单/头条热搜榜/css/background.css @@ -16,11 +16,11 @@ height: 200%; background: linear-gradient( 135deg, - rgba(76, 175, 80, 0.3) 0%, - rgba(129, 199, 132, 0.2) 25%, - rgba(165, 214, 167, 0.1) 50%, - rgba(200, 230, 201, 0.2) 75%, - rgba(76, 175, 80, 0.3) 100% + 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; } @@ -34,11 +34,11 @@ height: 100%; background: radial-gradient( circle at 30% 70%, - rgba(139, 195, 74, 0.4) 0%, + rgba(255, 45, 45, 0.4) 0%, transparent 50% ), radial-gradient( circle at 70% 30%, - rgba(102, 187, 106, 0.3) 0%, + rgba(255, 100, 100, 0.3) 0%, transparent 50% ); animation: green-pulse 15s ease-in-out infinite alternate; diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css b/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css index 39624d2f..e5904e78 100644 --- a/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css +++ b/frontend/60sapi/热搜榜单/头条热搜榜/css/style.css @@ -1,3 +1,88 @@ +/* 背景样式 */ +.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; @@ -7,44 +92,188 @@ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; - background-color: #f0f8f0; + 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: 20px; + padding: 24px; position: relative; z-index: 1; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0, 128, 0, 0.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: 25px; + margin-bottom: 28px; padding-bottom: 20px; - border-bottom: 2px solid #e8f5e8; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } header h1 { - color: #2d8f47; - margin-bottom: 12px; - font-size: 2.2rem; - font-weight: 600; - text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); + 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: #6b8e6b; - font-size: 0.95rem; - background-color: #f0f8f0; + color: #666; + font-size: 0.9rem; + background-color: rgba(0, 0, 0, 0.03); padding: 8px 16px; - border-radius: 20px; + 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 { @@ -52,139 +281,193 @@ header h1 { } .hot-item { - padding: 18px; - margin-bottom: 12px; - border-radius: 10px; + padding: 20px; + margin-bottom: 16px; + border-radius: 12px; background-color: white; - box-shadow: 0 3px 8px rgba(0, 128, 0, 0.08); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; display: flex; align-items: center; - border-left: 4px solid transparent; + 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 6px 16px rgba(0, 128, 0, 0.15); - border-left-color: #4caf50; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: rgba(64, 169, 255, 0.3); } .hot-rank { - font-size: 1.3rem; + font-size: 1.2rem; font-weight: bold; - color: #4caf50; + color: #4096ff; margin-right: 18px; - min-width: 35px; + min-width: 38px; text-align: center; - background-color: #f0f8f0; + background-color: rgba(64, 169, 255, 0.1); border-radius: 50%; - width: 35px; - height: 35px; + width: 38px; + height: 38px; display: flex; align-items: center; justify-content: center; - flex-shrink: 0; } .hot-rank.top-1 { - background: linear-gradient(135deg, #ff6b6b, #ff8e8e); + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; } .hot-rank.top-2 { - background: linear-gradient(135deg, #ffa726, #ffb74d); + background: linear-gradient(135deg, #ff7a45, #ffa940); color: white; } .hot-rank.top-3 { - background: linear-gradient(135deg, #ffca28, #ffd54f); + background: linear-gradient(135deg, #ffa940, #ffec3d); color: white; } .hot-content { flex: 1; - display: flex; - flex-direction: column; } .hot-title { font-size: 1.15rem; - margin-bottom: 6px; - color: #2c3e2c; + margin-bottom: 8px; + color: #333; text-decoration: none; display: block; - line-height: 1.4; + line-height: 1.5; font-weight: 500; + transition: color 0.2s ease; } .hot-title:hover { - color: #2d8f47; - text-decoration: underline; -} - -.hot-stats { - display: flex; - align-items: center; - gap: 15px; - font-size: 0.85rem; - color: #888; - margin-top: 5px; -} - -.stat-item { - display: flex; - align-items: center; - gap: 4px; -} - -.hot-value { - background: linear-gradient(135deg, #4caf50, #66bb6a); - color: white; - padding: 4px 8px; - border-radius: 12px; - font-weight: 500; - font-size: 0.8rem; -} - -.hot-tag { - background-color: #e8f5e8; - color: #2d8f47; - padding: 2px 6px; - border-radius: 8px; - font-size: 0.75rem; - font-weight: 500; + color: #4096ff; + text-decoration: none; } .loading { text-align: center; padding: 40px; - color: #6b8e6b; + color: #666; font-size: 1.1rem; } footer { text-align: center; - margin-top: 30px; + margin-top: 40px; padding-top: 20px; - border-top: 1px solid #e8f5e8; - color: #6b8e6b; + border-top: 1px solid rgba(0, 0, 0, 0.06); + color: #999; font-size: 0.9rem; } -/* 平板端适配 (768px - 1024px) */ +.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: 18px; + padding: 20px; } header h1 { - font-size: 2rem; + font-size: 2.2rem; } .hot-item { - padding: 16px; + padding: 18px; } .hot-title { @@ -192,22 +475,21 @@ footer { } } -/* 手机端适配 (最大768px) */ @media (max-width: 768px) { body { - background-color: #f8fdf8; + background-color: #f8f9fa; } .container { max-width: 95%; - margin: 10px auto; - padding: 15px; - border-radius: 8px; + margin: 12px auto; + padding: 16px; + border-radius: 12px; } header { margin-bottom: 20px; - padding-bottom: 15px; + padding-bottom: 16px; } header h1 { @@ -221,46 +503,39 @@ footer { } .hot-item { - padding: 14px; - margin-bottom: 10px; - border-radius: 8px; + padding: 16px; + margin-bottom: 12px; + border-radius: 10px; flex-direction: row; align-items: flex-start; } .hot-rank { font-size: 1.1rem; - margin-right: 12px; - min-width: 30px; - width: 30px; - height: 30px; + margin-right: 14px; + min-width: 32px; + width: 32px; + height: 32px; margin-top: 2px; } .hot-title { font-size: 1rem; line-height: 1.5; - margin-bottom: 4px; - } - - .hot-stats { - flex-wrap: wrap; - gap: 10px; - font-size: 0.8rem; + margin-bottom: 6px; } footer { - margin-top: 20px; - padding-top: 15px; - font-size: 0.8rem; + margin-top: 24px; + padding-top: 16px; + font-size: 0.85rem; } } -/* 小屏手机适配 (最大480px) */ @media (max-width: 480px) { .container { - margin: 5px auto; - padding: 12px; + margin: 8px auto; + padding: 14px; } header h1 { @@ -268,24 +543,36 @@ footer { } .hot-item { - padding: 12px; - margin-bottom: 8px; + padding: 14px; + margin-bottom: 10px; } .hot-rank { font-size: 1rem; - margin-right: 10px; - min-width: 28px; - width: 28px; - height: 28px; + 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; + } - .update-time { - font-size: 0.8rem; - padding: 5px 10px; + .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% + ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/index.html b/frontend/60sapi/热搜榜单/头条热搜榜/index.html index 0c77ee74..bb45284f 100644 --- a/frontend/60sapi/热搜榜单/头条热搜榜/index.html +++ b/frontend/60sapi/热搜榜单/头条热搜榜/index.html @@ -14,18 +14,46 @@
-

头条热搜榜

-
+
+
◢ ◣ ▲
+

头条热搜榜

+
▼ ◥ ◤
+
+
+ ◇ +
+ ◇ +
+
+ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ +
加载中...
+
+ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ +
+
+ ◆ + ■ + ▲ + ● + ★ +

数据来源于头条热搜榜

+
+ ★ + ● + ▲ + ■ + ◆ +
diff --git a/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js b/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js index cf7f0f6b..24cca068 100644 --- a/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js +++ b/frontend/60sapi/热搜榜单/头条热搜榜/js/main.js @@ -38,29 +38,37 @@ function formatNumber(num) { 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 ? - `
${formatNumber(item.hot_value)} 热度
` : ''; + `
${randomSymbol} ${formatNumber(item.hot_value)} 热度
` : ''; // 处理标签显示 const tagDisplay = item.tag ? - `
${item.tag}
` : ''; + `
${randomSymbol} ${item.tag}
` : ''; hotItem.innerHTML = `
${index + 1}
- ${item.title} + + ${randomSymbol} ${item.title} +
${hotValueDisplay} ${tagDisplay} - ${item.source ? `
📰 ${item.source}
` : ''} - ${item.time ? `
🕒 ${item.time}
` : ''} + ${item.source ? `
${randomSymbol} ${item.source}
` : ''} + ${item.time ? `
${randomSymbol} ${item.time}
` : ''}
`; @@ -68,6 +76,17 @@ function renderHotList(data) { 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())}`; } diff --git a/frontend/60sapi/热搜榜单/微博热搜榜/css/background.css b/frontend/60sapi/热搜榜单/微博热搜榜/css/background.css index 91b3ee72..4b71bd0d 100644 --- a/frontend/60sapi/热搜榜单/微博热搜榜/css/background.css +++ b/frontend/60sapi/热搜榜单/微博热搜榜/css/background.css @@ -6,28 +6,25 @@ height: 100%; z-index: -1; overflow: hidden; + background-color: #f8f9fa; } -.rainbow-gradient { +.modern-gradient { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( - 217deg, - rgba(255, 0, 0, 0.6), - rgba(255, 0, 0, 0) 70.71% - ), linear-gradient( - 127deg, - rgba(0, 255, 0, 0.6), - rgba(0, 255, 0, 0) 70.71% - ), linear-gradient( - 336deg, - rgba(0, 0, 255, 0.6), - rgba(0, 0, 255, 0) 70.71% + 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: rainbow-rotate 15s linear infinite; + animation: gradient-flow 20s ease-in-out infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } @keyframes rainbow-rotate { diff --git a/frontend/60sapi/热搜榜单/微博热搜榜/css/style.css b/frontend/60sapi/热搜榜单/微博热搜榜/css/style.css index b7d33692..0a661dcc 100644 --- a/frontend/60sapi/热搜榜单/微博热搜榜/css/style.css +++ b/frontend/60sapi/热搜榜单/微博热搜榜/css/style.css @@ -1,3 +1,88 @@ +/* 背景样式 */ +.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; @@ -7,38 +92,84 @@ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; - background-color: #f5f5f5; + 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: 20px; + padding: 24px; position: relative; z-index: 1; background-color: rgba(255, 255, 255, 0.85); - border-radius: 10px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10px); } header { text-align: center; - margin-bottom: 20px; - padding-bottom: 15px; - border-bottom: 1px solid #eaeaea; + margin-bottom: 28px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } header h1 { - color: #07a35a; - margin-bottom: 10px; - font-size: 2rem; + 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: #888; + 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 { @@ -46,36 +177,52 @@ header h1 { } .hot-item { - padding: 15px; - margin-bottom: 10px; - border-radius: 8px; + padding: 20px; + margin-bottom: 16px; + border-radius: 12px; background-color: white; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - transition: transform 0.2s, box-shadow 0.2s; + 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(-2px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + 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: #ff8200; - margin-right: 15px; - min-width: 30px; + 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 { - color: #ff4500; + background: linear-gradient(135deg, #ff4d4f, #ff7a45); + color: white; } -.hot-rank.top-2, .hot-rank.top-3 { - color: #ff6600; +.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 { @@ -83,73 +230,155 @@ header h1 { } .hot-title { - font-size: 1.1rem; - margin-bottom: 5px; + 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: #07a35a; -} - -.hot-value { - font-size: 0.85rem; - color: #888; + color: #4096ff; + text-decoration: none; } .loading { text-align: center; - padding: 20px; - color: #888; + padding: 40px; + color: #666; + font-size: 1.1rem; } footer { text-align: center; margin-top: 30px; - padding-top: 15px; - border-top: 1px solid #eaeaea; - color: #888; + padding-top: 20px; + border-top: 1px solid rgba(0, 0, 0, 0.06); + color: #666; font-size: 0.9rem; } /* 响应式设计 */ -/* 手机端 */ -@media (max-width: 576px) { +@media (max-width: 1024px) and (min-width: 768px) { .container { - padding: 15px; - margin: 10px; + max-width: 90%; + padding: 20px; } header h1 { - font-size: 1.5rem; + font-size: 2.2rem; } .hot-item { - padding: 12px; - } - - .hot-rank { - font-size: 1rem; - min-width: 25px; - margin-right: 10px; + padding: 18px; } .hot-title { - font-size: 1rem; + font-size: 1.1rem; } } -/* 平板端 */ -@media (min-width: 577px) and (max-width: 992px) { +@media (max-width: 768px) { + body { + background-color: #f8f9fa; + } + .container { - max-width: 90%; + 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; } } -/* 电脑端 - 默认样式已经设置 */ \ No newline at end of file +@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% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/微博热搜榜/img/qeye.svg b/frontend/60sapi/热搜榜单/微博热搜榜/img/qeye.svg new file mode 100644 index 00000000..4e14cff6 --- /dev/null +++ b/frontend/60sapi/热搜榜单/微博热搜榜/img/qeye.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/微博热搜榜/index.html b/frontend/60sapi/热搜榜单/微博热搜榜/index.html index 0cb32410..45a71d19 100644 --- a/frontend/60sapi/热搜榜单/微博热搜榜/index.html +++ b/frontend/60sapi/热搜榜单/微博热搜榜/index.html @@ -9,12 +9,12 @@
-
+
-

微博热搜榜

+

🌈 微博热搜榜 🌈

diff --git a/frontend/60sapi/热搜榜单/抖音热搜榜/css/style.css b/frontend/60sapi/热搜榜单/抖音热搜榜/css/style.css index 2d1682db..3a36fe08 100644 --- a/frontend/60sapi/热搜榜单/抖音热搜榜/css/style.css +++ b/frontend/60sapi/热搜榜单/抖音热搜榜/css/style.css @@ -1,4 +1,88 @@ -/* 重置样式 */ +/* 背景样式 */ +.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; @@ -6,951 +90,284 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; - line-height: 1.6; - color: #2e7d32; - overflow-x: hidden; -} - -/* 容器 */ -.container { - max-width: 1200px; - margin: 0 auto; - padding: 20px; - animation: containerFadeIn 0.8s ease-out; -} - -@keyframes containerFadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* 头部 */ -.header { - text-align: center; - margin-bottom: 40px; - background: rgba(255, 255, 255, 0.95); - padding: 35px 25px; - border-radius: 20px; - box-shadow: 0 8px 32px rgba(46, 125, 50, 0.12); - backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.3); + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f8f9fa; position: relative; - overflow: hidden; + min-height: 100vh; } -.header::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.1), transparent); - animation: shimmer 3s infinite; +.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); } -@keyframes shimmer { - 0% { left: -100%; } - 100% { left: 100%; } +header { + text-align: center; + margin-bottom: 28px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } -.header-icon { - font-size: 3em; - margin-bottom: 10px; - animation: bounce 2s infinite; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } - 40% { transform: translateY(-10px); } - 60% { transform: translateY(-5px); } -} - -.title { - font-size: 2.8em; +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; - color: #1b5e20; - margin-bottom: 8px; - text-shadow: 0 2px 4px rgba(46, 125, 50, 0.1); - letter-spacing: 1px; -} - -.subtitle { - font-size: 1.1em; - color: #4caf50; - margin-bottom: 20px; - font-weight: 500; - opacity: 0.9; + letter-spacing: -0.5px; } .update-time { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - color: #4caf50; - font-size: 0.95em; - margin-bottom: 20px; + color: #666; + font-size: 0.9rem; + background-color: rgba(0, 0, 0, 0.03); padding: 8px 16px; - background: rgba(76, 175, 80, 0.1); - border-radius: 20px; - display: inline-flex; + border-radius: 24px; + display: inline-block; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.time-icon { - font-size: 1.1em; - animation: tick 1s infinite; -} - -@keyframes tick { - 0%, 50% { transform: rotate(0deg); } - 25% { transform: rotate(15deg); } - 75% { transform: rotate(-15deg); } -} - -.refresh-btn { - background: linear-gradient(135deg, #4caf50, #66bb6a, #81c784); - color: white; - border: none; - padding: 12px 30px; - border-radius: 30px; - cursor: pointer; - font-size: 1em; - font-weight: 600; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); - display: inline-flex; - align-items: center; - gap: 8px; - position: relative; - overflow: hidden; -} - -.refresh-btn::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: all 0.5s ease; -} - -.refresh-btn:hover::before { - width: 300px; - height: 300px; -} - -.refresh-btn:hover { - background: linear-gradient(135deg, #388e3c, #4caf50, #66bb6a); - box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); - transform: translateY(-3px); -} - -.refresh-btn:active { - transform: translateY(-1px); -} - -.btn-icon { - font-size: 1.1em; - transition: transform 0.3s ease; -} - -.refresh-btn:hover .btn-icon { - transform: rotate(180deg); -} - -/* 加载动画 */ -.loading { - text-align: center; - padding: 60px 30px; - background: rgba(255, 255, 255, 0.95); - border-radius: 20px; - margin-bottom: 20px; - box-shadow: 0 8px 32px rgba(46, 125, 50, 0.1); - backdrop-filter: blur(15px); -} - -.loading-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -.spinner { - width: 50px; - height: 50px; - border: 5px solid #e8f5e8; - border-top: 5px solid #4caf50; - border-radius: 50%; - animation: spin 1s linear infinite; - position: relative; -} - -.spinner::after { - content: ''; - position: absolute; - top: -5px; - left: -5px; - right: -5px; - bottom: -5px; - border: 2px solid transparent; - border-top: 2px solid #81c784; - border-radius: 50%; - animation: spin 2s linear infinite reverse; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.loading-text { - display: flex; - flex-direction: column; - align-items: center; - gap: 15px; -} - -.loading-emoji { - font-size: 2.5em; - animation: pulse 1.5s ease-in-out infinite alternate; -} - -@keyframes pulse { - 0% { transform: scale(1); opacity: 0.8; } - 100% { transform: scale(1.1); opacity: 1; } -} - -.loading-text p { - font-size: 1.1em; - color: #4caf50; - font-weight: 500; - margin: 0; -} - -.loading-dots { - display: flex; - gap: 5px; -} - -.loading-dots span { - width: 8px; - height: 8px; - background: #4caf50; - border-radius: 50%; - animation: dot-bounce 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; } - -@keyframes dot-bounce { - 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } - 40% { transform: scale(1.2); opacity: 1; } -} - -/* 热搜列表 */ .hot-list { - display: grid; - gap: 20px; - animation: fadeInUp 0.6s ease-out; -} - -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } + list-style: none; } .hot-item { - background: rgba(255, 255, 255, 0.98); - border-radius: 16px; - padding: 25px; - box-shadow: 0 4px 20px rgba(46, 125, 50, 0.08); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - border: 1px solid rgba(76, 175, 80, 0.15); - backdrop-filter: blur(10px); - position: relative; - overflow: hidden; - animation: slideInLeft 0.6s ease-out; - animation-fill-mode: both; -} - -.hot-item:nth-child(odd) { - animation-delay: 0.1s; -} - -.hot-item:nth-child(even) { - animation-delay: 0.2s; -} - -@keyframes slideInLeft { - from { - opacity: 0; - transform: translateX(-50px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -.hot-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 4px; - height: 100%; - background: linear-gradient(to bottom, #4caf50, #81c784); - transform: scaleY(0); - transition: transform 0.3s ease; -} - -.hot-item:hover::before { - transform: scaleY(1); + 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 { - box-shadow: 0 8px 40px rgba(46, 125, 50, 0.15); - transform: translateY(-5px) scale(1.02); - border-color: rgba(76, 175, 80, 0.3); -} - -.hot-item-header { - display: flex; - align-items: center; - margin-bottom: 18px; - gap: 15px; + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: rgba(64, 169, 255, 0.3); } .hot-rank { - background: linear-gradient(135deg, #4caf50, #66bb6a); - color: white; - min-width: 40px; - height: 40px; + 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; - font-weight: bold; - font-size: 1em; - flex-shrink: 0; - position: relative; - box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3); } -.hot-rank::after { - content: ''; - position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - background: linear-gradient(45deg, #4caf50, #81c784, #4caf50); - border-radius: 50%; - z-index: -1; - opacity: 0; - transition: opacity 0.3s ease; +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff4d4f, #ff7a45); + color: white; } -.hot-item:hover .hot-rank::after { - opacity: 0.7; +.hot-rank.top-2 { + background: linear-gradient(135deg, #ff7a45, #ffa940); + color: white; } .hot-rank.top-3 { - background: linear-gradient(135deg, #ff6b35, #f7931e, #ffa726); - box-shadow: 0 3px 15px rgba(255, 107, 53, 0.4); - animation: glow 2s ease-in-out infinite alternate; -} - -@keyframes glow { - 0% { box-shadow: 0 3px 15px rgba(255, 107, 53, 0.4); } - 100% { box-shadow: 0 3px 20px rgba(255, 107, 53, 0.6), 0 0 25px rgba(255, 107, 53, 0.3); } -} - -.hot-rank.top-3::before { - content: '👑'; - position: absolute; - top: -8px; - right: -5px; - font-size: 0.7em; - animation: crown-bounce 1s ease-in-out infinite alternate; -} - -@keyframes crown-bounce { - 0% { transform: translateY(0) rotate(-5deg); } - 100% { transform: translateY(-2px) rotate(5deg); } -} - -.hot-title { - font-size: 1.15em; - font-weight: 600; - color: #1b5e20; - flex: 1; - line-height: 1.4; - position: relative; + background: linear-gradient(135deg, #ffa940, #ffec3d); + color: white; } .hot-content { + flex: 1; display: flex; - gap: 18px; align-items: flex-start; + gap: 15px; } .hot-cover { - width: 90px; - height: 90px; - border-radius: 12px; + width: 120px; + height: 80px; object-fit: cover; - flex-shrink: 0; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.hot-cover::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); - transform: translateX(-100%); - transition: transform 0.6s ease; -} - -.hot-item:hover .hot-cover::after { - transform: translateX(100%); -} - -.hot-item:hover .hot-cover { - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); - transform: scale(1.05); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .hot-info { flex: 1; - display: flex; - flex-direction: column; - gap: 8px; } -.hot-value { - color: #e91e63; - font-weight: 700; - font-size: 1.1em; - display: flex; - align-items: center; - gap: 6px; -} - -.hot-value::before { - content: '热度'; - font-size: 1.2em; - animation: fire 1.5s ease-in-out infinite alternate; -} - -@keyframes fire { - 0% { transform: scale(1); } - 100% { transform: scale(1.1); } -} - -.hot-time { - color: #757575; - font-size: 0.9em; - display: flex; - align-items: center; - gap: 6px; -} - -.hot-time::before { - content: '📅日期'; - font-size: 1em; -} - -.hot-link { - display: inline-flex; - align-items: center; - gap: 6px; - color: #4caf50; +.hot-title { + font-size: 1.15rem; + margin-bottom: 8px; + color: #333; text-decoration: none; - font-size: 0.95em; - font-weight: 600; - padding: 8px 18px; - border: 2px solid #4caf50; - border-radius: 25px; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - max-width: fit-content; -} - -.hot-link::before { - content: '👀'; - font-size: 1em; -} - -.hot-link::after { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.2), transparent); - transition: left 0.5s ease; -} - -.hot-link:hover::after { - left: 100%; -} - -.hot-link:hover { - background: #4caf50; - color: white; - transform: scale(1.05); - box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); -} - -/* 错误信息 */ -.error-message { - text-align: center; - padding: 60px 30px; - background: rgba(255, 255, 255, 0.95); - border-radius: 20px; - box-shadow: 0 8px 32px rgba(211, 47, 47, 0.1); - backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.3); -} - -.error-content { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; -} - -.error-icon { - font-size: 4em; - animation: shake 1s ease-in-out infinite alternate; -} - -@keyframes shake { - 0% { transform: translateX(0); } - 25% { transform: translateX(-5px) rotate(-5deg); } - 50% { transform: translateX(5px) rotate(5deg); } - 75% { transform: translateX(-3px) rotate(-3deg); } - 100% { transform: translateX(0) rotate(0deg); } -} - -.error-content h3 { - font-size: 1.5em; - color: #d32f2f; - margin: 0; - font-weight: 600; -} - -.error-content p { - color: #757575; - font-size: 1em; - margin: 0; + display: block; line-height: 1.5; + font-weight: 500; + transition: color 0.2s ease; } -.retry-btn { - background: linear-gradient(135deg, #4caf50, #66bb6a); - color: white; - border: none; - padding: 12px 25px; - border-radius: 25px; - cursor: pointer; - font-size: 1em; - font-weight: 600; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); - display: inline-flex; - align-items: center; - gap: 8px; +.hot-title:hover { + color: #4096ff; + text-decoration: none; } -.retry-btn:hover { - background: linear-gradient(135deg, #388e3c, #4caf50); - box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); - transform: translateY(-2px); +.loading { + text-align: center; + padding: 40px; + color: #666; + font-size: 1.1rem; } -.retry-btn span { - font-size: 1.1em; - transition: transform 0.3s ease; +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; } -.retry-btn:hover span { - transform: rotate(180deg); -} - -/* 平板端适配 (768px - 1024px) */ -@media (min-width: 768px) and (max-width: 1024px) { +/* 响应式设计 */ +@media (max-width: 1024px) and (min-width: 768px) { .container { - padding: 30px; - } - - .header { - padding: 40px 30px; - } - - .header-icon { - font-size: 3.5em; - } - - .title { - font-size: 2.5em; - } - - .subtitle { - font-size: 1.2em; - } - - .hot-list { - grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); - gap: 25px; - } - - .hot-item { - padding: 30px; - } - - .hot-cover { - width: 85px; - height: 85px; - } - - .hot-rank { - min-width: 42px; - height: 42px; - font-size: 1.05em; - } - - .hot-title { - font-size: 1.2em; - } - - .hot-value { - font-size: 1.15em; - } -} - -/* 电脑端适配 (1025px+) */ -@media (min-width: 1025px) { - .container { - padding: 40px; - } - - .header { - padding: 50px 40px; - margin-bottom: 50px; - } - - .header-icon { - font-size: 4em; - } - - .title { - font-size: 3.5em; - letter-spacing: 2px; - } - - .subtitle { - font-size: 1.3em; - } - - .hot-list { - grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); - gap: 30px; - } - - .hot-item { - padding: 35px; - } - - .hot-rank { - min-width: 45px; - height: 45px; - font-size: 1.1em; - } - - .hot-cover { - width: 110px; - height: 110px; - } - - .hot-title { - font-size: 1.3em; - } - - .hot-value { - font-size: 1.2em; - } - - .hot-time { - font-size: 1em; - } - - .hot-link { - font-size: 1em; - padding: 10px 20px; - } - - /* 电脑端特殊效果 */ - .hot-item:hover { - transform: translateY(-8px) scale(1.03); - } - - .hot-item::after { - content: ''; - position: absolute; - top: 50%; - right: 20px; - transform: translateY(-50%); - font-size: 1.5em; - opacity: 0; - transition: opacity 0.3s ease; - } - - .hot-item:hover::after { - opacity: 0.3; - } -} - -/* 手机端适配 (默认, 767px以下) */ -@media (max-width: 767px) { - .container { - padding: 15px; - } - - .header { - padding: 25px 20px; - margin-bottom: 25px; - } - - .header-icon { - font-size: 2.5em; - } - - .title { - font-size: 2.2em; - letter-spacing: 0.5px; - } - - .subtitle { - font-size: 1em; - } - - .update-time { - font-size: 0.9em; - padding: 6px 12px; - } - - .refresh-btn { - padding: 10px 20px; - font-size: 0.9em; - } - - .hot-item { + 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; } - .hot-rank { - min-width: 35px; - height: 35px; - font-size: 0.9em; - } - - .hot-title { - font-size: 1.05em; - line-height: 1.3; - } - - .hot-content { - flex-direction: column; - gap: 15px; - } - - .hot-cover { - width: 100%; - height: 180px; - align-self: center; - max-width: 280px; - border-radius: 10px; - } - - .hot-info { - gap: 10px; - } - - .hot-value { - font-size: 1.05em; - } - - .hot-time { - font-size: 0.85em; - } - - .hot-link { - font-size: 0.9em; - padding: 8px 16px; - align-self: flex-start; - } - - /* 手机端动画优化 */ - .hot-item { - animation-duration: 0.4s; - } - - .hot-item:hover { - transform: translateY(-2px) scale(1.01); - } -} - -/* 超小屏幕适配 (480px以下) */ -@media (max-width: 480px) { - .container { - padding: 12px; - } - - .header { - padding: 20px 15px; + header { margin-bottom: 20px; + padding-bottom: 16px; } - .header-icon { - font-size: 2.2em; - } - - .title { - font-size: 1.9em; - letter-spacing: 0.3px; - } - - .subtitle { - font-size: 0.95em; + header h1 { + font-size: 1.8rem; + margin-bottom: 10px; } .update-time { - font-size: 0.85em; - padding: 5px 10px; - } - - .refresh-btn { - padding: 8px 16px; - font-size: 0.85em; - } - - .hot-list { - gap: 15px; + font-size: 0.85rem; + padding: 6px 12px; } .hot-item { - padding: 18px 15px; + padding: 16px; + margin-bottom: 12px; border-radius: 10px; - } - - .hot-item-header { - margin-bottom: 15px; - gap: 12px; + flex-direction: row; + align-items: flex-start; } .hot-rank { + font-size: 1.1rem; + margin-right: 14px; min-width: 32px; + width: 32px; height: 32px; - font-size: 0.85em; + margin-top: 2px; } .hot-title { - font-size: 1em; - line-height: 1.25; - } - - .hot-content { - gap: 12px; + font-size: 1rem; + line-height: 1.5; + margin-bottom: 6px; } .hot-cover { - height: 160px; - max-width: 260px; - border-radius: 8px; + width: 100px; + height: 70px; } - .hot-info { - gap: 8px; + .hot-content { + gap: 10px; } - .hot-value { - font-size: 1em; - } - - .hot-time { - font-size: 0.8em; - } - - .hot-link { - font-size: 0.85em; - padding: 6px 14px; - } - - /* 超小屏幕性能优化 */ - .hot-item { - transition: transform 0.2s ease, box-shadow 0.2s ease; - } - - .hot-item::before, - .hot-item::after, - .hot-cover::after, - .hot-link::after { - display: none; - } - - .loading-content { - gap: 15px; - } - - .loading-emoji { - font-size: 2em; - } - - .loading-text p { - font-size: 1em; - } - - .error-icon { - font-size: 3em; - } - - .error-content h3 { - font-size: 1.3em; - } - - .error-content p { - font-size: 0.9em; + 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% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css b/frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css index e76f60c9..bfbfae9c 100644 --- a/frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css +++ b/frontend/60sapi/热搜榜单/猫眼票房排行榜/css/style.css @@ -1,6 +1,88 @@ -/* 猫眼票房排行榜 - 淡绿色清新风格样式 */ +/* 背景样式 */ +.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; @@ -8,488 +90,260 @@ } body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 50%, #ffd3a5 100%); + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f8f9fa; + position: relative; min-height: 100vh; - color: #2d5016; - line-height: 1.6; - overflow-x: hidden; } .container { - max-width: 1200px; + max-width: 800px; margin: 0 auto; - padding: 20px; -} - -/* 头部样式 */ -.header { - text-align: center; - margin-bottom: 30px; - background: rgba(255, 255, 255, 0.85); - border-radius: 20px; - padding: 30px; - box-shadow: 0 8px 25px rgba(45, 80, 22, 0.08); - backdrop-filter: blur(10px); -} - -.header h1 { - font-size: 2.5rem; - color: #2d5016; - margin-bottom: 10px; - font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - gap: 15px; -} - -.header p { - color: #5a7c65; - font-size: 1.1rem; -} - -/* 加载状态 */ -.loading { - text-align: center; - padding: 40px; - background: rgba(255, 255, 255, 0.85); - border-radius: 15px; - box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08); -} - -.spinner { - width: 40px; - height: 40px; - border: 4px solid #e8f5e8; - border-top: 4px solid #81c784; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 20px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 票房排行榜容器 */ -.ranking-container { - background: rgba(255, 255, 255, 0.85); - border-radius: 20px; - padding: 30px; - box-shadow: 0 8px 25px rgba(45, 80, 22, 0.08); - backdrop-filter: blur(10px); - margin-bottom: 20px; -} - -/* 排行榜标题 */ -.ranking-title { - text-align: center; - font-size: 1.8rem; - font-weight: 700; - color: #2d5016; - margin-bottom: 25px; -} - -/* 票房排行榜列表 */ -.movie-list { - display: grid; - gap: 15px; -} - -/* 电影项目 */ -.movie-item { - background: rgba(255, 255, 255, 0.9); - border-radius: 15px; - padding: 20px; - box-shadow: 0 4px 15px rgba(45, 80, 22, 0.05); - transition: all 0.3s ease; - border-left: 5px solid transparent; + padding: 24px; position: relative; - overflow: hidden; + 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); } -.movie-item:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(45, 80, 22, 0.12); +header { + text-align: center; + margin-bottom: 28px; + padding-bottom: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } -/* 前三名特殊样式 */ -.movie-item.top-1 { - border-left-color: #ffd700; - background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%); +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; } -.movie-item.top-2 { - border-left-color: #c0c0c0; - background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%); +.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); } -.movie-item.top-3 { - border-left-color: #cd7f32; - background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%); +.hot-list { + list-style: none; } -/* 排名徽章 */ -.rank-badge { - position: absolute; - top: -10px; - right: -10px; - width: 50px; - height: 50px; +.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; - font-weight: bold; - font-size: 1.2rem; +} + +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } -.rank-badge.gold { - background: linear-gradient(135deg, #ffd700, #ffed4a); +.hot-rank.top-2 { + background: linear-gradient(135deg, #ff7a45, #ffa940); + color: white; } -.rank-badge.silver { - background: linear-gradient(135deg, #c0c0c0, #e2e8f0); +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffa940, #ffec3d); + color: white; } -.rank-badge.bronze { - background: linear-gradient(135deg, #cd7f32, #d69e2e); -} - -.rank-badge.regular { - background: linear-gradient(135deg, #81c784, #66bb6a); -} - -/* 电影信息布局 */ -.movie-info { - display: grid; - grid-template-columns: auto 1fr auto; - align-items: center; - gap: 20px; -} - -.rank-number { - font-size: 2rem; - font-weight: bold; - color: #2d5016; - min-width: 60px; -} - -.movie-details { +.hot-content { flex: 1; } -.movie-name { - font-size: 1.3rem; - font-weight: 700; - color: #2d5016; - margin-bottom: 5px; -} - -.movie-year { - color: #5a7c65; - font-size: 0.95rem; +.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; } -.box-office { - text-align: right; +.hot-title:hover { + color: #4096ff; + text-decoration: none; } -.box-office-amount { - font-size: 1.4rem; - font-weight: bold; - color: #1b5e20; - margin-bottom: 3px; -} - -.box-office-desc { - color: #5a7c65; - font-size: 0.9rem; -} - -/* 统计信息 */ -.stats-container { - background: rgba(255, 255, 255, 0.85); - border-radius: 15px; - padding: 20px; - margin-bottom: 20px; - box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08); - backdrop-filter: blur(10px); -} - -.stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - text-align: center; -} - -.stat-item { - background: rgba(129, 199, 132, 0.1); - border-radius: 10px; - padding: 15px; -} - -.stat-value { - font-size: 1.5rem; - font-weight: bold; - color: #2d5016; -} - -.stat-label { - color: #5a7c65; - font-size: 0.9rem; - margin-top: 5px; -} - -/* 更新时间 */ -.update-time { - text-align: center; - color: #5a7c65; - font-size: 0.9rem; - margin-top: 20px; - padding: 15px; - background: rgba(255, 255, 255, 0.7); - border-radius: 10px; -} - -/* 错误提示 */ -.error { +.loading { text-align: center; padding: 40px; - background: rgba(255, 255, 255, 0.85); - border-radius: 15px; - box-shadow: 0 5px 20px rgba(45, 80, 22, 0.08); + color: #666; + font-size: 1.1rem; } -.error h3 { - color: #d32f2f; - margin-bottom: 15px; - font-size: 1.5rem; +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; } -.error p { - color: #5a7c65; - margin-bottom: 10px; -} - -/* 动画效果 */ -.fade-in { - animation: fadeIn 0.6s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* 平板端适配 (768px - 1024px) */ -@media screen and (max-width: 1024px) and (min-width: 768px) { +/* 响应式设计 */ +@media (max-width: 1024px) and (min-width: 768px) { .container { - padding: 15px; + max-width: 90%; + padding: 20px; } - .header h1 { + header h1 { font-size: 2.2rem; } - .ranking-container { - padding: 25px; + .hot-item { + padding: 18px; } - .movie-info { - gap: 15px; - } - - .rank-number { - font-size: 1.8rem; - min-width: 50px; - } - - .movie-name { - font-size: 1.2rem; - } - - .box-office-amount { - font-size: 1.3rem; + .hot-title { + font-size: 1.1rem; } } -/* 手机端适配 (最大767px) - 优先优化 */ -@media screen and (max-width: 767px) { +@media (max-width: 768px) { + body { + background-color: #f8f9fa; + } + .container { - padding: 10px; + max-width: 95%; + margin: 12px auto; + padding: 16px; + border-radius: 12px; } - .header { - padding: 20px; + header { margin-bottom: 20px; + padding-bottom: 16px; } - .header h1 { + header h1 { font-size: 1.8rem; - flex-direction: column; - gap: 10px; - } - - .header p { - font-size: 1rem; - } - - .ranking-container { - padding: 20px 15px; - margin-bottom: 15px; - } - - .ranking-title { - font-size: 1.5rem; - margin-bottom: 20px; - } - - .movie-item { - padding: 15px; margin-bottom: 10px; } - .movie-info { - grid-template-columns: 50px 1fr; - grid-template-rows: auto auto; - gap: 10px; - } - - .rank-number { - font-size: 1.5rem; - min-width: 40px; - grid-row: 1 / 3; - } - - .movie-details { - grid-column: 2; - grid-row: 1; - } - - .box-office { - grid-column: 2; - grid-row: 2; - text-align: left; - margin-top: 8px; - } - - .movie-name { - font-size: 1.1rem; - margin-bottom: 3px; - } - - .movie-year { - font-size: 0.85rem; - margin-bottom: 5px; - } - - .box-office-amount { - font-size: 1.2rem; - } - - .box-office-desc { - font-size: 0.85rem; - } - - .rank-badge { - width: 40px; - height: 40px; - font-size: 1rem; - top: -8px; - right: -8px; - } - - .stats-grid { - grid-template-columns: 1fr; - gap: 15px; - } - - .stat-item { - padding: 12px; - } - - .stat-value { - font-size: 1.3rem; - } - .update-time { - padding: 12px; + 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; } } -/* 小屏手机适配 (最大480px) */ -@media screen and (max-width: 480px) { +@media (max-width: 480px) { .container { - padding: 8px; + margin: 8px auto; + padding: 14px; } - .header { - padding: 15px; - } - - .header h1 { + header h1 { font-size: 1.6rem; } - .ranking-container { - padding: 15px 10px; + .hot-item { + padding: 14px; + margin-bottom: 10px; } - .movie-item { - padding: 12px; - } - - .movie-name { + .hot-rank { font-size: 1rem; + margin-right: 12px; + min-width: 30px; + width: 30px; + height: 30px; } - .box-office-amount { - font-size: 1.1rem; - } - - .rank-number { - font-size: 1.3rem; - min-width: 35px; + .hot-title { + font-size: 0.95rem; } } -/* 高分辨率显示器优化 */ -@media screen and (min-width: 1440px) { - .container { - max-width: 1400px; +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .modern-gradient, + .modern-gradient::before { + animation: none; } - .header h1 { - font-size: 3rem; - } - - .movie-list { - gap: 20px; - } - - .movie-item { - padding: 25px; - } - - .movie-name { - font-size: 1.4rem; - } - - .box-office-amount { - font-size: 1.5rem; + .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% + ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js b/frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js index 39119c89..063fa795 100644 --- a/frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js +++ b/frontend/60sapi/热搜榜单/猫眼票房排行榜/js/script.js @@ -186,10 +186,18 @@ 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`; return `
${rank}
+
+ ${escapeHtml(item.movie_name)} +
#${rank}
diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css b/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css index a7d0b453..000933fd 100644 --- a/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css +++ b/frontend/60sapi/热搜榜单/知乎热门话题/css/background.css @@ -16,13 +16,14 @@ height: 200%; background: linear-gradient( 135deg, - rgba(76, 175, 80, 0.3) 0%, - rgba(129, 199, 132, 0.2) 25%, - rgba(165, 214, 167, 0.1) 50%, - rgba(200, 230, 201, 0.2) 75%, - rgba(76, 175, 80, 0.3) 100% + 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: green-flow 20s ease-in-out infinite; + animation: gradient-flow 20s ease-in-out infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } .green-gradient::before { diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css b/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css index f53380d4..c5a43c03 100644 --- a/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css +++ b/frontend/60sapi/热搜榜单/知乎热门话题/css/style.css @@ -1,3 +1,88 @@ +/* 背景样式 */ +.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; @@ -7,172 +92,129 @@ body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; - background-color: #f0f8f0; + background-color: #f8f9fa; position: relative; min-height: 100vh; + line-height: 1.6; } .container { - max-width: 900px; + max-width: 800px; margin: 0 auto; - padding: 20px; + padding: 24px; position: relative; z-index: 1; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0, 128, 0, 0.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: 25px; + margin-bottom: 28px; padding-bottom: 20px; - border-bottom: 2px solid #e8f5e8; + border-bottom: 1px solid rgba(0, 0, 0, 0.06); } header h1 { - color: #2d8f47; - margin-bottom: 12px; - font-size: 2.2rem; - font-weight: 600; - text-shadow: 0 2px 4px rgba(45, 143, 71, 0.1); + 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: #6b8e6b; - font-size: 0.95rem; - background-color: #f0f8f0; + color: #666; + font-size: 0.9rem; + background-color: rgba(0, 0, 0, 0.03); padding: 8px 16px; - border-radius: 20px; + border-radius: 24px; display: inline-block; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } -.topic-list { +.hot-list { list-style: none; } -.topic-item { +.hot-item { padding: 20px; - margin-bottom: 15px; + margin-bottom: 16px; border-radius: 12px; background-color: white; - box-shadow: 0 3px 10px rgba(0, 128, 0, 0.08); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; - border-left: 4px solid transparent; - position: relative; -} - -.topic-item:hover { - transform: translateY(-3px); - box-shadow: 0 6px 20px rgba(0, 128, 0, 0.15); - border-left-color: #4caf50; -} - -.topic-header { display: flex; - align-items: flex-start; - margin-bottom: 12px; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.03); } -.topic-rank { - font-size: 1.3rem; +.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: #4caf50; + color: #4096ff; margin-right: 18px; - min-width: 35px; + min-width: 38px; text-align: center; - background-color: #f0f8f0; + background-color: rgba(64, 169, 255, 0.1); border-radius: 50%; - width: 35px; - height: 35px; + width: 38px; + height: 38px; display: flex; align-items: center; justify-content: center; - flex-shrink: 0; } -.topic-rank.top-1 { - background: linear-gradient(135deg, #ff6b6b, #ff8e8e); +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; } -.topic-rank.top-2 { - background: linear-gradient(135deg, #ffa726, #ffb74d); +.hot-rank.top-2 { + background: linear-gradient(135deg, #ff7a45, #ffa940); color: white; } -.topic-rank.top-3 { - background: linear-gradient(135deg, #ffca28, #ffd54f); +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffa940, #ffec3d); color: white; } -.topic-content { +.hot-content { flex: 1; } -.topic-title { - font-size: 1.2rem; +.hot-title { + font-size: 1.15rem; margin-bottom: 8px; - color: #2c3e2c; + color: #333; text-decoration: none; display: block; - line-height: 1.4; - font-weight: 600; -} - -.topic-title:hover { - color: #2d8f47; - text-decoration: underline; -} - -.topic-detail { - font-size: 0.95rem; - color: #666; line-height: 1.5; - margin-bottom: 10px; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.topic-stats { - display: flex; - align-items: center; - gap: 15px; - font-size: 0.85rem; - color: #888; - margin-top: 10px; -} - -.stat-item { - display: flex; - align-items: center; - gap: 4px; -} - -.hot-value { - background: linear-gradient(135deg, #4caf50, #66bb6a); - color: white; - padding: 4px 8px; - border-radius: 12px; font-weight: 500; - font-size: 0.8rem; + transition: color 0.2s ease; } -.topic-cover { - width: 80px; - height: 60px; - border-radius: 8px; - object-fit: cover; - margin-left: 15px; - flex-shrink: 0; +.hot-title:hover { + color: #4096ff; + text-decoration: none; } .loading { text-align: center; padding: 40px; - color: #6b8e6b; + color: #666; font-size: 1.1rem; } @@ -180,20 +222,157 @@ footer { text-align: center; margin-top: 30px; padding-top: 20px; - border-top: 1px solid #e8f5e8; - color: #6b8e6b; + border-top: 1px solid rgba(0, 0, 0, 0.06); + color: #666; font-size: 0.9rem; } -/* 平板端适配 (768px - 1024px) */ +/* 新增样式 */ +.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: 18px; + padding: 20px; } header h1 { - font-size: 2rem; + font-size: 2.2rem; } .topic-item { @@ -201,31 +380,30 @@ footer { } .topic-title { - font-size: 1.15rem; + font-size: 1.1rem; } .topic-cover { - width: 70px; - height: 50px; + width: 100px; + height: 70px; } } -/* 手机端适配 (最大768px) */ @media (max-width: 768px) { body { - background-color: #f8fdf8; + background-color: #f8f9fa; } .container { max-width: 95%; - margin: 10px auto; - padding: 15px; - border-radius: 8px; + margin: 12px auto; + padding: 16px; + border-radius: 12px; } header { margin-bottom: 20px; - padding-bottom: 15px; + padding-bottom: 16px; } header h1 { @@ -241,58 +419,39 @@ footer { .topic-item { padding: 16px; margin-bottom: 12px; - border-radius: 8px; - } - - .topic-header { - flex-direction: column; - align-items: stretch; + border-radius: 10px; } .topic-rank { font-size: 1.1rem; - margin-right: 0; - margin-bottom: 10px; - width: 30px; - height: 30px; - align-self: flex-start; + margin-right: 14px; + min-width: 32px; + width: 32px; + height: 32px; } .topic-title { - font-size: 1.05rem; + font-size: 1rem; line-height: 1.5; margin-bottom: 6px; } - .topic-detail { - font-size: 0.9rem; - margin-bottom: 8px; - } - - .topic-stats { - flex-wrap: wrap; - gap: 10px; - font-size: 0.8rem; - } - .topic-cover { - width: 60px; - height: 45px; - margin-left: 10px; + width: 90px; + height: 65px; } footer { - margin-top: 20px; - padding-top: 15px; - font-size: 0.8rem; + margin-top: 24px; + padding-top: 16px; + font-size: 0.85rem; } } -/* 小屏手机适配 (最大480px) */ @media (max-width: 480px) { .container { - margin: 5px auto; - padding: 12px; + margin: 8px auto; + padding: 14px; } header h1 { @@ -306,26 +465,35 @@ footer { .topic-rank { font-size: 1rem; - width: 28px; - height: 28px; + margin-right: 12px; + min-width: 30px; + width: 30px; + height: 30px; } .topic-title { - font-size: 1rem; - } - - .topic-detail { - font-size: 0.85rem; + font-size: 0.95rem; } .topic-cover { - width: 50px; - height: 38px; - margin-left: 8px; + width: 80px; + height: 60px; + } +} + +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .modern-gradient, + .modern-gradient::before { + animation: none; } - .update-time { - font-size: 0.8rem; - padding: 5px 10px; + .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% + ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/img/zhihu-logo.svg b/frontend/60sapi/热搜榜单/知乎热门话题/img/zhihu-logo.svg new file mode 100644 index 00000000..9f66920b --- /dev/null +++ b/frontend/60sapi/热搜榜单/知乎热门话题/img/zhihu-logo.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js b/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js index 8b0558f8..2b8ef227 100644 --- a/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js +++ b/frontend/60sapi/热搜榜单/知乎热门话题/js/main.js @@ -48,21 +48,29 @@ function renderTopicList(data) { const coverImg = item.cover ? `话题封面` : ''; + // 判断文本内容长度，决定图片位置 + // 如果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 = ` -
+
${index + 1}
- ${item.title} + 🔥 ${item.title} ${item.detail ? `
${item.detail}
` : ''}
- ${item.hot_value_desc ? `
${item.hot_value_desc}
` : ''} + ${item.hot_value_desc ? `
🔥 ${item.hot_value_desc}
` : ''} ${item.answer_cnt ? `
💬 ${formatNumber(item.answer_cnt)} 回答
` : ''} ${item.follower_cnt ? `
👥 ${formatNumber(item.follower_cnt)} 关注
` : ''}
${coverImg} -
- `; +
`; topicListElement.appendChild(topicItem); }); diff --git a/frontend/60sapi/热搜榜单/网易云榜单列表/css/background.css b/frontend/60sapi/热搜榜单/网易云榜单列表/css/background.css new file mode 100644 index 00000000..f67a1aeb --- /dev/null +++ b/frontend/60sapi/热搜榜单/网易云榜单列表/css/background.css @@ -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; + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单列表/css/style.css b/frontend/60sapi/热搜榜单/网易云榜单列表/css/style.css new file mode 100644 index 00000000..10d23565 --- /dev/null +++ b/frontend/60sapi/热搜榜单/网易云榜单列表/css/style.css @@ -0,0 +1,389 @@ +/* 背景样式 */ +.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; +} + +.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); +} + +.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; +} + +/* 音符装饰样式 */ +.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% + ); + } +} \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单列表/index.html b/frontend/60sapi/热搜榜单/网易云榜单列表/index.html new file mode 100644 index 00000000..c57d7b0c --- /dev/null +++ b/frontend/60sapi/热搜榜单/网易云榜单列表/index.html @@ -0,0 +1,306 @@ + + + + + + 网易云音乐榜单列表 + + + + + +
+ +
+
+

🎵 网易云音乐榜单列表

+

发现音乐的魅力

+
+ +
+ +

正在加载榜单数据...

+
+ + + + +
+ +
+

© 2025 网易云音乐榜单列表 - 数据来源于官方API

+
+ + + + \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json b/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json index 547b2771..dcc7d561 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json +++ b/frontend/60sapi/热搜榜单/网易云榜单列表/接口集合.json @@ -1,3 +1,7 @@ [ - "https://60s.api.shumengya.top" + "https://60s.viki.moe", + "https://60s-cf.viki.moe", + "https://60s.b23.run", + "https://60s.114128.xyz", + "https://60s-cf.114128.xyz" ] diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/css/background.css b/frontend/60sapi/热搜榜单/网易云榜单详情/css/background.css index a4c76f7a..8c9a3b95 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/css/background.css +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/css/background.css @@ -1,9 +1,10 @@ -/* 背景样式文件 */ +/* 网易云音乐特色背景样式 */ body { - background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 25%, #E0F2F1 50%, #E8F5E8 75%, #F3E5F5 100%); + background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%); background-size: 400% 400%; animation: gradientShift 15s ease infinite; position: relative; + color: #fff; } /* 背景渐变动画 */ @@ -19,7 +20,7 @@ body { } } -/* 背景装饰元素 */ +/* 网易云红色装饰元素 */ body::before { content: ''; position: fixed; @@ -28,14 +29,14 @@ body::before { width: 100%; height: 100%; background-image: - radial-gradient(circle at 20% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 20%, rgba(129, 199, 132, 0.1) 0%, transparent 50%), - radial-gradient(circle at 40% 40%, rgba(165, 214, 167, 0.08) 0%, transparent 50%); + 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; @@ -44,11 +45,11 @@ body::after { width: 100%; height: 100%; background-image: - radial-gradient(2px 2px at 20px 30px, rgba(76, 175, 80, 0.3), transparent), - radial-gradient(2px 2px at 40px 70px, rgba(129, 199, 132, 0.2), transparent), - radial-gradient(1px 1px at 90px 40px, rgba(165, 214, 167, 0.3), transparent), - radial-gradient(1px 1px at 130px 80px, rgba(76, 175, 80, 0.2), transparent), - radial-gradient(2px 2px at 160px 30px, rgba(129, 199, 132, 0.3), transparent); + 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; @@ -82,17 +83,48 @@ body::after { } } +/* 音符装饰 */ +.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 (prefers-reduced-motion: reduce) { body { animation: none; - background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 50%, #E0F2F1 100%); + background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 50%, #2b2b2b 100%); } body::after { animation: none; } + .music-note { + animation: none; + display: none; + } + .title { animation: none; } diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/css/style.css b/frontend/60sapi/热搜榜单/网易云榜单详情/css/style.css index 5f93a361..e7d1464c 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/css/style.css +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/css/style.css @@ -1,4 +1,103 @@ -/* 基础样式重置 */ +/* 背景样式 */ +.background-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + overflow: hidden; + background-color: #f8f9fa; +} + +/* 返回链接样式 */ +.back-link { + display: inline-block; + margin-top: 10px; + color: #1DB954; + text-decoration: none; + font-weight: 500; + transition: color 0.3s ease; +} + +.back-link:hover { + color: #1ed760; + text-decoration: underline; +} + +.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; @@ -6,9 +105,10 @@ } body { - font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; - line-height: 1.6; - color: #2c3e50; + font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; + color: #333; + background-color: #f8f9fa; + position: relative; min-height: 100vh; overflow-x: hidden; } @@ -16,468 +116,280 @@ body { .container { max-width: 1200px; margin: 0 auto; - padding: 20px; + padding: 24px; position: relative; z-index: 1; -} - -/* 头部样式 */ -.header { - text-align: center; - margin-bottom: 40px; - padding: 40px 20px; - background: rgba(255, 255, 255, 0.9); - border-radius: 20px; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); - box-shadow: 0 8px 32px rgba(76, 175, 80, 0.1); } -.title { - font-size: 2.5rem; - font-weight: 700; - background: linear-gradient(135deg, #4CAF50, #81C784); +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; - -webkit-text-fill-color: transparent; background-clip: text; - margin-bottom: 10px; - animation: titleGlow 3s ease-in-out infinite alternate; + color: transparent; + margin-bottom: 14px; + font-size: 2.4rem; + font-weight: 700; + letter-spacing: -0.5px; } -@keyframes titleGlow { - from { filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.3)); } - to { filter: drop-shadow(0 0 15px rgba(76, 175, 80, 0.6)); } -} - -.subtitle { - font-size: 1.1rem; +.update-time { color: #666; - opacity: 0.8; -} - -/* 榜单信息样式 */ -.rank-info { - background: rgba(255, 255, 255, 0.95); - border-radius: 15px; - padding: 25px; - margin-bottom: 30px; - box-shadow: 0 6px 25px rgba(76, 175, 80, 0.1); - border: 1px solid rgba(76, 175, 80, 0.2); -} - -.rank-header { - display: flex; - gap: 20px; - align-items: flex-start; -} - -.rank-cover { - width: 120px; - height: 120px; - border-radius: 12px; - object-fit: cover; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); - flex-shrink: 0; -} - -.rank-details { - flex: 1; -} - -.rank-name { - font-size: 1.8rem; - color: #2c3e50; - margin-bottom: 10px; - font-weight: 600; -} - -.rank-description { - color: #666; - margin-bottom: 15px; - line-height: 1.6; -} - -.rank-meta { - display: flex; - gap: 20px; - flex-wrap: wrap; -} - -.update-time, .update-frequency { - background: linear-gradient(135deg, #E8F5E8, #C8E6C9); - padding: 6px 12px; - border-radius: 20px; font-size: 0.9rem; - color: #2E7D32; - border: 1px solid rgba(76, 175, 80, 0.3); + 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); } -/* 控制区域样式 */ -.controls { - background: rgba(255, 255, 255, 0.9); - border-radius: 15px; - padding: 25px; - margin-bottom: 30px; - box-shadow: 0 6px 25px rgba(76, 175, 80, 0.1); +.hot-list { + list-style: none; } -.input-group { +.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; - gap: 15px; align-items: center; - flex-wrap: wrap; + border: 1px solid rgba(0, 0, 0, 0.03); } -.input-group label { - font-weight: 600; - color: #2c3e50; - min-width: 80px; +.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); } -#rankId { - flex: 1; - min-width: 200px; - padding: 12px 16px; - border: 2px solid #E0E0E0; - border-radius: 10px; - font-size: 1rem; - transition: all 0.3s ease; - background: rgba(255, 255, 255, 0.9); +.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; } -#rankId:focus { - outline: none; - border-color: #4CAF50; - box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1); -} - -.load-btn { - padding: 12px 24px; - background: linear-gradient(135deg, #4CAF50, #66BB6A); +.hot-rank.top-1 { + background: linear-gradient(135deg, #ff4d4f, #ff7a45); color: white; - border: none; - border-radius: 10px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); } -.load-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4); +.hot-rank.top-2 { + background: linear-gradient(135deg, #ff7a45, #ffa940); + color: white; } -.load-btn:active { - transform: translateY(0); +.hot-rank.top-3 { + background: linear-gradient(135deg, #ffa940, #ffec3d); + color: white; } -.load-btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; +.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; - background: rgba(255, 255, 255, 0.9); - border-radius: 15px; - margin-bottom: 30px; -} - -.spinner { - width: 40px; - height: 40px; - border: 4px solid #E0E0E0; - border-top: 4px solid #4CAF50; - border-radius: 50%; - animation: spin 1s linear infinite; - margin: 0 auto 15px; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* 错误提示 */ -.error { - text-align: center; - padding: 30px; - background: rgba(255, 245, 245, 0.95); - border: 2px solid #ffcdd2; - border-radius: 15px; - margin-bottom: 30px; -} - -.error-icon { - font-size: 3rem; - margin-bottom: 15px; -} - -.error-message { - color: #c62828; - margin-bottom: 20px; + color: #666; font-size: 1.1rem; } -.retry-btn { - padding: 10px 20px; - background: #f44336; - color: white; - border: none; - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; -} - -.retry-btn:hover { - background: #d32f2f; - transform: translateY(-1px); -} - -/* 歌曲列表样式 */ -.song-list { - background: rgba(255, 255, 255, 0.95); - border-radius: 15px; - padding: 25px; - margin-bottom: 30px; - box-shadow: 0 6px 25px rgba(76, 175, 80, 0.1); -} - -.list-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 25px; - padding-bottom: 15px; - border-bottom: 2px solid #E8F5E8; -} - -.list-header h3 { - font-size: 1.5rem; - color: #2c3e50; - font-weight: 600; -} - -.song-count { - background: linear-gradient(135deg, #4CAF50, #66BB6A); - color: white; - padding: 6px 12px; - border-radius: 20px; - font-size: 0.9rem; - font-weight: 600; -} - -/* 歌曲项样式 */ -.song-item { - display: flex; - align-items: center; - padding: 15px; - margin-bottom: 12px; - background: rgba(248, 255, 248, 0.8); - border-radius: 12px; - transition: all 0.3s ease; - border: 1px solid rgba(76, 175, 80, 0.1); - cursor: pointer; -} - -.song-item:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(76, 175, 80, 0.15); - background: rgba(232, 245, 232, 0.9); -} - -.song-rank { - font-size: 1.2rem; - font-weight: 700; - color: #4CAF50; - min-width: 40px; +footer { text-align: center; -} - -.song-rank.top3 { - background: linear-gradient(135deg, #FFD700, #FFA000); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.song-info { - flex: 1; - margin-left: 15px; -} - -.song-title { - font-size: 1.1rem; - font-weight: 600; - color: #2c3e50; - margin-bottom: 5px; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.song-artist { - color: #666; - font-size: 0.9rem; - margin-bottom: 3px; -} - -.song-album { - color: #888; - font-size: 0.85rem; -} - -.song-meta { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 5px; -} - -.song-duration { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid rgba(0, 0, 0, 0.06); color: #666; font-size: 0.9rem; } -.song-popularity { - background: linear-gradient(135deg, #4CAF50, #66BB6A); - color: white; - padding: 3px 8px; - border-radius: 12px; - font-size: 0.8rem; - font-weight: 600; +/* 音符装饰样式 */ +.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); } -/* 返回按钮 */ -.back-to-list { - text-align: center; - margin: 30px 0; -} - -.back-btn { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 24px; - background: linear-gradient(135deg, #81C784, #A5D6A7); - color: white; - text-decoration: none; - border-radius: 10px; - font-weight: 600; - transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3); -} - -.back-btn:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(129, 199, 132, 0.4); -} - -/* 页脚 */ -.footer { - text-align: center; - padding: 30px 20px; - background: rgba(255, 255, 255, 0.9); - border-radius: 15px; - margin-top: 40px; - color: #666; - backdrop-filter: blur(10px); +@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: 768px) { +@media (max-width: 1024px) and (min-width: 768px) { .container { - padding: 15px; + max-width: 90%; + padding: 20px; } - .title { - font-size: 2rem; + header h1 { + font-size: 2.2rem; } - .rank-header { - flex-direction: column; - text-align: center; + .hot-item { + padding: 18px; } - .rank-cover { - width: 100px; - height: 100px; - margin: 0 auto 15px; + .hot-title { + font-size: 1.1rem; } - .input-group { - flex-direction: column; - align-items: stretch; + .music-note { + font-size: 22px; + } +} + +@media (max-width: 768px) { + body { + background-color: #f8f9fa; } - .input-group label { - min-width: auto; - margin-bottom: 5px; + .container { + max-width: 95%; + margin: 12px auto; + padding: 16px; + border-radius: 12px; } - #rankId { - min-width: auto; + header { + margin-bottom: 20px; + padding-bottom: 16px; + } + + header h1 { + font-size: 1.8rem; margin-bottom: 10px; } - .song-item { - flex-direction: column; - text-align: center; - gap: 10px; + .update-time { + font-size: 0.85rem; + padding: 6px 12px; } - .song-info { - margin-left: 0; - } - - .song-meta { - align-items: center; + .hot-item { + padding: 16px; + margin-bottom: 12px; + border-radius: 10px; flex-direction: row; - justify-content: center; + align-items: flex-start; } - .list-header { - flex-direction: column; - gap: 10px; - text-align: center; + .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) { - .title { - font-size: 1.8rem; + .container { + margin: 8px auto; + padding: 14px; } - .header { - padding: 30px 15px; + header h1 { + font-size: 1.6rem; } - .rank-info, .controls, .song-list { - padding: 20px; + .hot-item { + padding: 14px; + margin-bottom: 10px; } - .song-item { - padding: 12px; + .hot-rank { + font-size: 1rem; + margin-right: 12px; + min-width: 30px; + width: 30px; + height: 30px; + } + + .hot-title { + font-size: 0.95rem; } } -/* 平板端适配 */ -@media (min-width: 769px) and (max-width: 1024px) { - .container { - padding: 25px; +/* 减少动画以节省电池 */ +@media (prefers-reduced-motion: reduce) { + .modern-gradient, + .modern-gradient::before { + animation: none; } - .song-item { - padding: 18px; - } - - .rank-cover { - width: 110px; - height: 110px; + .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% + ); } } \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/index.html b/frontend/60sapi/热搜榜单/网易云榜单详情/index.html index 9215b81c..a3f82959 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/index.html +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/index.html @@ -3,15 +3,20 @@ - 网易云榜单详情 + 网易云音乐榜单详情 + + +
+

🎵 网易云榜单详情

发现音乐的魅力

+ ← 返回榜单列表
- ← 返回榜单列表 + ← 返回榜单列表
@@ -64,6 +69,42 @@

© 2025 网易云榜单详情 - 数据来源于官方API

+ \ No newline at end of file diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/js/script.js b/frontend/60sapi/热搜榜单/网易云榜单详情/js/script.js index 0ff2eb10..964a17ef 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/js/script.js +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/js/script.js @@ -31,11 +31,28 @@ class NeteaseMusicRankDetail { console.error('加载API接口失败:', error); // 使用默认接口 this.apiUrls = [ - 'https://60s-cf.viki.moe', 'https://60s.viki.moe', + 'https://60s-cf.viki.moe', 'https://60s.b23.run', 'https://60s.114128.xyz', - 'https://60s-cf.114128.xyz' + 'https://60s-cf.114128.xyz', + 'https://60s.api.shumengya.top', + 'https://api.03c3.cn/api/zb', + 'https://api.vvhan.com/api/60s' + ]; + } + + // 确保至少有一个API接口 + if (!this.apiUrls || this.apiUrls.length === 0) { + this.apiUrls = [ + 'https://60s.viki.moe', + 'https://60s-cf.viki.moe', + 'https://60s.b23.run', + 'https://60s.114128.xyz', + 'https://60s-cf.114128.xyz', + 'https://60s.api.shumengya.top', + 'https://api.03c3.cn/api/zb', + 'https://api.vvhan.com/api/60s' ]; } } @@ -45,6 +62,8 @@ class NeteaseMusicRankDetail { const loadBtn = document.getElementById('loadBtn'); const rankIdInput = document.getElementById('rankId'); const retryBtn = document.getElementById('retryBtn'); + const backLink = document.getElementById('backLink'); + const backBtnBottom = document.getElementById('backBtnBottom'); loadBtn.addEventListener('click', () => this.loadRankDetail()); retryBtn.addEventListener('click', () => this.loadRankDetail()); @@ -61,6 +80,19 @@ class NeteaseMusicRankDetail { const value = e.target.value.trim(); loadBtn.disabled = !value || !/^\d+$/.test(value); }); + + // 处理返回链接 + if (backLink) { + backLink.addEventListener('click', (e) => { + console.log('返回榜单列表'); + }); + } + + if (backBtnBottom) { + backBtnBottom.addEventListener('click', (e) => { + console.log('返回榜单列表'); + }); + } } // 检查URL参数 @@ -102,12 +134,17 @@ class NeteaseMusicRankDetail { try { const data = await this.fetchRankDetail(rankId); + this.rankData = data; this.displayRankDetail(data); this.hideLoading(); // 更新URL const newUrl = new URL(window.location); newUrl.searchParams.set('id', rankId); + if (data.playlist && data.playlist.name) { + newUrl.searchParams.set('name', encodeURIComponent(data.playlist.name)); + document.title = `${data.playlist.name} - 网易云榜单详情`; + } window.history.replaceState({}, '', newUrl); } catch (error) { @@ -120,22 +157,43 @@ class NeteaseMusicRankDetail { // 获取榜单详情数据 async fetchRankDetail(rankId) { let lastError = null; + let attemptedApis = 0; - for (let i = 0; i < this.apiUrls.length; i++) { + // 尝试所有API接口 + while (attemptedApis < this.apiUrls.length) { try { const apiUrl = this.apiUrls[this.currentApiIndex]; - const url = `${apiUrl}/v2/ncm-rank/${rankId}`; + let url = `${apiUrl}/v2/ncm-rank/${rankId}`; - console.log(`尝试API ${this.currentApiIndex + 1}:`, url); + // 处理本地JSON文件 + if (apiUrl.includes('返回接口.json')) { + url = apiUrl; + console.log('使用本地测试数据:', url); + } + // 针对不同API接口格式进行适配 + else if (apiUrl.includes('03c3.cn') || apiUrl.includes('vvhan.com')) { + // 这些API可能有不同的路径格式，需要特殊处理 + if (apiUrl.includes('03c3.cn')) { + url = `${apiUrl}/ncm/playlist?id=${rankId}`; + } else if (apiUrl.includes('vvhan.com')) { + url = `${apiUrl}/music/netease/playlist?id=${rankId}`; + } + } + + console.log(`尝试API ${this.currentApiIndex + 1}/${this.apiUrls.length}:`, url); const controller = new AbortController(); - const timeoutId = setTimeout(() => controller.abort(), 10000); + const timeoutId = setTimeout(() => controller.abort(), 8000); // 缩短超时时间 const response = await fetch(url, { signal: controller.signal, headers: { 'Accept': 'application/json', - } + }, + // 添加缓存控制 + cache: 'no-cache', + // 添加模式 + mode: apiUrl.includes('返回接口.json') ? 'same-origin' : 'cors' }); clearTimeout(timeoutId); @@ -146,8 +204,25 @@ class NeteaseMusicRankDetail { const data = await response.json(); - if (data.code !== 200) { - throw new Error(data.message || '获取数据失败'); + // 如果是本地测试数据，直接使用 + if (apiUrl.includes('返回接口.json')) { + // 查找对应ID的榜单 + if (data.data && Array.isArray(data.data)) { + const rank = data.data.find(item => item.id == rankId); + if (rank) { + // 构造一个符合详情页面期望的数据结构 + return { + code: 200, + playlist: rank, + data: [] // 模拟空歌曲列表 + }; + } + } + } + + // 不同API可能有不同的成功状态码 + if (data.code !== undefined && data.code !== 200 && data.code !== 0) { + throw new Error(data.message || data.msg || '获取数据失败'); } console.log('API调用成功:', data); @@ -157,23 +232,68 @@ class NeteaseMusicRankDetail { console.warn(`API ${this.currentApiIndex + 1} 失败:`, error.message); lastError = error; this.currentApiIndex = (this.currentApiIndex + 1) % this.apiUrls.length; + attemptedApis++; if (error.name === 'AbortError') { lastError = new Error('请求超时，请重试'); } + + // 添加短暂延迟，避免过快请求下一个API + await new Promise(resolve => setTimeout(resolve, 300)); } } - throw lastError || new Error('所有API接口都无法访问'); + throw lastError || new Error('所有API接口都无法访问，请稍后再试'); } // 显示榜单详情 displayRankDetail(data) { this.rankData = data; - const songs = data.data || []; + + // 适配不同API返回的数据格式 + let songs = []; + let rankInfo = null; + + // 标准格式：data.data 是数组 + if (data.data && Array.isArray(data.data)) { + songs = data.data; + rankInfo = data.playlist || {}; + } + // 03c3.cn API格式：data.result 或 data.playlist + else if (data.result) { + if (data.result.tracks && Array.isArray(data.result.tracks)) { + songs = data.result.tracks; + rankInfo = data.result; + } else if (Array.isArray(data.result)) { + songs = data.result; + } + } + // vvhan.com API格式：data.playlist 和 data.playlist.tracks + else if (data.playlist && data.playlist.tracks) { + songs = data.playlist.tracks; + rankInfo = data.playlist; + } + // 其他可能的格式 + else { + // 尝试查找数据中的任何数组 + for (const key in data) { + if (Array.isArray(data[key]) && data[key].length > 0) { + songs = data[key]; + break; + } else if (data[key] && data[key].tracks && Array.isArray(data[key].tracks)) { + songs = data[key].tracks; + rankInfo = data[key]; + break; + } + } + } + + if (songs.length === 0) { + throw new Error('未找到歌曲数据或数据格式不兼容'); + } // 显示榜单信息（如果有的话） - this.displayRankInfo(songs[0]); + this.displayRankInfo(songs[0], rankInfo); // 显示歌曲列表 this.displaySongList(songs); @@ -184,25 +304,63 @@ class NeteaseMusicRankDetail { } // 显示榜单信息 - displayRankInfo(firstSong) { - const rankInfo = document.getElementById('rankInfo'); + displayRankInfo(firstSong, rankInfoData) { + const rankInfoElement = document.getElementById('rankInfo'); - if (firstSong && firstSong.rank_name) { - document.getElementById('rankName').textContent = firstSong.rank_name; - document.getElementById('rankDescription').textContent = `${firstSong.rank_name} - 网易云音乐官方榜单`; + // 获取URL参数中的榜单名称 + const urlParams = new URLSearchParams(window.location.search); + const rankNameFromUrl = urlParams.get('name'); + + // 尝试从多个来源获取榜单名称 + let rankName = rankNameFromUrl || ''; + if (!rankName) { + if (rankInfoData && rankInfoData.name) { + rankName = rankInfoData.name; + } else if (firstSong) { + rankName = firstSong.rank_name || firstSong.rankName || firstSong.playlist_name || ''; + } + } + + if (rankName) { + document.getElementById('rankName').textContent = rankName; + document.getElementById('rankDescription').textContent = `${rankName} - 网易云音乐官方榜单`; + document.title = `${rankName} - 网易云音乐榜单详情`; - // 如果有专辑封面，使用第一首歌的专辑封面作为榜单封面 - if (firstSong.album && firstSong.album.cover) { - document.getElementById('rankCover').src = firstSong.album.cover; - document.getElementById('rankCover').alt = firstSong.rank_name; + // 尝试获取榜单封面 + let coverUrl = ''; + if (rankInfoData && rankInfoData.coverImgUrl) { + coverUrl = rankInfoData.coverImgUrl; + } else if (rankInfoData && rankInfoData.picUrl) { + coverUrl = rankInfoData.picUrl; + } else if (firstSong && firstSong.album && firstSong.album.cover) { + coverUrl = firstSong.album.cover; + } else if (firstSong && firstSong.album && firstSong.album.picUrl) { + coverUrl = firstSong.album.picUrl; + } else if (firstSong && firstSong.al && firstSong.al.picUrl) { + coverUrl = firstSong.al.picUrl; } - document.getElementById('updateTime').textContent = `更新时间: ${this.formatDate(new Date())}`; - document.getElementById('updateFrequency').textContent = '实时更新'; + if (coverUrl) { + document.getElementById('rankCover').src = coverUrl; + document.getElementById('rankCover').alt = rankName; + } - rankInfo.style.display = 'block'; + // 尝试获取更新时间 + let updateTime = ''; + if (rankInfoData && rankInfoData.updateTime) { + updateTime = this.formatDate(new Date(rankInfoData.updateTime)); + } else if (rankInfoData && rankInfoData.updateFrequency) { + updateTime = rankInfoData.updateFrequency; + } else { + updateTime = this.formatDate(new Date()); + } + + document.getElementById('updateTime').textContent = `更新时间: ${updateTime}`; + document.getElementById('updateFrequency').textContent = rankInfoData?.updateFrequency || '定期更新'; + + rankInfoElement.style.display = 'block'; } else { - rankInfo.style.display = 'none'; + rankInfoElement.style.display = 'none'; } } diff --git a/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json b/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json index 547b2771..ddb441d7 100644 --- a/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json +++ b/frontend/60sapi/热搜榜单/网易云榜单详情/接口集合.json @@ -1,3 +1,4 @@ [ - "https://60s.api.shumengya.top" + "https://60s.api.shumengya.top", + "../返回接口.json" ]