/** * 能辉核心页面Banner样式 * 响应式设计,适配不同设备 */ .about-banner { position: relative; width: 100%; height: 500px; /* background-image: url('../images/nenghui-core-bg.webp'); */ background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Banner内容容器 */ .about-banner-content { position: relative; z-index: 2; text-align: center; color: white; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding-top: 8rem; overflow: hidden; } /* 主标题 */ .about-banner-title { font-size: 48px; font-weight: 700; margin: 0 0 20px 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); letter-spacing: 2px; line-height: 1.2; } /* 副标题 */ .about-banner-subtitle { font-size: 20px; font-weight: 400; margin: 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); opacity: 0.9; line-height: 1.4; } /* 响应式设计 - 平板设备 */ @media (max-width: 1024px) { .about-banner { height: 400px; } .about-banner-title { font-size: 40px; margin-bottom: 15px; } .about-banner-subtitle { font-size: 18px; } } /* 响应式设计 - 手机设备 */ @media (max-width: 768px) { .about-banner { height: 350px; } .about-banner-content { padding: 0 15px; } .about-banner-title { font-size: 32px; margin-bottom: 12px; letter-spacing: 1px; } .about-banner-subtitle { font-size: 16px; } } /* 响应式设计 - 小屏手机 */ @media (max-width: 480px) { .about-banner { height: 300px; } .about-banner-title { font-size: 28px; margin-bottom: 10px; } .about-banner-subtitle { font-size: 14px; } } /* 大屏设备优化 */ @media (min-width: 1400px) { .about-banner { height: 650px; } .about-banner-title { font-size: 56px; margin-bottom: 25px; } .about-banner-subtitle { font-size: 24px; } } /* 高对比度模式支持 */ @media (prefers-contrast: high) { .about-banner-title { color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } .about-banner-subtitle { color: #f0f0f0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); } } /* 减少动画效果 */ @media (prefers-reduced-motion: reduce) { .about-banner { background-attachment: scroll; } } /* 打印样式 */ @media print { .about-banner { background: none; color: #000; page-break-inside: avoid; } .about-banner-title, .about-banner-subtitle { color: #000; text-shadow: none; } }