* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; line-height: 1.6; color: #333; background-color: #ffffff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 首屏样式 */ .hero { padding: 0; text-align: center; position: relative; overflow: hidden; } /* 照片轮播 */ .hero-slider { width: 100%; height: 100vh; min-height: 600px; position: relative; overflow: hidden; } .slider-container { width: 100%; height: 100%; position: relative; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .slide.active { opacity: 1; } .slider-img { width: 100%; height: 100%; object-fit: cover; } .hero .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(0, 0, 0, 0.6); padding: 40px; border-radius: 10px; max-width: 800px; width: 90%; } .hero h1 { color: white; margin-bottom: 20px; } .hero p { color: white; margin-bottom: 30px; } /* 信任强化信息 */ .trust-info { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .trust-item { display: flex; align-items: center; color: white; font-size: 14px; } .trust-item i { margin-right: 8px; color: #3498db; } /* CTA按钮 */ .cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } /* 真人介绍 */ .personal-intro { padding: 80px 0; background-color: #f8f9fa; text-align: center; } .personal-intro h2 { margin-bottom: 30px; } .personal-intro p { max-width: 800px; margin: 0 auto; line-height: 1.8; color: #555; } /* 强制修复排版问题 */ .intro-section { width: 100%; padding: 60px 20px; text-align: center; } .intro-section h2 { font-size: 28px; margin-bottom: 20px; } .intro-section p { max-width: 800px; margin: 0 auto; line-height: 1.8; font-size: 16px; color: #333; white-space: normal; } .intro-section *::before, .intro-section *::after { display: none !important; } .intro-section * { border: none !important; } /* 带团真实照片 */ .tour-photos { padding: 80px 0; background-color: white; } .tour-photos h2 { text-align: center; margin-bottom: 40px; } .photos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .photo-item { background-color: #f8f9fa; padding: 20px; border-radius: 12px; text-align: center; transition: transform 0.3s ease; } .photo-item:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .photo-img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; } .photo-caption { font-size: 14px; color: #555; margin-top: 10px; } /* 通用部分样式 */ section { padding: 80px 0; } h1 { font-size: 40px; font-weight: 700; } h2 { font-size: 28px; text-align: center; margin-bottom: 20px; color: #2c3e50; font-weight: 600; } h3 { font-size: 20px; margin-bottom: 20px; color: #2c3e50; font-weight: 600; } p { font-size: 16px; line-height: 1.8; } .section-subtitle { text-align: center; font-size: 14px; color: #666; margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; } /* 数据展示 */ .stats { background-color: #2c3e50; color: white; } .stats h2 { color: white; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 60px; } .stat-card { text-align: center; } .stat-number { font-size: 32px; font-weight: 700; color: #3498db; margin-bottom: 10px; } .stat-label { font-size: 14px; color: rgba(255,255,255,0.8); } .stats-description { text-align: center; margin-top: 60px; font-size: 16px; max-width: 700px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.8); } /* 游客评价 */ .testimonials { background-color: white; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 60px; } .testimonial-card { background-color: #f8f9fa; padding: 40px; border-radius: 12px; position: relative; display: flex; flex-direction: column; } .testimonial-avatar { position: absolute; top: 16px; left: 16px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .testimonial-content { flex: 1; padding-left: 60px; } .testimonial-text { font-size: 16px; color: #333; margin-bottom: 20px; } .testimonial-author { font-size: 14px; color: #555; display: block; margin-top: 10px; } .testimonial-tag { display: inline-block; background-color: #e3f2fd; color: #1976d2; font-size: 12px; padding: 4px 12px; border-radius: 12px; margin-top: 8px; } /* 服务价值 */ .value { background-color: #f8f9fa; } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 60px; } .value-card { background-color: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .value-card:hover { transform: translateY(-5px); } .value-card h3 { display: flex; align-items: center; margin-bottom: 15px; font-size: 18px; font-weight: 600; } .value-card h3::before { content: '①'; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #3498db; color: white; border-radius: 50%; margin-right: 10px; font-size: 14px; } .value-card p { font-size: 14px; line-height: 1.8; } .value-card:nth-child(2) h3::before { content: '②'; } .value-card:nth-child(3) h3::before { content: '③'; } .value-card:nth-child(4) h3::before { content: '④'; } /* 工作流程 */ .process { background-color: white; } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-top: 60px; } .process-step { text-align: center; position: relative; } .process-step::after { content: ''; position: absolute; top: 50%; right: -20px; width: 40px; height: 2px; background-color: #3498db; transform: translateY(-50%); } .process-step:last-child::after { display: none; } .step-number { width: 60px; height: 60px; background-color: #3498db; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 20px; } .step-text { font-size: 1.1rem; color: #555; } /* 关于我们 */ .about { background-color: #f8f9fa; } .about-content { max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: #555; } .about-content p { margin-bottom: 25px; } /* 导游服务 */ .services { background-color: white; } .services-list { max-width: 800px; margin: 0 auto; margin-top: 60px; } .service-item { display: flex; align-items: center; margin-bottom: 30px; } .service-icon { font-size: 24px; margin-right: 15px; color: #ff6b00; } .service-text { font-size: 18px; color: #333; } .services-note { text-align: center; margin-top: 40px; font-size: 14px; color: #666; font-weight: 600; } /* 经典路线 */ .route { background-color: #f8f9fa; } .route-card { background-color: white; padding: 60px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-top: 60px; } .route-path { text-align: center; font-size: 18px; margin-bottom: 40px; color: #333; font-weight: 600; } .route-timeline { margin: 40px 0; } .timeline-item { display: flex; margin-bottom: 30px; align-items: flex-start; } .timeline-time { min-width: 100px; font-weight: 600; color: #3498db; font-size: 16px; } .timeline-content { font-size: 16px; color: #555; } .route-advantages { margin: 40px 0; } .advantage-item { display: flex; align-items: center; margin-bottom: 15px; } .advantage-item::before { content: '•'; color: #3498db; font-size: 18px; font-weight: bold; margin-right: 10px; } .advantage-item div { font-size: 16px; color: #555; } .route-notes { margin: 40px 0; } .route-note { display: flex; align-items: center; margin-bottom: 15px; } .route-note::before { content: '•'; color: #3498db; font-size: 18px; font-weight: bold; margin-right: 10px; } .route-note div { font-size: 16px; color: #555; } .route-final-note { background-color: #e3f2fd; padding: 20px; border-radius: 8px; margin-top: 40px; font-size: 16px; color: #1976d2; } /* 优势强化 */ .advantages { background-color: white; } .advantages-list { max-width: 800px; margin: 0 auto; margin-top: 60px; } .advantage-card { display: flex; align-items: center; padding: 20px; background-color: #f8f9fa; border-radius: 12px; margin-bottom: 20px; transition: transform 0.3s ease; } .advantage-card:hover { transform: translateX(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .advantage-card::before { content: '✔'; color: #3498db; font-size: 18px; font-weight: bold; margin-right: 15px; } .advantage-text { font-size: 16px; color: #555; font-weight: 600; } /* 带团实拍照片 */ .photos { background-color: white; } .photos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .photo-item { background-color: #f8f9fa; padding: 20px; border-radius: 12px; text-align: center; transition: transform 0.3s ease; } .photo-item:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .photo-img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; } .photo-caption { font-size: 14px; color: #555; margin-top: 10px; } /* 强转化模块 */ .cta { background: linear-gradient(135deg, #3498db, #2980b9); color: white; text-align: center; padding: 80px 0; } .cta h2 { color: white; } .cta p { font-size: 16px; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; } .cta .btn { background-color: white; color: #3498db; font-weight: 700; border-radius: 30px !important; padding: 14px 30px !important; font-size: 18px !important; } .cta .btn:hover { background-color: #f8f9fa; } .cta .btn-secondary { background-color: rgba(255,255,255,0.2); color: white; border-radius: 30px !important; padding: 14px 30px !important; font-size: 18px !important; } .cta .btn-secondary:hover { background-color: rgba(255,255,255,0.3); } /* FAQ */ .faq { background-color: #f8f9fa; } .faq-list { max-width: 800px; margin: 0 auto; margin-top: 60px; } .faq-item { background-color: white; padding: 30px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .faq-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); } .faq-question { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 15px; } .faq-answer { font-size: 16px; color: #555; line-height: 1.8; } /* 最终CTA */ .final-cta { background-color: white; text-align: center; padding: 80px 0; } .final-cta p { font-size: 16px; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; color: #555; } .final-cta .btn { background-color: #ff6b00; box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3); } .final-cta .btn:hover { background-color: #e55a00; box-shadow: 0 6px 16px rgba(255, 107, 0, 0.4); } /* 页脚 */ footer { background-color: #2c3e50; color: white; padding: 20px 0; text-align: center; } footer a { color: #ffffff; font-size: 16px; margin-right: 20px; text-decoration: none; } footer a:hover { color: #3498db; } footer .social-icons { margin-top: 10px; } /* 新增样式 */ .header { margin-top: 40px; } .progress-bar { width: 100%; height: 30px; background-color: #f1f1f1; border-radius: 15px; } .progress-bar-fill { height: 100%; border-radius: 15px; } .progress-bar-fill-green { background-color: #4caf50; } .progress-bar-fill-yellow { background-color: #ffeb3b; } .progress-bar-fill-red { background-color: #f44336; } .data-list { margin-top: 30px; font-size: 16px; } .data-item { background-color: #f9f9f9; padding: 15px; border-radius: 10px; margin-bottom: 10px; font-size: 18px; } .data-item a { color: #008CBA; font-weight: bold; } button { background-color: #4caf50; padding: 12px 20px; border-radius: 5px; color: white; font-size: 16px; margin-top: 10px; } button:hover { background-color: #45a049; } .steps-section { background-color: #f1f1f1; padding: 30px 20px; border-radius: 10px; margin-top: 20px; font-size: 18px; } .step { margin-bottom: 20px; display: flex; align-items: center; } .step-number { background-color: #ffeb3b; color: white; padding: 10px 20px; font-size: 18px; border-radius: 50%; margin-right: 20px; } .step-text { font-size: 18px; color: #333; } .footer-content { max-width: 600px; margin: 0 auto; } .footer-content h3 { color: white; margin-bottom: 30px; } .footer-content p { margin-bottom: 15px; color: rgba(255,255,255,0.8); font-size: 14px; } /* 响应式设计 */ @media (max-width: 768px) { .hero { padding: 60px 0; } .hero h1 { font-size: 32px !important; } .hero p { font-size: 16px; } .trust-tags { flex-direction: column; align-items: center; } .trust-tag { width: 80%; text-align: center; margin-right: 0; margin-bottom: 10px; } .btn { display: block; margin: 15px auto; width: 80%; text-align: center; } section { padding: 60px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 18px; } .stats-grid, .testimonials-grid, .value-grid, .process-steps { grid-template-columns: 1fr; gap: 20px; } .process-step::after { display: none; } .route-card { padding: 30px; } .route-path { font-size: 16px; } .timeline-item { flex-direction: column; } .timeline-time { margin-bottom: 10px; } } /* 全局强制排版修复(覆盖所有原有样式) */ /* 主标题(首屏) */ h1 { font-size: 42px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* 首屏标题特殊处理 */ .hero h1 { font-size: 50px !important; } /* 模块标题 */ h2 { font-size: 28px !important; font-weight: 600 !important; margin-bottom: 20px !important; } /* 小标题 */ h3 { font-size: 20px !important; font-weight: 600 !important; } /* 正文 */ p { font-size: 16px !important; line-height: 1.8 !important; } /* 小字说明 */ .small-text { font-size: 14px !important; color: #666 !important; } /* 数据模块 */ .stats-number { font-size: 34px !important; font-weight: 700 !important; } .stats-label { font-size: 14px !important; } /* 卡片标题 */ .card-title { font-size: 18px !important; font-weight: 600 !important; } /* 按钮 */ button { font-size: 16px !important; padding: 12px 24px !important; border-radius: 8px !important; } /* 模块间距(关键) */ section { padding: 80px 0 !important; } /* 卡片间距 */ .card { padding: 24px !important; } /* 标题与内容间距 */ h2 + p { margin-top: 10px !important; } /* 最终CTA按钮样式 */ .cta-button { background-color: #FF6A00; color: white; font-size: 18px; padding: 14px 30px; border-radius: 30px; border: none; cursor: pointer; transition: background-color 0.3s ease; text-decoration: none; display: inline-block; margin: 0 10px; } .cta-button:hover { background-color: #FF4500; } /* 首屏按钮样式 */ .btn-primary { background-color: #3498db !important; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); border-radius: 30px !important; padding: 14px 30px !important; font-size: 18px !important; } .btn-primary:hover { background-color: #2980b9 !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); } .btn-secondary { background-color: #3498db !important; box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); border-radius: 30px !important; padding: 14px 30px !important; font-size: 18px !important; } .btn-secondary:hover { background-color: #2980b9 !important; box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); } p { font-size: 16px; color: #333; }