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 @@
 </head>
 <body>
     <div class="background-container">
-        <div class="green-gradient"></div>
+        <div class="modern-gradient"></div>
     </div>
     
     <div class="container">
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 @@
     
     <div class="container">
         <header>
-            <h1>头条热搜榜</h1>
-            <div class="update-time" id="updateTime"></div>
+            <div class="title-container">
+                <div class="geometric-decoration left">◢ ◣ ▲</div>
+                <h1>头条热搜榜</h1>
+                <div class="geometric-decoration right">▼ ◥ ◤</div>
+            </div>
+            <div class="update-time-container">
+                <span class="time-decoration">◇</span>
+                <div class="update-time" id="updateTime"></div>
+                <span class="time-decoration">◇</span>
+            </div>
         </header>
         
         <main>
+            <div class="geometric-header">
+                <span>◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆</span>
+            </div>
             <div class="hot-list" id="hotList">
                 <div class="loading">加载中...</div>
             </div>
+            <div class="geometric-footer">
+                <span>◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆</span>
+            </div>
         </main>
         
         <footer>
+            <div class="footer-decoration">
+                <span class="geo-symbol">◆</span>
+                <span class="geo-symbol">■</span>
+                <span class="geo-symbol">▲</span>
+                <span class="geo-symbol">●</span>
+                <span class="geo-symbol">★</span>
+            </div>
             <p>数据来源于头条热搜榜</p>
+            <div class="footer-decoration">
+                <span class="geo-symbol">★</span>
+                <span class="geo-symbol">●</span>
+                <span class="geo-symbol">▲</span>
+                <span class="geo-symbol">■</span>
+                <span class="geo-symbol">◆</span>
+            </div>
         </footer>
     </div>
     
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 ? 
-            `<div class="stat-item"><span class="hot-value">${formatNumber(item.hot_value)} 热度</span></div>` : '';
+            `<div class="stat-item"><span class="hot-value">${randomSymbol} ${formatNumber(item.hot_value)} 热度</span></div>` : '';
         
         // 处理标签显示
         const tagDisplay = item.tag ? 
-            `<div class="stat-item"><span class="hot-tag">${item.tag}</span></div>` : '';
+            `<div class="stat-item"><span class="hot-tag">${randomSymbol} ${item.tag}</span></div>` : '';
         
         hotItem.innerHTML = `
             <div class="hot-rank ${rankClass}">${index + 1}</div>
             <div class="hot-content">
-                <a href="${item.link}" class="hot-title" target="_blank">${item.title}</a>
+                <a href="${item.link}" class="hot-title" target="_blank">
+                    <span class="title-decoration">${randomSymbol}</span> ${item.title}
+                </a>
                 <div class="hot-stats">
                     ${hotValueDisplay}
                     ${tagDisplay}
-                    ${item.source ? `<div class="stat-item">📰 ${item.source}</div>` : ''}
-                    ${item.time ? `<div class="stat-item">🕒 ${item.time}</div>` : ''}
+                    ${item.source ? `<div class="stat-item"><span class="source-icon">${randomSymbol}</span> ${item.source}</div>` : ''}
+                    ${item.time ? `<div class="stat-item"><span class="time-icon">${randomSymbol}</span> ${item.time}</div>` : ''}
                 </div>
             </div>
         `;
@@ -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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100" height="60" viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
+  <!-- 脸部 -->
+  <circle cx="50" cy="30" r="25" fill="#FFD6A5" />
+  
+  <!-- 左眼 -->
+  <g id="left-eye">
+    <circle cx="40" cy="25" r="5" fill="white" />
+    <circle cx="40" cy="25" r="2.5" fill="#333" class="pupil" />
+    <!-- 眨眼动画 -->
+    <animate 
+      xlink:href="#left-eye"
+      attributeName="transform"
+      attributeType="XML"
+      type="scale"
+      values="1 1; 1 0.1; 1 1"
+      dur="3s"
+      repeatCount="indefinite" />
+  </g>
+  
+  <!-- 右眼 -->
+  <g id="right-eye">
+    <circle cx="60" cy="25" r="5" fill="white" />
+    <circle cx="60" cy="25" r="2.5" fill="#333" class="pupil" />
+    <!-- 眨眼动画 -->
+    <animate 
+      xlink:href="#right-eye"
+      attributeName="transform"
+      attributeType="XML"
+      type="scale"
+      values="1 1; 1 0.1; 1 1"
+      dur="3s"
+      repeatCount="indefinite" />
+  </g>
+  
+  <!-- 嘴巴 -->
+  <path d="M45,35 Q50,40 55,35" stroke="#FF9999" stroke-width="2" fill="none" />
+  
+  <!-- 腮红 -->
+  <circle cx="35" cy="30" r="3" fill="#FF9999" opacity="0.5" />
+  <circle cx="65" cy="30" r="3" fill="#FF9999" opacity="0.5" />
+</svg>
\ 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 @@
 </head>
 <body>
     <div class="background-container">
-        <div class="rainbow-gradient"></div>
+        <div class="modern-gradient"></div>
     </div>
     
     <div class="container">
         <header>
-            <h1>微博热搜榜</h1>
+            <h1>🌈 微博热搜榜 🌈</h1>
             <div class="update-time" id="updateTime"></div>
         </header>
         
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 `
         <div class="movie-item ${cls}">
             <div class="rank-badge ${badgeCls}">${rank}</div>
+            <div class="movie-poster">
+                <img src="${posterUrl}" alt="${escapeHtml(item.movie_name)}" onerror="this.onerror=null; this.src='${backupPosterUrl}'; this.onerror=function(){this.src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22160%22 height%3D%22220%22 viewBox%3D%220 0 160 220%22%3E%3Crect fill%3D%22%23f0f0f0%22 width%3D%22160%22 height%3D%22220%22%2F%3E%3Ctext fill%3D%22%23999%22 font-family%3D%22Arial%2CSans-serif%22 font-size%3D%2216%22 x%3D%2250%25%22 y%3D%2250%25%22 text-anchor%3D%22middle%22 dominant-baseline%3D%22middle%22%3E无图片%3C%2Ftext%3E%3C%2Fsvg%3E';}">
+            </div>
             <div class="movie-info">
                 <div class="rank-number">#${rank}</div>
                 <div class="movie-details">
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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <path d="M53.29,80.035l7.32.002 2.41 8.24 13.128-8.24h15.477v-67.98H53.29v67.978zM46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
+  <path d="M46.2,80.035v-67.98H7.065V80.035H46.2z" fill="#0084FF"/>
+  <path d="M60.61,26.48H40.11c0-6.505,1.76-14.58,8.04-14.58V5.88H30.79c0,4.44-3.6,20.32-11.21,19.77v6.505h12.93v49.4H16.09v6.56h54.13v-6.56H53.75v-49.4h6.86V26.48z" fill="#FFF"/>
+</svg>
\ 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 ? 
             `<img src="${item.cover}" alt="话题封面" class="topic-cover" onerror="this.style.display='none'">` : '';
         
+        // 判断文本内容长度，决定图片位置
+        // 如果detail存在且长度较长，或者没有detail但标题较长，则图片放在下方
+        const detailLength = item.detail ? item.detail.length : 0;
+        const titleLength = item.title ? item.title.length : 0;
+        const isLongContent = detailLength > 100 || (detailLength === 0 && titleLength > 30);
+        
+        // 根据内容长度决定布局类名
+        const layoutClass = isLongContent ? 'long-content' : 'short-content';
+        
         topicItem.innerHTML = `
-            <div class="topic-header">
+            <div class="topic-header ${layoutClass}">
                 <div class="topic-rank ${rankClass}">${index + 1}</div>
                 <div class="topic-content">
-                    <a href="${item.link}" class="topic-title" target="_blank">${item.title}</a>
+                    <a href="${item.link}" class="topic-title" target="_blank">🔥 ${item.title}</a>
                     ${item.detail ? `<div class="topic-detail">${item.detail}</div>` : ''}
                     <div class="topic-stats">
-                        ${item.hot_value_desc ? `<div class="stat-item"><span class="hot-value">${item.hot_value_desc}</span></div>` : ''}
+                        ${item.hot_value_desc ? `<div class="stat-item"><span class="hot-value">🔥 ${item.hot_value_desc}</span></div>` : ''}
                         ${item.answer_cnt ? `<div class="stat-item">💬 ${formatNumber(item.answer_cnt)} 回答</div>` : ''}
                         ${item.follower_cnt ? `<div class="stat-item">👥 ${formatNumber(item.follower_cnt)} 关注</div>` : ''}
                     </div>
                 </div>
                 ${coverImg}
-            </div>
-        `;
+            </div>`;
         
         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 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>网易云音乐榜单列表</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/background.css">
+</head>
+<body>
+    <!-- 音符装饰 -->
+    <div id="musicNotes"></div>
+    
+    <div class="container">
+        <header class="header">
+            <h1 class="title">🎵 网易云音乐榜单列表</h1>
+            <p class="subtitle">发现音乐的魅力</p>
+        </header>
+
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>正在加载榜单数据...</p>
+        </div>
+
+        <div class="error" id="error" style="display: none;">
+            <div class="error-icon">⚠️</div>
+            <p class="error-message" id="errorMessage"></p>
+            <button class="retry-btn" id="retryBtn">重试</button>
+        </div>
+
+        <div class="rank-list" id="rankList" style="display: none;">
+            <!-- 榜单列表将在这里动态生成 -->
+        </div>
+    </div>
+
+    <footer class="footer">
+        <p>&copy; 2025 网易云音乐榜单列表 - 数据来源于官方API</p>
+    </footer>
+
+    <script>
+        // 创建音符装饰
+        function createMusicNotes() {
+            const musicNotes = document.getElementById('musicNotes');
+            const noteSymbols = ['♪', '♫', '♬', '♩', '♭', '♮', '♯'];
+            const containerWidth = window.innerWidth;
+            const containerHeight = window.innerHeight;
+            
+            // 创建20个音符
+            for (let i = 0; i < 20; i++) {
+                const note = document.createElement('div');
+                note.className = 'music-note';
+                note.textContent = noteSymbols[Math.floor(Math.random() * noteSymbols.length)];
+                
+                // 随机位置
+                const left = Math.random() * containerWidth;
+                const top = Math.random() * containerHeight;
+                
+                // 随机动画延迟
+                const delay = Math.random() * 15;
+                const duration = 10 + Math.random() * 20;
+                
+                note.style.left = `${left}px`;
+                note.style.top = `${top}px`;
+                note.style.animationDelay = `${delay}s`;
+                note.style.animationDuration = `${duration}s`;
+                
+                musicNotes.appendChild(note);
+            }
+        }
+        
+        // 页面加载完成后创建音符
+        document.addEventListener('DOMContentLoaded', () => {
+            createMusicNotes();
+        });
+        
+        // API接口列表
+        const API_ENDPOINTS = [
+            "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",
+            // 添加本地测试数据
+            "../返回接口.json"
+        ];
+
+        // 当前使用的API索引
+        let currentApiIndex = 0;
+
+        // DOM元素
+        const loadingElement = document.getElementById('loading');
+        const errorElement = document.getElementById('error');
+        const errorMessageElement = document.getElementById('errorMessage');
+        const retryBtnElement = document.getElementById('retryBtn');
+        const rankListElement = document.getElementById('rankList');
+
+        // 初始化
+        document.addEventListener('DOMContentLoaded', () => {
+            loadRankList();
+            retryBtnElement.addEventListener('click', loadRankList);
+        });
+
+        // 显示加载状态
+        function showLoading() {
+            loadingElement.style.display = 'flex';
+            errorElement.style.display = 'none';
+            rankListElement.style.display = 'none';
+        }
+
+        // 显示错误状态
+        function showError(message) {
+            loadingElement.style.display = 'none';
+            errorElement.style.display = 'flex';
+            errorMessageElement.textContent = message;
+            rankListElement.style.display = 'none';
+        }
+
+        // 显示榜单列表
+        function showRankList() {
+            loadingElement.style.display = 'none';
+            errorElement.style.display = 'none';
+            rankListElement.style.display = 'block';
+        }
+
+        // 加载榜单列表
+        async function loadRankList() {
+            showLoading();
+            
+            try {
+                const data = await fetchRankList();
+                displayRankList(data);
+                showRankList();
+            } catch (error) {
+                console.error('加载榜单列表失败:', error);
+                showError(error.message || '加载榜单列表失败，请重试');
+            }
+        }
+
+        // 获取榜单列表数据
+        async function fetchRankList() {
+            let lastError = null;
+            let attemptedApis = 0;
+            
+            // 尝试所有API接口
+            while (attemptedApis < API_ENDPOINTS.length) {
+                try {
+                    const apiUrl = API_ENDPOINTS[currentApiIndex];
+                    let url = `${apiUrl}/v2/ncm-rank-list`;
+                    
+                    // 处理本地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/toplist`;
+                        } else if (apiUrl.includes('vvhan.com')) {
+                            url = `${apiUrl}/music/netease/toplist`;
+                        }
+                    }
+                    
+                    console.log(`尝试API ${currentApiIndex + 1}/${API_ENDPOINTS.length}:`, url);
+                    
+                    const controller = new AbortController();
+                    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);
+                    
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+                    
+                    const data = await response.json();
+                    
+                    // 不同API可能有不同的成功状态码
+                    if (data.code !== undefined && data.code !== 200 && data.code !== 0) {
+                        throw new Error(data.message || data.msg || '获取数据失败');
+                    }
+                    
+                    console.log('API调用成功:', data);
+                    return data;
+                    
+                } catch (error) {
+                    console.warn(`API ${currentApiIndex + 1} 失败:`, error.message);
+                    lastError = error;
+                    currentApiIndex = (currentApiIndex + 1) % API_ENDPOINTS.length;
+                    attemptedApis++;
+                    
+                    if (error.name === 'AbortError') {
+                        lastError = new Error('请求超时，请重试');
+                    }
+                    
+                    // 添加短暂延迟，避免过快请求下一个API
+                    await new Promise(resolve => setTimeout(resolve, 300));
+                }
+            }
+            
+            throw lastError || new Error('所有API接口都无法访问，请稍后再试');
+        }
+
+        // 显示榜单列表
+        function displayRankList(data) {
+            // 适配不同API返回的数据格式
+            let ranks = [];
+            
+            // 标准格式：data.data 是数组
+            if (data.data && Array.isArray(data.data)) {
+                ranks = data.data;
+            }
+            // 03c3.cn API格式：data.result 是数组
+            else if (data.result && Array.isArray(data.result)) {
+                ranks = data.result;
+            }
+            // vvhan.com API格式：data.list 是数组
+            else if (data.list && Array.isArray(data.list)) {
+                ranks = data.list;
+            }
+            // 其他可能的格式
+            else if (Array.isArray(data)) {
+                ranks = data;
+            }
+            else {
+                // 尝试查找数据中的任何数组
+                for (const key in data) {
+                    if (Array.isArray(data[key]) && data[key].length > 0) {
+                        ranks = data[key];
+                        break;
+                    }
+                }
+            }
+            
+            if (ranks.length === 0) {
+                showError('没有找到榜单数据');
+                return;
+            }
+            
+            rankListElement.innerHTML = '';
+            
+            ranks.forEach(rank => {
+                // 适配不同API的字段名
+                const id = rank.id || rank.listId || rank.list_id || '';
+                const name = rank.name || rank.listName || rank.list_name || '未知榜单';
+                const cover = rank.cover || rank.coverImgUrl || rank.picUrl || rank.pic || 'https://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg';
+                const description = rank.description || rank.desc || rank.updateFrequency || '暂无描述';
+                const updateFrequency = rank.update_frequency || rank.updateFrequency || '定期更新';
+                const updated = rank.updated || rank.updateTime || rank.update_time || '';
+                
+                const rankItem = document.createElement('div');
+                rankItem.className = 'rank-item';
+                
+                rankItem.innerHTML = `
+                    <div class="rank-cover">
+                        <img src="${cover}" alt="${name}" onerror="this.src='https://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg'">
+                    </div>
+                    <div class="rank-info">
+                        <h3 class="rank-name">${name}</h3>
+                        <p class="rank-description">${description}</p>
+                        <div class="rank-meta">
+                            <span class="update-frequency">${updateFrequency}</span>
+                            <span class="update-time">更新: ${formatDate(updated)}</span>
+                        </div>
+                    </div>
+                    <a href="../网易云榜单详情/index.html?id=${id}&name=${encodeURIComponent(name)}" class="view-btn">查看详情</a>
+                `;
+                
+                rankListElement.appendChild(rankItem);
+            });
+        }
+
+        // 格式化日期
+        function formatDate(dateStr) {
+            if (!dateStr) return '未知';
+            
+            try {
+                const date = new Date(dateStr);
+                return date.toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            } catch (e) {
+                return dateStr;
+            }
+        }
+    </script>
+</body>
+</html>
\ 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 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>网易云榜单详情</title>
+    <title>网易云音乐榜单详情</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/loading.css">
     <link rel="stylesheet" href="css/background.css">
 </head>
 <body>
+    <!-- 音符装饰 -->
+    <div id="musicNotes"></div>
+    
     <div class="container">
         <header class="header">
             <h1 class="title">🎵 网易云榜单详情</h1>
             <p class="subtitle">发现音乐的魅力</p>
+            <a href="../网易云榜单列表/index.html" class="back-link" id="backLink">← 返回榜单列表</a>
         </header>
 
         <div class="rank-info" id="rankInfo" style="display: none;">
@@ -56,7 +61,7 @@
         </div>
 
         <div class="back-to-list">
-            <a href="../网易云榜单列表/index.html" class="back-btn">← 返回榜单列表</a>
+            <a href="../网易云榜单列表/index.html" class="back-btn" id="backBtnBottom">← 返回榜单列表</a>
         </div>
     </div>
 
@@ -64,6 +69,42 @@
         <p>&copy; 2025 网易云榜单详情 - 数据来源于官方API</p>
     </footer>
 
+    <script>
+        // 创建音符装饰
+        function createMusicNotes() {
+            const musicNotes = document.getElementById('musicNotes');
+            const noteSymbols = ['♪', '♫', '♬', '♩', '♭', '♮', '♯'];
+            const containerWidth = window.innerWidth;
+            const containerHeight = window.innerHeight;
+            
+            // 创建20个音符
+            for (let i = 0; i < 20; i++) {
+                const note = document.createElement('div');
+                note.className = 'music-note';
+                note.textContent = noteSymbols[Math.floor(Math.random() * noteSymbols.length)];
+                
+                // 随机位置
+                const left = Math.random() * containerWidth;
+                const top = Math.random() * containerHeight;
+                
+                // 随机动画延迟
+                const delay = Math.random() * 15;
+                const duration = 10 + Math.random() * 20;
+                
+                note.style.left = `${left}px`;
+                note.style.top = `${top}px`;
+                note.style.animationDelay = `${delay}s`;
+                note.style.animationDuration = `${duration}s`;
+                
+                musicNotes.appendChild(note);
+            }
+        }
+        
+        // 页面加载完成后创建音符
+        document.addEventListener('DOMContentLoaded', () => {
+            createMusicNotes();
+        });
+    </script>
     <script src="js/script.js"></script>
 </body>
 </html>
\ 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"
 ]