This commit is contained in:
yiqiu
@@ -4697,14 +4697,34 @@ html {
|
|||||||
padding: 12px 32px;
|
padding: 12px 32px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgba(226, 232, 240, 0.8);
|
|
||||||
background: rgba(15, 23, 42, 0.6);
|
/* 热销产品列表容器 - 兼容Swiper结构 */
|
||||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
/* Desktop: Grid Layout */
|
||||||
border-radius: 30px;
|
.products-grid {
|
||||||
cursor: pointer;
|
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;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
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 {
|
.products-table thead {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
164
index.html
164
index.html
@@ -140,9 +140,12 @@
|
|||||||
<h3>热销产品推荐</h3>
|
<h3>热销产品推荐</h3>
|
||||||
<p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
|
<p class="subtitle">高性价比云服务器，助力您的业务快速上云</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="products-grid">
|
|
||||||
|
<!-- Swiper Container -->
|
||||||
|
<div class="swiper hot-products-swiper">
|
||||||
|
<div class="swiper-wrapper products-grid">
|
||||||
<!-- 产品卡片 1 -->
|
<!-- 产品卡片 1 -->
|
||||||
<div class="product-card">
|
<div class="swiper-slide product-card">
|
||||||
<div class="product-card-header">
|
<div class="product-card-header">
|
||||||
<h4 class="product-name">香港弹性云</h4>
|
<h4 class="product-name">香港弹性云</h4>
|
||||||
<div class="product-badges">
|
<div class="product-badges">
|
||||||
@@ -172,7 +175,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 产品卡片 2 -->
|
<!-- 产品卡片 2 -->
|
||||||
<div class="product-card">
|
<div class="swiper-slide product-card">
|
||||||
<div class="product-card-header">
|
<div class="product-card-header">
|
||||||
<h4 class="product-name">美国高防云</h4>
|
<h4 class="product-name">美国高防云</h4>
|
||||||
<div class="product-badges">
|
<div class="product-badges">
|
||||||
@@ -201,7 +204,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 产品卡片 3 -->
|
<!-- 产品卡片 3 -->
|
||||||
<div class="product-card">
|
<div class="swiper-slide product-card">
|
||||||
<div class="product-card-header">
|
<div class="product-card-header">
|
||||||
<h4 class="product-name">新加坡CN2云</h4>
|
<h4 class="product-name">新加坡CN2云</h4>
|
||||||
<div class="product-badges">
|
<div class="product-badges">
|
||||||
@@ -231,7 +234,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 产品卡片 4 -->
|
<!-- 产品卡片 4 -->
|
||||||
<div class="product-card">
|
<div class="swiper-slide product-card">
|
||||||
<div class="product-card-header">
|
<div class="product-card-header">
|
||||||
<h4 class="product-name">日本BGP云</h4>
|
<h4 class="product-name">日本BGP云</h4>
|
||||||
<div class="product-badges">
|
<div class="product-badges">
|
||||||
@@ -258,6 +261,157 @@
|
|||||||
</div>
|
</div>
|
||||||
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
|
<a href="./cloud.html" class="product-buy-btn">立即购买</a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user