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

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>
<!-- 解决方案 -->