diff --git a/css/index.css b/css/index.css index 41486b3..d4118c0 100644 --- a/css/index.css +++ b/css/index.css @@ -31,12 +31,26 @@ padding-right: var(--container-padding-x); } -/* 首页 Header 深色玻璃态覆盖 */ +/* 首页 Header 深色玻璃态覆盖 - 鼠标悬停变色效果 */ +#index #header { + background: transparent; + transition: background 0.3s ease; +} + +#index #header:hover { + background: rgba(15, 23, 42, 0.6); +} + #index .nav-shadow { background: rgba(15, 23, 42, 0.8) !important; backdrop-filter: blur(20px); border-bottom: 1px solid rgba(148, 163, 184, 0.15); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4); + transition: background 0.3s ease; +} + +#index .nav-shadow:hover { + background: rgba(15, 23, 42, 0.95) !important; } /* 首页导航栏：使用统一的容器系统 */ @@ -404,6 +418,180 @@ border-radius: 0; /* 移除圆角 */ } +/* ============================================ + 热销产品展示区域 + ============================================ */ + +.hot-products { + margin-top: 60px; + padding: 40px 0; + background: + radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.05) 0%, transparent 60%), + rgba(15, 23, 42, 0.6); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 16px; + backdrop-filter: blur(10px); +} + +.hot-products-title { + text-align: center; + margin-bottom: 30px; +} + +.hot-products-title h3 { + font-size: 28px; + font-weight: 600; + color: #F9FAFB; + margin-bottom: 10px; + background: linear-gradient(135deg, #FFFFFF 0%, #38BDF8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hot-products-title .subtitle { + font-size: 14px; + color: rgba(203, 213, 225, 0.8); +} + +/* 产品表格容器 */ +.products-table-wrapper { + overflow-x: auto; + padding: 0 20px; +} + +.products-table-wrapper::-webkit-scrollbar { + height: 6px; +} + +.products-table-wrapper::-webkit-scrollbar-track { + background: rgba(15, 23, 42, 0.5); + border-radius: 3px; +} + +.products-table-wrapper::-webkit-scrollbar-thumb { + background: rgba(56, 189, 248, 0.3); + border-radius: 3px; +} + +.products-table-wrapper::-webkit-scrollbar-thumb:hover { + background: rgba(56, 189, 248, 0.5); +} + +/* 产品表格 */ +.products-table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + min-width: 1000px; +} + +.products-table thead { + background: rgba(15, 23, 42, 0.8); +} + +.products-table thead th { + padding: 16px 20px; + text-align: left; + font-size: 14px; + font-weight: 600; + color: #38BDF8; + border-bottom: 2px solid rgba(56, 189, 248, 0.3); + white-space: nowrap; +} + +.products-table thead th:first-child { + border-top-left-radius: 8px; +} + +.products-table thead th:last-child { + border-top-right-radius: 8px; +} + +.products-table tbody tr { + background: rgba(30, 41, 59, 0.4); + transition: all 0.3s ease; + cursor: pointer; +} + +.products-table tbody tr:hover { + background: rgba(56, 189, 248, 0.1); + transform: translateX(5px); + box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2); +} + +.products-table tbody td { + padding: 18px 20px; + font-size: 14px; + color: rgba(226, 232, 240, 0.9); + border-bottom: 1px solid rgba(148, 163, 184, 0.1); +} + +.products-table tbody tr:last-child td:first-child { + border-bottom-left-radius: 8px; +} + +.products-table tbody tr:last-child td:last-child { + border-bottom-right-radius: 8px; +} + +/* 产品名称列 */ +.products-table .product-name { + font-weight: 600; + color: #F9FAFB; + display: flex; + align-items: center; + gap: 8px; +} + +.products-table .product-tag { + display: inline-block; + padding: 2px 8px; + font-size: 11px; + border-radius: 4px; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + color: #fff; + font-weight: 500; +} + +/* 价格列 */ +.products-table .product-price { + font-weight: 700; + font-size: 18px; + color: #38BDF8; +} + +.products-table .product-price .unit { + font-size: 12px; + font-weight: 400; + color: rgba(148, 163, 184, 0.8); + margin-left: 4px; +} + +/* 操作按钮 */ +.products-table .product-action { + text-align: center; +} + +.products-table .btn-buy { + display: inline-block; + padding: 8px 24px; + font-size: 13px; + font-weight: 500; + color: #fff; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + border: none; + border-radius: 6px; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; +} + +.products-table .btn-buy:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4); +} + .banner .banner-s .banner-list { display: flex; flex-wrap: wrap; @@ -481,7 +669,7 @@ margin-top: 50px; } -/* 服务模块整体背景：深色科技感基调 */ +/* 服务模块整体背景：深色科技感基调 + 方格线 */ .section.service { background: radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%), @@ -491,7 +679,7 @@ overflow: hidden; } -/* 添加动态背景装饰 */ +/* 添加动态方格线背景 */ .section.service::before { content: ''; position: absolute; @@ -500,10 +688,9 @@ right: 0; bottom: 0; background-image: - radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px), - radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px); - background-size: 30px 30px; - animation: float 15s ease-in-out infinite; + linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); + background-size: 50px 50px; pointer-events: none; } @@ -654,7 +841,7 @@ position: relative; } -/* 添加深色遮罩增强对比度 */ +/* 添加深色遮罩增强对比度 + 方格线 */ .resolve::before { content: ''; position: absolute; @@ -662,7 +849,11 @@ left: 0; right: 0; bottom: 0; - background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%); + background: + linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px), + linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%); + background-size: 50px 50px, 50px 50px, 100% 100%; pointer-events: none; } @@ -838,8 +1029,8 @@ right: 0; bottom: 0; background-image: - radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px), - radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px); + linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } @@ -1094,8 +1285,8 @@ right: 0; bottom: 0; background-image: - radial-gradient(circle at 30% 50%, rgba(56, 189, 248, 0.02) 1px, transparent 1px), - radial-gradient(circle at 70% 50%, rgba(99, 102, 241, 0.02) 1px, transparent 1px); + linear-gradient(rgba(56, 189, 248, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(56, 189, 248, 0.02) 1px, transparent 1px); background-size: 35px 35px; pointer-events: none; } diff --git a/index.html b/index.html index 2e9fb12..1e168d5 100644 --- a/index.html +++ b/index.html @@ -104,6 +104,111 @@ + + +
+
+
+

热销产品推荐

+

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

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
产品名称CPU内存带宽系统盘价格操作
+
+ 香港弹性云 + 热销 +
+ 		2核2G3M50G SSD +
+ 29.9/月 +
+ 		+ 立即购买 +
+
+ 美国高防云 +
+ 		4核4G5M80G SSD +
+ 59.9/月 +
+ 		+ 立即购买 +
+
+ 新加坡CN2云 + 推荐 +
+ 		4核8G10M100G SSD +
+ 99.9/月 +
+ 		+ 立即购买 +
+
+ 日本BGP云 +
+ 		8核16G20M200G SSD +
+ 199.9/月 +
+ 		+ 立即购买 +
+
+
+