From ca668847bd4a4070e4053ef2d309e6a336c9ed91 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Thu, 25 Dec 2025 23:39:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E6=89=93=E5=8F=91=E5=8D=81=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 578 +++++++++++++++++++++++++++----------------------- index.html | 364 ++++++++++++++++++++++--------- 2 files changed, 568 insertions(+), 374 deletions(-) diff --git a/css/index.css b/css/index.css index d901d57..cca22ff 100644 --- a/css/index.css +++ b/css/index.css @@ -4697,267 +4697,287 @@ html { padding: 12px 32px; font-size: 16px; font-weight: 600; - color: rgba(226, 232, 240, 0.8); - background: rgba(15, 23, 42, 0.6); - border: 1px solid rgba(148, 163, 184, 0.2); - border-radius: 30px; - cursor: pointer; - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} -/* 按钮光晕效果 */ -.solution-tab::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - border-radius: 50%; - background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%); - transform: translate(-50%, -50%); - transition: width 0.5s ease, height 0.5s ease; -} + /* 热销产品列表容器 - 兼容Swiper结构 */ + /* Desktop: Grid Layout */ + .products-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + width: 100%; + } -.solution-tab:hover { - color: #38BDF8; - border-color: rgba(56, 189, 248, 0.4); - background: rgba(15, 23, 42, 0.8); - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2); -} + /* Swiper Wrapper 兼容性修正 */ + .swiper-wrapper.products-grid { + box-sizing: border-box; + } -.solution-tab:hover::before { - width: 200px; - height: 200px; -} + /* 产品卡片样式 */ + .product-card { + background: #ffffff; + border-radius: 12px; + border: 1px solid #e2e8f0; + padding: 24px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + height: auto; + /* Allow auto height */ + box-sizing: border-box; + /* Ensure padding is included */ + } -.solution-tab.active { - color: #ffffff; - background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); - border-color: transparent; - box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4); -} + /* 按钮光晕效果 */ + .solution-tab::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 70%); + transform: translate(-50%, -50%); + transition: width 0.5s ease, height 0.5s ease; + } -.solution-tab.active::before { - display: none; -} + .solution-tab:hover { + color: #38BDF8; + border-color: rgba(56, 189, 248, 0.4); + background: rgba(15, 23, 42, 0.8); + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2); + } -/* 下层：幻灯片容器 */ -.solution-slider { - position: relative; - min-height: 450px; - overflow: hidden; -} + .solution-tab:hover::before { + width: 200px; + height: 200px; + } -/* 单个幻灯片 */ -.solution-slide { - position: absolute; - top: 0; - left: 0; - width: 100%; - opacity: 0; - transition: opacity 0.6s ease; - pointer-events: none; - z-index: 1; -} + .solution-tab.active { + color: #ffffff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border-color: transparent; + box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4); + } -/* 激活的幻灯片 */ -.solution-slide.active { - position: relative; - opacity: 1; - pointer-events: auto; - z-index: 2; -} + .solution-tab.active::before { + display: none; + } -/* 幻灯片内容区域 */ -.solution-content { - display: flex; - align-items: stretch; - gap: 60px; - padding: 0; - background: rgba(15, 23, 42, 0.7); - backdrop-filter: blur(16px); - border: 1px solid rgba(148, 163, 184, 0.15); - border-radius: 0; - box-shadow: - 0 8px 32px rgba(15, 23, 42, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.05); - min-height: 500px; -} + /* 下层：幻灯片容器 */ + .solution-slider { + position: relative; + min-height: 450px; + overflow: hidden; + } -/* 左侧文字区域 */ -.solution-text { - flex: 1; - min-width: 0; - padding: 40px; - display: flex; - flex-direction: column; - justify-content: center; -} + /* 单个幻灯片 */ + .solution-slide { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + transition: opacity 0.6s ease; + pointer-events: none; + z-index: 1; + } -.solution-text h3 { - font-size: 32px; - font-weight: 700; - color: #F9FAFB; - margin-bottom: 12px; - background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} + /* 激活的幻灯片 */ + .solution-slide.active { + position: relative; + opacity: 1; + pointer-events: auto; + z-index: 2; + } -.solution-subtitle { - font-size: 16px; - color: rgba(148, 163, 184, 0.9); - margin-bottom: 24px; - font-weight: 500; -} + /* 幻灯片内容区域 */ + .solution-content { + display: flex; + align-items: stretch; + gap: 60px; + padding: 0; + background: rgba(15, 23, 42, 0.7); + backdrop-filter: blur(16px); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 0; + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + min-height: 500px; + } -.solution-desc { - color: rgba(203, 213, 225, 0.85); - line-height: 1.8; - margin-bottom: 32px; -} + /* 左侧文字区域 */ + .solution-text { + flex: 1; + min-width: 0; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + } -.solution-desc p { - margin-bottom: 12px; - font-size: 15px; -} + .solution-text h3 { + font-size: 32px; + font-weight: 700; + color: #F9FAFB; + margin-bottom: 12px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } -.solution-desc p:last-child { - margin-bottom: 0; -} + .solution-subtitle { + font-size: 16px; + color: rgba(148, 163, 184, 0.9); + margin-bottom: 24px; + font-weight: 500; + } -/* 了解详情链接 */ -.solution-link { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 12px 32px; - font-size: 15px; - font-weight: 600; - color: #ffffff; - background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); - border-radius: 30px; - text-decoration: none; - transition: all 0.3s ease; - box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3); - align-self: flex-start; -} + .solution-desc { + color: rgba(203, 213, 225, 0.85); + line-height: 1.8; + margin-bottom: 32px; + } -.solution-link:hover { - transform: translateY(-2px); - box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5); -} + .solution-desc p { + margin-bottom: 12px; + font-size: 15px; + } -.solution-link .icon-arrow-right { - transition: transform 0.3s ease; -} + .solution-desc p:last-child { + margin-bottom: 0; + } -.solution-link:hover .icon-arrow-right { - transform: translateX(5px); -} + /* 了解详情链接 */ + .solution-link { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 32px; + font-size: 15px; + font-weight: 600; + color: #ffffff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border-radius: 30px; + text-decoration: none; + transition: all 0.3s ease; + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3); + align-self: flex-start; + } -/* 右侧图片区域 */ -.solution-image { - flex-shrink: 0; - width: 600px; - position: relative; - overflow: hidden; - border-radius: 0; - background: rgba(15, 23, 42, 0.5); -} + .solution-link:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5); + } -.solution-image img { - width: 100%; - height: 100%; - object-fit: cover; - filter: brightness(1.1); - transition: transform 0.5s ease; -} + .solution-link .icon-arrow-right { + transition: transform 0.3s ease; + } -.solution-slide.active .solution-image img { - transform: scale(1.05); -} + .solution-link:hover .icon-arrow-right { + transform: translateX(5px); + } -/* 图片光晕效果 */ -.solution-image::after { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%); - opacity: 0; - transition: opacity 0.5s ease; - pointer-events: none; -} + /* 右侧图片区域 */ + .solution-image { + flex-shrink: 0; + width: 600px; + position: relative; + overflow: hidden; + border-radius: 0; + background: rgba(15, 23, 42, 0.5); + } -.solution-slide.active .solution-image::after { - opacity: 1; -} + .solution-image img { + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(1.1); + transition: transform 0.5s ease; + } -/* ============================================ + .solution-slide.active .solution-image img { + transform: scale(1.05); + } + + /* 图片光晕效果 */ + .solution-image::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 60%); + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; + } + + .solution-slide.active .solution-image::after { + opacity: 1; + } + + /* ============================================ 移动端侧边栏首页优化 ============================================ */ -/* 移动端侧边栏背景优化 */ -#index .mobile-sidebar-content { - background: linear-gradient(180deg, #020617 0%, #0F172A 100%); -} + /* 移动端侧边栏背景优化 */ + #index .mobile-sidebar-content { + background: linear-gradient(180deg, #020617 0%, #0F172A 100%); + } -#index .mobile-sidebar-header { - background: rgba(15, 23, 42, 0.95); - border-bottom: 1px solid rgba(148, 163, 184, 0.1); -} + #index .mobile-sidebar-header { + background: rgba(15, 23, 42, 0.95); + border-bottom: 1px solid rgba(148, 163, 184, 0.1); + } -#index .mobile-nav-link { - color: #E5E7EB; - transition: all 0.3s ease; -} + #index .mobile-nav-link { + color: #E5E7EB; + transition: all 0.3s ease; + } -#index .mobile-nav-link:hover { - color: #38BDF8; -} + #index .mobile-nav-link:hover { + color: #38BDF8; + } -#index .mobile-user-info { - background: rgba(30, 41, 59, 0.6); - border: 1px solid rgba(148, 163, 184, 0.1); - border-radius: 8px; - padding: 12px; - margin-bottom: 12px; -} + #index .mobile-user-info { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(148, 163, 184, 0.1); + border-radius: 8px; + padding: 12px; + margin-bottom: 12px; + } -#index .mobile-user-avatar { - background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); - box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); -} + #index .mobile-user-avatar { + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); + } -#index .mobile-user-name { - color: #E5E7EB; -} + #index .mobile-user-name { + color: #E5E7EB; + } -/* 返回顶部按钮优化 */ -#index .back-top-wrapper { - background: rgba(56, 189, 248, 0.15); - border: 1px solid rgba(56, 189, 248, 0.3); - box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); - transition: all 0.3s ease; -} + /* 返回顶部按钮优化 */ + #index .back-top-wrapper { + background: rgba(56, 189, 248, 0.15); + border: 1px solid rgba(56, 189, 248, 0.3); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); + transition: all 0.3s ease; + } -#index .back-top-wrapper:hover { - background: rgba(56, 189, 248, 0.3); - box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); -} + #index .back-top-wrapper:hover { + background: rgba(56, 189, 248, 0.3); + box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); + } -/* Mobile Overrides for Index Page */ -/* 注意：移动端 banner 样式已在第 698 行定义，这里不要重复设置 */ + /* Mobile Overrides for Index Page */ + /* 注意：移动端 banner 样式已在第 698 行定义，这里不要重复设置 */ -/* + /* 以下样式已被注释，因为与第 698 行的移动端样式冲突 导致 swiper-slide 高度变成 400px 而不是 200px @@ -4999,11 +5019,11 @@ html { } /* Feature Cards (Banner-S) */ -/* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列) + /* 注意：banner-list 的桌面样式已在第 831 行定义 (flex布局，4列) 移动端样式在第 945 行定义 (grid布局，2列) 这里的重复样式已被移除以避免冲突 */ -/* 以下样式已注释，因为会覆盖桌面端的flex布局 + /* 以下样式已注释，因为会覆盖桌面端的flex布局 .banner .banner-s { margin-top: 0; padding-top: 0; @@ -5024,57 +5044,77 @@ html { } */ -/* Hot Products - Card View */ -.products-table thead { - display: none; -} + /* Hot Products - Mobile Slider */ + .hot-products-pagination { + position: relative; + margin-top: 20px; + bottom: 0 !important; + } -.products-table, -.products-table tbody, -.products-table tr, -.products-table td { - display: block; - width: 100%; -} + .hot-products-pagination .swiper-pagination-bullet { + width: 8px; + height: 8px; + background: #cbd5e1; + opacity: 1; + } -.products-table tr { - margin-bottom: 15px; - background: rgba(30, 41, 59, 0.4); - border: 1px solid rgba(148, 163, 184, 0.1); - border-radius: 12px; - padding: 15px; -} + .hot-products-pagination .swiper-pagination-bullet-active { + background: #3b82f6; + width: 20px; + border-radius: 4px; + } -.products-table td { - text-align: right; - padding: 8px 0; - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(148, 163, 184, 0.05); -} + /* Hot Products - Card View Override */ + .products-table thead { + display: none; + } -.products-table td:last-child { - border-bottom: none; -} + .products-table, + .products-table tbody, + .products-table tr, + .products-table td { + display: block; + width: 100%; + } -.products-table td::before { - content: attr(data-label); - float: left; - font-weight: 600; - color: rgba(148, 163, 184, 0.8); -} + .products-table tr { + margin-bottom: 15px; + background: rgba(30, 41, 59, 0.4); + border: 1px solid rgba(148, 163, 184, 0.1); + border-radius: 12px; + padding: 15px; + } -/* Solution Wrapper - Stacked */ -.solution-wrapper { - display: flex; - flex-direction: column; -} + .products-table td { + text-align: right; + padding: 8px 0; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(148, 163, 184, 0.05); + } -.solution-tabs { - display: none; - /* Hide desktop tabs */ -} + .products-table td:last-child { + border-bottom: none; + } + + .products-table td::before { + content: attr(data-label); + float: left; + font-weight: 600; + color: rgba(148, 163, 184, 0.8); + } + + /* Solution Wrapper - Stacked */ + .solution-wrapper { + display: flex; + flex-direction: column; + } + + .solution-tabs { + display: none; + /* Hide desktop tabs */ + } } */ diff --git a/index.html b/index.html index 73cf1f8..2cc3dfe 100644 --- a/index.html +++ b/index.html @@ -140,127 +140,281 @@

热销产品推荐

高性价比云服务器，助力您的业务快速上云

-
- -
-
-

香港弹性云

-
- 热销 - V0新春专享 -
-
-

稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据

-
- 2核CPU - | - 2G内存 - | - 3M带宽 - | - 50G SSD -
-
-
- ¥ - 29.9 - 原价¥59.8 -
- 限购1台 -
- 立即购买 -
- -
-
-

美国高防云

-
- V0新春专享 + +
+
+ +
+
+

香港弹性云

+
+ 热销 + V0新春专享 +
-
-

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

-
- 4核CPU - | - 4G内存 - | - 5M带宽 - | - 80G SSD -
-
-
- ¥ - 59.9 - 原价¥119.8 +

稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据

+
+ 2核CPU + | + 2G内存 + | + 3M带宽 + | + 50G SSD
- 限购1台 +
+
+ ¥ + 29.9 + 原价¥59.8 +
+ 限购1台 +
+ 立即购买
- 立即购买 -
- -
-
-

新加坡CN2云

-
- 推荐 - V0新春专享 + +
+
+

美国高防云

+
+ V0新春专享 +
-
-

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

-
- 4核CPU - | - 8G内存 - | - 10M带宽 - | - 100G SSD -
-
-
- ¥ - 99.9 - 原价¥199.8 +

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 4核CPU + | + 4G内存 + | + 5M带宽 + | + 80G SSD
- 限购1台 +
+
+ ¥ + 59.9 + 原价¥119.8 +
+ 限购1台 +
+ 立即购买
- 立即购买 -
- -
-
-

日本BGP云

-
- V0新春专享 + +
+
+

新加坡CN2云

+
+ 推荐 + V0新春专享 +
-
-

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

-
- 8核CPU - | - 16G内存 - | - 20M带宽 - | - 200G SSD -
-
-
- ¥ - 199.9 - 原价¥399.8 +

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 4核CPU + | + 8G内存 + | + 10M带宽 + | + 100G SSD
- 限购1台 +
+
+ ¥ + 99.9 + 原价¥199.8 +
+ 限购1台 +
+ 立即购买
- 立即购买 + + +
+
+

日本BGP云

+
+ V0新春专享 +
+
+

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 8核CPU + | + 16G内存 + | + 20M带宽 + | + 200G SSD +
+
+
+ ¥ + 199.9 + 原价¥399.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

韩国CN2云

+
+ 热销 +
+
+

低延迟、高速度，适合游戏、视频等对网络质量要求高的业务

+
+ 4核CPU + | + 8G内存 + | + 10M带宽 + | + 100G SSD +
+
+
+ ¥ + 89.9 + 原价¥179.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

国内BGP云

+
+ 特惠 +
+
+

多线BGP接入，覆盖全国各地区，访问速度快，稳定性高

+
+ 2核CPU + | + 4G内存 + | + 5M带宽 + | + 60G SSD +
+
+
+ ¥ + 49.9 + 原价¥99.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

镇江高防云

+
+ 高防 +
+
+

T级防御能力，有效抵御各类DDoS攻击，保障业务连续性

+
+ 8核CPU + | + 16G内存 + | + 20M带宽 + | + 200G SSD +
+
+
+ ¥ + 299.9 + 原价¥599.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

宿迁BGP云

+
+ 上新 +
+
+

全新BGP线路，性价比极高，适合个人站长及中小企业

+
+ 4核CPU + | + 4G内存 + | + 10M带宽 + | + 80G SSD +
+
+
+ ¥ + 69.9 + 原价¥139.8 +
+ 限购1台 +
+ 立即购买 +
+
+ +
+ +
+