/* ============================================================ * EdenH2O 三语共用样式 —— 原生 flex，RTL 靠浏览器自动处理 * 零覆盖、零 hack，LTR 写法原生，RTL 浏览器自动镜像 * ============================================================ */ /* 防止水平溢出导致右边空白 */ html, body { overflow-x: hidden; } /* 全局 box-sizing，防止 padding 撑出宽度 */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 统一母容器 .page-wrap —— 所有页面内容区域（Banner之外）包裹于此作用：防止横向溢出、统一宽度、手机端统一左右边距 ============================================================ */ .page-wrap { max-width: 100%; overflow-x: hidden; box-sizing: border-box; width: 100%; position: relative; } .eden-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: #fff; box-shadow: 0 1px 10px rgba(0,0,0,0.1); height: 70px; } .eden-header-inner { max-width: 1400px; height: 70px; margin: 0 auto; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; /* LTR: [Logo] [导航] [按钮] */ /* RTL (dir="rtl"): 浏览器自动反转 → [按钮] [导航] [Logo] ✅ 零代码 */ box-sizing: border-box; } /* 确保所有页面顶部都有间距，防止被 fixed header 挡住 */ body { padding-top: 70px !important; min-height: 100vh !important; margin: 0 !important; display: flex !important; flex-direction: column !important; background: #fff !important; } #Template { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; background: #fff !important; width: 100% !important; } .eden-footer { margin-top: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; } /* 公共容器 - 全站统一 1400px 居中版心 */ .container-wrap { max-width: 1400px; margin: 0 auto; padding: 50px 15px; box-sizing: border-box; width: 100%; position: relative; } /* Logo */ .eden-logo { display: flex; align-items: center; flex-shrink: 0; } .eden-logo img { max-height: 50px; width: auto; display: block; } /* 导航 —— 居中布局，左右各 20px 间距 */ .eden-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; margin: 0 20px; /* ✅ Logo 和导航之间 20px，导航和按钮之间 20px */ /* RTL 下浏览器自动反转导航项顺序 ✅ */ } .eden-nav a { position: relative; display: inline-flex; align-items: center; height: 70px; padding: 0 16px; font-size: 15px; font-weight: 500; color: #1A2C42; text-decoration: none; white-space: nowrap; transition: color .2s; } .eden-nav a:hover { color: #0088CC; } .eden-nav a.eden-nav-active { color: #0088CC !important; font-weight: 600; } .eden-nav a.eden-nav-active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); height: 3px; background: linear-gradient(90deg, #0088CC, #FF7A00); border-radius: 3px; } .eden-nav-new { position: absolute; top: 12px; font-size: 10px; background: #FF7A00; color: #fff; padding: 1px 4px; border-radius: 3px; line-height: 1; /* LTR: right:10px → RTL 浏览器自动 → left:10px ✅ */ inset-inline-start: auto; inset-inline-end: 10px; } /* 右侧按钮区：语言 + 登录 */ .eden-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; /* DOM 顺序: [语言] [登录] LTR 视觉: [语言] [登录] RTL 浏览器自动反转 → [登录] [语言] ✅ */ } /* 语言按钮 */ .eden-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #F5F7FA; border-radius: 6px; font-size: 13px; font-weight: 500; color: #1A2C42; cursor: pointer; white-space: nowrap; transition: all .2s; user-select: none; } .eden-lang:hover { background: #E8F4FD; color: #0088CC; } .eden-lang-cur { display: inline-flex; align-items: center; } .eden-flag { width: 22px; height: 15px; /* 三语统一 22×15 ✅ */ display: block; flex-shrink: 0; border-radius: 2px; } .eden-lang-arrow { font-size: 10px; opacity: .7; margin-inline-start: 2px; } /* 语言下拉菜单 */ .eden-lang-menu { position: absolute; top: calc(100% + 8px); min-width: 170px; background: #fff; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.15); overflow: hidden; z-index: 99999; /* 左对齐，在按钮正下方 */ inset-inline-start: 0; inset-inline-end: auto; } .eden-lang-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 11px; color: #1A2C42; cursor: pointer; transition: background .15s; } .eden-lang-item:hover { background: #F5F9FD; } /* 登录按钮 */ .eden-login { display: inline-block; padding: 8px 22px; background: #d9e6f2; color: #1A2C42 !important; border-radius: 50px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; box-shadow: 0 4px 10px rgba(0,136,200,0.08); white-space: nowrap; } .eden-login:hover { background: #c4d8eb; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,136,200,0.15); } /* Footer */ .eden-footer { background: #F8FAFC; border-top: 1px solid #EAEFF5; padding: 15px 20px; text-align: center; color: #667788; font-size: 13px; margin-top: 80px; } .eden-footer-text { margin: 0; line-height: 1.9; } .eden-footer-sep { margin-inline-start: 15px; } .eden-footer a { color: #667788; text-decoration: none; } .eden-footer a:hover { color: #0088CC; } /* RTL 调整：侧边栏在左边（阿文专用） */ html[dir="rtl"] .cndns-right { right: auto !important; left: 1px !important; } html[dir="rtl"] .cndns-right-box { right: auto !important; left: 55px !important; } html[dir="rtl"] .arrow-right { right: auto !important; left: -7px !important; transform: rotate(180deg); } /* 页尾贴底 - flex 方案 - 最高优先级 */ html { height: 100% !important; } body { min-height: 100vh !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding-top: 70px !important; box-sizing: border-box !important; } #Template { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; background: #fff !important; position: relative !important; z-index: 1 !important; } .eden-footer { margin-top: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; position: static !important; z-index: 1 !important; clear: both !important; } /* 防止 banner 被压缩 */ .banner { flex-shrink: 0 !important; } /* 新闻等页面的页尾贴底修复 */ .bodys { flex: 1 !important; min-height: 100vh !important; height: auto !important; overflow-y: visible !important; display: flex !important; flex-direction: column !important; } .bodys .eden-footer { margin-top: auto !important; flex-shrink: 0; } /* 首页核心价值卡片强制一行显示 */ .core-values { flex-wrap: nowrap !important; } .value-card { flex: 1 !important; min-width: 0 !important; } /* Swiper 箭头位置固定，所有页面统一跟英文版一致：左箭头在左，右箭头在右 */ /* 覆盖 RTL 模式下的箭头位置和背景图交换 */ /* 使用最高优先级的选择器，确保覆盖所有 Swiper 默认样式和 index.css 中的样式 */ html body .swiper-container-rtl .swiper-button-prev, html body .swiper-container-rtl .swiper-button-next, html[dir="rtl"] body .swiper-button-prev, html[dir="rtl"] body .swiper-button-next { left: auto !important; right: auto !important; } html body .swiper-container-rtl .swiper-button-prev, html[dir="rtl"] body .swiper-button-prev { left: 20px !important; right: auto !important; background-image: url(../images/i_left.png) !important; } html body .swiper-container-rtl .swiper-button-next, html[dir="rtl"] body .swiper-button-next { right: 20px !important; left: auto !important; background-image: url(../images/i_right.png) !important; } /* ========== 最终强制：所有 Swiper 箭头位置固定，左在左，右在右 ========== */ /* 不依赖 RTL 类名，直接给所有 Swiper 箭头设置固定位置，确保生效 */ .swiper-button-prev { left: 20px !important; right: auto !important; } .swiper-button-next { right: 20px !important; left: auto !important; } /* 阿文版隐藏所有 Swiper banner 箭头，改用分页器小圆点 */ /* 内容区域的图片轮播箭头因为有更高优先级的选择器，会保留显示 */ html[dir="rtl"] .swiper-button-prev, html[dir="rtl"] .swiper-button-next { display: none !important; } /* 阿文版隐藏所有自定义 banner 箭头（.banner-prev / .banner-next），统一风格 */ html[dir="rtl"] .banner-prev, html[dir="rtl"] .banner-next { display: none !important; } /* ========== 侧边栏返回顶部按钮样式 ========== */ #top-back { display: block !important; } .cndns-right .meau-top .cndns-right-btn .fa-chevron-up { font-size: 20px !important; color: #999 !important; display: block !important; text-align: center !important; line-height: 1 !important; margin-bottom: 6px !important; } .cndns-right .meau-top.cndns-right-meau:hover .cndns-right-btn .fa-chevron-up { color: #fff !important; } .cndns-right .meau-top .cndns-right-btn p { margin: 0 !important; padding: 0 !important; text-align: center !important; color: #999 !important; font-size: 12px !important; line-height: 1.2 !important; } .cndns-right .meau-top.cndns-right-meau:hover .cndns-right-btn p { color: #fff !important; } /* ========== 关注微信模块 - 二维码间距 ========== */ .cndns-right .meau-code .sev-t img { margin-bottom: 10px !important; } .cndns-right .meau-code .sev-t i { display: block !important; text-align: center !important; } /* ========== 阿文版侧边栏 RTL 适配 ========== */ /* 在线客服模块 - 头像镜像 + 橙色 */ .cndns-right.rtl-sidebar .meau-sev .sev-t .demo-icon { float: right !important; margin-left: 10px !important; margin-right: 0 !important; color: #ff7d00 !important; } .cndns-right.rtl-sidebar .meau-sev .sev-t p { text-align: right !important; } /* 客服热线模块 - 镜像 */ .cndns-right.rtl-sidebar .meau-contact .sev-b ul li { text-align: right !important; } .cndns-right.rtl-sidebar .meau-contact .sev-b ul li .cndns-icon { float: right !important; margin-left: 10px !important; margin-right: 0 !important; } .cndns-right.rtl-sidebar .meau-contact .sev-b ul li a { float: right !important; direction: ltr !important; unicode-bidi: embed !important; text-align: left !important; } /* ============================================================ 手机端响应式导航栏 - 汉堡菜单 ============================================================ */ /* 汉堡菜单按钮 - 默认隐藏 */ .eden-hamburger { display: none; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 10px; margin-left: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .eden-hamburger span { display: block; width: 24px; height: 2px; background-color: #333; transition: all 0.3s ease; } .eden-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .eden-hamburger.is-active span:nth-child(2) { opacity: 0; } .eden-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 移动端遮罩层 */ .eden-mobile-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; } .eden-mobile-overlay[v-show] { display: block; } /* 移动端菜单面板 - 默认隐藏在右侧 */ .eden-mobile-menu { position: fixed; top: 0; right: -300px; width: 280px; max-width: 80vw; height: 100vh; background: #fff; z-index: 9999; transition: right 0.3s ease; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow-y: auto; } .eden-mobile-menu.is-open { right: 0; } /* 移动端菜单头部 */ .eden-mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; } .eden-mobile-menu-title { font-size: 18px; font-weight: 600; color: #333; } .eden-mobile-close { width: 36px; height: 36px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #999; padding: 0; } .eden-mobile-close:hover { color: #333; } /* 移动端导航菜单项 */ .eden-mobile-nav { flex: 1; padding: 10px 0; } .eden-mobile-nav a { display: flex; align-items: center; justify-content: flex-start; padding: 14px 20px; color: #333; text-decoration: none; font-size: 15px; border-bottom: 1px solid #f5f5f5; transition: background 0.2s; position: relative; } .eden-mobile-nav a .menu-text { position: relative; display: inline-block; } .eden-mobile-nav .eden-nav-new { background: #FF7A00; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 20px; position: relative; top: -6px; } .eden-mobile-nav a:hover, .eden-mobile-nav a.eden-nav-active { background: #f8f9fa; color: #0088CC; } /* 移动端语言切换 */ .eden-mobile-lang { padding: 15px 20px; border-top: 1px solid #eee; display: flex; gap: 10px; flex-shrink: 0; } .eden-mobile-lang-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 5px; border: 1px solid #eee; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .eden-mobile-lang-item:hover { border-color: #0088CC; } .eden-mobile-lang-item.is-active { border-color: #0088CC; background: #f0f8ff; } .eden-mobile-lang-item .eden-flag { width: 30px; height: 20px; border-radius: 2px; margin-bottom: 5px; } .eden-mobile-lang-item span:last-child { font-size: 12px; color: #666; } /* 移动端登录按钮 */ .eden-mobile-login { display: block; margin: 15px 20px 20px; padding: 12px; text-align: center; background: #0088CC; color: #fff !important; text-decoration: none; border-radius: 6px; font-size: 15px; flex-shrink: 0; } .eden-mobile-login:hover { background: #006699; } /* ============================================================ 响应式断点 ============================================================ */ /* 移动端统一防溢出：<1024px（平板及以下），桌面端≥1024px不受影响 */ @media (max-width: 1023px) { #Template { overflow-x: hidden !important; } .container-wrap { overflow-x: hidden; } /* 首页二维码负margin在移动端裁剪 */ .product-cards { overflow-x: hidden; } } /* 手机端：<480px - 汉堡菜单，隐藏浮动侧边栏 */ @media (max-width: 479px) { /* 母容器统一左右边距 */ .page-wrap { padding: 0 15px; } /* container-wrap 取消左右padding，避免与page-wrap双重 */ .container-wrap { padding-left: 0 !important; padding-right: 0 !important; } .eden-header-inner { height: 60px !important; } .eden-nav { display: none !important; } .eden-actions .eden-lang { display: none !important; } .eden-actions .eden-login { display: none !important; } .eden-hamburger { display: flex !important; } .eden-logo img { height: 36px !important; } body { padding-top: 60px !important; } /* 手机端隐藏右侧浮动侧边栏 */ .cndns-right { display: none !important; } /* 阅读体验优化 */ .container-wrap { padding: 30px 15px !important; } img { max-width: 100% !important; height: auto !important; } table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } h1 { font-size: 24px !important; line-height: 1.4 !important; } h2 { font-size: 20px !important; line-height: 1.4 !important; } h3 { font-size: 18px !important; line-height: 1.4 !important; } h4 { font-size: 16px !important; line-height: 1.4 !important; } p, li { font-size: 14px !important; line-height: 1.7 !important; } button, .btn, input[type="submit"], input[type="button"] { min-height: 44px !important; min-width: 44px !important; } input, select, textarea { font-size: 16px !important; max-width: 100% !important; box-sizing: border-box !important; } .banner, .swiper-container { height: auto !important; min-height: 200px !important; } .banner img, .swiper-container img { width: 100% !important; height: auto !important; object-fit: cover !important; } /* 首页布局优化 */ html body .core-values { flex-wrap: wrap !important; gap: 15px !important; } html body .service-support { flex-wrap: wrap !important; } html body .service-item { flex: 1 1 100% !important; max-width: 100% !important; } html body .value-card { width: 100% !important; flex: 0 0 100% !important; padding: 25px 20px !important; } html body .product-row, html body .commercial-product-card, html body .product-experience { flex-direction: column !important; } html body .product-image, html body .commercial-image, html body .experience-video, html body .experience-content { width: 100% !important; max-width: 100% !important; } html body .experience-points { flex-direction: column !important; } html body .experience-point { flex: 1 1 100% !important; width: 100% !important; } html body .full-width-description, html body .services-description-full { padding: 30px 20px !important; } html body .commitment-section { padding: 40px 20px !important; margin-top: 40px !important; } html body .brand-concept, html body .product-series, html body .product-experience { padding-left: 0 !important; padding-right: 0 !important; } /* 首页产品卡片内容居中（手机端） */ html body .home-product-card .product-info, html body .commercial-product-card .product-info { text-align: center !important; } html body .home-product-card .product-info-header, html body .commercial-product-card .product-info-header { justify-content: center !important; } html body .home-product-card .product-title, html body .commercial-product-card .product-title, html body .home-product-card .product-desc, html body .commercial-product-card .product-desc { text-align: center !important; } html body .home-product-card .product-features, html body .commercial-product-card .product-features { justify-content: center !important; text-align: center !important; } html body .home-product-card .product-btn, html body .commercial-product-card .product-btn { display: inline-block !important; margin-left: auto !important; margin-right: auto !important; } /* 联系我们页面优化 */ html body .cooperation { grid-template-columns: 1fr !important; } html body .cooperation-card { padding: 25px 20px !important; } html body .contact-item { flex-direction: column !important; } html body .contact-container { grid-template-columns: 1fr !important; gap: 20px !important; } /* 关于我们页面优化 */ html body .mission-vision { padding: 28px 20px !important; margin: 20px 0 !important; } html body .about-section { padding: 35px 0 !important; margin: 30px 0 !important; } html body .vision-text { font-size: 1.3rem !important; } /* 合作伙伴页面优化 */ html body .partner-container { position: relative !important; height: auto !important; } html body .partner-card { position: relative !important; width: 100% !important; margin-bottom: 20px !important; left: auto !important; top: auto !important; } /* 高端彩妆页面优化 */ html body .cosmetics-form .form-row { flex-direction: column !important; } html body .cosmetics-form .form-group { width: 100% !important; } html body .brand-scroll { padding: 20px 0 !important; } /* 新闻页面优化 */ html body .news-list, html body .news-grid { grid-template-columns: 1fr !important; } html body .news-item, html body .news-card { width: 100% !important; } body { overflow-x: hidden !important; } /* ===== 手机端统一修复（<479px），桌面端≥480px不受影响 ===== */ /* 1. 首页二维码居中 */ html body .qr-code { position: static !important; margin-left: auto !important; margin-right: auto !important; display: block !important; left: auto !important; flex: 0 0 auto !important; } /* 二维码父容器在手机端居中 */ html body .product-row > div:first-child { justify-content: center !important; } /* 2. 首页Banner文字及按钮缩小 */ html body .slide-title { font-size: 1.3rem !important; margin-bottom: 8px !important; line-height: 1.3 !important; } html body .slide-subtitle { font-size: 0.75rem !important; margin-bottom: 10px !important; line-height: 1.4 !important; } html body .slide-btn { padding: 6px 14px !important; font-size: 0.75rem !important; } html body .slide-content { left: 5% !important; right: auto !important; max-width: 90% !important; text-align: left !important; transform: translateY(-50%) !important; } /* 3 & 6. 所有页面区块标题统一字号（基准：彩妆 card-title） */ html body .modern-title, html body .blue-title, html body .card-title, html body .main-slogan, html body .section-title, html body .aboutb1, html body .biaoti .title, html body .experience-title, html body .commitment-title, html body .value-title, html body .service-title, html body .jour-title p:first-child { font-size: 1.5rem !important; } /* 4. 彩妆表单输入框防溢出 */ html body .form-container { padding: 30px 15px !important; } html body .form-container .form-col { flex: 1 1 100% !important; min-width: 0 !important; } html body .form-container .form-control, html body .form-container .form-select { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } /* 5. 联系我们业务范围卡片一行一个（flex布局覆盖） */ html body .cooperation-card { flex: 0 0 100% !important; max-width: 100% !important; } /* 6. 修复手机端Banner下方深蓝色色块 */ html body .banner, html body .banner .swiper-container, html body .banner .swiper-wrapper, html body .banner .swiper-slide { background: transparent !important; background-color: transparent !important; } html body .banner { margin-bottom: 20px !important; } html body .banner .swiper-container { height: auto !important; } html body .banner .swiper-slide img { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; } html body .banner .swiper-pagination { background: transparent !important; bottom: 10px !important; } } /* 小屏手机：<375px */ @media (max-width: 374px) { .eden-header-inner { height: 56px !important; } .eden-hamburger { width: 40px !important; height: 40px !important; } .eden-hamburger span { width: 20px !important; } .eden-logo img { height: 32px !important; } .eden-mobile-menu { width: 260px; } .eden-mobile-nav a { padding: 12px 16px; font-size: 14px; } body { padding-top: 56px !important; } .container-wrap { padding: 20px 12px !important; } h1 { font-size: 20px !important; } h2 { font-size: 18px !important; } h3 { font-size: 16px !important; } h4 { font-size: 15px !important; } p, li { font-size: 13px !important; line-height: 1.6 !important; } } /* 标准大屏手机：375px - 479px - LOGO调大 */ @media (min-width: 375px) and (max-width: 479px) { .eden-logo img { height: 42px !important; } } /* 过渡区间：480px - 699px - 桌面导航+汉堡按钮，登录/语言进抽屉 */ @media (min-width: 480px) and (max-width: 699px) { .eden-header-inner { height: 65px !important; } .eden-nav { display: flex !important; } .eden-nav a { font-size: 13px !important; padding: 0 8px !important; } .eden-hamburger { display: flex !important; } .eden-actions .eden-lang { display: none !important; } .eden-actions .eden-login { display: none !important; } .eden-logo img { height: 40px !important; } body { padding-top: 65px !important; } .cndns-right { display: block !important; } } /* 700px-799px 小平板：进一步压缩导航栏，确保所有元素显示 */ @media (min-width: 700px) and (max-width: 799px) { .eden-header-inner { height: 60px !important; padding: 0 10px !important; } .eden-nav { display: flex !important; } .eden-nav a { font-size: 11px !important; padding: 0 4px !important; } .eden-logo img { height: 30px !important; } .eden-lang { font-size: 11px !important; padding: 4px 8px !important; } .eden-login { font-size: 11px !important; padding: 4px 10px !important; } body { padding-top: 60px !important; } } /* 折叠屏/小平板：700px - 1023px - 完整桌面导航，登录/语言头部展示 */ @media (min-width: 700px) and (max-width: 1023px) { .eden-header-inner { height: 65px !important; padding: 0 15px !important; } .eden-nav { display: flex !important; } .eden-nav a { font-size: 12px !important; padding: 0 5px !important; } .eden-logo img { height: 36px !important; } .eden-lang { font-size: 12px !important; } .eden-login { font-size: 12px !important; padding: 6px 12px !important; } body { padding-top: 65px !important; } .container-wrap { padding: 40px 20px !important; } h1 { font-size: 28px !important; } h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } /* ===== Banner 全局优化 ===== */ .banner { width: 100% !important; max-height: 450px !important; overflow: hidden !important; flex-shrink: 0 !important; } .banner img, .banner > img { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; display: block !important; } .swiper-container { max-height: 450px !important; } .swiper-slide img { max-height: 450px !important; object-fit: cover !important; } /* ===== Banner 箭头比例优化 ===== */ .swiper-button-prev, .swiper-button-next { width: 45px !important; height: 45px !important; background-size: 45px 45px !important; } .swiper-button-prev { left: 10px !important; } .swiper-button-next { right: 10px !important; } /* 自定义 Banner 箭头（合作伙伴、关于我们页面） */ .banner-prev, .banner-next { width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 16px !important; } .banner-prev { left: 10px !important; } .banner-next { right: 10px !important; } /* ===== 侧边栏比例优化 ===== */ .cndns-right { right: 5px !important; } .cndns-right-btn { width: 42px !important; height: 42px !important; } .cndns-right-btn span { font-size: 20px !important; line-height: 42px !important; } .cndns-right-box { right: 42px !important; } .meau-sev .cndns-right-box .box-border, .meau-contact .cndns-right-box .box-border { width: 350px !important; max-width: 55vw !important; } .cndns-icon { font-size: 20px !important; width: 24px !important; } /* ===== 页面内容容器防溢出 ===== */ .cooperation, .contact, .partner-container, .cont, .indexb, .about-section, .core-values, .service-support, .product-row, .home-product-card, .commercial-product-card, .product-cards, .product-series, .brand-concept, .product-experience, .experience-points, .commitment-section { max-width: 100% !important; box-sizing: border-box !important; } /* 强制所有 flex 容器在小屏幕上换行，防止溢出 */ .core-values, .service-support, .experience-points, .product-cards > div { flex-wrap: wrap !important; } .value-card, .service-item, .experience-point { max-width: 100% !important; box-sizing: border-box !important; } img { max-width: 100% !important; height: auto !important; } /* 首页产品卡片内容及文字居中 */ html body .home-product-card .product-info, html body .commercial-product-card .product-info { text-align: center !important; } html body .home-product-card .product-info-header, html body .commercial-product-card .product-info-header { justify-content: center !important; } html body .home-product-card .product-title, html body .commercial-product-card .product-title, html body .home-product-card .product-desc, html body .commercial-product-card .product-desc { text-align: center !important; } html body .home-product-card .product-features, html body .commercial-product-card .product-features { justify-content: center !important; text-align: center !important; } html body .home-product-card .product-btn, html body .commercial-product-card .product-btn { display: inline-block !important; margin-left: auto !important; margin-right: auto !important; } } /* 850px-1023px 稍大屏幕恢复正常字体 */ @media (min-width: 850px) and (max-width: 1023px) { .eden-header-inner { padding: 0 25px !important; } .eden-nav a { font-size: 13px !important; padding: 0 8px !important; } .eden-logo img { height: 40px !important; } } /* 大平板及以上：≥1024px - 完整桌面导航 */ @media (min-width: 1024px) { .eden-hamburger { display: none !important; } .eden-nav { display: flex !important; } .eden-actions .eden-lang { display: flex !important; } .eden-actions .eden-login { display: inline-block !important; } /* ===== Banner 全局优化 ===== */ .banner { width: 100% !important; max-height: 600px !important; overflow: hidden !important; flex-shrink: 0 !important; } .banner img, .banner > img { width: 100% !important; height: auto !important; max-height: 600px !important; object-fit: cover !important; display: block !important; } .swiper-container { max-height: 600px !important; } .swiper-slide img { max-height: 600px !important; object-fit: cover !important; } /* ===== Banner 箭头比例优化 ===== */ .swiper-button-prev, .swiper-button-next { width: 60px !important; height: 60px !important; background-size: 60px 60px !important; } .swiper-button-prev { left: 20px !important; } .swiper-button-next { right: 20px !important; } /* 自定义 Banner 箭头（合作伙伴、关于我们页面） */ .banner-prev, .banner-next { width: 50px !important; height: 50px !important; line-height: 50px !important; font-size: 22px !important; } .banner-prev { left: 20px !important; } .banner-next { right: 20px !important; } /* ===== 侧边栏比例优化 ===== */ .cndns-right { right: 10px !important; } .cndns-right-btn { width: 48px !important; height: 48px !important; } .cndns-right-btn span { font-size: 24px !important; line-height: 48px !important; } .cndns-right-box { right: 48px !important; } .meau-sev .cndns-right-box .box-border, .meau-contact .cndns-right-box .box-border { width: 430px !important; max-width: 40vw !important; } /* ===== 页面内容容器防溢出 ===== */ img { max-width: 100% !important; height: auto !important; } } /* ============================================================ 阿文版 RTL 适配 - 汉堡菜单 ============================================================ */ /* 阿文版汉堡按钮在左侧（RTL 自动镜像） */ html[dir="rtl"] .eden-hamburger { margin-left: 0 !important; margin-right: 10px !important; } /* 阿文版抽屉从左侧滑出（RTL 镜像） */ html[dir="rtl"] .eden-mobile-menu { right: auto !important; left: -300px; transition: left 0.3s ease !important; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important; direction: rtl; } html[dir="rtl"] .eden-mobile-menu.is-open { left: 0 !important; right: auto !important; } /* 抽屉内容 RTL 镜像 */ html[dir="rtl"] .eden-mobile-menu-header { flex-direction: row-reverse; } html[dir="rtl"] .eden-mobile-menu-title { text-align: right; } html[dir="rtl"] .eden-mobile-nav a { flex-direction: row; justify-content: flex-start; text-align: right; } html[dir="rtl"] .eden-mobile-nav .eden-nav-new { margin-left: 0 !important; margin-right: 8px !important; } html[dir="rtl"] .eden-mobile-lang { text-align: right; } /* 语言项保持纵向布局（国旗在上，文字在下） */ html[dir="rtl"] .eden-mobile-lang-item { flex-direction: column; align-items: center; } html[dir="rtl"] .eden-mobile-login { text-align: center; } /* ============================================================ 统一 Banner 轮播样式（所有页面通用） ============================================================ */ .banner { position: relative; width: 100%; overflow: hidden; margin-bottom: 40px; } .banner .swiper-container { width: 100%; height: auto !important; min-height: auto !important; } .banner .swiper-slide { position: relative; overflow: hidden; } .banner .swiper-slide img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover; } /* 通用Banner图片样式（覆盖无Swiper结构的页面，如联系我们） */ .banner img { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; display: block !important; vertical-align: top !important; } /* 统一箭头样式 - 圆形半透明蓝底 + Font Awesome 图标 */ .banner .swiper-button-prev, .banner .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 32px !important; height: 32px !important; z-index: 10; cursor: pointer; background: rgba(0,136,204,0.8) !important; border-radius: 50% !important; background-image: none !important; margin: 0 !important; transition: all 0.3s ease; display: flex !important; align-items: center; justify-content: center; } .banner .swiper-button-prev:hover, .banner .swiper-button-next:hover { background: rgba(0,136,204,1) !important; transform: translateY(-50%) scale(1.05); } .banner .swiper-button-prev { left: 20px !important; right: auto !important; } .banner .swiper-button-next { right: 20px !important; left: auto !important; } .banner .swiper-button-prev:after, .banner .swiper-button-next:after { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 13px !important; color: #fff !important; line-height: 1 !important; } .banner .swiper-button-prev:after { content: '\f053' !important; } .banner .swiper-button-next:after { content: '\f054' !important; } /* 统一分页器样式 */ .banner .swiper-pagination { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; z-index: 10; } .banner .swiper-pagination-bullet { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 6px; background: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.3s ease; opacity: 1; } .banner .swiper-pagination-bullet-active { background: #fff; transform: scale(1.2); } /* 阿文版隐藏 Banner 箭头 */ html[dir="rtl"] .banner .swiper-button-prev, html[dir="rtl"] .banner .swiper-button-next { display: none !important; } /* 响应式：700-849px 箭头尺寸（含768px，按桌面端0.75比例缩小） */ @media (min-width: 700px) and (max-width: 849px) { .banner .swiper-button-prev, .banner .swiper-button-next { width: 27px !important; height: 27px !important; } .banner .swiper-button-prev { left: 15px !important; } .banner .swiper-button-next { right: 15px !important; } .banner .swiper-button-prev:after, .banner .swiper-button-next:after { font-size: 11px !important; } } /* 响应式：850-1023px 箭头尺寸 */ @media (min-width: 850px) and (max-width: 1023px) { .banner .swiper-button-prev, .banner .swiper-button-next { width: 32px !important; height: 32px !important; } .banner .swiper-button-prev { left: 10px !important; } .banner .swiper-button-next { right: 10px !important; } .banner .swiper-button-prev:after, .banner .swiper-button-next:after { font-size: 12px !important; } } /* 响应式：1024-1199px 箭头尺寸 */ @media (min-width: 1024px) and (max-width: 1199px) { .banner .swiper-button-prev, .banner .swiper-button-next { width: 30px !important; height: 30px !important; } .banner .swiper-button-prev:after, .banner .swiper-button-next:after { font-size: 12px !important; } } /* 响应式：<700px 隐藏箭头 */ @media (max-width: 699px) { .banner .swiper-button-prev, .banner .swiper-button-next { display: none !important; } } /* ============================================================ 阿文版 RTL 溢出防护 —— 防止左边超出屏幕 ============================================================ */ /* 阿文版防横向溢出 —— 已移至双滚动条修复区块统一处理（避免overflow-x:hidden导致overflow-y:auto） */ /* 阿文版所有内容容器防溢出 —— 注意：不能用overflow-x:hidden，会导致overflow-y计算为auto产生多余滚动条 */ html[dir="rtl"] .container-wrap, html[dir="rtl"] .cooperation, html[dir="rtl"] .contact, html[dir="rtl"] .partner-container, html[dir="rtl"] .about-section, html[dir="rtl"] .core-values, html[dir="rtl"] .product-row, html[dir="rtl"] .product-cards, html[dir="rtl"] .brand-concept, html[dir="rtl"] .product-experience, html[dir="rtl"] .experience-points, html[dir="rtl"] .commitment-section, html[dir="rtl"] .news-list, html[dir="rtl"] .news-grid, html[dir="rtl"] .cosmetics-form, html[dir="rtl"] .brand-scroll, html[dir="rtl"] .stats { max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } /* 阿文版图片防溢出 */ html[dir="rtl"] img { max-width: 100% !important; height: auto !important; } /* ============================================================ 补充断点：480px - 767px（大手机/小平板）桌面导航+汉堡按钮并存，内容自适应 ============================================================ */ @media (min-width: 480px) and (max-width: 767px) { .page-wrap { padding: 0 20px; } .container-wrap { padding-left: 0 !important; padding-right: 0 !important; } /* 确保侧边栏在480px以上显示 */ .cndns-right { display: block !important; } } /* ============================================================ 补充断点：768px - 1023px（平板）完整导航，内容两列/自适应 ============================================================ */ @media (min-width: 768px) and (max-width: 1023px) { .page-wrap { padding: 0 25px; } .container-wrap { padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================ 小桌面：1024px - 1199px - 压缩导航栏，适配英文长文字英文版7个导航项文字较长，默认padding会导致登录按钮被裁剪 ============================================================ */ @media (min-width: 1024px) and (max-width: 1199px) { .eden-header-inner { padding: 0 15px !important; } .eden-nav { margin: 0 10px !important; gap: 2px !important; } .eden-nav a { padding: 0 10px !important; font-size: 13px !important; } .eden-login { padding: 6px 16px !important; font-size: 13px !important; } .eden-lang { font-size: 13px !important; } } /* 阿文版700-849px隐藏登录按钮（阿文导航文字长，768px显示不全） */ @media (min-width: 700px) and (max-width: 849px) { html[dir="rtl"] .eden-login { display: none !important; } } /* 阿文版双滚动条修复：只保留html滚动条，隐藏body及内部容器滚动条 */ /* 注意：CSS规范中overflow-x:hidden会导致overflow-y计算为auto，所以内部元素不能设overflow-x:hidden */ html[dir="rtl"] { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; } html[dir="rtl"] body { overflow: visible !important; } html[dir="rtl"] #Template { overflow: visible !important; } html[dir="rtl"] .bodys { overflow: visible !important; } html[dir="rtl"] .content-wrapper { overflow: visible !important; } /* .page-wrap的overflow-x:hidden会导致overflow-y计算为auto，产生第三条滚动条 */ html[dir="rtl"] .page-wrap { overflow: visible !important; }