已让出 80px（见 .page-offset 规则） */ height: 640px; background-color: #0c2136; } .about-hero-bg-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 铺满整个区域作为底色 */ filter: blur(30px); transform: scale(1.12); /* 放大遮住虚化产生的边缘 */ z-index: 0; } .about-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* 完整显示图片，不裁切 */ object-position: center; display: block; z-index: 1; } /* 通用页面 Hero */ .page-hero { position: relative; /* 桌面端：用 margin-top 让出导航栏 80px，Hero 整体（含背景图）在导航下方，保证图片上部不被遮挡。body { font-size: 0 } 已消除幽灵白缝。 */ margin-top: 80px; padding: 180px 0 100px; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; overflow: hidden; box-sizing: border-box; display: flex; align-items: flex-end; } .page-hero-overlay { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.55); z-index: 1; } /* 双层背景：底层虚化铺满 + 上层完整显示（与 about-hero 一致） */ .page-hero-bg-blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px); transform: scale(1.12); z-index: 0; } .page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; z-index: 1; } .page-hero-content { position: relative; z-index: 2; } .about-hero-content { /* 精调入口：往右移多少，直接改这个变量即可（正值=右移、负值=左移）。用 translateX() 做位移比改 padding 稳，不会被响应式媒体块的 padding 覆盖抵消。默认值：+8%（相对 Hero 自身宽度）—— 视觉"从正中央向右挪一点"。参考：0% = 正中间；+10% = 明显偏右；+15% = 比较靠右；+20% = 接近右 1/4。 */ --hero-text-right-shift: calc(25% + 80px); --hero-text-down-shift: 16px; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 68px 60px 80px; box-sizing: border-box; z-index: 2; /* 水平：23% 基础上再加一个字距(72px)；垂直：下移半个字距(36px)。 */ transform: translate(var(--hero-text-right-shift), var(--hero-text-down-shift)); } .about-hero-title { font-size: 72px; font-weight: 900; color: #fff; margin-bottom: 18px; letter-spacing: 10px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } .about-hero-subtitle { font-size: 17px; color: #fff; font-weight: 600; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } /* --- Company Profile --- */ .about-profile-section { padding: 100px 0; background: #fff; } .about-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .about-profile-image { position: relative; } .about-profile-image img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); } .about-profile-content .section-tag { margin-bottom: 14px; } .about-profile-content h2 { font-size: 30px; font-weight: 800; color: var(--text-primary); margin-bottom: 28px; line-height: 1.3; } .about-profile-content p { font-size: 15px; color: var(--text-secondary); line-height: 2; margin-bottom: 16px; } .about-highlight-box { padding: 24px 28px; border-left: 3px solid var(--accent-color); background: #f5f8fb; border-radius: 0 8px 8px 0; margin-top: 28px; } .about-highlight-box p { margin-bottom: 0; font-weight: 500; color: var(--text-primary); } /* --- Brand Philosophy --- */ .about-brand-section { padding: 100px 0; background: linear-gradient(135deg, #060d1a 0%, #0c1e36 60%, #0f2945 100%); } .about-brand-section .section-tag { color: rgba(255, 255, 255, 0.45); } .about-brand-section .section-title { color: #fff; font-size: 34px; white-space: nowrap; } .brand-philosophy-tagline { display: none; } .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; } .brand-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: 16px; padding: 48px 30px 36px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } .brand-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); opacity: 0.6; z-index: 2; } .brand-card:hover { transform: translateY(-6px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } /* 卡片背景随机上升粒子 */ .card-particle { position: absolute; bottom: -6px; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.35); border-radius: 50%; box-shadow: 0 0 6px 1px rgba(0, 180, 216, 0.25); pointer-events: none; animation: card-particle-rise linear infinite; z-index: 0; } @keyframes card-particle-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 8% { opacity: var(--particle-op, 0.5); } 92% { opacity: var(--particle-op, 0.5); } 100% { transform: translateY(-360px) scale(0.4); opacity: 0; } } .brand-char { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; font-size: 48px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #0a4d8c, #00b4d8); border-radius: 50%; margin-bottom: 24px; box-shadow: 0 8px 32px rgba(0, 119, 182, 0.35); position: relative; z-index: 1; } .brand-card:nth-child(2) .brand-char { background: linear-gradient(135deg, #0077b6, #00c6ff); } .brand-card:nth-child(3) .brand-char { background: linear-gradient(135deg, #023e8a, #0077b6); } /* 环绕光点 — 使用 CSS 变量实现多方向、多半径、不同步 */ .orbit-dot { position: absolute; top: 50%; left: 50%; width: var(--dot-size, 5px); height: var(--dot-size, 5px); margin: calc(var(--dot-size, 5px) / -2) 0 0 calc(var(--dot-size, 5px) / -2); background: #fff; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(0, 180, 216, 0.6), 0 0 4px rgba(255, 255, 255, 0.9); animation: orbit-spin var(--orbit-dur, 4s) linear infinite; animation-delay: var(--orbit-delay, 0s); pointer-events: none; z-index: 1; } @keyframes orbit-spin { 0% { transform: rotate(0deg) translateX(var(--orbit-r, 58px)) rotate(0deg); } 100% { transform: rotate(calc(360deg * var(--orbit-dir, 1))) translateX(var(--orbit-r, 58px)) rotate(calc(-360deg * var(--orbit-dir, 1))); } } .brand-card h4 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; position: relative; z-index: 1; } .brand-card p { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.8; position: relative; z-index: 1; } /* --- Product Gallery --- */ .about-gallery-section { padding: 100px 0; background: #fff; } .about-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: #e8ecf1; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.06); } .gallery-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: #fff; font-size: 13px; font-weight: 500; } /* --- Certificates --- */ .about-cert-section { padding: 100px 0; background: linear-gradient(135deg, #060d1a 0%, #0d2540 100%); } .about-cert-section .section-tag { color: rgba(255, 255, 255, 0.45); } .about-cert-section .section-title { color: #fff; } .cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; } .cert-item { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 24px 20px 18px; text-align: center; transition: transform 0.3s ease, background 0.3s ease; } .cert-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); } .cert-item img { width: 100%; height: auto; max-height: 240px; object-fit: contain; border-radius: 4px; margin-bottom: 10px; } .cert-label { display: block; color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 500; letter-spacing: 0.5px; } /* --- Responsive --- */ @media (max-width: 1024px) { .about-gallery-grid { grid-template-columns: repeat(3, 1fr); } .cert-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .about-hero-content { align-items: center; padding: 90px 30px 60px; } .about-hero-title { font-size: 48px; letter-spacing: 4px; } .about-hero-subtitle { font-size: 16px; } .about-profile-grid { grid-template-columns: 1fr; gap: 40px; } .about-profile-image { position: static; } .brand-grid { grid-template-columns: 1fr; gap: 20px; } .about-gallery-grid { grid-template-columns: repeat(2, 1fr); } .cert-grid { grid-template-columns: repeat(2, 1fr); } .page-hero { padding: 140px 0 60px; } } @media (max-width: 480px) { .nav-logo img { height: 42px; } .nav-logo-text .company-name-zh { font-size: 12px; letter-spacing: 0; line-height: 1.2; white-space: nowrap; /* 320px 小屏也不换行 */ overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .nav-logo-text .company-name-en { /* 小屏不再隐藏英文名，缩小显示；超窄屏超出部分省略号截断 */ font-size: 9px; letter-spacing: 0; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hero { min-height: 100vh; padding: 0; } .hero-container { padding: 60px 20px 30px; } .hero-company { font-size: 28px; letter-spacing: 3px; } .hero-title, .hero-badge, .hero-subtitle { font-size: 16px; } .hero-actions { gap: 10px; } .about-hero-content { align-items: center; padding: 70px 24px 40px; } .about-hero-title { font-size: 32px; letter-spacing: 2px; margin-bottom: 10px; } .about-hero-subtitle { font-size: 13px; letter-spacing: 1px; } .about-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .cert-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .about-honeycomb { width: 340px; height: 330px; } .about-honeycomb .hex-center { width: 130px; height: 114px; } .about-honeycomb .hex-top { width: 118px; height: 102px; transform: translate(-50%, calc(-50% - 100px)); } .about-honeycomb .hex-tr { width: 118px; height: 102px; transform: translate(calc(-50% + 88px), calc(-50% - 50px)); } .about-honeycomb .hex-br { width: 118px; height: 102px; transform: translate(calc(-50% + 88px), calc(-50% + 50px)); } .about-honeycomb .hex-btm { width: 118px; height: 102px; transform: translate(-50%, calc(-50% + 100px)); } .about-honeycomb .hex-bl { width: 118px; height: 102px; transform: translate(calc(-50% - 88px), calc(-50% + 50px)); } .about-honeycomb .hex-tl { width: 118px; height: 102px; transform: translate(calc(-50% - 88px), calc(-50% - 50px)); } /* ===== 参考 SAFETY 网站的手机精调层：小屏收紧间距与字号，保证触控目标 ≥44px ===== */ /* 区块间距收紧（桌面/平板仍为 80~100px） */ .news-section, .accordion-section, .about-profile-section { padding: 56px 0; } /* 区块标题在 768px 基础上再降一档，避免小屏换行拥挤 */ .section-header { margin-bottom: 40px; } .section-title { font-size: 26px; margin-bottom: 12px; } .section-desc { font-size: 14px; } .section-tag { font-size: 11px; padding: 4px 14px; margin-bottom: 12px; } /* 卡片内边距与图片高度精调 */ .news-body { padding: 18px; } .news-image { height: 150px; } .product-list-item { padding: 18px; gap: 18px; } .product-list-image { height: 160px; } /* 页脚与联系区块小屏收紧 */ .footer { padding: 48px 0 24px; } .footer-grid { gap: 32px; margin-bottom: 32px; } /* 全局触控目标：链接/按钮最小可点击高度约 44px（Apple HIG / Android 规范） */ .btn { min-height: 44px; } .news-more { padding: 8px 0; } } /* ========== 新闻中心 ========== */ .news-section { background: #f8fafc; padding: 80px 0; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .news-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e8ecf1; transition: var(--transition); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; cursor: pointer; } .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .news-image { position: relative; height: 200px; overflow: hidden; flex-shrink: 0; } .news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .news-card:hover .news-image img { transform: scale(1.06); } .news-date { position: absolute; top: 16px; right: 16px; background: var(--primary-color); color: #fff; padding: 4px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; } .news-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .news-body h4 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; line-height: 1.5; } .news-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .news-more { font-size: 14px; font-weight: 600; color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: var(--transition); margin-top: auto; } .news-more:hover { color: var(--accent-color); gap: 8px; } @media (max-width: 768px) { .news-grid { grid-template-columns: 1fr; } .news-image { height: 180px; } } /* ========== 产品服务 - 风琴展示 ========== */ .accordion-section { background: #f0f4f8; padding: 80px 0; } .accordion-wrapper { display: flex; width: 100%; height: 520px; gap: 4px; } .accordion-panel { flex: 1; position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); min-width: 0; } /* 鼠标进入风琴区域时：所有面板收缩 */ .accordion-wrapper:hover .accordion-panel { flex: 0.6; } /* 被 hover 的面板展开 */ .accordion-wrapper:hover .accordion-panel:hover { flex: 3.2; cursor: pointer; } /* 背景图片 */ .accordion-panel-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #1a1f2e; transition: transform 0.8s ease, filter 0.6s ease, background-image 0.4s ease; } /* 被 hover 的面板背景变暗 */ .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-bg { filter: brightness(1); } /* 鼠标在非展开面板时放大背景 */ .accordion-wrapper:hover .accordion-panel:not(:hover) .accordion-panel-bg { transition: transform 0.8s ease, filter 0.6s ease; } /* 遮罩层 */ .accordion-panel-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%); transition: opacity 0.5s ease, background 0.5s ease; } /* 被 hover 的面板遮罩方向改变 */ .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-overlay { background: linear-gradient(to left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 100%); } /* 侧边标题（缩略状态） */ .accordion-panel-side { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity 0.4s ease; } /* 被 hover 的面板隐藏侧边标题 */ .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-side { opacity: 0; pointer-events: none; } .accordion-panel-number { font-size: 28px; font-weight: 800; color: var(--accent-color); letter-spacing: 2px; } .accordion-panel-title { writing-mode: vertical-rl; text-orientation: mixed; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* 展开内容 */ .accordion-panel-content { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; padding: 40px; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } /* 根据各图片留白调整每张面板展开后的文字位置，文字尽量靠边 */ /* 面板1：文字在左上 */ .accordion-panel:nth-child(1) .accordion-panel-content { bottom: auto; top: 0; left: 0; right: auto; padding: 16px; max-width: 55%; transform: translateY(-20px); } /* 面板2：文字在右上 */ .accordion-panel:nth-child(2) .accordion-panel-content { bottom: auto; top: 0; left: auto; right: 0; padding: 16px; max-width: 55%; text-align: right; transform: translateY(-20px); } /* 面板3：文字在左下 */ .accordion-panel:nth-child(3) .accordion-panel-content { bottom: 0; top: auto; left: 0; right: auto; padding: 16px; max-width: 55%; } /* 面板4：文字在右上 */ .accordion-panel:nth-child(4) .accordion-panel-content { bottom: auto; top: 0; left: auto; right: 0; padding: 16px; max-width: 55%; text-align: right; transform: translateY(-20px); } /* 面板5：文字在左下 */ .accordion-panel:nth-child(5) .accordion-panel-content { bottom: 0; top: auto; left: 0; right: auto; padding: 16px; max-width: 55%; } /* 被 hover 的面板显示内容 */ .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-content { opacity: 1; transform: translateY(0); pointer-events: auto; } .accordion-panel-title-expanded { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 16px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .accordion-panel-desc { font-size: 15px; color: rgba(255,255,255,0.90); line-height: 1.8; margin-bottom: 20px; max-width: 480px; } .accordion-panel-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .accordion-feature-tag { display: inline-block; padding: 5px 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 20px; font-size: 12px; color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); background: rgba(255,255,255,0.1); } .accordion-panel-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-color); font-size: 15px; font-weight: 600; text-decoration: none; transition: gap 0.3s ease; cursor: pointer; } .accordion-panel-link:hover { gap: 10px; text-shadow: 0 2px 6px rgba(0,180,216,0.4); } /* 桌面端 hover 展开面板时，给整个面板加“点击进入”白色边框光晕提示 */ .accordion-wrapper:hover .accordion-panel:hover::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; border: 2px solid rgba(255,255,255,0.4); pointer-events: none; } /* ========== 默认展开状态（无 hover 时生效，JS 会在鼠标进入时移除该类） ========== */ .accordion-wrapper.expanded-default .accordion-panel { flex: 0.6; } .accordion-wrapper.expanded-default .accordion-panel.active { flex: 3.2; cursor: pointer; } .accordion-wrapper.expanded-default .accordion-panel.active .accordion-panel-bg { filter: brightness(1); } .accordion-wrapper.expanded-default .accordion-panel.active .accordion-panel-overlay { background: linear-gradient(to left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 100%); } .accordion-wrapper.expanded-default .accordion-panel.active .accordion-panel-side { opacity: 0; pointer-events: none; } .accordion-wrapper.expanded-default .accordion-panel.active .accordion-panel-content { opacity: 1; transform: translateY(0); pointer-events: auto; } /* 通用产品图标样式 */ .product-icon { width: 72px; height: 72px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 32px; color: #fff; transition: var(--transition); } /* ========== 优势 ========== */ .advantages-section { background: #f0f4f8; position: relative; overflow: hidden; } .advantages-section .section-tag { background: rgba(10, 46, 92, 0.08); border-color: rgba(10, 46, 92, 0.15); color: #0a2e5c; } .advantages-section .section-title { color: #0a2e5c; position: relative; padding-bottom: 20px; } .advantages-section .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: #c53030; border-radius: 2px; } .advantages-section .section-desc { color: #718096; margin-top: 16px; } .advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .advantage-card { position: relative; border-radius: 20px; background-size: cover; background-position: center; min-height: 280px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); transition: var(--transition); cursor: pointer; display: flex; align-items: flex-end; } .advantage-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .advantage-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%); z-index: 1; pointer-events: none; } .advantage-card:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 60%); } .advantage-content { position: relative; z-index: 2; padding: 20px 24px 2px; text-align: center; width: 100%; box-sizing: border-box; } .advantage-content h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 6px; line-height: 1.3; } .advantage-content p { font-size: 13px; color: rgba(255,255,255,0.9); line-height: 1.6; margin: 0; } /* ========== 联系我们 ========== */ .contact-section { background: var(--bg-light); } .contact-grid { display: grid; grid-template-columns: 1.0fr 1.3fr; gap: 48px; } .contact-info-cards { display: flex; flex-direction: column; gap: 20px; } .contact-info-card { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); transition: var(--transition); } .contact-info-card:hover { border-color: var(--accent-color); box-shadow: var(--shadow-md); transform: translateX(6px); } .contact-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; } .contact-detail h4 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .contact-detail p { font-size: 14px; color: var(--text-light); } .contact-qrcodes { display: flex; justify-content: center; padding: 24px 28px; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); } .contact-qrcodes .qr-list { display: flex; gap: 32px; } .qr-item { text-align: center; } .qr-item img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; display: block; } .qr-item span { display: block; margin-top: 8px; font-size: 13px; color: var(--text-light); } .contact-map { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); min-height: 450px; height: 100%; display: flex; } .map-container { width: 100%; height: 100%; min-height: 450px; } .contact-form { background: #fff; border-radius: 10px; padding: 23px; box-shadow: var(--shadow-md); border: 1px solid rgba(0, 0, 0, 0.04); } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 14px; border: 2px solid #e8ecf1; border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--text-primary); transition: var(--transition); background: var(--bg-white); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1); } .form-group textarea { resize: vertical; min-height: 90px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .btn-submit { width: 100%; padding: 12px 28px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(10, 77, 140, 0.4); } /* ========== Footer ========== */ .footer { background: var(--bg-gradient-start); color: #fff; padding: 70px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 50px; } .footer-brand img { height: 56px; margin-bottom: 18px; } .footer-brand p { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1.8; margin-bottom: 20px; } .footer-social { display: none !important; } .footer-social a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; text-decoration: none; transition: var(--transition); } .footer-social a:hover { background: var(--accent-color); transform: translateY(-3px); } .footer-col h4 { font-size: 17px; font-weight: 700; margin-bottom: 22px; color: #fff; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 14px; transition: var(--transition); } .footer-links a:hover { color: var(--accent-light); padding-left: 4px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.35); } /* ========== 咨询弹窗 ========== */ .popup-overlay { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; } .popup-overlay.active { display: flex; opacity: 1; } .popup-content { background: #fff; border-radius: 20px; padding: 40px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); position: relative; transform: translateY(20px); transition: transform 0.3s ease; } .popup-overlay.active .popup-content { transform: translateY(0); } .popup-close { position: absolute; top: 16px; right: 20px; width: 36px; height: 36px; border: none; background: #f0f4f8; border-radius: 50%; font-size: 22px; color: #718096; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .popup-close:hover { background: #e2e8f0; color: #0a1628; } .popup-content h3 { font-size: 22px; font-weight: 700; color: #0a1628; margin-bottom: 24px; text-align: center; } .popup-content .form-group { margin-bottom: 18px; } .popup-content .form-group label { display: block; font-size: 14px; font-weight: 600; color: #0a1628; margin-bottom: 8px; } .popup-content .form-group input, .popup-content .form-group select, .popup-content .form-group textarea { width: 100%; padding: 14px 18px; border: 2px solid #e8ecf1; border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--text-primary); transition: var(--transition); background: #fff; } .popup-content .form-group input:focus, .popup-content .form-group select:focus, .popup-content .form-group textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1); } .popup-content .form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23718096' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; } .popup-content .form-group textarea { resize: vertical; min-height: 100px; } .popup-content .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .popup-content .btn-submit { width: 100%; padding: 16px 36px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 8px; } .popup-content .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(10, 77, 140, 0.4); } @media (max-width: 768px) { .popup-content { padding: 28px 20px; border-radius: 16px; } .popup-content .form-row { grid-template-columns: 1fr; } } /* ========== 右侧浮动工具条 ========== */ .sidebar-tools { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1500; display: flex; flex-direction: column; } .tool-item { position: relative; width: 44px; height: 44px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .tool-item:hover { background: #c53030; } .tool-item svg { width: 20px; height: 20px; color: #fff; fill: currentColor; } .tool-item img { width: 32px; height: 32px; object-fit: contain; } .tool-tip { position: absolute; right: 44px; top: 50%; transform: translateY(-50%) translateX(10px); background: #fff; color: #c53030; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px 0 0 4px; white-space: nowrap; font-size: 18px; font-weight: 600; box-shadow: -4px 4px 20px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; border-right: 3px solid #c53030; } .tool-item:hover .tool-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } /* 回顶部按钮：由 main.js 随工具条注入。桌面端保持原有三图标工具条不变，回顶部仅在手机端底部工具栏显示（见下方 768px 媒体查询）。 */ .tool-item.tool-backtop { display: none; } @media (max-width: 768px) { /* 参考 SAFETY 网站：手机端不再隐藏工具条，而是把它从右侧悬浮改为底部固定四宫格工具栏（在线咨询 / 电话 / 邮件 / 回顶部）。桌面端（>768px）仍保持右侧悬浮样式，完全不受影响。 */ .sidebar-tools { display: flex; flex-direction: row; top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; background: #2a2a2a; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25); } .tool-item { flex: 1; width: auto; height: 50px; } /* 手机端显示回顶部按钮 */ .tool-item.tool-backtop { display: flex; } /* 底部栏无 hover 悬浮场景，电话/邮箱改为点击直接拨号/发邮件（见 main.js），隐藏悬浮提示 */ .tool-item .tool-tip { display: none; } /* 预留工具栏高度，防止遮挡页脚内容 */ body { padding-bottom: 50px; } } /* ========== 动画 ========== */ .fade-up { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ========== 产品列表（产品服务页） ========== */ .products-list-section { background: #f8fafc; } .product-list { display: flex; flex-direction: column; gap: 40px; } .product-list-item { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; padding: 36px; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: var(--transition); } .product-list-item:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); } .product-list-image { border-radius: 12px; overflow: hidden; height: 260px; background: #f0f4f8; } .product-list-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-list-content h3 { font-size: 24px; font-weight: 700; color: #0a2e5c; margin-bottom: 14px; } .product-list-content p { color: #718096; line-height: 1.7; margin-bottom: 20px; font-size: 15px; } .product-list-tags { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .product-list-tags span { padding: 6px 16px; background: #f0f4f8; color: #4a5568; border-radius: 20px; font-size: 13px; border: 1px solid rgba(0, 0, 0, 0.04); } .product-list-content .btn { display: inline-block; } @media (max-width: 768px) { .product-list-item { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .product-list-image { height: 200px; } } /* ========== 响应式 ========== */ @media (max-width: 1024px) { .hero-container { grid-template-columns: 1fr; text-align: center; padding-top: 140px; gap: 48px; } .hero-content { grid-column: 1; padding-left: 0; padding-top: 60px; } .hero-title { font-size: 20px; } .hero-badge, .hero-subtitle { font-size: 20px; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-stats { justify-content: center; } .hero-visual { order: -1; } .hero-honeycomb { width: 400px; height: 390px; } .hex-center { width: 150px; height: 132px; } .hex-top { width: 138px; height: 120px; transform: translate(-50%, calc(-50% - 118px)); } .hex-tr { width: 138px; height: 120px; transform: translate(calc(-50% + 102px), calc(-50% - 59px)); } .hex-br { width: 138px; height: 120px; transform: translate(calc(-50% + 102px), calc(-50% + 59px)); } .hex-btm { width: 138px; height: 120px; transform: translate(-50%, calc(-50% + 118px)); } .hex-bl { width: 138px; height: 120px; transform: translate(calc(-50% - 102px), calc(-50% + 59px)); } .hex-tl { width: 138px; height: 120px; transform: translate(calc(-50% - 102px), calc(-50% - 59px)); } .ring-1 { width: 320px; height: 320px; } .ring-2 { width: 245px; height: 245px; } .about-main-grid { grid-template-columns: 1fr; gap: 40px; text-align: left; /* 手机端文字左对齐，居中会导致长段落换行参差 */ } .about-honeycomb-wrap { order: -1; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; /* 裁掉超出窄屏的装饰轨道环，不产生横向滚动 */ } /* 网格两列改单列后，两列子项都允许收缩，避免固定宽蜂巢撑爆窄屏 */ .about-honeycomb-wrap, .about-profile { min-width: 0; } .about-honeycomb { width: 400px; /* 缩放基准尺寸，实际宽度由 JS 按屏宽设置 zoom 等比缩小 */ height: 390px; flex: 0 0 auto; margin: 0 auto; } /* 公司简介文字重排：标签 → 标题 → 正文两端对齐 → 使命句强调块 */ .about-profile { text-align: left; padding: 0 2px; } .about-profile-tag { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 10px; } .about-profile-title { font-size: 21px; line-height: 1.45; margin-bottom: 18px; } .about-profile-text { font-size: 15px; line-height: 1.9; margin-bottom: 14px; text-align: justify; text-justify: inter-ideograph; /* 中文两端对齐，换行边缘整齐 */ } /* 末段「初心与使命」与正文样式一致，不做卡片装饰 */ .about-container { padding: 32px 24px 48px; /* 手机端收紧顶部留白，蜂巢图紧贴 Hero 主图（桌面仍为 100px） */ } .accordion-wrapper { height: auto; /* 手机端纵向手风琴，高度随面板展开/折叠自适应，不写死 450px */ flex-direction: column; /* 纵向堆叠 */ flex-wrap: nowrap; gap: 10px; } .accordion-panel { min-width: 100%; flex: none; height: 70px; /* 手机端产品卡片高度（维持原外观），纵向排列 */ cursor: pointer; } /* 屏蔽桌面端 hover 风琴展开效果：窄屏桌面浏览器（如 IDE 预览）也不会触发展开/闪烁 */ .accordion-wrapper:hover .accordion-panel, .accordion-wrapper:hover .accordion-panel:hover { flex: none; } .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-side { opacity: 1; pointer-events: auto; } .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-bg { filter: none; } .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%); } .accordion-wrapper:hover .accordion-panel:hover .accordion-panel-content { display: none; } /* 手机端不使用风琴展开：active 态也保持卡片外观、高度不变，展开内容隐藏 */ .accordion-panel.active { flex: none; height: 70px; cursor: pointer; } .accordion-panel.active .accordion-panel-side { opacity: 1; pointer-events: auto; } .accordion-panel-content { display: none; } .accordion-panel.active .accordion-panel-overlay { background: linear-gradient(to left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 100%); } .accordion-panel.active .accordion-panel-bg { filter: brightness(1); } .accordion-panel-title { writing-mode: horizontal-tb; letter-spacing: 2px; font-size: 17px; } .accordion-panel-side { flex-direction: row; gap: 8px; } .advantages-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-container { height: 60px; padding: 0 16px; } .nav-logo img { height: 50px; flex-shrink: 0; } /* 窄屏：logo 文字区允许收缩并省略，绝不把右侧汉堡按钮挤出屏幕 */ .nav-logo { min-width: 0; flex: 1 1 auto; gap: 8px; } .nav-logo-text { transform: translateY(-4px); min-width: 0; /* flex 子项可收缩的关键 */ overflow: hidden; } .nav-logo-text .company-name-zh { font-size: 16px; letter-spacing: 0; white-space: nowrap; /* 公司名不换行（小屏由 480px 断点进一步缩小字号） */ overflow: hidden; text-overflow: ellipsis; display: block; } .nav-logo-text .company-name-en { font-size: 11px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .nav-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 20px; gap: 4px; box-shadow: var(--shadow-lg); } .nav-menu.active { display: flex; } .nav-menu li a { padding: 14px 20px; } .nav-dropdown .dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; border-left: 2px solid var(--accent-color); border-radius: 0; margin: 4px 0 4px 12px; padding: 4px 0; min-width: auto; display: none; } .nav-dropdown.active .dropdown-menu { display: block; } .dropdown-menu li a { padding: 10px 16px; font-size: 14px; } .mobile-toggle { display: flex; flex-shrink: 0; /* 汉堡按钮永不被压缩/挤出屏幕 */ margin-left: 8px; } .hero { min-height: 100vh; padding: 0; } .hero-container { padding-top: 70px; padding-bottom: 40px; align-items: center; gap: 24px; } .hero-content { padding-top: 0; } /* 移动端隐藏七宫格蜂巢，背景大图全屏铺满，文案居中叠加 */ .hero-visual { display: none; } /* 暗色遮罩，保证叠加文字可读；底部加深，避免图片边缘生硬 */ .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(6, 13, 26, 0.35) 0%, rgba(6, 13, 26, 0.25) 50%, rgba(6, 13, 26, 0.55) 100% ); z-index: 1; } .hero-company { font-size: 36px; letter-spacing: 6px; } /* 产品详情页（product-1 等）Hero 文字：手机端缩小并移到图片右侧垂直居中 */ .prod-hero-overlay { align-items: center !important; /* 垂直居中 */ padding: 0 24px !important; /* 去掉顶部 140px 偏移 */ justify-content: flex-end !important; /* 文字靠右 */ } .prod-hero-overlay > div:first-child { display: none; /* 隐藏左侧空占位 div，文字直接靠右 */ } .prod-hero-overlay .hero-content { padding-top: 0 !important; text-align: right; } .prod-hero-overlay .hero-company { font-size: clamp(16px, 4.5vw, 24px); /* 再缩小，手机端更紧凑 */ letter-spacing: 2px; margin-bottom: 0; } /* 产品介绍图文区：手机端改为单列，图片移到文字上方，文字重新排版 */ .prod-intro-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .prod-intro-img { order: -1; /* 图片排到第一行（文字上方） */ } .prod-intro-text h2 { font-size: 22px !important; margin-bottom: 14px !important; text-align: center; } .prod-intro-text p { font-size: 14px !important; line-height: 1.9 !important; text-align: justify; text-justify: inter-ideograph; } /* 产品页各板块标题（合作伙伴/应用场景/六大范畴/主营系列）：手机端缩小 */ .prod-section-title { font-size: 22px !important; margin-bottom: 24px !important; } /* 产品子页底部按钮（立即咨询/返回系列）：手机端缩小 */ .sub-page-actions .btn, .product-detail-actions .btn { padding: 10px 20px !important; font-size: 13px !important; } .sub-page-actions .btn + .btn { margin-left: 10px !important; } /* 应用场景：手机端改 2 列、图片按原始比例显示（不再固定 180px 高度裁切/拉伸） */ .app-scene-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; grid-template-areas: none !important; gap: 12px !important; } .app-scene-grid > div { grid-area: auto !important; height: auto !important; } .app-scene-grid img { height: auto !important; aspect-ratio: 4 / 3; /* 统一比例，完整显示不拉伸 */ object-fit: cover !important; } /* 产品系列卡片：手机端改 2 列、图片高度自适应（取消固定高度拉伸）。用 .accordion-body 作根选择器，覆盖手风琴内所有产品卡网格（含 2/3/4/5 列） */ .accordion-body div[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-bottom: 0 !important; } .accordion-body div[style*="grid-template-columns"] img { height: 120px !important; object-fit: contain !important; } .accordion-body div[style*="grid-template-columns"] > a > div:first-child { font-size: 10px !important; padding: 5px 4px !important; letter-spacing: 0 !important; word-break: break-all; line-height: 1.3; } /* 产品系列手风琴：手机端收紧内边距、标题缩小避免两行过多占高 */ .accordion-body { padding: 20px 16px !important; } .accordion-header { padding: 16px 20px !important; } .accordion-header h3 { font-size: 16px !important; } /* 工业吊装六大范畴：手机端改 3 列，图片高度自适应不拉伸 */ .six-cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .six-cat-grid img { height: 100px !important; object-fit: cover !important; } .hero-title, .hero-badge, .hero-subtitle { font-size: 18px; } .hero-actions { padding-left: 0; justify-content: center; } .hero-stats { gap: 28px; flex-wrap: wrap; } .stat-number { font-size: 28px; } .section { padding: 70px 0; } /* 首页「关于我们」深蓝板块须保持满铺（内部 .about-container 自带内边距），不能套用通用 .section 的 70px padding，否则蜂巢图上/下方会各多出一条蓝色空隙 */ .about-section { padding: 0; } /* 收紧「产品&服务风琴」与下方「核心优势」板块之间的空白（手机端纵向无需过大间距） */ .accordion-section { padding-bottom: 36px; } .advantages-section { padding-top: 36px; } /* 「关于富泓臻」子页各板块：手机端收紧上下内边距（桌面为 100px）。 Hero 正下方的公司简介板块顶部额外收紧，消除主图与内容之间的大块空白 */ .about-profile-section, .about-brand-section, .about-gallery-section, .about-cert-section { padding: 48px 0; } .about-profile-section { padding-top: 32px; } /* 公司简介标题（公司全称 17 字）：手机端缩小并强制一行显示，字号随屏宽自适应 */ .about-profile-content h2 { font-size: clamp(18px, 5.3vw, 25px); line-height: 1.35; white-space: nowrap; margin-bottom: 20px; } /* 品牌释义标题（17 字）：手机端缩小并强制一行显示 */ .about-brand-section .section-title { font-size: clamp(17px, 5.2vw, 24px); white-space: nowrap; } .section-title { font-size: 30px; } /* 产品&服务 / 核心优势板块描述文字：手机端缩小并强制一行显示（两句约 27~28 字，用 vw 随屏宽缩放，375px 屏约 11.6px、480px 约 15px） */ .accordion-section .section-desc, .advantages-section .section-desc { font-size: clamp(11px, 3.1vw, 15px); line-height: 1.5; white-space: nowrap; margin-left: auto; margin-right: auto; } .accordion-panel-title { font-size: 15px; } .accordion-panel-content { padding: 24px; } /* 移动端重置各面板的特殊文字位置，统一在底部 */ .accordion-panel:nth-child(1) .accordion-panel-content, .accordion-panel:nth-child(2) .accordion-panel-content, .accordion-panel:nth-child(3) .accordion-panel-content, .accordion-panel:nth-child(4) .accordion-panel-content, .accordion-panel:nth-child(5) .accordion-panel-content { bottom: 0; top: auto; left: 0; right: 0; max-width: none; text-align: left; transform: translateY(20px); } .accordion-panel-title-expanded { font-size: 20px; } .accordion-panel-desc { font-size: 13px; } .advantages-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .contact-form { padding: 28px 20px; } /* 页脚手机端：品牌区与联系信息整行，快速导航 / 主营产品两列并列 */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand { grid-column: 1 / -1; /* 品牌介绍 + 社交图标占满整行 */ } .footer-grid > .footer-col:last-child { grid-column: 1 / -1; /* 联系信息占满整行 */ } .footer-col h4 { margin-bottom: 14px; } .footer-links li { margin-bottom: 10px; } } /* ========== 技术&标准页面 ========== */ /* Hero */ .standards-hero { position: relative; min-height: 720px; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; } .standards-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .standards-hero-content { position: relative; z-index: 2; text-align: right; padding-top: 140px; padding-bottom: 80px; color: #fff; margin-left: auto; /* 覆盖 .container 的 margin: 0 auto，让内容靠右 */ margin-right: 0; } .breadcrumb { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } .breadcrumb a { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: var(--accent-color); } .standards-hero-title { font-size: 48px; font-weight: 800; margin-bottom: 16px; letter-spacing: 2px; margin-right: 80px; /* 仅标题往左移，副标题不动 */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.3); } .standards-hero-subtitle { font-size: 18px; color: rgba(255, 255, 255, 0.95); max-width: 640px; margin: 0 0 0 auto; line-height: 1.6; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.35); } /* 知识卡片 */ .knowledge-section { background: #f8fafc; } .knowledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .knowledge-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; } .knowledge-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1); } .knowledge-card-image { height: 260px; overflow: hidden; background: #f0f4f8; } .knowledge-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .knowledge-card:hover .knowledge-card-image img { transform: scale(1.05); } .knowledge-card-title { padding: 20px; text-align: center; font-size: 17px; font-weight: 700; color: var(--text-primary); } /* 文档下载卡片 */ .documents-section { background: #fff; } .documents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .doc-card { display: flex; align-items: center; gap: 20px; padding: 28px; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: var(--transition); } .doc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); border-color: rgba(0, 180, 216, 0.3); } .doc-card-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(10, 77, 140, 0.1), rgba(0, 180, 216, 0.1)); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary-color); } .doc-card-icon svg { width: 28px; height: 28px; } .doc-card-content { flex: 1; min-width: 0; } .doc-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .doc-card-meta { font-size: 13px; color: var(--text-light); } .doc-card-btn { flex-shrink: 0; padding: 10px 22px; background: var(--primary-color); color: #fff; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--transition); white-space: nowrap; } .doc-card-btn:hover { background: var(--primary-light); transform: translateX(4px); } /* 咨询 CTA */ .consult-banner-section { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 80px 0; color: #fff; text-align: center; } .consult-banner-content h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; } .consult-banner-content p { font-size: 16px; color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 0 auto 28px; line-height: 1.6; } /* 图片放大查看 */ .knowledge-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 22, 40, 0.95); display: none; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity 0.3s ease; } .knowledge-lightbox.active { display: flex; opacity: 1; } .knowledge-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 24px; right: 32px; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; transition: background 0.3s ease; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.25); } /* PDF 在线预览弹窗 */ .pdf-preview-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 22, 40, 0.92); display: none; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity 0.3s ease; } .pdf-preview-overlay.active { display: flex; opacity: 1; } .pdf-preview-box { position: relative; width: 100%; max-width: 1000px; height: 90vh; background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .pdf-preview-title { padding: 16px 60px 16px 24px; font-size: 16px; font-weight: 600; color: var(--text-primary); background: #f8fafc; border-bottom: 1px solid #e8ecf1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdf-preview-box .lightbox-close { top: 10px; right: 14px; width: 36px; height: 36px; font-size: 24px; background: rgba(10, 77, 140, 0.08); color: var(--text-primary); } .pdf-preview-box .lightbox-close:hover { background: rgba(10, 77, 140, 0.18); } .pdf-preview-frame { flex: 1; width: 100%; border: none; background: #f5f6f8; } @media (max-width: 768px) { .pdf-preview-overlay { padding: 12px; } .pdf-preview-box { height: 88vh; } .pdf-preview-title { font-size: 14px; padding: 12px 48px 12px 16px; } } @media (max-width: 1024px) { .knowledge-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .standards-hero { min-height: 520px; } .standards-hero-title { font-size: 34px; } .standards-hero-subtitle { font-size: 15px; } .knowledge-grid { grid-template-columns: 1fr; } .knowledge-card-image { height: 220px; } .documents-grid { grid-template-columns: 1fr; } .doc-card { flex-direction: column; align-items: flex-start; } .doc-card-btn { width: 100%; text-align: center; margin-top: 8px; } .consult-banner-content h2 { font-size: 26px; } } /* ========== 手机端 Hero 主图：锁定图片原始比例 + 小字号文字 ========== 布局参照电脑版（首页左上、关于居中偏右、产品右下、技术标准右中），仅整体缩小；不加任何遮罩/压暗，背景图原色显示，文字靠 text-shadow 保可读。仅 ≤768px 生效，桌面端完全不受影响。 */ @media (max-width: 768px) { /* 导航栏让位（维持之前的修复：不留白缝、不遮图） */ .hero, .page-hero { padding-top: 0; margin-top: 60px !important; } .about-hero { padding-top: 0; } .page-offset { padding-top: 60px !important; } /* --- 首页（文字放图片右侧海面：右对齐、垂直居中；"富泓臻"大、下面三行等大小） --- */ .hero { display: block; min-height: 0; height: auto; aspect-ratio: 2870 / 1392; /* 容器高度由图片比例决定 → cover 即完整显示 */ } .hero-bg-blur { display: none; } .hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 容器比例=图片比例，cover=完整显示、无裁切 */ object-position: center; /* 不压暗、不加遮罩，背景图原色显示 */ } .hero::after { display: none; /* 无遮罩 */ } .hero-container { position: absolute; inset: 0; max-width: 100%; margin: 0; padding: 0 5% 0 38%; /* 左侧 38% 让开吊机/钢丝绳主体，文字落在右侧海面 */ display: flex; flex-direction: column; justify-content: center; /* 垂直居中于海面区域 */ align-items: flex-end; /* 右对齐 */ z-index: 2; transform: none; } /* 桌面版双列布局中的空占位列，手机端不占位 */ .hero-container > div:first-child { display: none; } .hero-content { width: 100%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .hero-company { font-size: 34px; /* "富泓臻" 大一些 */ font-weight: 900; letter-spacing: 4px; line-height: 1.2; margin-bottom: 10px; } /* 下面三行：字号/字重/行高完全一致 */ .hero-badge, .hero-title, .hero-subtitle { font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0; margin: 0; max-width: 100%; } .hero-badge { margin-bottom: 3px; } .hero-title { margin-bottom: 3px; } .hero-cta { font-size: 11px; padding: 6px 14px; margin-top: 6px; } /* --- 关于我们页（参照电脑版：居中、整体右移 23%、靠上） --- */ .about-hero { height: auto; aspect-ratio: 2870 / 1392; } .about-hero-bg-blur { display: none; } .about-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* 不压暗、不加遮罩 */ } .about-hero::after { display: none; /* 无遮罩 */ } .about-hero-content { position: absolute; inset: 0; /* 与电脑版同方向：原 23% 基础上再加一个字距（手机标题字号 22px）右移，再下移 */ --hero-text-right-shift: calc(25% + 28px); --hero-text-down-shift: 7px; transform: translate(var(--hero-text-right-shift), var(--hero-text-down-shift)); padding: 4% 20px 8%; justify-content: flex-start; align-items: center; text-align: center; z-index: 2; } .about-hero-title { font-size: 22px; letter-spacing: 2px; margin-bottom: 6px; } .about-hero-subtitle { font-size: 7px; letter-spacing: 0; max-width: 85%; line-height: 1.5; } /* --- 产品服务页（参照电脑版：文字右对齐、靠下） --- */ .page-hero { height: auto !important; padding: 0 !important; display: block; aspect-ratio: 2870 / 1392; } .page-hero-bg-blur { display: none; } .page-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* 不压暗、不加遮罩 */ } .page-hero::after { display: none; /* 无遮罩 */ } .page-hero-content { position: absolute !important; inset: 0; margin: 0 !important; padding: 10% 16px 12%; align-items: flex-end !important; /* 电脑版：靠右 */ justify-content: flex-end !important; /* 电脑版 align-items: flex-end：靠下 */ text-align: right; max-width: 100%; z-index: 2; } /* 产品页内联字号覆盖 */ .page-hero-content h1 { font-size: 19px !important; margin-bottom: 4px !important; letter-spacing: 1px !important; } .page-hero-content p { font-size: 11px !important; max-width: 75% !important; margin-left: auto; } /* --- 技术&标准页（参照电脑版：文字右对齐、垂直居中） --- */ .standards-hero { display: block; min-height: 0; height: auto; aspect-ratio: 2848 / 1502; background-color: #0c2136; } .standards-hero-bg { position: absolute; inset: 0; background-size: cover !important; background-position: center !important; /* 不压暗、不加遮罩 */ } .standards-hero::after { display: none; /* 无遮罩 */ } .standards-hero-content { position: absolute; inset: 0; padding: 10% 16px; text-align: right; display: flex; flex-direction: column; justify-content: center; /* 电脑版：垂直居中 */ align-items: flex-end; /* 电脑版：靠右 */ z-index: 2; } .standards-hero-title { font-size: 21px; letter-spacing: 1px; margin-right: 0; margin-bottom: 4px; } .standards-hero-subtitle { font-size: 11px; max-width: 75%; margin: 0; } }