diff --git a/css/index.css b/css/index.css index 2a14534..47cdefc 100644 --- a/css/index.css +++ b/css/index.css @@ -59,7 +59,7 @@ height: 100%; } -#index .nav-right > a { +#index .nav-right>a { display: flex; align-items: center; } @@ -401,7 +401,7 @@ } /* 文字内容容器，实际的左对齐内容 */ -.banner-cont .swiper-slide .section-content > * { +.banner-cont .swiper-slide .section-content>* { max-width: 650px; } @@ -422,14 +422,13 @@ width: auto; position: relative; background: linear-gradient(120deg, - #FFFFFF 0%, - #FFFFFF 40%, - #E0F2FE 48%, - #BFDBFE 50%, - #E0F2FE 52%, - #FFFFFF 60%, - #FFFFFF 100% - ); + #FFFFFF 0%, + #FFFFFF 40%, + #E0F2FE 48%, + #BFDBFE 50%, + #E0F2FE 52%, + #FFFFFF 60%, + #FFFFFF 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; @@ -442,6 +441,7 @@ 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } @@ -452,6 +452,7 @@ opacity: 0; transform: translateX(-50px); } + to { opacity: 1; transform: translateX(0); @@ -613,6 +614,7 @@ from { width: 0; } + to { width: 100%; } @@ -698,11 +700,9 @@ left: -50%; width: 200%; height: 200%; - background: radial-gradient( - circle at center, - rgba(56, 189, 248, 0.15) 0%, - transparent 50% - ); + background: radial-gradient(circle at center, + rgba(56, 189, 248, 0.15) 0%, + transparent 50%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; @@ -733,7 +733,7 @@ } /* ============================================ - 热销产品展示区域 + 热销产品展示区域 - 卡片式布局 ============================================ */ .hot-products { @@ -771,142 +771,259 @@ color: rgba(203, 213, 225, 0.8); } -/* 产品表格容器 */ -.products-table-wrapper { - overflow-x: auto; +/* 产品网格容器 - 移动优先 */ +.products-grid { + display: grid; + grid-template-columns: 1fr; + gap: 16px; padding: 0 20px; } -.products-table-wrapper::-webkit-scrollbar { - height: 6px; +/* 平板及以上：2列 */ +@media (min-width: 768px) { + .products-grid { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } } -.products-table-wrapper::-webkit-scrollbar-track { - background: rgba(15, 23, 42, 0.5); - border-radius: 3px; +/* 桌面端：3列 */ +@media (min-width: 1200px) { + .products-grid { + grid-template-columns: repeat(3, 1fr); + gap: 24px; + } } -.products-table-wrapper::-webkit-scrollbar-thumb { - background: rgba(56, 189, 248, 0.3); - border-radius: 3px; +/* 超大屏幕：4列 */ +@media (min-width: 1600px) { + .products-grid { + grid-template-columns: repeat(4, 1fr); + } } -.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; +/* 产品卡片 - 适配深色主题的玻璃态设计 */ +.product-card { + background: rgba(30, 41, 59, 0.7); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(148, 163, 184, 0.2); + border-radius: 12px; + padding: 20px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; + display: flex; + flex-direction: column; + gap: 12px; + box-shadow: + 0 4px 16px rgba(15, 23, 42, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.05); } -.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); +.product-card:hover { + transform: translateY(-4px); + border-color: rgba(56, 189, 248, 0.4); + background: rgba(30, 41, 59, 0.85); + box-shadow: + 0 8px 32px rgba(15, 23, 42, 0.6), + 0 0 20px rgba(56, 189, 248, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.1); } -.products-table tbody td { - padding: 18px 20px; - font-size: 14px; - color: rgba(226, 232, 240, 0.9); +/* 卡片头部 */ +.product-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 12px; + margin-bottom: 4px; +} + +.product-name { + font-size: 18px; + font-weight: 600; + color: #F9FAFB; + margin: 0; + flex: 1; + line-height: 1.3; +} + +/* 产品徽章容器 */ +.product-badges { + display: flex; + flex-wrap: wrap; + gap: 6px; + align-items: flex-start; + justify-content: flex-end; +} + +/* 产品徽章 */ +.product-badge { + display: inline-block; + padding: 3px 8px; + font-size: 11px; + font-weight: 500; + border-radius: 4px; + white-space: nowrap; + line-height: 1.2; +} + +.badge-hot { + background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); + color: #FFFFFF; +} + +.badge-recommend { + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + color: #FFFFFF; +} + +.badge-promo { + background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); + color: #FFFFFF; +} + +/* 产品描述 */ +.product-desc { + font-size: 13px; + color: rgba(203, 213, 225, 0.85); + line-height: 1.6; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + min-height: 38px; +} + +/* 产品规格 */ +.product-specs { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + font-size: 12px; + color: rgba(148, 163, 184, 0.9); + padding: 8px 0; + border-top: 1px solid rgba(148, 163, 184, 0.1); border-bottom: 1px solid rgba(148, 163, 184, 0.1); } -.products-table tbody tr:last-child td:first-child { - border-bottom-left-radius: 8px; +.spec-item { + white-space: nowrap; } -.products-table tbody tr:last-child td:last-child { - border-bottom-right-radius: 8px; +.spec-divider { + color: rgba(148, 163, 184, 0.4); + user-select: none; } -/* 产品名称列 */ -.products-table .product-name { - font-weight: 600; - color: #F9FAFB; +/* 产品价格区域 */ +.product-pricing { display: flex; - align-items: center; + justify-content: space-between; + align-items: flex-end; + margin: 8px 0; + flex-wrap: wrap; 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; +.price-main { + display: flex; + align-items: baseline; + gap: 4px; } -/* 价格列 */ -.products-table .product-price { - font-weight: 700; +.price-currency { font-size: 18px; - color: #38BDF8; + font-weight: 600; + color: #EF4444; } -.products-table .product-price .unit { - font-size: 12px; - font-weight: 400; - color: rgba(148, 163, 184, 0.8); +.price-value { + font-size: 32px; + font-weight: 700; + color: #EF4444; + line-height: 1; +} + +.price-original { + font-size: 13px; + color: rgba(148, 163, 184, 0.7); + text-decoration: line-through; margin-left: 4px; } -/* 操作按钮 */ -.products-table .product-action { - text-align: center; +.price-limit { + font-size: 12px; + color: rgba(203, 213, 225, 0.7); + white-space: nowrap; } -.products-table .btn-buy { - display: inline-block; - padding: 8px 24px; - font-size: 13px; - font-weight: 500; - color: #fff; +/* 购买按钮 */ +.product-buy-btn { + display: block; + width: 100%; + padding: 12px 24px; + font-size: 14px; + font-weight: 600; + color: #FFFFFF; background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); border: none; - border-radius: 6px; + border-radius: 8px; + text-align: center; + text-decoration: none; cursor: pointer; transition: all 0.3s ease; - text-decoration: none; + margin-top: 8px; + box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3); } -.products-table .btn-buy:hover { +.product-buy-btn:hover { transform: translateY(-2px); - box-shadow: 0 8px 20px rgba(56, 189, 248, 0.4); + box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5); + background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%); +} + +.product-buy-btn:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(56, 189, 248, 0.4); +} + +/* 移动端优化 */ +@media (max-width: 767px) { + .hot-products { + padding: 30px 0; + } + + .hot-products-title h3 { + font-size: 24px; + } + + .hot-products-title .subtitle { + font-size: 13px; + } + + .product-card { + padding: 16px; + } + + .product-name { + font-size: 16px; + } + + .price-value { + font-size: 28px; + } + + .price-currency { + font-size: 16px; + } + + .product-buy-btn { + padding: 10px 20px; + font-size: 13px; + } } .banner .banner-s .banner-list .banner-item h5 { @@ -964,9 +1081,12 @@ } @keyframes float { - 0%, 100% { + + 0%, + 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } @@ -1058,9 +1178,12 @@ } @keyframes pulse { - 0%, 100% { + + 0%, + 100% { transform: scale(1); } + 50% { transform: scale(1.05); } @@ -1658,6 +1781,7 @@ from { filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.2)); } + to { filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.4)); } @@ -2159,7 +2283,7 @@ opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), - transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); + transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .animate-on-scroll.animated { @@ -2225,6 +2349,7 @@ from { opacity: 0; } + to { opacity: 1; } @@ -2280,6 +2405,7 @@ html { /* 禁用不必要的动画以提升性能 */ @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { @@ -2338,7 +2464,7 @@ html { } /* 小屏幕下保持左对齐布局 */ - .banner-cont .swiper-slide .section-content > * { + .banner-cont .swiper-slide .section-content>* { max-width: 500px; } @@ -2400,7 +2526,7 @@ html { text-align: center; } - .banner-cont .swiper-slide .section-content > * { + .banner-cont .swiper-slide .section-content>* { max-width: 90%; margin-left: auto; margin-right: auto; @@ -2481,6 +2607,7 @@ html { /* 手机 576px - 767px */ @media (max-width: 767px) { + /* ===== 导航栏 - 极简设计 ===== */ #index .nav-header { padding: 0 8px; @@ -2506,7 +2633,8 @@ html { } #index .nav-menu { - display: none; /* 移动端隐藏主导航 */ + display: none; + /* 移动端隐藏主导航 */ } #index .nav-header .nav-left .nav-icon { @@ -2898,7 +3026,8 @@ html { } .solution-desc p:nth-child(n+2) { - display: none; /* 小屏只显示第1段 */ + display: none; + /* 小屏只显示第1段 */ } .solution-link { @@ -2912,7 +3041,8 @@ html { height: 120px; object-fit: cover; border-radius: 4px; - order: -1; /* 图片移到上方 */ + order: -1; + /* 图片移到上方 */ } /* ===== 基础设施 - 简化显示 ===== */ @@ -2975,7 +3105,8 @@ html { } .honor-item { - width: calc(50% - 6px); /* 改为2列布局 */ + width: calc(50% - 6px); + /* 改为2列布局 */ padding: 20px 16px; } @@ -3050,6 +3181,7 @@ html { /* 小手机 最大575px */ @media (max-width: 575px) { + /* ===== 导航栏 - 超紧凑 ===== */ #index .nav-header { padding: 0 10px; @@ -3333,7 +3465,8 @@ html { .solution-desc p { font-size: 10px; - -webkit-line-clamp: 1; /* 小屏只显示1行 */ + -webkit-line-clamp: 1; + /* 小屏只显示1行 */ } .solution-link { @@ -3451,6 +3584,7 @@ html { /* 小屏手机优化（480px） */ @media (max-width: 480px) and (min-width: 361px) { + /* ===== 导航栏 ===== */ #index .nav-header { height: 46px !important; @@ -3558,6 +3692,7 @@ html { /* 超小屏适配（320px） */ @media (max-width: 360px) { + /* ===== 导航栏 - 极限压缩 ===== */ #index .nav-header { padding: 0 8px; @@ -4012,6 +4147,7 @@ html { /* 性能优化提示 */ @media (max-width: 768px) { + /* 在移动设备上禁用一些复杂动画以提升性能 */ .banner-cont .swiper-slide::before, .banner-cont .swiper-slide::after, @@ -4141,7 +4277,8 @@ html { } #index .section.service { - padding-top: 120px; /* 为 banner-s 留出空间 */ + padding-top: 120px; + /* 为 banner-s 留出空间 */ } /* 优化各section之间的过渡 */ @@ -4526,121 +4663,122 @@ html { background: rgba(56, 189, 248, 0.3); box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); } + /* Mobile Overrides for Index Page */ @media (max-width: 768px) { - /* Banner Adjustment */ - .banner-cont .swiper-slide { - height: auto !important; - min-height: 400px; - padding-bottom: 60px; - /* Space for pagination */ - } + /* Banner Adjustment */ + .banner-cont .swiper-slide { + height: auto !important; + min-height: 400px; + padding-bottom: 60px; + /* Space for pagination */ + } - .banner-cont .swiper-slide .section-content { - position: relative; - top: auto; - left: auto; - transform: none; - padding: 80px 20px 40px; - text-align: center; - } + .banner-cont .swiper-slide .section-content { + position: relative; + top: auto; + left: auto; + transform: none; + padding: 80px 20px 40px; + text-align: center; + } - .banner-cont .swiper-slide .section-content .title-wrapper { - max-width: 100%; - margin-bottom: 20px; - } + .banner-cont .swiper-slide .section-content .title-wrapper { + max-width: 100%; + margin-bottom: 20px; + } - .banner-cont .swiper-slide h1 { - font-size: 32px; - line-height: 1.3; - } + .banner-cont .swiper-slide h1 { + font-size: 32px; + line-height: 1.3; + } - .banner-tags { - justify-content: center; - margin-bottom: 12px; - } + .banner-tags { + justify-content: center; + margin-bottom: 12px; + } - .banner-cont .banner-desc { - font-size: 15px; - margin: 0 auto 30px; - line-height: 1.6; - } + .banner-cont .banner-desc { + font-size: 15px; + margin: 0 auto 30px; + line-height: 1.6; + } - /* Feature Cards (Banner-S) */ - .banner .banner-s { - margin-top: 0; - padding-top: 0; - padding-bottom: 40px; - } + /* Feature Cards (Banner-S) */ + .banner .banner-s { + margin-top: 0; + padding-top: 0; + padding-bottom: 40px; + } - .banner .banner-s .banner-list { - display: grid; - grid-template-columns: 1fr; - gap: 15px; - padding: 0 15px; - } + .banner .banner-s .banner-list { + display: grid; + grid-template-columns: 1fr; + gap: 15px; + padding: 0 15px; + } - .banner-s .banner-list .banner-item { - max-width: 100%; - min-width: 0; - flex: auto; - } + .banner-s .banner-list .banner-item { + max-width: 100%; + min-width: 0; + flex: auto; + } - /* Hot Products - Card View */ - .products-table thead { - display: none; - } + /* Hot Products - Card View */ + .products-table thead { + display: none; + } - .products-table, - .products-table tbody, - .products-table tr, - .products-table td { - display: block; - width: 100%; - } + .products-table, + .products-table tbody, + .products-table tr, + .products-table td { + display: block; + width: 100%; + } - .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; - } + .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; + } - .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); - } + .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); + } - .products-table td:last-child { - border-bottom: none; - } + .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); - } + .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 Wrapper - Stacked */ + .solution-wrapper { + display: flex; + flex-direction: column; + } - .solution-tabs { - display: none; - /* Hide desktop tabs */ - } + .solution-tabs { + display: none; + /* Hide desktop tabs */ + } - /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider + /* We might need to restructure the HTML to show all solutions stacked or use a mobile slider For now, let's assume we stack them or show a simple list. Actually, if HTML structure depends on clicks to show/hide, we need JS or CSS modification. Let's style the active one well first, or maybe show all? diff --git a/index.html b/index.html index df73450..e40a5d6 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,7 @@
{if ( isset($data.banner) ) } {foreach $data.banner as $key=>$value} -
+
{if !empty($value.tags)} @@ -141,100 +140,124 @@

热销产品推荐

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

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

香港弹性云

+
+ 热销 + V0新春专享 +
+
+

稳定、安全、高效、易用，可存储任意类型和形式的非结构化数据

+
+ 2核CPU + | + 2G内存 + | + 3M带宽 + | + 50G SSD +
+
+
+ ¥ + 29.9 + 原价¥59.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

美国高防云

+
+ V0新春专享 +
+
+

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 4核CPU + | + 4G内存 + | + 5M带宽 + | + 80G SSD +
+
+
+ ¥ + 59.9 + 原价¥119.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

新加坡CN2云

+
+ 推荐 + V0新春专享 +
+
+

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 4核CPU + | + 8G内存 + | + 10M带宽 + | + 100G SSD +
+
+
+ ¥ + 99.9 + 原价¥199.8 +
+ 限购1台 +
+ 立即购买 +
+ + +
+
+

日本BGP云

+
+ V0新春专享 +
+
+

稳定、安全、高效、易用，可承载任意规模和形式的非结构化数据

+
+ 8核CPU + | + 16G内存 + | + 20M带宽 + | + 200G SSD +
+
+
+ ¥ + 199.9 + 原价¥399.8 +
+ 限购1台 +
+ 立即购买 +