This commit is contained in:
yiqiu
@@ -4697,14 +4697,34 @@ 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;
|
||||
|
||||
/* 热销产品列表容器 - 兼容Swiper结构 */
|
||||
/* Desktop: Grid Layout */
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Swiper Wrapper 兼容性修正 */
|
||||
.swiper-wrapper.products-grid {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 产品卡片样式 */
|
||||
.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 */
|
||||
}
|
||||
|
||||
/* 按钮光晕效果 */
|
||||
@@ -5024,7 +5044,27 @@ html {
|
||||
}
|
||||
*/
|
||||
|
||||
/* Hot Products - Card View */
|
||||
/* Hot Products - Mobile Slider */
|
||||
.hot-products-pagination {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hot-products-pagination .swiper-pagination-bullet {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #cbd5e1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hot-products-pagination .swiper-pagination-bullet-active {
|
||||
background: #3b82f6;
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Hot Products - Card View Override */
|
||||
.products-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
164
index.html
164
index.html
@@ -140,9 +140,12 @@
|
||||
<h3>热销产品推荐</h3>
|
||||
<p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
|
||||
</div>
|
||||
<div class="products-grid">
|
||||
|
||||
<!-- Swiper Container -->
|
||||
<div class="swiper hot-products-swiper">
|
||||
<div class="swiper-wrapper products-grid">
|
||||
<!-- 产品卡片 1 -->
|
||||
<div class="product-card">
|
||||
<div class="swiper-slide product-card">
|
||||
<div class="product-card-header">
|
||||
<h4 class="product-name">香港弹性云</h4>
|
||||
<div class="product-badges">
|
||||
@@ -172,7 +175,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 产品卡片 2 -->
|
||||
<div class="product-card">
|
||||
<div class="swiper-slide product-card">
|
||||
<div class="product-card-header">
|
||||
<h4 class="product-name">美国高防云</h4>
|
||||
<div class="product-badges">
|
||||
@@ -201,7 +204,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 产品卡片 3 -->
|
||||
<div class="product-card">
|
||||
<div class="swiper-slide product-card">
|
||||
<div class="product-card-header">
|
||||
<h4 class="product-name">新加坡CN2云</h4>
|
||||
<div class="product-badges">
|
||||
@@ -231,7 +234,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 产品卡片 4 -->
|
||||
<div class="product-card">
|
||||
<div class="swiper-slide product-card">
|
||||
<div class="product-card-header">
|
||||
<h4 class="product-name">日本BGP云</h4>
|
||||
<div class="product-badges">
|
||||
@@ -258,6 +261,157 @@
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user