yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

发打发十分
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-12-25 23:39:38 +08:00
parent 525e2ad926
commit ca668847bd
2 changed files with 568 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
css/index.css
View File

@@ -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 */
}
}
*/

364
index.html
View File

@@ -140,127 +140,281 @@
<h3>热销产品推荐</h3>
<p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
</div>
<div class="products-grid">
<!-- 产品卡片 1 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">香港弹性云</h4>
<div class="product-badges">
<span class="product-badge badge-hot">热销</span>
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">2核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">2G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">3M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">50G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">29.9</span>
<span class="price-original">原价¥59.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 2 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">美国高防云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
<!-- Swiper Container -->
<div class="swiper hot-products-swiper">
<div class="swiper-wrapper products-grid">
<!-- 产品卡片 1 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">香港弹性云</h4>
<div class="product-badges">
<span class="product-badge badge-hot">热销</span>
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">4G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">5M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">80G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">59.9</span>
<span class="price-original">原价¥119.8</span>
<p class="product-desc">稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">2核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">2G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">3M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">50G SSD</span>
</div>
<span class="price-limit">限购1台</span>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">29.9</span>
<span class="price-original">原价¥59.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 3 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">新加坡CN2云</h4>
<div class="product-badges">
<span class="product-badge badge-recommend">推荐</span>
<span class="product-badge badge-promo">V0新春专享</span>
<!-- 产品卡片 2 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">美国高防云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">8G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">10M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">100G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">99.9</span>
<span class="price-original">原价¥199.8</span>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">4G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">5M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">80G SSD</span>
</div>
<span class="price-limit">限购1台</span>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">59.9</span>
<span class="price-original">原价¥119.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 4 -->
<div class="product-card">
<div class="product-card-header">
<h4 class="product-name">日本BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
<!-- 产品卡片 3 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">新加坡CN2云</h4>
<div class="product-badges">
<span class="product-badge badge-recommend">推荐</span>
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">8核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">16G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">20M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">200G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">199.9</span>
<span class="price-original">原价¥399.8</span>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">8G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">10M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">100G SSD</span>
</div>
<span class="price-limit">限购1台</span>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">99.9</span>
<span class="price-original">原价¥199.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
<!-- 产品卡片 4 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">日本BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">V0新春专享</span>
</div>
</div>
<p class="product-desc">稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据</p>
<div class="product-specs">
<span class="spec-item">8核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">16G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">20M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">200G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">199.9</span>
<span class="price-original">原价¥399.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 5 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">韩国CN2云</h4>
<div class="product-badges">
<span class="product-badge badge-hot">热销</span>
</div>
</div>
<p class="product-desc">低延迟、高速度，适合游戏、视频等对网络质量要求高的业务</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">8G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">10M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">100G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">89.9</span>
<span class="price-original">原价¥179.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 6 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">国内BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">特惠</span>
</div>
</div>
<p class="product-desc">多线BGP接入，覆盖全国各地区，访问速度快，稳定性高</p>
<div class="product-specs">
<span class="spec-item">2核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">4G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">5M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">60G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">49.9</span>
<span class="price-original">原价¥99.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 7 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">镇江高防云</h4>
<div class="product-badges">
<span class="product-badge badge-recommend">高防</span>
</div>
</div>
<p class="product-desc">T级防御能力，有效抵御各类DDoS攻击，保障业务连续性</p>
<div class="product-specs">
<span class="spec-item">8核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">16G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">20M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">200G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">299.9</span>
<span class="price-original">原价¥599.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
<!-- 产品卡片 8 -->
<div class="swiper-slide product-card">
<div class="product-card-header">
<h4 class="product-name">宿迁BGP云</h4>
<div class="product-badges">
<span class="product-badge badge-promo">上新</span>
</div>
</div>
<p class="product-desc">全新BGP线路，性价比极高，适合个人站长及中小企业</p>
<div class="product-specs">
<span class="spec-item">4核CPU</span>
<span class="spec-divider">|</span>
<span class="spec-item">4G内存</span>
<span class="spec-divider">|</span>
<span class="spec-item">10M带宽</span>
<span class="spec-divider">|</span>
<span class="spec-item">80G SSD</span>
</div>
<div class="product-pricing">
<div class="price-main">
<span class="price-currency">¥</span>
<span class="price-value">69.9</span>
<span class="price-original">原价¥139.8</span>
</div>
<span class="price-limit">限购1台</span>
</div>
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination hot-products-pagination"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var hotProductsSwiper;
function initHotProductsSwiper() {
if (window.innerWidth < 768) {
if (!hotProductsSwiper) {
hotProductsSwiper = new Swiper('.hot-products-swiper', {
slidesPerView: 1.2,
spaceBetween: 16,
centeredSlides: true,
loop: false,
pagination: {
el: '.hot-products-pagination',
clickable: true,
},
});
}
} else {
if (hotProductsSwiper) {
hotProductsSwiper.destroy(true, true);
hotProductsSwiper = undefined;
}
}
}
initHotProductsSwiper();
window.addEventListener('resize', initHotProductsSwiper);
});
</script>
</div>
</div>
</div>
</section>
<!-- 解决方案 -->