diff --git a/css/index.css b/css/index.css index 3bae8a2..d64757a 100644 --- a/css/index.css +++ b/css/index.css @@ -699,11 +699,24 @@ /* 调整 banner 高度 */ .banner-cont .swiper-slide { - height: 480px; - /* 移动端使用更清爽的渐变背景 */ - background: - linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%), - linear-gradient(180deg, #f8fafc 0%, #e0f2fe 100%); + height: 360px; + /* Reduced from 480px */ + padding-top: 56px; + /* Compensate for sticky header overlap if needed, or if under header */ + margin-top: 0; + + /* Mobile Background Optimization */ + /* Center the image and cover the area */ + background-position: center bottom !important; + background-size: cover !important; + /* Force no repeat */ + background-repeat: no-repeat !important; + } + + /* Ensure banner container connects seamlessly */ + .banner-cont { + margin-top: 0 !important; + padding-top: 0 !important; } /* 移动端遮罩层更轻 */ @@ -715,12 +728,19 @@ .banner-cont .swiper-slide .section-content { text-align: center; padding: 0 20px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } /* 移动端标题样式 - 增大字号 */ .banner-cont .swiper-slide h1 { - font-size: 32px; - line-height: 1.3; + font-size: 36px; + /* Increased from 32px */ + line-height: 1.2; + margin-bottom: 12px; /* 移动端使用深色文字 */ background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%); -webkit-background-clip: text; @@ -732,37 +752,43 @@ /* 移动端标签居中 */ .banner-tags { justify-content: center; - margin-bottom: 20px; + margin-bottom: 24px; } .banner-tag-pill { - font-size: 12px; - padding: 6px 14px; + font-size: 13px; + padding: 6px 16px; } /* 移动端描述文字 - 增大字号 */ .banner-cont .banner-desc { - font-size: 15px; - line-height: 1.6; + font-size: 17px; + /* Increased from 15px */ + line-height: 1.5; color: #475569; - margin-top: 16px; - margin-bottom: 28px; + margin-top: 0; + margin-bottom: 32px; + max-width: 90%; } /* 移动端按钮样式 - 增大尺寸 */ .banner-cont .btn2 { - font-size: 16px; - padding: 14px 40px; + font-size: 18px; + /* Increased from 16px */ + padding: 16px 48px; + /* Larger touch target */ + border-radius: 50px; + /* Modern pill shape */ } /* 移动端分页器位置调整 */ .banner-cont .swiper-pagination { - bottom: 24px !important; + bottom: 20px !important; } .banner-cont .swiper-pagination-bullet { width: 40px !important; - height: 3px !important; + height: 4px !important; } }