/* ============================================ 马英斌个人品牌网站 - 全站统一设计系统 v4.0 核心：信任优先 · 营销转化 · 个人品牌 更新：全站 Hero 统一系统（6种差异化动效 + 统一高度400px） 更新：2026-06-08 ============================================ */ :root { /* 品牌主色 */ --primary: #0a2463; /* 深海蓝 - 信任稳重 */ --primary-mid: #0d47a1; /* 中蓝 */ --primary-light: #1565c0; /* 亮蓝 */ --primary-hover: #08204a; /* 深蓝悬停 */ --primary-dark: #06183a; /* 极深蓝 */ /* 强调色 */ --gold: #d4a017; /* 金色 - 高端专业 */ --gold-light: #f0c040; /* 亮金 */ --gold-bg: #fff8e1; /* 金色背景 */ /* 辅助色 */ --accent-red: #c62828; /* 行动呼吁 */ --accent-green: #2e7d32; /* 成功/合规 */ --accent-orange: #e65100; /* 提醒/热点 */ /* 文字色 */ --text-dark: #1a1a2e; --text-body: #3d4a5c; --text-light: #6b7a8f; --text-muted: #9eaab5; /* 背景色 */ --bg-white: #ffffff; --bg-light: #f5f7fa; --bg-blue: #eef3ff; --bg-dark: #0a1a40; /* 边框 */ --border: #e2e8f0; --border-light: #f0f4f8; /* 阴影 */ --shadow-xs: 0 1px 4px rgba(10,36,99,0.06); --shadow-sm: 0 2px 12px rgba(10,36,99,0.08); --shadow-md: 0 8px 32px rgba(10,36,99,0.12); --shadow-lg: 0 20px 60px rgba(10,36,99,0.18); --shadow-gold: 0 8px 24px rgba(212,160,23,0.25); /* 圆角 */ --r4: 4px; --r8: 8px; --r12: 12px; --r16: 16px; --r24: 24px; --r50: 50px; /* 过渡 */ --ease: all 0.3s cubic-bezier(0.4,0,0.2,1); /* 字体 */ --font: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',sans-serif; } /* ===== 全局基础 ===== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:var(--font); color:var(--text-body); background:var(--bg-white); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; position:relative; } @media (max-width: 575.98px) { html, body { overflow-x: hidden !important; } } a{text-decoration:none;transition:var(--ease)} a:hover{text-decoration:none} /* 选中文字 */ ::selection{background:rgba(10,36,99,0.15);color:var(--primary)} /* 滚动条 */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:var(--bg-light)} ::-webkit-scrollbar-thumb{background:rgba(10,36,99,0.25);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:rgba(10,36,99,0.45)} /* ===== 顶部信任栏 ===== */ .trust-topbar{ background:linear-gradient(90deg,var(--primary) 0%,var(--primary-mid) 100%); color:rgba(255,255,255,0.88); font-size:12px; padding:5px 0; border-bottom:2px solid var(--gold); } .trust-topbar .container{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:6px; } .trust-topbar-item{display:flex;align-items:center;gap:5px;white-space:nowrap} .trust-topbar-item i{color:var(--gold);font-size:13px} .trust-topbar-item a{color:rgba(255,255,255,0.88)!important} .trust-topbar-item a:hover{color:var(--gold)!important} @media(max-width:768px){.trust-topbar{display:none}} /* ===== 主导航 ===== */ .navbar{ background:rgba(255,255,255,0.97)!important; backdrop-filter:blur(20px); border-bottom:1px solid rgba(10,36,99,0.08); box-shadow:0 2px 20px rgba(10,36,99,0.06)!important; padding:0!important; min-height:68px; transition:var(--ease); } .navbar.scrolled{ box-shadow:0 4px 24px rgba(10,36,99,0.12)!important; } .navbar .container{min-height:68px} /* Logo */ .navbar-brand img{height:46px!important;transition:var(--ease)} .navbar-brand:hover img{opacity:0.88} /* 认证徽章 */ .nav-trust-badge{ display:flex;align-items:center;gap:5px; font-size:11px;color:var(--accent-green); background:rgba(46,125,50,0.07); border:1px solid rgba(46,125,50,0.18); border-radius:20px;padding:4px 10px;font-weight:600; flex-shrink:0; } .nav-trust-badge i{font-size:12px} /* 导航链接 — 重设计：强动效 + 金色下划线 + 当前页高亮 */ .navbar-nav .nav-link{ font-size:14px!important;font-weight:600; color:#334155!important; padding:10px 16px!important; position:relative;border-radius:6px; margin:0 3px;letter-spacing:0.5px; transition:all .3s cubic-bezier(.4,0,.2,1)!important; overflow:hidden; } /* 导航链接底部金色滑动下划线 */ .navbar-nav .nav-link::after{ content:'';position:absolute;bottom:4px;left:50%;width:0; height:2.5px;background:linear-gradient(90deg,#d4a017,#f0c040); transition:all .35s cubic-bezier(.4,0,.2,1)!important; border-radius:2px;z-index:1; } /* 悬停效果 */ .navbar-nav .nav-link:hover{ color:#0a2463!important; background:linear-gradient(135deg,rgba(212,160,23,.08),rgba(10,36,99,.06))!important; transform:translateY(-1px); box-shadow:0 4px 12px rgba(10,36,99,.08); } .navbar-nav .nav-link:hover::after{ left:18%;width:64%; } /* 活跃/当前页面 — 金色高亮 + 填充背景 */ .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item.current .nav-link, body[class*="-page"] .navbar-nav .nav-link[href*="{sort:scode}"], .navbar-nav .nav-link.active{ color:#0a2463!important;font-weight:700!important; background:linear-gradient(135deg,rgba(212,160,23,.12),rgba(240,192,64,.06))!important; border:1px solid rgba(212,160,23,.25); box-shadow:0 2px 8px rgba(212,160,23,.15); } .navbar-nav .nav-item.active .nav-link::after, .navbar-nav .nav-item.current .nav-link::after, .navbar-nav .nav-link.active::after{ left:18%!important;width:64%!important; background:linear-gradient(90deg,#d4a017,#f0c040,#d4a017); animation:navUnderlineShine 2s ease-in-out infinite; } @keyframes navUnderlineShine{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%}; } /* 导航项入场动画 */ .navbar-nav .nav-item{ opacity:0;transform:translateY(-8px); animation:navItemDrop .45s ease-out forwards; } .navbar-nav .nav-item:nth-child(1){animation-delay:.05s;} .navbar-nav .nav-item:nth-child(2){animation-delay:.1s;} .navbar-nav .nav-item:nth-child(3){animation-delay:.15s;} .navbar-nav .nav-item:nth-child(4){animation-delay:.2s;} .navbar-nav .nav-item:nth-child(5){animation-delay:.25s;} .navbar-nav .nav-item:nth-child(6){animation-delay:.3s;} .navbar-nav .nav-item:nth-child(7){animation-delay:.35s;} .navbar-nav .nav-item:nth-child(8){animation-delay:.4s;} .navbar-nav .nav-item:nth-child(9){animation-delay:.45s;} .navbar-nav .nav-item:nth-child(10){animation-delay:.5s;} @keyframes navItemDrop{ to{opacity:1;transform:translateY(0);} } /* 汉堡 */ .navbar-toggler{ border:none!important;outline:none!important; padding:8px 10px;border-radius:var(--r4); order:2; /* 移动端：搜索图标之后、导航菜单之前 */ background:rgba(10,36,99,0.07)!important; } .navbar-toggler:focus{box-shadow:none!important} /* 登录按钮 */ .navbar-text a{ font-size:12px;color:var(--primary)!important; background:rgba(10,36,99,0.07); padding:5px 14px;border-radius:20px; border:1px solid rgba(10,36,99,0.15); transition:var(--ease);text-decoration:none!important; } .navbar-text a:hover{ background:var(--primary)!important;color:white!important; } @media(max-width:991px){ .navbar-collapse{ background:white;border-top:1px solid var(--border); padding:12px 0;box-shadow:0 8px 24px rgba(0,0,0,0.08); } .navbar-nav .nav-link{padding:14px 20px!important;border-radius:0!important;margin:0!important;border-bottom:1px solid var(--border-light);font-size:15px!important;font-weight:600!important;transition:all .25s ease!important;} .navbar-nav .nav-link::after{display:none} .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-link.active{ color:#0a2463!important; background:linear-gradient(90deg,rgba(212,160,23,.12),transparent)!important; border-left:3px solid #d4a017; padding-left:17px!important; } .nav-trust-badge{display:none} .navbar-text{padding:12px 20px} } /* 占位 */ .head-placeholder{height:68px} @media(max-width:576px){.head-placeholder{height:58px!important}.navbar-brand img{height:38px!important}} /* ===== 首页英雄区 ===== */ .hero-section{ min-height:520px;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%); display:flex;align-items:center; } .hero-section::before{ content:'';position:absolute;inset:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero-section::after{ content:'';position:absolute;bottom:-2px;left:0;right:0;height:80px; background:linear-gradient(to bottom,transparent,var(--bg-white)); } .hero-content{ position:relative;z-index:2; color:white;text-align:center;padding:80px 0 120px; } .hero-badge{ display:inline-flex;align-items:center;gap:6px; background:rgba(212,160,23,0.18);border:1px solid rgba(212,160,23,0.35); color:var(--gold-light);border-radius:20px;padding:5px 16px;font-size:12px; font-weight:600;letter-spacing:1px;margin-bottom:20px; } .hero-title{ font-size:2.8rem;font-weight:800;letter-spacing:2px; text-shadow:0 4px 20px rgba(0,0,0,0.3);margin-bottom:16px;line-height:1.2; } .hero-title span{color:var(--gold-light)} .hero-sub{ font-size:1.1rem;opacity:0.88;max-width:600px; margin:0 auto 28px;line-height:1.8; } .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn-primary-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--primary-dark);border:none; padding:12px 32px;border-radius:var(--r24); font-size:15px;font-weight:700;cursor:pointer; box-shadow:var(--shadow-gold);transition:var(--ease); display:inline-flex;align-items:center;gap:8px; } .btn-primary-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(212,160,23,0.4); color:var(--primary-dark); } .btn-outline-white{ background:transparent;border:2px solid rgba(255,255,255,0.5); color:white;padding:10px 28px;border-radius:var(--r24); font-size:15px;font-weight:500;cursor:pointer;transition:var(--ease); display:inline-flex;align-items:center;gap:8px; } .btn-outline-white:hover{ background:rgba(255,255,255,0.12);border-color:white; color:white;transform:translateY(-2px); } /* 信任徽章行 */ .hero-trust-row{ display:flex;justify-content:center;gap:16px;flex-wrap:wrap; margin-top:36px; } .hero-trust-item{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:var(--r16);padding:10px 18px; display:flex;align-items:center;gap:8px; font-size:13px;color:rgba(255,255,255,0.88); backdrop-filter:blur(10px); } .hero-trust-item i{color:var(--gold-light);font-size:16px} .hero-trust-item strong{color:white;font-weight:600} @media(max-width:768px){ .hero-title{font-size:1.8rem} .hero-sub{font-size:0.95rem} .hero-section{min-height:420px} } /* ===== 首页幻灯片 ===== */ .swiper-container{box-shadow:var(--shadow-lg)} .swiper-slide{position:relative;overflow:hidden} .swiper-slide img{transition:transform 8s ease} .swiper-container:hover .swiper-slide-active img{transform:scale(1.03)} .swiper-button-prev,.swiper-button-next{ background:rgba(255,255,255,0.15)!important; backdrop-filter:blur(8px);border-radius:50%!important; width:48px!important;height:48px!important; border:2px solid rgba(255,255,255,0.3)!important; } .swiper-button-prev::after,.swiper-button-next::after{font-size:16px!important;color:white;font-weight:bold} .swiper-pagination-bullet{width:8px!important;height:8px!important;background:rgba(255,255,255,0.6)!important;border:2px solid white!important;opacity:1!important} .swiper-pagination-bullet-active{background:white!important;width:20px!important;border-radius:4px!important} /* ===== 通用区块标题 ===== */ .section-header{ text-align:center;padding:60px 0 40px; } @media(max-width:768px){.section-header{padding:24px 0 16px}} @media(max-width:768px){.section-header h2{font-size:1.5rem}} .section-header h2{ font-size:1.9rem;font-weight:800; color:var(--primary);letter-spacing:1px;margin-bottom:8px; } .section-header h2 .gold{color:var(--gold)} .section-header p{ color:var(--text-light);font-size:14px;margin-top:6px; } .section-header .line{ width:50px;height:3px; background:linear-gradient(90deg,var(--primary),var(--gold)); border-radius:2px;margin:14px auto 0; } .section-header .sub-line{ width:80px;height:1px; background:var(--border);margin:8px auto 0; } /* ===== 统计数字区 ===== */ .stats-section{ background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%); color:white;padding:48px 0;position:relative;overflow:hidden; } .stats-section::before{ content:'';position:absolute;top:-40%;right:-15%; width:500px;height:500px;border-radius:50%; background:rgba(255,255,255,0.04);pointer-events:none; } .stats-section .row{position:relative;z-index:1} .stat-item{ text-align:center;padding:20px 16px; transition:var(--ease); } .stat-item:hover{transform:translateY(-4px)} .stat-icon{ width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.2); display:flex;align-items:center;justify-content:center; margin:0 auto 12px; } .stat-icon i{font-size:22px;color:var(--gold-light)} .stat-num{ font-size:2.4rem;font-weight:800;color:var(--gold-light); line-height:1;margin-bottom:6px; } .stat-label{font-size:13px;opacity:0.85} /* ===== 自我介绍区块 ===== */ .about-intro-section{padding:60px 0;background:var(--bg-white)} .about-intro-section .row{align-items:center} /* ---- 人像卡片（长方形展示） ---- */ .about-photo-card{ width:100%;max-width:340px;margin:0 auto; } .about-photo-frame{ position:relative;width:100%; border-radius:var(--r16);overflow:hidden; box-shadow:var(--shadow-lg); background:var(--bg-white); aspect-ratio:3/4; /* 合理的人像竖版比例 */ display:flex;align-items:center;justify-content:center; } .about-photo-img{ width:100%;height:100%; object-fit:contain; /* 原图完整显示，不裁剪 */ display:block; } /* ---- 文字侧 ---- */ .about-text h2{ font-size:1.8rem;font-weight:800;color:var(--primary); margin-bottom:8px;line-height:1.3; } .about-text .name-badge{ display:inline-flex;align-items:center;gap:6px; background:var(--gold-bg);border:1px solid rgba(212,160,23,0.3); color:var(--gold);border-radius:var(--r24); padding:5px 14px;font-size:12px;font-weight:600;margin-bottom:16px; } .about-text p{color:var(--text-body);line-height:1.9;margin-bottom:12px;font-size:15px} .about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .about-tag{ background:var(--bg-blue);color:var(--primary); border-radius:var(--r24);padding:6px 14px; font-size:13px;font-weight:500; border:1px solid rgba(10,36,99,0.1); display:flex;align-items:center;gap:5px; } @media(max-width:768px){.service-section{padding:24px 0}} /* 移动端服务卡片只显示前4个 */ @media(max-width:767px){ .service-section .row > div:nth-child(n+5) { display: none; } } .service-card{ background:white;border-radius:var(--r16); padding:28px 24px;text-align:center; border:1px solid var(--border); box-shadow:var(--shadow-xs); transition:var(--ease);position:relative;overflow:hidden; } .service-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--primary),var(--gold)); transform:scaleX(0);transition:var(--ease); } .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(10,36,99,0.15); } .service-card:hover::before{transform:scaleX(1)} .service-icon{ width:64px;height:64px;border-radius:var(--r16); background:linear-gradient(135deg,var(--primary),var(--primary-mid)); display:flex;align-items:center;justify-content:center; margin:0 auto 16px;box-shadow:0 8px 20px rgba(10,36,99,0.2); transition:var(--ease); } .service-card:hover .service-icon{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); box-shadow:var(--shadow-gold); } .service-icon i{font-size:26px;color:white} .service-card h5{font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:8px} .service-card p{font-size:13px;color:var(--text-light);line-height:1.7;margin:0} /* 移动端服务卡片描述最多两行 */ @media(max-width:768px){ .service-card p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* ===== 知识文章列表 ===== */ .knowledge-section{padding:60px 0;background:var(--bg-white)} @media(max-width:768px){.knowledge-section{padding:24px 0}} .knowledge-card{ display:flex;align-items:center; padding:16px;background:white; border:1px solid var(--border);border-radius:var(--r12); transition:var(--ease);box-shadow:var(--shadow-xs); margin-bottom:10px;text-decoration:none!important; } .knowledge-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-sm); transform:translateX(4px); } .knowledge-card .k-icon{ width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-mid)); display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-right:14px; } .knowledge-card .k-icon i{color:white;font-size:16px} .knowledge-card .k-body{flex:1;min-width:0} .knowledge-card .k-title{ font-size:15px;font-weight:600;color:var(--text-dark); margin-bottom:4px;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:var(--ease); } .knowledge-card:hover .k-title{color:var(--primary)} /* 三列紧凑列表样式 */ .k-category-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); } .k-compact { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 2px; border-radius: 6px; text-decoration: none !important; transition: background 0.15s; } .k-compact:hover { background: var(--bg-light); } .k-compact-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary-light); flex-shrink: 0; } .k-compact-title { flex: 1; min-width: 0; font-size: 13px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; } .k-compact:hover .k-compact-title { color: var(--primary); } .k-compact-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } /* 金融计算器区域 */ .calc-section { padding: 60px 0; background: var(--bg-light); } @media(max-width:768px){.calc-section{padding:24px 0}} .knowledge-card .k-meta{ display:flex;align-items:center;gap:12px; font-size:12px;color:var(--text-muted); } .knowledge-card .k-badge{ background:var(--gold-bg);color:var(--gold); border-radius:var(--r24);padding:2px 10px; font-size:11px;font-weight:600; } /* ===== 客户评价 ===== */ .testimonial-section{ padding:60px 0;background:var(--bg-light); } @media(max-width:768px){.testimonial-section{padding:24px 0}} .testimonial-card{ background:white;border-radius:var(--r16); padding:24px;border:1px solid var(--border); box-shadow:var(--shadow-xs);position:relative; transition:var(--ease); } .testimonial-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); } .testimonial-card::before{ content:'"';position:absolute;top:12px;right:16px; font-size:48px;color:rgba(10,36,99,0.08); font-family:Georgia,serif;line-height:1; } .testi-stars{color:var(--gold);font-size:13px;margin-bottom:10px} .testi-text{ font-size:14px;color:var(--text-body);line-height:1.8; margin-bottom:16px;font-style:italic; } .testi-author{display:flex;align-items:center;gap:10px} .testi-avatar{ width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:white;font-size:16px;font-weight:700; flex-shrink:0; } .testi-name{font-weight:700;color:var(--text-dark);font-size:14px} .testi-job{font-size:12px;color:var(--text-muted)} .testi-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .testi-tag{ background:var(--bg-blue);color:var(--primary); border-radius:var(--r24);padding:2px 10px;font-size:11px;font-weight:500; } /* ===== 招聘区块 ===== */ .recruit-section{ padding:60px 0; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%); color:white;position:relative;overflow:hidden; } .recruit-section::before{ content:'';position:absolute;inset:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); } .recruit-section .section-header h2{color:white} .recruit-section .section-header p{color:rgba(255,255,255,0.7)} .recruit-section .section-header .line{background:linear-gradient(90deg,var(--gold),rgba(255,255,255,0.5))} .recruit-card{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:var(--r16);padding:24px; backdrop-filter:blur(10px); transition:var(--ease); } .recruit-card:hover{ background:rgba(255,255,255,0.15); transform:translateY(-4px); border-color:rgba(212,160,23,0.5); } .recruit-card h5{font-size:16px;font-weight:700;margin-bottom:8px;color:white} .recruit-card p{font-size:13px;opacity:0.8;line-height:1.7;margin:0} .recruit-card .rc-icon{ width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-light)); display:flex;align-items:center;justify-content:center; margin-bottom:12px; } .recruit-card .rc-icon i{font-size:18px;color:var(--primary-dark)} /* ===== CTA横幅 ===== */ .cta-section{ background: linear-gradient(135deg,#846c2b,#ffbb06); padding:48px 0;text-align:center; position:relative;overflow:hidden; } @media(max-width:768px){.cta-section{padding:20px 0}} .cta-section::before{ content:'';position:absolute;top:-50%;right:-10%; width:400px;height:400px;border-radius:50%; background:rgba(255,255,255,0.1); } .cta-section h2{font-size:1.8rem;font-weight:800;color:var(--primary-dark);margin-bottom:10px} .cta-section p{color:rgba(10,36,99,0.7);font-size:15px;margin-bottom:24px} .cta-phone{ font-size:2.2rem;font-weight:800;color:var(--primary-dark); letter-spacing:2px;margin-bottom:16px; } .btn-dark-cta{ background:var(--primary-dark);color:white; padding:14px 36px;border-radius:var(--r24); font-size:15px;font-weight:700;cursor:pointer; border:none;transition:var(--ease); display:inline-flex;align-items:center;gap:8px; box-shadow:0 8px 24px rgba(10,36,99,0.3); } .btn-dark-cta:hover{ background:var(--primary); transform:translateY(-2px); box-shadow:0 12px 32px rgba(10,36,99,0.4); color:white; } /* 移动端小屏隐藏CTA区块 */ @media(max-width:480px){.cta-section{display:none!important}} /* ===== 资质认证 ===== */ .cert-section{padding:60px 0;background:var(--bg-white)} @media(max-width:768px){.cert-section{padding:24px 0}} .cert-card{ text-align:center;padding:24px 16px; border:1px solid var(--border);border-radius:var(--r16); background:white;transition:var(--ease); } .cert-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--primary); } .cert-icon{ width:60px;height:60px;border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-mid)); display:flex;align-items:center;justify-content:center; margin:0 auto 14px; box-shadow:0 8px 20px rgba(10,36,99,0.2); } .cert-icon i{font-size:26px;color:white} .cert-card h5{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:6px} .cert-card p{font-size:12px;color:var(--text-light);line-height:1.7;margin:0} /* ===== 栏目页页头 ===== */ .page-hero{ min-height:200px;display:flex;align-items:center; position:relative;overflow:hidden; background: linear-gradient(135deg,#030c22 0%,#2a4773 100%); } .page-hero::before{ content:'';position:absolute;inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); } .page-hero .container{position:relative;z-index:1;padding:50px 15px} .page-hero h1{ font-size:2rem;font-weight:800;color:white; text-shadow:0 2px 12px rgba(0,0,0,0.3);margin-bottom:6px;letter-spacing:1px; } .page-hero p{color:rgba(255,255,255,0.75);font-size:14px} /* 面包屑 */ .position{ padding:10px 0;margin-bottom:0!important; font-size:13px;color:var(--text-light)!important; border-bottom:1px solid var(--border); background:var(--bg-white); } .position a{color:var(--primary)!important;transition:var(--ease)} .position a:hover{color:var(--gold)!important;text-decoration:none} /* 分类标签 */ .sonsort{ display:flex;flex-wrap:wrap;gap:8px; padding:16px 0;border-bottom:2px solid var(--border); margin-bottom:24px!important; } .sonsort .btn{ border-radius:20px!important;font-size:13px; padding:6px 16px;border:1px solid var(--border); font-weight:500;transition:var(--ease); } .sonsort .btn-light{background:white;color:var(--text-body)} .sonsort .btn-light:hover{background:rgba(10,36,99,0.07);color:var(--primary);border-color:var(--primary)} .sonsort .btn-info{ background:linear-gradient(135deg,var(--primary),var(--primary-mid))!important; border-color:var(--primary)!important;color:white!important; box-shadow:0 4px 12px rgba(10,36,99,0.25)!important; } /* ===== 列表页容器 ===== */ .pages{min-height:500px;padding:24px 0 48px} @media (max-width: 575.98px) { .pages, .container-fluid { overflow-x: hidden !important; } } /* ===== 产品/服务详情卡片 ===== */ .product-card{ background:white;border-radius:var(--r16); border:1px solid var(--border);overflow:hidden; transition:var(--ease);box-shadow:var(--shadow-xs); margin-bottom:16px; } .product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:rgba(10,36,99,0.15); } .product-card-img{ height:180px;overflow:hidden; } .product-card-img img{ width:100%;height:100%;object-fit:cover; transition:var(--ease); } .product-card:hover .product-card-img img{transform:scale(1.05)} .product-card-body{padding:16px} .product-card-body h5{ font-size:16px;font-weight:700;color:var(--text-dark); margin-bottom:8px;line-height:1.4; } .product-card-body h5 a{color:var(--text-dark);transition:var(--ease)} .product-card-body h5 a:hover{color:var(--primary)} .product-card-body p{font-size:13px;color:var(--text-light);line-height:1.7;margin:0} .product-card-footer{ display:flex;align-items:center;justify-content:space-between; padding:12px 16px;border-top:1px solid var(--border-light); font-size:12px;color:var(--text-muted); } /* ===== 招聘详情卡片 ===== */ .job-card{ background:white;border-radius:var(--r16); border:1px solid var(--border);padding:20px; transition:var(--ease);box-shadow:var(--shadow-xs); margin-bottom:12px; } .job-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--primary); } .job-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .job-card-title{font-size:16px;font-weight:700;color:var(--text-dark)} .job-card-salary{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--primary-dark);border-radius:var(--r24); padding:4px 12px;font-size:12px;font-weight:700; white-space:nowrap;flex-shrink:0; } .job-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .job-tag{ background:var(--bg-blue);color:var(--primary); border-radius:var(--r24);padding:3px 12px;font-size:12px; border:1px solid rgba(10,36,99,0.1); } .job-card-desc{font-size:13px;color:var(--text-light);line-height:1.7;margin-bottom:12px} .job-card-footer{display:flex;align-items:center;justify-content:space-between} .job-card-contact{ display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-muted); } .job-card-contact i{margin-right:4px} .btn-apply{ background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:white;border:none;padding:8px 20px; border-radius:var(--r24);font-size:13px;font-weight:600; cursor:pointer;transition:var(--ease); box-shadow:0 4px 12px rgba(10,36,99,0.25); } .btn-apply:hover{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--primary-dark);transform:translateY(-1px); } /* ===== 内容详情页（增强排版 v4.0） ===== */ .content{ color:var(--text-body)!important; line-height:2!important; font-size:15.5px; padding:5px 0; } /* -- 标题层级 -- */ .content h1, .content h2, .content h3, .phil-content h2, .phil-content h3{ color:var(--text-dark); font-weight:700; margin:32px 0 14px; } .content h1{font-size:1.6rem; border-left:4px solid var(--gold); padding-left:14px;} /* 隐藏文章内容区内的第一个h1（标题已在Hero显示，避免重复） */ .phil-content > h1:first-child, .article-content > h1:first-child, .phil-content h1:first-of-type, .article-content h1:first-of-type{ display:none !important; } .content h2{ font-size:1.3rem; border-left:4px solid var(--cat-accent, var(--gold)); padding:8px 0 8px 16px; position:relative; } .content h2::after{ content:''; position:absolute; bottom:0; left:0; width:40px; height:2px; background:var(--cat-accent, var(--gold)); border-radius:1px; } .content h3{font-size:1.1rem; font-weight:600; color:var(--text-dark);} /* -- 段落 -- */ .content p, .phil-content p{margin-bottom:1.2em; line-height:2;} /* -- 图片 -- */ .content img, .phil-content img{ max-width:100%;height:auto; border-radius:10px;margin:1.5em 0; box-shadow:0 4px 20px rgba(10,36,99,0.08); } /* -- 列表 -- */ .content ul, .content ol, .phil-content ul, .phil-content ol{padding-left:1.6em;margin-bottom:1.4em;} .content ul li, .content ol li, .phil-content ul li, .phil-content ol li{margin-bottom:8px;line-height:1.9;} /* -- 引用块 -- */ .content blockquote{ margin:1.5em 0; padding:20px 24px; border-left:3px solid var(--cat-accent, var(--gold)); background:var(--cat-accent-l, rgba(212,160,23,0.04)); border-radius:0 8px 8px 0; color:var(--text-body); font-style:normal; font-size:0.95rem; line-height:1.9; } /* -- 分隔线 -- */ .content hr, .phil-content hr{ border:none;height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:36px 0; } /* ===== 内容排版增强组件 v4.0 ===== */ /* 要点高亮卡（金色提示） */ .content .key-point, .phil-content .key-point{ margin:24px 0; padding:20px 24px; background:linear-gradient(135deg,#fffdf5,#fff8e0); border:1px solid rgba(212,160,23,0.2); border-left:4px solid var(--gold); border-radius:0 10px 10px 0; font-size:0.95rem; line-height:2; } /* 信息框（蓝色专业提示） */ .content .info-box, .phil-content .info-box{ margin:24px 0; padding:20px 24px; background:#f0f7ff; border:1px solid rgba(10,36,99,0.12); border-left:4px solid var(--primary); border-radius:0 10px 10px 0; font-size:0.93rem; line-height:1.9; } /* 警示框（红色风险提示） */ .content .warning-box, .phil-content .warning-box{ margin:24px 0; padding:20px 24px; background:#fff5f5; border:1px solid rgba(220,53,69,0.15); border-left:4px solid #dc3545; border-radius:0 10px 10px 0; font-size:0.93rem; line-height:1.9; } /* 数据高亮（数字/关键词下划线强调） */ .content .data-highlight, .phil-content .data-highlight{ display:inline; background:linear-gradient(180deg,transparent 60%,var(--cat-accent-l,#eef3ff) 60%); padding:0 3px; font-weight:700; color:var(--cat-accent, var(--primary)); } /* 增强表格 */ .content table, .phil-content table{ width:100%;margin:24px 0; border-collapse:separate;border-spacing:0; border-radius:10px;overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.06); font-size:14px; } .content table thead, .phil-content table thead{ background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; } .content table th, .phil-content table th{ padding:13px 16px;font-weight:600;text-align:left; } .content table td, .phil-content table td{ padding:11px 16px;border-bottom:1px solid rgba(0,0,0,0.05); color:var(--text-body); } .content table tbody tr:nth-child(even), .phil-content table tbody tr:nth-child(even){background:#faf9f7;} .content table tbody tr:hover, .phil-content table tbody tr:hover{background:#fff8e0;} /* 文章内链接增强 */ .content a[href^="http"], .phil-content a[href^="http"]{ color:#2563eb; text-decoration:underline; font-weight:500; } .content a[href^="http"]:hover, .phil-content a[href^="http"]:hover{color:#1d4ed8;} /* -- cta-section 嵌入内容区（知识文章内的 CTA 文字） -- */ .content .cta-section{ margin:28px 0; padding:20px 24px; background:linear-gradient(135deg,#f0f7ff,#eef3ff); border-radius:10px; border:1px solid rgba(10,36,99,0.1); text-align:center; } .content .cta-section p{ margin:0 0 8px; font-size:0.9rem; color:var(--text-body); } .content .cta-section p:last-child{margin:0;} .content .cta-section strong{ font-size:0.95rem; color:var(--primary); } /* ===== 文章引用标注与参考文献 ===== */ .aw-ref-sup{ font-size:0.75em; color:#6b7280; vertical-align:super; line-height:1; margin-left:2px; } .aw-ref-sup:hover{ color:#047857; text-decoration:underline; } .aw-ref-section{ margin-top:20px; padding-top:16px; border-top:1px dashed #d1d5db; text-align:left !important; } .aw-ref-title{ font-size:14px; font-weight:600; color:#6b7280; margin-bottom:10px; text-align:left !important; } .aw-ref-item{ font-size:13px; color:#6b7280; line-height:1.8; padding:3px 0; text-align:left !important; } .aw-ref-num{ color:#9ca3af; margin-right:6px; font-weight:500; } .aw-ref-item a{ color:#2563eb; text-decoration:underline; font-weight:600; } .aw-ref-item a:hover{ color:#1d4ed8; } /* ===== 文章底部参考资料区（灰色小字） ===== */ .references-section{ margin-top:36px; padding:20px 24px; background:#f9fafb; border-radius:8px; border:1px solid #e5e7eb; } .references-section h3{ font-size:15px; font-weight:600; color:#4b5563; margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed #d1d5db; } .references-section .ref-list{ list-style:none; padding:0; margin:0; } .references-section .ref-list li{ font-size:13px; color:#6b7280; line-height:1.8; padding:3px 0; } .references-section .ref-list li a{ color:#2563eb; text-decoration:underline; } /* ===== 文章底部免责声明区（灰色小字） ===== */ .disclaimer-section{ margin-top:20px; padding:16px 20px; background:#f3f4f6; border-radius:6px; font-size:12.5px; color:#6b7280; line-height:1.7; } .disclaimer-section strong{ color:#4b5563; } /* --- 服务页专属卡片样式 --- */ #mybjz-article { background-color: #ffffff; padding: 30px 28px; border-radius: 14px; box-shadow: 0 8px 24px rgba(40, 60, 90, 0.08); border: 1px solid rgba(40, 60, 90, 0.06); margin-top: 20px; max-width: 1500px; margin-left: auto; margin-right: auto; } /* 服务页内部段落优化 */ #mybjz-article p { line-height: 1.8; color: #333; margin-bottom: 15px; } /* 兼容原有 .aw-body 宽度限制 */ #mybjz-article .aw-body { max-width: 1500px; margin: 0 auto; padding: 0; /* 避免双重 padding */ } /* 章节标题：金色左框 + 底部装饰线 */ #mybjz-article .aw-h2{ font-size:22px;font-weight:700;color:var(--text-dark); border-left:5px solid var(--gold);padding:8px 0 8px 18px; margin:36px 0 20px;position:relative; line-height:1.4; } #mybjz-article .aw-h2::after{ content:'';position:absolute;left:0;bottom:-6px; width:60px;height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:2px; } #mybjz-article .aw-h2 .fa,#mybjz-article .aw-h2 .bi{ margin-right:8px;color:var(--gold); } /* 三级标题 */ #mybjz-article .aw-h3{ font-size:18px;font-weight:600;color:var(--text-dark); padding-left:14px;margin:28px 0 14px; position:relative;line-height:1.5; } #mybjz-article .aw-h3::before{ content:'';position:absolute;left:0;top:8px; width:6px;height:20px; background:linear-gradient(180deg,var(--gold),var(--gold-light)); border-radius:3px; } /* 段落：舒适行高 + 首行缩进 */ #mybjz-article .aw-p{ font-size:16px;line-height:2;color:#3d3d3d; text-indent:2em;margin-bottom:16px; } /* 强调文本 */ #mybjz-article .aw-strong{ font-weight:700;color:var(--primary); background:linear-gradient(180deg,transparent 60%,rgba(212,175,55,0.15) 60%); padding:0 4px; } /* 关键词标签 */ #mybjz-article .aw-kw { align-items: center; justify-content: center; background: linear-gradient(135deg, #33ffcf, #ffd564); color: var(--primary-dark); font-weight: 700; height: 24px; box-sizing: border-box; border-radius: var(--r24); margin: 0 2px; } /* 列表项 */ #mybjz-article .aw-list{ list-style:none;padding:0;margin:0 0 18px 10px; } #mybjz-article .aw-list li{ position:relative;padding:8px 0 8px 30px; font-size:15px;line-height:1.8;color:#3d3d3d; border-bottom:1px dashed rgba(0,0,0,0.06); } #mybjz-article .aw-list li:last-child{border-bottom:none} #mybjz-article .aw-list li::before{ content:'\f00c';font-family:FontAwesome; position:absolute;left:0;top:10px; color:var(--gold);font-size:14px;font-weight:700; } #mybjz-article .aw-list.aw-list-star li::before{content:'\f005'} /* 星标 */ #mybjz-article .aw-list.aw-list-angle li::before{content:'\f138'} /* 箭头 */ #mybjz-article .aw-list.aw-list-check li::before{content:'\f00c'} /* 勾选 */ #mybjz-article .aw-list.aw-list-circle li::before{content:'\f111';font-size:8px;top:15px} /* 圆点 */ /* 提示框 */ #mybjz-article .aw-tip{ position:relative; background:linear-gradient(135deg,#fffdf5,#fff8e0); border:1px solid rgba(212,175,55,0.3); border-left:4px solid var(--gold); border-radius:var(--r12); padding:18px 20px 18px 52px; margin:24px 0;font-size:15px;line-height:1.8; box-shadow:0 2px 8px rgba(212,175,55,0.08); } #mybjz-article .aw-tip::before{ content:'\f0eb';font-family:FontAwesome; position:absolute;left:18px;top:18px; font-size:22px;color:var(--gold); } #mybjz-article .aw-tip.aw-tip-warning{ background:linear-gradient(135deg,#fff5f5,#ffe8e8); border-color:rgba(220,53,69,0.25); border-left-color:#dc3545; } #mybjz-article .aw-tip.aw-tip-warning::before{ content:'\f071';color:#dc3545; } #mybjz-article .aw-tip.aw-tip-info{ background:linear-gradient(135deg,#f0f7ff,#e3efff); border-color:rgba(13,110,253,0.2); border-left-color:#0d6efd; } #mybjz-article .aw-tip.aw-tip-info::before{ content:'\f129';color:#0d6efd; } /* 表格美化 */ #mybjz-article .aw-table{ width:100%;margin:24px 0; border-collapse:separate;border-spacing:0; border-radius:var(--r12);overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); font-size:14px; } #mybjz-article .aw-table thead{ background:linear-gradient(135deg,var(--primary),#153e7a); color:#fff; } #mybjz-article .aw-table th{ padding:14px 16px;font-weight:600;text-align:left; font-size:15px; } #mybjz-article .aw-table td{ padding:12px 16px;color:#3d3d3d; border-bottom:1px solid rgba(0,0,0,0.05); } #mybjz-article .aw-table tbody tr:nth-child(even){background:#faf9f7} #mybjz-article .aw-table tbody tr:hover{background:#fff8e0} /* 插图容器 */ #mybjz-article .aw-figure{ margin:24px auto;text-align:center; max-width:700px; } #mybjz-article .aw-figure svg{ max-width:100%;border-radius:var(--r12); box-shadow:0 4px 20px rgba(0,0,0,0.08); } #mybjz-article .aw-figure figcaption{ margin-top:8px;font-size:13px;color:var(--text-muted); font-style:italic; } /* 分隔线 */ #mybjz-article .aw-divider{ text-align:center;margin:32px 0; position:relative;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); border:none; } #mybjz-article .aw-divider::before{ content:'\f0c8';font-family:FontAwesome; position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); color:var(--gold);font-size:8px; background:#fff;padding:0 12px; } /* 文章顶部信息栏 */ .article-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding:12px 16px;background:var(--bg-light); border-radius:var(--r12);margin-bottom:20px; font-size:13px;color:var(--text-muted); } .article-meta span{display:flex;align-items:center;gap:4px} .article-meta .trust-tag{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--primary-dark);border-radius:var(--r24); padding:3px 12px;font-size:12px;font-weight:700; } /* 上下篇 */ .pre-next{ display:flex;gap:12px;margin-top:24px;margin-bottom:14px; padding-top:20px;border-top:1px solid var(--border); } .pre-next a{ flex:1;padding:12px 16px;border:1px solid var(--border); border-radius:var(--r12);font-size:13px;color:var(--text-body); transition:var(--ease);text-decoration:none; } .pre-next a:hover{border-color:var(--primary);background:var(--bg-blue);color:var(--primary)} .pre-next .pn-label{font-size:11px;color:var(--text-muted);display:block} /* ===== 分页 ===== */ .pagination{gap:6px;flex-wrap:wrap;justify-content:center} /* 让 {page:bar} 输出的 参与 flex 布局 */ .pagination>span{display:flex;align-items:center} /* 隐藏重复的文本链接（首页/前一页/后一页/尾页），图标按钮已覆盖 */ .pagination .page-index,.pagination .page-pre, .pagination .page-next,.pagination .page-last{display:none} /* 页码统计信息 */ .pagination .page-status{font-size:13px;color:var(--text-muted);margin-right:6px;white-space:nowrap} /* 页码数字样式 -> 与 .page-link 统一 */ .pagination .page-numbar a.page-num{ border-radius:var(--r8)!important; border:1px solid var(--border)!important; font-size:13px;padding:7px 14px; transition:var(--ease);background:white; text-decoration:none;display:inline-block; } .pagination .page-numbar a.page-num:hover{ background:rgba(10,36,99,0.07)!important; border-color:var(--primary)!important;color:var(--primary)!important; transform:translateY(-1px); } .pagination .page-link,.pagination a.page-link{ border-radius:var(--r8)!important; border:1px solid var(--border)!important; color:var(--text-body)!important; font-size:13px;padding:7px 14px; transition:var(--ease);background:white; } .pagination .page-link:hover,.pagination a.page-link:hover{ background:rgba(10,36,99,0.07)!important; border-color:var(--primary)!important;color:var(--primary)!important; transform:translateY(-1px); } .page-num-current{ background:linear-gradient(135deg,var(--primary),var(--primary-mid))!important; border-color:var(--primary)!important;color:white!important; box-shadow:0 4px 12px rgba(10,36,99,0.25)!important; } /* ===== 页脚 ===== */ .footer{ background: linear-gradient(135deg,#061333 0%,#071946 100%) !important; color:rgba(255,255,255,0.7)!important; padding-top:56px;margin-top:0!important; } .footer h5{ color:white;font-weight:700;font-size:15px; margin-bottom:16px;padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,0.12); letter-spacing:0.5px; } .footer ul{padding:0;list-style:none} .footer ul li{font-size:13px;line-height:2.3;color:rgba(255,255,255,0.6)} .footer ul li a{color:rgba(255,255,255,0.6)!important;transition:var(--ease)} .footer ul li a:hover{color:var(--gold)!important;text-decoration:none} .footer .small{color:rgba(255,255,255,0.45);text-align:center;font-size:12px} .footer .code img{ border-radius:var(--r8);border:3px solid rgba(255,255,255,0.15); padding:4px;background:white; } .copyright{ background:rgba(0,0,0,0.2);padding:14px 0; font-size:12px;color:rgba(255,255,255,0.45); border-top:1px solid rgba(255,255,255,0.08)!important; } .copyright a{color:rgba(255,255,255,0.5)!important;transition:var(--ease)} .copyright a:hover{color:var(--gold)!important} .thleftcon{background:rgba(0,0,0,0.12);padding:10px 0;font-size:12px} .thleftbt{text-align:center;color:rgba(255,255,255,0.5)} .thleftbt a{color:rgba(255,255,255,0.5)!important;transition:var(--ease)} .thleftbt a:hover{color:var(--gold)!important} /* ===== 页脚联系卡片 ===== */ .footer .contact-card{ display:flex;align-items:center;gap:10px; padding:10px 14px;background:rgba(255,255,255,0.07); border-radius:10px;border:1px solid rgba(255,255,255,0.12); text-decoration:none;color:rgba(255,255,255,0.8)!important; transition:var(--ease);position:relative; } .footer .contact-card:hover{ color:#f0c040!important; background:rgba(255,255,255,0.12); border-color:rgba(240,192,64,0.3); } .footer .contact-card:hover .contact-card-label{ opacity:0.9!important; } .footer .contact-card:hover .contact-card-label i{ color:#f0c040!important; } /* ===== 微信二维码悬停弹窗 ===== */ .wechat-qr-trigger{ position:relative;cursor:pointer; } .wechat-qr-popup{ display:none;position:absolute; left:50%;bottom:calc(100% + 16px); transform:translateX(-50%); width:180px;padding:12px; background:white;border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.3); z-index:9999; } .wechat-qr-popup::after{ content:'';position:absolute; top:100%;left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color:white; } .wechat-qr-popup img{ width:100%;border-radius:6px;display:block; } .wechat-qr-popup p{ font-size:11px;color:#666;text-align:center; margin:8px 0 0;line-height:1.5; } .wechat-qr-trigger:hover .wechat-qr-popup{ display:block;animation:qrFadeIn 0.25s ease; } @keyframes qrFadeIn{ from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } /* 移动端隐藏二维码弹窗（触屏设备不适合hover） */ @media(max-width:768px){ .wechat-qr-popup{display:none!important;} .footer .col-12{margin-bottom:20px} } /* ===== 页脚移动端优化 ===== */ /* 快速导航列在移动端加宽、居中 */ @media (max-width: 767.98px) { .footer .col-6 { text-align: center; } } /* 移动端：所有列已隐藏，直接隐藏整个 .container.py-5 区域 */ @media (max-width: 767.98px) { .footer > .container.py-5 { display: none !important; } .footer { padding-top: 0 !important; background: none !important; } .copyright { background: #fff !important; color: var(--text-muted) !important; border-top: 1px solid var(--border) !important; } .copyright a { color: var(--text-light) !important; } .copyright a:hover { color: var(--primary) !important; } .thleftcon { display: none !important; } } /* 移动端版权信息居中显示（允许换行） */ @media (max-width: 575.98px) { .copyright .container { text-align: center !important; padding: 5px 5px !important; font-size: 11px !important; line-height: 1.6 !important; } .copyright .container img { height: 11px !important; vertical-align: middle !important; } /* 修复公安备案文字颜色（白底深色才可见） */ .copyright .container a[target="_blank"] span { color: var(--text-light) !important; } } /* 底部区域移动端 padding */ @media (max-width: 575.98px) { .footer { padding-bottom: 10px !important; } } /* ===== 移动端底部固定导航 ===== */ .fixed-bottom-mobile{ position:fixed;bottom:0;left:0;right:0;z-index:1030; background: linear-gradient(135deg,#252e43,#0c2d5f); border-top:2px solid rgba(255,255,255,0.15); box-shadow:0 -4px 20px rgba(0,0,0,0.2); } .fixed-bottom-mobile .row{height:54px} .fixed-bottom-mobile .col-4{ display:flex;align-items:center;justify-content:center; color:white;text-decoration:none; border-right:1px solid rgba(255,255,255,0.12); font-size:11px;gap:3px;flex-direction:column; transition:var(--ease); } .fixed-bottom-mobile .col-4:last-child{border-right:none} .fixed-bottom-mobile .col-4 i{font-size:18px} .fixed-bottom-mobile .col-4:hover{ background:rgba(255,255,255,0.1);color:white; } /* ===== 在线客服 ===== */ .online{bottom:110px!important} .online dl{ background:linear-gradient(135deg,var(--primary),var(--primary-mid))!important; border-radius:var(--r8)!important; box-shadow:var(--shadow-md);margin-bottom:3px!important; } .online dl:hover{ background:linear-gradient(135deg,var(--primary-mid),var(--primary))!important; transform:translateX(-4px); } .online dl dt{ border-radius:var(--r8)!important; box-shadow:var(--shadow-lg)!important; border:1px solid var(--border)!important; } .online dl dt h3{color:var(--primary)!important;font-size:15px!important} .online dl dt input{border-radius:var(--r8)!important;border:1px solid var(--border)!important} .online dl dt button{ display:flex!important;align-items:center!important;justify-content:center!important; height:auto!important;min-height:40px;line-height:1.5!important; padding:10px 16px!important;margin:10px 0!important; background:linear-gradient(135deg,var(--primary),var(--primary-mid))!important; border-radius:var(--r8)!important;font-weight:600!important; box-shadow:0 4px 12px rgba(10,36,99,0.3); } .online .scroll-top{background:rgba(80,80,80,0.6)!important} /* ===== 按钮通用 ===== */ .btn-theme{ background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:white;border:none;padding:10px 24px; border-radius:var(--r24);font-size:14px;font-weight:600; cursor:pointer;transition:var(--ease); box-shadow:0 4px 16px rgba(10,36,99,0.25); } .btn-theme:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,36,99,0.35); color:white; } .btn-theme-outline{ background:transparent;border:2px solid var(--primary); color:var(--primary);padding:10px 24px; border-radius:var(--r24);font-size:14px;font-weight:600; cursor:pointer;transition:var(--ease); } .btn-theme-outline:hover{ background:var(--primary);color:white; transform:translateY(-2px); } /* ===== 空内容 ===== */ .text-center.my-5.text-secondary{ padding:60px 20px;color:var(--text-light)!important; font-size:15px;background:white; border-radius:var(--r16);border:2px dashed var(--border); margin:30px 0!important; } /* ===== 动画 ===== */ .wow{visibility:hidden} @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} /* ===== 响应式补充 ===== */ @media(max-width:576px){ .section-header h2{font-size:1.5rem} .section-header{padding:40px 0 24px} .hero-trust-row{gap:8px} .hero-trust-item{padding:8px 12px;font-size:12px} .stat-num{font-size:1.8rem} .page-hero h1{font-size:1.5rem} .about-text h2{font-size:1.4rem} .about-photo-card{max-width:240px} .about-photo-frame{border-radius:var(--r12);box-shadow:var(--shadow-md)} .cta-phone{font-size:1.6rem} .pre-next{flex-direction:column} } /* 平板 */ @media(min-width:577px)and(max-width:991px){ .about-photo-card{max-width:280px} .about-photo-frame{border-radius:var(--r14)} } /* ===== 图片列表 ===== */ .figure{ border-radius:var(--r12);overflow:hidden; transition:var(--ease);background:white; box-shadow:var(--shadow-xs); } .figure:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .figure-caption a{color:var(--text-body)!important;font-size:14px;font-weight:500;transition:var(--ease)} .figure-caption a:hover{color:var(--primary)!important} /* ============================================ 页面美化增强 v1.0 — 留言 · 登录 · 注册 · 计算器 ============================================ */ /* ---- 卡片容器 ---- */ .page-card { background: var(--bg-white); border-radius: var(--r16); box-shadow: var(--shadow-sm); padding: 32px; transition: var(--ease); border: 1px solid var(--border); } .page-card:hover { box-shadow: var(--shadow-md); } /* ---- 美化表单 ---- */ .form-beauty .form-group { margin-bottom: 20px; } .form-beauty label { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; display: block; } .form-beauty .form-control { border: 2px solid var(--border); border-radius: var(--r10, 10px); padding: 12px 16px; font-size: 14px; color: var(--text-body); background: var(--bg-white); transition: var(--ease); box-shadow: none; height: auto; line-height: 1.5; } .form-beauty .form-control:focus { border-color: var(--primary-light); box-shadow: 0 0 0 4px rgba(21,101,192,0.12); outline: none; } .form-beauty textarea.form-control { min-height: 110px; resize: vertical; } .form-beauty .form-control::placeholder { color: var(--text-muted); font-size: 13px; } /* ---- 美式提交按钮 ---- */ .btn-beauty { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 32px; font-size: 15px; font-weight: 700; border: none; border-radius: var(--r10, 10px); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%); color: white; cursor: pointer; transition: var(--ease); box-shadow: 0 4px 15px rgba(10,36,99,0.25); width: 100%; } .btn-beauty:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(10,36,99,0.35); background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%); color: white; } .btn-beauty:active { transform: translateY(0); } /* ---- 信息卡 ---- */ .info-card { background: linear-gradient(135deg, var(--bg-blue) 0%, #eef3ff 100%); border-radius: var(--r16); padding: 28px 24px; border: 1px solid rgba(10,36,99,0.08); height: 100%; } .info-card-title { font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .info-card-title i { color: var(--gold); font-size: 20px; } .info-card-list { list-style: none; padding: 0; margin: 0; } .info-card-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--text-body); border-bottom: 1px solid rgba(10,36,99,0.06); line-height: 1.6; } .info-card-list li:last-child { border-bottom: none; } .info-card-list li i { width: 18px; text-align: center; color: var(--primary-light); font-size: 14px; margin-top: 2px; flex-shrink: 0; } .info-card-tag { display: inline-block; background: var(--gold-bg); color: var(--gold); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--r50); margin: 2px 3px; } /* ---- 验证码容器 ---- */ .code-row { display: flex; gap: 10px; align-items: center; } .code-row .form-control { flex: 1; } .code-img { height: 42px; border-radius: var(--r8); cursor: pointer; border: 2px solid var(--border); transition: var(--ease); } .code-img:hover { border-color: var(--primary-light); } /* ---- 留言记录卡片 ---- */ .msg-card { background: var(--bg-white); border-radius: var(--r12); border: 1px solid var(--border); padding: 20px; transition: var(--ease); margin-bottom: 16px; } .msg-card:hover { box-shadow: var(--shadow-sm); } .msg-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .msg-card-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-light); } .msg-card-name { font-size: 14px; font-weight: 700; color: var(--text-dark); } .msg-card-content { font-size: 14px; color: var(--text-body); line-height: 1.7; margin-bottom: 8px; } .msg-card-meta { display: flex; gap: 8px; flex-wrap: wrap; } .msg-card-meta span { background: var(--bg-light); color: var(--text-light); font-size: 11px; padding: 2px 10px; border-radius: var(--r50); } .msg-card-reply { margin-top: 14px; padding: 14px; background: var(--bg-blue); border-radius: var(--r10, 10px); border-left: 3px solid var(--primary); } .msg-card-reply-title { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .msg-card-reply-content { font-size: 13px; color: var(--text-body); line-height: 1.6; } .msg-card-reply-date { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* 空留言状态 */ .msg-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); } .msg-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.3; } /* ---- 分页美化 ---- */ .page-beauty { display: flex; justify-content: center; gap: 4px; margin: 24px 0; } .page-beauty a, .page-beauty span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; color: var(--text-body); background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r8); transition: var(--ease); } .page-beauty a:hover { background: var(--bg-blue); border-color: var(--primary-light); color: var(--primary); } .page-beauty .page-curr { background: var(--primary); color: white; border-color: var(--primary); font-weight: 700; } .page-beauty .page-disabled { opacity: 0.4; pointer-events: none; } /* ---- 分隔标题 ---- */ .section-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 20px; } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); } .section-divider-title { font-size: 18px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .section-divider-title i { color: var(--gold); } /* ---- 详细内容卡片 ---- */ .content-card { background: var(--bg-white); border-radius: var(--r16); box-shadow: var(--shadow-sm); padding: 36px; border: 1px solid var(--border); margin-bottom: 24px; } .content-card h2 { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; } .content-card .content { line-height: 1.9; } .content-card .content p { margin-bottom: 14px; } /* ---- 计算器卡片 ---- */ .calc-card { display: flex; align-items: center; gap: 16px; padding: 24px 20px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r16); box-shadow: var(--shadow-xs); transition: var(--ease); text-decoration: none !important; position: relative; overflow: hidden; height: 100%; } .calc-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--primary), var(--gold)); opacity: 0; transition: var(--ease); } .calc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(10,36,99,0.15); } .calc-card:hover::before { opacity: 1; } .calc-card-icon { width: 56px; height: 56px; border-radius: var(--r14, 14px); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 18px rgba(10,36,99,0.2); transition: var(--ease); } .calc-card:hover .calc-card-icon { background: linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow: var(--shadow-gold); } .calc-card-icon i { font-size: 24px; color: white; } .calc-card-body { flex: 1; min-width: 0; } .calc-card-body h5 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; line-height: 1.4; transition: var(--ease); } .calc-card:hover .calc-card-body h5 { color: var(--primary); } .calc-card-body p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .calc-card-arrow { flex-shrink: 0; opacity: 0; transform: translateX(-8px); transition: var(--ease); } .calc-card:hover .calc-card-arrow { opacity: 1; transform: translateX(0); } .calc-card-arrow i { font-size: 20px; color: var(--gold); } @media(max-width:768px){ .calc-card { padding: 18px 16px; } .calc-card-icon { width: 46px; height: 46px; } .calc-card-icon i { font-size: 20px; } .calc-card-arrow { display: none; } } /* ---- 响应式 ---- */ @media(max-width:768px){ .page-card { padding: 20px; } .content-card { padding: 20px; } .info-card { padding: 20px; } .form-beauty .form-control { padding: 10px 14px; } .btn-beauty { padding: 10px 24px; } } /* ---- 内容全宽容器（用于jisuan.html等全宽页面） ---- */ .content-wrap { background: transparent; padding: 16px 8px; margin-bottom: 24px; max-width: 100%; overflow-x: hidden; } .content-wrap h2 { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 20px; } .content-wrap .content { line-height: 1.9; color: var(--text-body); } .content-wrap .content p { margin-bottom: 14px; } .content-wrap .content img, .content-wrap .content iframe { max-width: 100% !important; } @media(max-width: 576px) { .content-wrap { padding: 12px 4px; } } /* ===== iframe 嵌入计算器响应式适配 ===== */ /* CSS 覆盖 iframe HTML width 属性，让 iframe 内部独立文档使用正确 viewport 宽度 */ .calc-body iframe { max- min-height: 500px; } /* 全屏时 iframe 占满视口高度 */ #fs-overlay .calc-body iframe { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; } /* ===== Fullscreen mode for calculators ===== */ /* ===== 全屏按钮：仅 pad/手机显示，桌面端隐藏 ===== */ .fs-btn-inside { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; font-weight: 500; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: rgba(255,255,255,0.9); color: #555; cursor: pointer; transition: all .2s; margin-bottom: 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; } .fs-btn-inside:hover { background: #f5f5f5; border-color: rgba(0,0,0,0.2); color: #333; } .fs-btn-inside:active { transform: scale(0.95); } /* 桌面端（≥992px）隐藏全屏按钮 */ @media (min-width: 992px) { .fs-btn-inside { display: none !important; } } /* 全屏按钮在 header 中右对齐 */ .calc-detail-header { display: flex; align-items: center; gap: 10px; } .calc-detail-header .fs-btn-inside { margin-left: auto; margin-bottom: 0; flex-shrink: 0; } /* 按钮尺寸：pad/手机三档适配 */ @media (max-width: 374px) { .fs-btn-inside { padding: 4px 8px; font-size: 11px; gap: 3px; border-radius: 5px; } .fs-btn-inside svg { width: 13px; height: 13px; } } @media (min-width: 375px) and (max-width: 767px) { .fs-btn-inside { padding: 5px 10px; font-size: 12px; gap: 4px; } .fs-btn-inside svg { width: 14px; height: 14px; } } @media (min-width: 768px) and (max-width: 991px) { .fs-btn-inside { padding: 6px 14px; font-size: 13px; gap: 5px; } .fs-btn-inside svg { width: 16px; height: 16px; } } /* ===== 计算内容居中自适应 ===== */ .calc-body { max-width: 1500px; margin: 0 auto; width: 100%; } @media (max-width: 767px) { .calc-body { max-width: 100%; } } /* ===== 全屏覆盖层：渐变色背景，1px圆角边距，内容居中 ===== */ #fs-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; /* 四周1px边距，内容居中；适配刘海屏/圆角屏 */ padding: 1px; padding: 1px env(safe-area-inset-right, 1px) 1px env(safe-area-inset-left, 1px); box-sizing: border-box; } #fs-overlay.active { display: flex; flex-direction: column; align-items: center; } /* Overlay 内的 .calc-body — 卡片样式，flex 双居中（overlay 1px padding 需减掉） */ #fs-overlay .calc-body { max-width: 1100px; width: 100%; margin: auto; min-height: calc(100vh - 2px); box-sizing: border-box; /* 与 overlay 同等的 border-radius，让 1px 渐变间隙形成圆角边框效果 */ border-radius: 15px; } /* ===== 移动端全屏适配（≤767px 覆盖桌面规则） ===== */ /* 内容撑满全屏，利用 overlay 的 1px padding + border-radius 留圆边 */ @media (max-width: 767px) { #fs-overlay .calc-body { max-width: 100% !important; width: 100% !important; padding: 45px 8px 15px !important; } /* 解除计算器自身容器宽约束 */ #fs-overlay .calc-body .calc-container, #fs-overlay .calc-body .glass-card, #fs-overlay .calc-body .container, #fs-overlay .calc-body [class*="calc-"], #fs-overlay .calc-body [class*="glass"], #fs-overlay .calc-body [class*="card-"], #fs-overlay .calc-body [class*="content"], #fs-overlay .calc-body [class*="wrapper"], #fs-overlay .calc-body [class*="main"], #fs-overlay .calc-body [class*="body"], #fs-overlay .calc-body [class*="page-"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ===== 全屏退出按钮（在 overlay 内部） ===== */ #fs-exit-btn.fs-exit-btn { position: fixed; top: 10px; left: 10px; right: auto; z-index: 100001; align-items: center; gap: 4px; padding: 5px 12px; font-size: 12px; font-weight: 500; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: rgba(255,255,255,0.9); color: #555; cursor: pointer; transition: all .2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #fs-exit-btn.fs-exit-btn:hover { background: #f5f5f5; border-color: rgba(0,0,0,0.2); color: #333; } #fs-exit-btn.fs-exit-btn:active { transform: scale(0.95); } @media (max-width: 374px) { #fs-exit-btn.fs-exit-btn { padding: 4px 8px; font-size: 11px; gap: 3px; top: 6px; left: 6px; right: auto; } #fs-exit-btn.fs-exit-btn svg { width: 13px; height: 13px; } } @media (min-width: 375px) and (max-width: 767px) { #fs-exit-btn.fs-exit-btn { padding: 5px 10px; font-size: 12px; gap: 4px; } #fs-exit-btn.fs-exit-btn svg { width: 14px; height: 14px; } } /* ===== 全局强制响应式覆盖（兜底方案）===== */ /* 窄屏手机 ≤479px */ @media (max-width: 479px) { .calc-body table, .calc-body table[class] { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .calc-body input[type="text"], .calc-body input[type="number"], .calc-body input[type="tel"], .calc-body input[type="email"], .calc-body select, .calc-body textarea { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .calc-body .form-group, .calc-body [class*="form-group"], .calc-body [class*="form_row"], .calc-body [class*="input-group"] { flex-direction: column !important; align-items: stretch !important; } .calc-body .form-label, .calc-body [class*="form-label"], .calc-body td:first-child { min-width: 100% !important; width: 100% !important; display: block !important; } .calc-body .btn, .calc-body button, .calc-body input[type="button"], .calc-body input[type="submit"], .calc-body [class*="btn-"] { width: 100% !important; box-sizing: border-box !important; } .calc-body [class*="btn-row"], .calc-body [class*="btn-group"], .calc-body .button-row, .calc-body .btn-container { flex-direction: column !important; } .calc-body .row, .calc-body [class*="row-"] { flex-direction: column !important; } .calc-body [class*="col-"], .calc-body [class*="col-md-"], .calc-body [class*="col-sm-"], .calc-body [class*="col-xs-"], .calc-body [class*="col-lg-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .calc-body td, .calc-body th { display: block !important; width: 100% !important; box-sizing: border-box !important; } .calc-body tr { display: block !important; margin-bottom: 8px !important; } .calc-body img { max-width: 100% !important; height: auto !important; } .calc-body fieldset { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } .calc-body p, .calc-body div { word-wrap: break-word !important; overflow-wrap: break-word !important; } } /* 小平板 480-767px */ @media (min-width: 480px) and (max-width: 767px) { .calc-body table, .calc-body table[class] { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .calc-body input[type="text"], .calc-body input[type="number"], .calc-body select, .calc-body textarea { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .calc-body [class*="col-xs-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .calc-body td, .calc-body th { display: block !important; width: 100% !important; box-sizing: border-box !important; } .calc-body img { max-width: 100% !important; height: auto !important; } } /* ===== V3.3 导航栏搜索增强 ===== */ /* PC端搜索表单 - 导航栏最右侧 */ .navbar-search-form-wrap { position: relative; margin-left: auto; margin-right: 1rem; display: flex; align-items: center; } .search-input-group { position: relative; display: flex; align-items: center; } .search-input-field { width: 180px; height: 36px; padding: 6px 36px 6px 14px; border: 1px solid #d0d5dd; border-radius: 20px; font-size: 13px; color: #333; outline: none; transition: all 0.3s ease; background: #f5f7fa; box-sizing: border-box; } .search-input-field:focus { border-color: #0a2463; background: #fff; box-shadow: 0 0 0 3px rgba(10,36,99,0.08); width: 220px; } .search-input-field::placeholder { color: #a0aab4; } .search-submit-btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: none; background: #0a2463; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; padding: 0; } .search-submit-btn:hover { background: #0d47a1; } .search-submit-btn i { font-size: 13px; line-height: 1; } /* 导航栏滚动背景时搜索框适配 */ #mainNav.scrolled .search-input-field { background: #fff; border-color: #d0d5dd; } /* 移动端搜索toggle + 下拉弹出框 */ .mobile-search-wrap { display: flex; align-items: center; margin-right: 6px; } .mobile-search-toggle { padding: 6px 6px; cursor: pointer; color: #0a2463; font-size: 18px; display: flex; align-items: center; line-height: 1; text-decoration: none !important; } .mobile-search-dropdown { display: none; position: fixed; top: 0; left: 0; right: 0; background: #fff; padding: 12px 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); z-index: 1080; border-bottom: 1px solid #e5e7eb; } .mobile-search-dropdown.active { display: block; } .mobile-search-dropdown form { display: flex; gap: 8px; } .mobile-search-input { flex: 1; height: 40px; padding: 8px 14px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 15px; color: #333; outline: none; box-sizing: border-box; -webkit-appearance: none; background: #f5f7fa; } .mobile-search-input:focus { border-color: #0a2463; background: #fff; } .mobile-search-submit { width: 44px; height: 40px; border: none; background: #0a2463; color: #fff; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; } .mobile-search-submit i { font-size: 16px; line-height: 1; } /* 移动端下拉搜索框动画 */ .mobile-search-dropdown { animation: searchSlideDown 0.2s ease-out; } @keyframes searchSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ 导航栏搜索 (PbootCMS {pboot:scaction} 原生标签) ============================================ */ /* 搜索组件容器 — 在Logo和汉堡按钮之间 */ .nav-search-wrapper { display: flex; align-items: center; order: 1; /* Logo之后，汉堡按钮之前 */ } /* PC端内联搜索表单 — 默认隐藏，lg断点以上显示 */ .nav-search-form { display: none; align-items: center; } @media (min-width: 992px) { .nav-search-form { display: flex !important; /* lg+ 显示PC搜索框 */ } .nav-search-toggle { display: none !important; /* lg+ 隐藏移动端搜索图标 */ } } .nav-search-inner { display: flex; align-items: center; position: relative; } .nav-search-input { width: 180px; height: 34px; border: 1px solid #d0d5dd; border-radius: 17px 0 0 17px; padding: 0 14px; font-size: 13px; color: #333; background: #f8f9fa; outline: none; transition: width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .nav-search-input:focus { width: 220px; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(10,36,99,0.12); } .nav-search-input::placeholder { color: #9ca3af; font-size: 12px; } .nav-search-btn { height: 34px; width: 34px; border: none; border-radius: 0 17px 17px 0; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; flex-shrink: 0; } .nav-search-btn:hover { background: var(--primary-hover); } .nav-search-btn i { font-size: 14px; } /* 移动端搜索图标触发器 — 默认显示，lg以上隐藏 */ .nav-search-toggle { display: inline-flex; background: none; border: none; color: var(--primary); font-size: 18px; cursor: pointer; padding: 6px 10px; transition: opacity 0.2s; } .nav-search-toggle:hover { opacity: 0.7; } /* ============================================ 移动端搜索全屏遮罩 ============================================ */ .search-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,36,99,0.92); z-index: 9999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .search-overlay.active { display: flex; opacity: 1; } .search-overlay-container { width: 88%; max-width: 500px; } .search-overlay-inner { display: flex; align-items: center; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.25); } .search-overlay-input { flex: 1; height: 48px; border: none; padding: 0 16px; font-size: 15px; outline: none; background: transparent; } .search-overlay-submit { height: 48px; width: 48px; border: none; background: var(--primary); color: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-overlay-close { height: 48px; width: 48px; border: none; background: transparent; color: var(--text-muted, #666); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-overlay-close:hover { color: #333; } /* ============================================ 文章详情页美化系统 v1.0 (aw-* classes) 用于 {content:content} 中的文章排版 更新：2026-06-01 ============================================ */ /* --- 文章主容器 --- */ #mybjz-article { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin: 0 auto; max-width: 1500px; } /* --- 文章头部 --- */ #mybjz-article .aw-header { text-align: center; padding: 36px 24px 32px; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%); border-bottom: 3px solid var(--primary, #0a2463); border-radius: 12px 12px 0 0; } #mybjz-article .aw-header .aw-title { font-size: 22px; font-weight: 700; color: var(--primary, #0a2463); margin: 0 0 12px; line-height: 1.5; } /* --- 正文区域 --- */ #mybjz-article .aw-body { padding: 8px 24px 24px; } /* --- 二级标题 --- */ #mybjz-article .aw-body .aw-h2 { font-size: 18px; font-weight: 700; color: var(--primary, #0a2463); margin: 24px 0 16px; padding: 12px 20px; background: linear-gradient(90deg, #eff6ff 0%, rgba(255,255,255,0) 100%); border-left: 5px solid var(--primary, #0a2463); line-height: 1.6; border-radius: 0 8px 8px 0; } /* --- 正文段落 --- */ #mybjz-article .aw-body .aw-p { margin: 14px 0; line-height: 2; color: #3a3a3a; text-align: justify; text-indent: 2em; font-size: 15px; } /* --- 加粗强调 --- */ #mybjz-article .aw-strong { color: var(--primary, #0a2463); font-weight: 600; } /* --- 关键词高亮 --- */ #mybjz-article .aw-kw { color: var(--primary, #0a2463); font-weight: 600; padding: 2px; background: #eff6ff; border-radius: 3px; } /* --- 信息框（蓝底） --- */ #mybjz-article .aw-callout-info { border-left: 5px solid var(--primary, #0a2463); padding: 20px 24px; margin: 22px 0; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); border-radius: 0 10px 10px 0; } /* --- 提醒框（黄底） --- */ #mybjz-article .aw-callout-warn { border-left: 5px solid #d4a017; padding: 20px 24px; margin: 22px 0; background: linear-gradient(135deg, #fefce8 0%, #fff 100%); border-radius: 0 10px 10px 0; } /* --- 重点框 --- */ #mybjz-article .aw-callout { border-left: 5px solid var(--primary, #0a2463); padding: 20px 24px; margin: 22px 0; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); border-radius: 0 10px 10px 0; } /* --- 步骤卡片 --- */ #mybjz-article .aw-step { padding: 14px 20px; margin: 12px 0; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; } /* --- 表格 --- */ #mybjz-article .aw-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 14px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid #dde1e6; } #mybjz-article .aw-table th { background: var(--primary, #0a2463); color: #fff; padding: 14px 18px; text-align: center; font-weight: 600; } #mybjz-article .aw-table td { padding: 12px 18px; border-bottom: 1px solid #e8eaed; text-align: center; } #mybjz-article .aw-table tr:last-child td { border-bottom: none; } /* --- 列表 --- */ #mybjz-article .aw-ul { padding-left: 24px; margin: 14px 0; } #mybjz-article .aw-ul .aw-li { line-height: 2; color: #3a3a3a; font-size: 15px; padding: 4px 0; } /* --- 行内来源链接 --- */ #mybjz-article .aw-source-link { display: inline; color: #4a6fa5 !important; font-size: 0.85em; text-decoration: none; border-bottom: 1px dashed #b0c4de; padding: 0 2px; white-space: nowrap; } #mybjz-article .aw-source-link:hover { color: var(--primary, #0a2463) !important; border-bottom-style: solid; } /* --- 数据来源汇总区块 --- */ #mybjz-article .aw-sources { margin: 36px 0 20px; padding: 20px 24px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; } #mybjz-article .aw-sources-title { font-size: 16px; font-weight: 700; color: #334155; margin: 0 0 14px 0; padding: 0; border: none !important; background: none !important; border-left: none !important; } #mybjz-article .aw-sources .aw-p { text-indent: 0 !important; font-size: 13px; line-height: 1.9; color: #64748b; margin: 4px 0; } #mybjz-article .aw-sources .aw-p a { color: #4a6fa5; text-decoration: none; border-bottom: 1px solid #cbd5e1; } #mybjz-article .aw-sources .aw-p a:hover { color: var(--primary, #0a2463); border-bottom-color: var(--primary, #0a2463); } /* --- 图片说明 --- */ #mybjz-article .aw-caption { text-align: center; color: #888; font-size: 13px; margin: 8px 0 24px; font-style: italic; letter-spacing: 1px; } /* --- 文章页脚署名 --- */ #mybjz-article .aw-footer { margin: 40px 0 24px; padding: 28px; background: var(--primary, #0a2463); color: #fff; text-align: center; border-radius: 12px; } /* --- 免责声明 --- */ #mybjz-article .aw-disclaimer { margin: 20px 24px 24px; padding: 14px 18px; font-size: 12px; color: #999; line-height: 1.7; text-align: justify; border-top: 1px solid #eee; background: #fafafa; border-radius: 6px; } /* --- 移动端响应式 --- */ @media (max-width: 768px) { #mybjz-article { border-radius: 8px; max-width: 100%; } #mybjz-article .aw-body { padding: 0 16px 20px; } #mybjz-article .aw-header { padding: 28px 16px 24px; } #mybjz-article .aw-header .aw-title { font-size: 19px; } #mybjz-article .aw-body .aw-h2 { font-size: 17px; padding: 10px 16px; } #mybjz-article .aw-body .aw-p { font-size: 14.5px; } #mybjz-article .aw-footer { padding: 20px 16px; margin: 30px 0 20px; } #mybjz-article .aw-disclaimer { margin: 16px 16px 20px; } } /* ============================================ mayingbin.com — 文章详情&列表页美化 v2.0 现代编辑排版 · 清晰层次 · 专业对比表格 · 白色CTA卡片 设计语言: Editorial + 政府蓝 + 清晰字体层级 更新: 2026-06-05 ============================================ */ /* ================================================================ 一、文章正文排版 — 现代编辑风格 ================================================================ */ .content { font-size: 16px; line-height: 1.75; color: #334155; max-width: 100%; } .content p { margin: 0 0 18px; text-align: justify; } .content strong { color: #0F172A; font-weight: 600; } /* H2 二级标题 — 加分隔线 */ .content h2 { font-size: 24px; font-weight: 700; color: #020617; margin: 40px 0 18px; padding-bottom: 12px; border-bottom: 2px solid #E2E8F0; line-height: 1.3; } /* H3 三级标题 — 左侧蓝色竖线 */ .content h3 { font-size: 20px; font-weight: 600; color: #0F172A; margin: 32px 0 14px; padding: 6px 0 6px 16px; border-left: 4px solid #0369A1; line-height: 1.4; } /* H4 四级标题 */ .content h4 { font-size: 17px; font-weight: 600; color: #1E293B; margin: 24px 0 12px; } /* 列表样式 */ .content ul, .content ol { margin: 0 0 18px; padding-left: 24px; color: #334155; } .content li { margin-bottom: 6px; line-height: 1.7; } /* ================================================================ 二、重点提示框 / 引文块 ================================================================ */ .content blockquote, blockquote { margin: 28px 0; padding: 20px 24px; background: #F8FAFC; border-left: 4px solid #0369A1; border-radius: 0 4px 4px 0; font-size: 16px; color: #475569; font-style: italic; line-height: 1.7; } .content blockquote p { margin: 0; } /* 信息提示框 — 浅蓝背景 */ .content .info-box, .info-highlight { margin: 24px 0; padding: 18px 22px; background: #F0F9FF; border: 1px solid rgba(3, 105, 161, 0.12); border-radius: 4px; font-size: 15px; color: #0F172A; line-height: 1.7; } /* ================================================================ 三、对比表格 — 专业排版 ================================================================ */ .content table, table.data-table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 14px; border: 1px solid #E2E8F0; border-radius: 4px; overflow: hidden; } .content table thead, table.data-table thead { background: #F1F5F9; } .content table th, table.data-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 14px; color: #0F172A; border-bottom: 2px solid #E2E8F0; } .content table td, table.data-table td { padding: 12px 16px; color: #334155; border-bottom: 1px solid #F1F5F9; vertical-align: top; line-height: 1.5; } .content table tbody tr:nth-child(even), table.data-table tbody tr:nth-child(even) { background: #F8FAFC; } .content table tbody tr:hover, table.data-table tbody tr:hover { background: #F0F9FF; } .content table td:first-child, table.data-table td:first-child { font-weight: 600; color: #0F172A; } /* ================================================================ 四、参考资料区 — 干净白色卡片 + 灰色小字 ================================================================ */ .references-section { margin: 36px 0 24px; padding: 28px 32px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .references-section h3 { font-size: 16px; font-weight: 600; color: #0F172A; margin-bottom: 16px; padding: 0; border: none; } .ref-list { list-style: none; padding: 0; margin: 0; } .ref-list li { font-size: 12px; color: #64748B; line-height: 1.9; padding: 2px 0; word-break: break-all; } .ref-list li::before { content: ''; display: none; } /* ================================================================ 五、CTA区域 — 白色卡片 + 分栏目色系强调 干净专业，不再是深色渐变背景 ================================================================ */ .cta-section { margin: 36px 0 28px; padding: 32px 36px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .cta-section p { margin: 6px 0; line-height: 1.7; color: #334155; } .cta-section p:first-child { font-size: 20px; font-weight: 700; color: #020617; margin-bottom: 10px; } .cta-section p:last-child { font-size: 15px; color: #475569; } /* CTA 按钮容器 */ .cta-section .cta-btns { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; } /* CTA 主按钮 */ .cta-section .cta-btn-primary { display: inline-block; padding: 12px 28px; background: #0369A1; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 4px; transition: background 0.2s ease, box-shadow 0.2s ease; border: none; cursor: pointer; } .cta-section .cta-btn-primary:hover { background: #0284C7; box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25); text-decoration: none; } /* CTA 次按钮 */ .cta-section .cta-btn-secondary { display: inline-block; padding: 12px 28px; background: #FFFFFF; color: #0369A1; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 4px; border: 1.5px solid #0369A1; transition: background 0.2s ease; cursor: pointer; } .cta-section .cta-btn-secondary:hover { background: #F0F9FF; text-decoration: none; } /* CTA 合规声明 */ .cta-section .cta-compliance { font-size: 12px !important; color: #94A3B8 !important; margin-top: 12px !important; } /* ---- 分栏目色系强调（左侧彩色竖线） ---- */ .cat-17 .cta-section { border-left: 4px solid #0369A1; background: linear-gradient(90deg, rgba(3, 105, 161, 0.03) 0%, #FFFFFF 15%); } .cat-18 .cta-section { border-left: 4px solid #0D9488; background: linear-gradient(90deg, rgba(13, 148, 136, 0.03) 0%, #FFFFFF 15%); } .cat-19 .cta-section { border-left: 4px solid #D97706; background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, #FFFFFF 15%); } .cat-20 .cta-section { border-left: 4px solid #7C3AED; background: linear-gradient(90deg, rgba(124, 58, 237, 0.03) 0%, #FFFFFF 15%); } .cat-17 .cta-section .cta-btn-primary { background: #0369A1; } .cat-17 .cta-section .cta-btn-primary:hover { background: #0284C7; } .cat-17 .cta-section .cta-btn-secondary { color: #0369A1; border-color: #0369A1; } .cat-18 .cta-section .cta-btn-primary { background: #0D9488; } .cat-18 .cta-section .cta-btn-primary:hover { background: #0F766E; } .cat-18 .cta-section .cta-btn-secondary { color: #0D9488; border-color: #0D9488; } .cat-19 .cta-section .cta-btn-primary { background: #D97706; } .cat-19 .cta-section .cta-btn-primary:hover { background: #B45309; } .cat-19 .cta-section .cta-btn-secondary { color: #D97706; border-color: #D97706; } .cat-20 .cta-section .cta-btn-primary { background: #7C3AED; } .cat-20 .cta-section .cta-btn-primary:hover { background: #6D28D9; } .cat-20 .cta-section .cta-btn-secondary { color: #7C3AED; border-color: #7C3AED; } /* ================================================================ 六、免责声明区 ================================================================ */ .disclaimer-section { margin: 20px 0 10px; padding: 16px 20px; font-size: 12px; color: #94A3B8; line-height: 1.7; background: #F8FAFC; border-radius: 4px; border: none; } .disclaimer-section strong, .disclaimer-section b { color: #64748B; font-weight: 600; } /* ================================================================ 七、列表页 — knowledge-card 卡片美化 ================================================================ */ .knowledge-card { display: flex; align-items: center; background: #FFFFFF; border-radius: 4px; padding: 20px 24px; text-decoration: none !important; transition: all 0.2s ease; border: 1px solid #E2E8F0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .knowledge-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-color: #CBD5E1; text-decoration: none; } .knowledge-card .k-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 4px; background: #F0F9FF; display: flex; align-items: center; justify-content: center; margin-right: 16px; } .knowledge-card .k-icon .fa { font-size: 18px; color: #0369A1; } .knowledge-card .k-body { flex: 1; min-width: 0; } .knowledge-card .k-title { font-size: 16px; font-weight: 600; color: #0F172A; line-height: 1.5; margin-bottom: 6px; } .knowledge-card .k-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #64748B; } .knowledge-card .k-badge { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #0369A1; background: #E0F2FE; } /* ---- 列表卡片按栏目分色 ---- */ .cat-17 .knowledge-card .k-badge { color: #0369A1; background: #E0F2FE; } .cat-17 .knowledge-card .k-icon { background: #F0F9FF; } .cat-17 .knowledge-card .k-icon .fa { color: #0369A1; } .cat-18 .knowledge-card .k-badge { color: #0D9488; background: #CCFBF1; } .cat-18 .knowledge-card .k-icon { background: #F0FDFA; } .cat-18 .knowledge-card .k-icon .fa { color: #0D9488; } .cat-19 .knowledge-card .k-badge { color: #D97706; background: #FEF3C7; } .cat-19 .knowledge-card .k-icon { background: #FFFBEB; } .cat-19 .knowledge-card .k-icon .fa { color: #D97706; } .cat-20 .knowledge-card .k-badge { color: #7C3AED; background: #EDE9FE; } .cat-20 .knowledge-card .k-icon { background: #F5F3FF; } .cat-20 .knowledge-card .k-icon .fa { color: #7C3AED; } .cat-33 .knowledge-card .k-badge { color: #B91C1C; background: #FEE2E2; } .cat-33 .knowledge-card .k-icon { background: #FFF5F5; } .cat-33 .knowledge-card .k-icon .fa { color: #B91C1C; } .cat-34 .knowledge-card .k-badge { color: #15803D; background: #DCFCE7; } .cat-34 .knowledge-card .k-icon { background: #F0FDF4; } .cat-34 .knowledge-card .k-icon .fa { color: #15803D; } .cat-312 .knowledge-card .k-badge { color: #B45309; background: #FEF3C7; } .cat-312 .knowledge-card .k-icon { background: #FFFBEB; } .cat-312 .knowledge-card .k-icon .fa { color: #B45309; } .cat-313 .knowledge-card .k-badge { color: #475569; background: #F1F5F9; } .cat-313 .knowledge-card .k-icon { background: #F8FAFC; } .cat-313 .knowledge-card .k-icon .fa { color: #475569; } .cat-314 .knowledge-card .k-badge { color: #4338CA; background: #E0E7FF; } .cat-314 .knowledge-card .k-icon { background: #EEF2FF; } .cat-314 .knowledge-card .k-icon .fa { color: #4338CA; } /* ================================================================ 八、栏目标签（面包屑下方） ================================================================ */ .category-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-bottom: 14px; border-radius: 4px; font-size: 13px; font-weight: 600; } .cat-17 .category-badge { background: #E0F2FE; color: #0369A1; } .cat-18 .category-badge { background: #CCFBF1; color: #0D9488; } .cat-19 .category-badge { background: #FEF3C7; color: #D97706; } .cat-20 .category-badge { background: #EDE9FE; color: #7C3AED; } .cat-33 .category-badge { background: #FEE2E2; color: #B91C1C; } .cat-34 .category-badge { background: #DCFCE7; color: #15803D; } .cat-312 .category-badge { background: #FEF3C7; color: #B45309; } .cat-313 .category-badge { background: #F1F5F9; color: #475569; } .cat-314 .category-badge { background: #E0E7FF; color: #4338CA; } /* ================================================================ 九、文章页卡片容器优化 ================================================================ */ .knowledge-article .card, .article-detail .card { border-radius: 4px; border: 1px solid #E2E8F0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } /* ================================================================ 十、响应式 ================================================================ */ @media (max-width: 768px) { .content { font-size: 15px; line-height: 1.7; } .content h2 { font-size: 20px; margin: 30px 0 14px; } .content h3 { font-size: 17px; margin: 24px 0 12px; padding: 4px 0 4px 12px; } .content h4 { font-size: 15px; } .content table, table.data-table { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .content table th, .content table td, table.data-table th, table.data-table td { padding: 8px 10px; white-space: nowrap; } .references-section { padding: 20px 16px; margin: 28px 0 18px; } .references-section h3 { font-size: 15px; } .ref-list li { font-size: 11px; line-height: 1.7; } .cta-section { padding: 22px 18px; margin: 28px 0 20px; } .cta-section p:first-child { font-size: 17px; } .cta-section .cta-btns { flex-direction: column; } .cta-section .cta-btn-primary, .cta-section .cta-btn-secondary { text-align: center; width: 100%; } .knowledge-card { padding: 14px 16px; } .knowledge-card .k-icon { width: 36px; height: 36px; min-width: 36px; margin-right: 12px; } .knowledge-card .k-title { font-size: 14px; } .content blockquote { padding: 16px 18px; } } /* ============================================ 文章CTA卡片 + 参考资料区 + 栏目区分色系 v4.0 更新：2026-06-05 设计：专业资质卡片 + 栏目色系区分 + 灰色小字参考资料 ============================================ */ /* ---- 统一文章链接可见性 ---- */ .phil-content a:not(.cta-btn):not(.cta-btn-primary):not(.cta-btn-outline), .content a:not(.cta-btn):not(.cta-btn-primary):not(.cta-btn-outline) { color: #2563eb !important; text-decoration: underline; word-break: break-all; } .phil-content a:hover:not(.cta-btn):not(.cta-btn-primary):not(.cta-btn-outline), .content a:hover:not(.cta-btn):not(.cta-btn-primary):not(.cta-btn-outline) { color: #1d4ed8 !important; } /* 上标引用链接 */ .phil-content sup a, .content sup a { color: #64748b !important; font-size: 0.72em; text-decoration: none; font-weight: 600; } .phil-content sup a:hover, .content sup a:hover { color: #2563eb !important; text-decoration: underline; } /* ===== 栏目色系定义 ===== */ :root { --cat-blue: #0369A1; --cat-teal: #0D9488; --cat-orange: #D97706; --cat-purple: #7C3AED; --cat-blue-l: #E0F2FE; --cat-teal-l: #CCFBF1; --cat-orange-l:#FFF7ED; --cat-purple-l:#F3E8FF; --cat-rose: #B91C1C; --cat-forest: #15803D; --cat-amber: #B45309; --cat-slate: #475569; --cat-indigo: #4338CA; --cat-rose-l: #FEE2E2; --cat-forest-l:#DCFCE7; --cat-amber-l: #FEF3C7; --cat-slate-l: #F1F5F9; --cat-indigo-l:#E0E7FF; } /* cat-17 保险基础 → 蓝色 */ .cat-17 { --cat-accent: var(--cat-blue); --cat-accent-l: var(--cat-blue-l); } /* cat-18 架构方法论 → 墨绿 */ .cat-18 { --cat-accent: var(--cat-teal); --cat-accent-l: var(--cat-teal-l); } /* cat-19 数据与趋势 → 暖橙 */ .cat-19 { --cat-accent: var(--cat-orange); --cat-accent-l: var(--cat-orange-l); } /* cat-20 认知纠偏 → 紫色 */ .cat-20 { --cat-accent: var(--cat-purple); --cat-accent-l: var(--cat-purple-l); } /* cat-33 生命周期规划哲学 → 深玫红（人生的厚重与紧迫感） */ .cat-33 { --cat-accent: var(--cat-rose); --cat-accent-l: var(--cat-rose-l); } /* cat-34 合规服务哲学 → 森林绿（合规信赖长青） */ .cat-34 { --cat-accent: var(--cat-forest); --cat-accent-l: var(--cat-forest-l); } /* cat-312 多维目标规划 → 琥珀金（财富规划的温暖与分量） */ .cat-312 { --cat-accent: var(--cat-amber); --cat-accent-l: var(--cat-amber-l); } /* cat-313 家企隔离与法律预置 → 岩石灰蓝（法律的冷静与结构） */ .cat-313 { --cat-accent: var(--cat-slate); --cat-accent-l: var(--cat-slate-l); } /* cat-314 家庭资产负债表 → 靛蓝紫（财务的系统性与专业） */ .cat-314 { --cat-accent: var(--cat-indigo); --cat-accent-l: var(--cat-indigo-l); } /* ================================================================ 英鉴智库各子栏目 Hero 自适应渐变背景（与类别色彩协调） ================================================================ */ .hero-knowledge { background: linear-gradient(135deg, #0a2050 0%, #1558a3 50%, #0d3a73 100%) !important; } /* cat-17 政策透视 → 深海蓝 */ [data-category="17"] .hero-knowledge, .cat-17 .hero-knowledge { background: linear-gradient(135deg, #0369A1 0%, #0284C7 45%, #0369A1 100%) !important; } /* cat-18 架构方法论 → 墨绿 */ [data-category="18"] .hero-knowledge, .cat-18 .hero-knowledge { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 45%, #0D9488 100%) !important; } /* cat-19 数据与趋势 → 暖琥珀 */ [data-category="19"] .hero-knowledge, .cat-19 .hero-knowledge { background: linear-gradient(135deg, #B45309 0%, #D97706 45%, #F59E0B 100%) !important; } /* cat-20 认知纠偏 → 靛紫 */ [data-category="20"] .hero-knowledge, .cat-20 .hero-knowledge { background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 45%, #6D28D9 100%) !important; } /* cat-33 生命周期规划 → 玫红 */ [data-category="33"] .hero-knowledge, .cat-33 .hero-knowledge { background: linear-gradient(135deg, #9F1239 0%, #BE123C 45%, #E11D48 100%) !important; } /* cat-34 合规服务 → 森林绿 */ [data-category="34"] .hero-knowledge, .cat-34 .hero-knowledge { background: linear-gradient(135deg, #166534 0%, #15803D 45%, #16A34A 100%) !important; } /* cat-312 多维目标规划 → 琥珀金 */ [data-category="312"] .hero-knowledge, .cat-312 .hero-knowledge { background: linear-gradient(135deg, #92400E 0%, #B45309 45%, #D97706 100%) !important; } /* cat-313 家企隔离 → 岩灰蓝 */ [data-category="313"] .hero-knowledge, .cat-313 .hero-knowledge { background: linear-gradient(135deg, #334155 0%, #475569 45%, #64748B 100%) !important; } /* cat-314 家庭资产负债表 → 靛蓝紫 */ [data-category="314"] .hero-knowledge, .cat-314 .hero-knowledge { background: linear-gradient(135deg, #3730A3 0%, #4338CA 45%, #4F46E5 100%) !important; } /* ================================================================ 英鉴规划各子栏目 Hero 自适应渐变背景 ================================================================ */ .hero-philosophy { background: linear-gradient(160deg, #0a1020 0%, #152842 40%, #1a3654 70%, #0d2137 100%) !important; } /* cat-17 政策透视 → 深海蓝 */ [data-category="17"] .hero-philosophy { background: linear-gradient(160deg, #0369A1 0%, #075985 40%, #0369A1 100%) !important; } /* cat-18 架构方法论 → 墨绿 */ [data-category="18"] .hero-philosophy { background: linear-gradient(160deg, #0F766E 0%, #115E59 40%, #0D9488 100%) !important; } /* cat-19 数据与趋势 → 暖琥珀 */ [data-category="19"] .hero-philosophy { background: linear-gradient(160deg, #B45309 0%, #92400E 40%, #D97706 100%) !important; } /* cat-20 认知纠偏 → 靛紫 */ [data-category="20"] .hero-philosophy { background: linear-gradient(160deg, #5B21B6 0%, #4C1D95 40%, #6D28D9 100%) !important; } /* cat-33 生命周期规划 → 玫红 */ [data-category="33"] .hero-philosophy { background: linear-gradient(160deg, #9F1239 0%, #881337 40%, #BE123C 100%) !important; } /* cat-34 合规服务 → 森林绿 */ [data-category="34"] .hero-philosophy { background: linear-gradient(160deg, #166534 0%, #14532D 40%, #15803D 100%) !important; } /* cat-312 多维目标规划 → 琥珀金 */ [data-category="312"] .hero-philosophy { background: linear-gradient(160deg, #92400E 0%, #78350F 40%, #B45309 100%) !important; } /* cat-313 家企隔离 → 岩灰蓝 */ [data-category="313"] .hero-philosophy { background: linear-gradient(160deg, #334155 0%, #1E293B 40%, #475569 100%) !important; } /* cat-314 家庭资产负债表 → 靛蓝紫 */ [data-category="314"] .hero-philosophy { background: linear-gradient(160deg, #3730A3 0%, #312E81 40%, #4338CA 100%) !important; } /* ================================================================ 文章详情页 Hero 自适应（继承父栏目色彩） ================================================================ */ .hero-knowledge-detail { background: linear-gradient(135deg, #0a2050 0%, #1558a3 50%, #0d3a73 100%) !important; } .hero-philosophy-detail { background: linear-gradient(135deg, #0a1020 0%, #152842 40%, #1a3654 70%, #0d2137 100%) !important; } /* 英鉴智库子栏目详情页 */ .cat-17 .hero-knowledge-detail { background: linear-gradient(135deg, #0369A1 0%, #0284C7 50%, #0369A1 100%) !important; } .cat-18 .hero-knowledge-detail { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 50%, #0D9488 100%) !important; } .cat-19 .hero-knowledge-detail { background: linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%) !important; } .cat-20 .hero-knowledge-detail { background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #6D28D9 100%) !important; } .cat-33 .hero-knowledge-detail { background: linear-gradient(135deg, #9F1239 0%, #BE123C 50%, #E11D48 100%) !important; } .cat-34 .hero-knowledge-detail { background: linear-gradient(135deg, #166534 0%, #15803D 50%, #16A34A 100%) !important; } .cat-312 .hero-knowledge-detail { background: linear-gradient(135deg, #92400E 0%, #B45309 50%, #D97706 100%) !important; } .cat-313 .hero-knowledge-detail { background: linear-gradient(135deg, #334155 0%, #475569 50%, #64748B 100%) !important; } .cat-314 .hero-knowledge-detail { background: linear-gradient(135deg, #3730A3 0%, #4338CA 50%, #4F46E5 100%) !important; } /* 英鉴规划子栏目详情页 */ .cat-17 .hero-philosophy-detail { background: linear-gradient(160deg, #0369A1 0%, #075985 45%, #0369A1 100%) !important; } .cat-18 .hero-philosophy-detail { background: linear-gradient(160deg, #0F766E 0%, #115E59 45%, #0D9488 100%) !important; } .cat-19 .hero-philosophy-detail { background: linear-gradient(160deg, #B45309 0%, #92400E 45%, #D97706 100%) !important; } .cat-20 .hero-philosophy-detail { background: linear-gradient(160deg, #5B21B6 0%, #4C1D95 45%, #6D28D9 100%) !important; } .cat-33 .hero-philosophy-detail { background: linear-gradient(160deg, #9F1239 0%, #881337 45%, #BE123C 100%) !important; } .cat-34 .hero-philosophy-detail { background: linear-gradient(160deg, #166534 0%, #14532D 45%, #15803D 100%) !important; } .cat-312 .hero-philosophy-detail { background: linear-gradient(160deg, #92400E 0%, #78350F 45%, #B45309 100%) !important; } .cat-313 .hero-philosophy-detail { background: linear-gradient(160deg, #334155 0%, #1E293B 45%, #475569 100%) !important; } .cat-314 .hero-philosophy-detail { background: linear-gradient(160deg, #3730A3 0%, #312E81 45%, #4338CA 100%) !important; } /* ===== CTA 专业资质卡片（与文章内容同宽） ===== */ .article-cta-card { margin: 48px 0 32px; background: transparent; border: none; position: relative; overflow: visible; } .article-cta-card::before, .article-cta-card::after { display: none; } .cta-card-inner { background: linear-gradient(135deg, var(--cat-accent-l, #f8fafc20) 0%, #ffffff 100%); border-radius: 12px; box-shadow: 0 2px 28px rgba(10,36,99,0.08); border: 1px solid var(--border,#e2e8f0); padding: 36px 40px 32px 28px; position: relative; overflow: hidden; } /* 顶部栏目色条 */ .cta-card-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cat-accent, var(--primary)); } .cta-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .cta-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--cat-accent-l, #eef3ff); color: var(--cat-accent, var(--primary)); font-size: 11.5px; font-weight: 700; padding: 5px 14px; border-radius: 20px; letter-spacing: 0.3px; } .cta-badge i { font-size: 12px; } .cta-card-title { font-size: 1.3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; line-height: 1.4; letter-spacing: 0.5px; } .cta-card-subtitle { font-size: 0.88rem; color: var(--text-body); line-height: 1.8; margin-bottom: 20px; } .cta-card-features { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cta-card-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--text-body); line-height: 1.6; padding: 10px 14px; background: var(--bg-light); border-radius: 8px; border: 1px solid var(--border-light); } .cta-card-features li i { color: var(--cat-accent, var(--primary)); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; } .cta-card-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 36px; background: var(--cat-accent, var(--primary)); color: #fff !important; border-radius: 50px; font-weight: 700; font-size: 0.92rem; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 4px 16px rgba(0,0,0,0.15); border: none; cursor: pointer; } .cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.25); color: #fff !important; text-decoration: none !important; filter: brightness(1.08); } .cta-btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 30px; border: 2px solid var(--cat-accent, var(--primary)); color: var(--cat-accent, var(--primary)) !important; background: #fff; border-radius: 50px; font-weight: 600; font-size: 0.9rem; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); } .cta-btn-outline:hover { background: var(--cat-accent, var(--primary)); color: #fff !important; text-decoration: none !important; transform: translateY(-2px); } .cta-card-disclaimer { font-size: 0.7rem; color: var(--text-muted); line-height: 1.7; padding-top: 14px; border-top: 1px solid var(--border-light); } /* ===== 文章内参考资料区（增强可点击性 + 专业样式） ===== */ .content .ref-list, .phil-content .ref-list, .article-refs-list { margin: 20px 0; padding: 20px 24px 20px 44px; background: #f8f9fb; border-radius: 8px; border: 1px solid #e8eaef; list-style: decimal; } .content .ref-list li, .phil-content .ref-list li, .article-refs-list li { font-size: 12px; color: #64748b; line-height: 2; padding: 4px 0; } .content .ref-list li a, .phil-content .ref-list li a, .article-refs-list li a { color: #2563eb; text-decoration: underline; word-break: break-all; font-size: 12px; font-weight: 500; } .content .ref-list li a:hover, .phil-content .ref-list li a:hover, .article-refs-list li a:hover { color: #1d4ed8; } /* 文章底部来源出处（轻量脚注风格 — 不与 ref-list 重复） */ .article-source-card { margin: 16px 0 28px; padding: 10px 0; background: transparent; border: none; border-top: 1px solid #e8eaef; font-size: 11.5px; color: #94a3b8; line-height: 1.6; } .article-source-card .src-label { font-weight: 600; color: #94a3b8; margin-right: 4px; font-size: 11.5px; } .article-source-card a { color: #64748b; text-decoration: underline; font-weight: 500; word-break: break-all; } .article-source-card a:hover { color: #2563eb; } /* 旧版参考资料区兼容 */ .article-refs { margin: 30px 0; padding: 24px 28px; background: #f8f9fb; border-top: 1px solid #e8eaef; border-bottom: 1px solid #e8eaef; } .article-refs-title { font-size: 14px; font-weight: 700; color: #6b7280; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed #d1d5db; } .article-refs-title i { font-size: 13px; color: #9ca3af; } .article-refs-list { margin: 0; padding-left: 20px; list-style: decimal; } .article-refs-list li { font-size: 12px; color: #64748b; line-height: 1.9; padding: 3px 0; } .article-refs-list li a { color: #2563eb; text-decoration: underline; word-break: break-all; font-size: 12px; } .article-refs-list li a:hover { color: #1d4ed8; } .article-refs-list .ref-source { color: #94a3b8; font-size: 11px; margin-left: 4px; } /* ===== 栏目色系内容区强调 ===== */ .cat-17 .phil-content h2, .cat-17 .content h2 { border-left-color: var(--cat-blue) !important; } .cat-18 .phil-content h2, .cat-18 .content h2 { border-left-color: var(--cat-teal) !important; } .cat-19 .phil-content h2, .cat-19 .content h2 { border-left-color: var(--cat-orange) !important; } .cat-20 .phil-content h2, .cat-20 .content h2 { border-left-color: var(--cat-purple) !important; } .cat-33 .phil-content h2, .cat-33 .content h2 { border-left-color: var(--cat-rose) !important; } .cat-34 .phil-content h2, .cat-34 .content h2 { border-left-color: var(--cat-forest) !important; } .cat-312 .phil-content h2, .cat-312 .content h2 { border-left-color: var(--cat-amber) !important; } .cat-313 .phil-content h2, .cat-313 .content h2 { border-left-color: var(--cat-slate) !important; } .cat-314 .phil-content h2, .cat-314 .content h2 { border-left-color: var(--cat-indigo) !important; } /* ===== 栏目色系：blockquote 边框 ===== */ .cat-17 .phil-content blockquote { border-left-color: var(--cat-blue) !important; } .cat-18 .phil-content blockquote { border-left-color: var(--cat-teal) !important; } .cat-19 .phil-content blockquote { border-left-color: var(--cat-orange) !important; } .cat-20 .phil-content blockquote { border-left-color: var(--cat-purple) !important; } .cat-33 .phil-content blockquote { border-left-color: var(--cat-rose) !important; } .cat-34 .phil-content blockquote { border-left-color: var(--cat-forest) !important; } .cat-312 .phil-content blockquote { border-left-color: var(--cat-amber) !important; } .cat-313 .phil-content blockquote { border-left-color: var(--cat-slate) !important; } .cat-314 .phil-content blockquote { border-left-color: var(--cat-indigo) !important; } /* ===== 栏目色系：规划哲学 hero 区色系叠加 ===== */ .cat-17 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(3,105,161,0.08) 0%, transparent 60%); } .cat-18 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(13,148,136,0.08) 0%, transparent 60%); } .cat-19 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(217,119,6,0.08) 0%, transparent 60%); } .cat-20 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(124,58,237,0.08) 0%, transparent 60%); } .cat-33 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(185,28,28,0.08) 0%, transparent 60%); } .cat-34 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(21,128,61,0.08) 0%, transparent 60%); } .cat-312 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(180,83,9,0.08) 0%, transparent 60%); } .cat-313 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(71,85,105,0.08) 0%, transparent 60%); } .cat-314 .phil-detail-hero::before { background: radial-gradient(ellipse at 30% 40%, rgba(67,56,202,0.08) 0%, transparent 60%); } /* ===== 栏目色系：文章主体区微妙背景色 ===== */ .cat-17 .phil-detail-body, .cat-17.article-detail-wrap { background: linear-gradient(180deg, #E0F2FE10 0%, transparent 100%); } .cat-18 .phil-detail-body, .cat-18.article-detail-wrap { background: linear-gradient(180deg, #CCFBF110 0%, transparent 100%); } .cat-19 .phil-detail-body, .cat-19.article-detail-wrap { background: linear-gradient(180deg, #FFF7ED10 0%, transparent 100%); } .cat-20 .phil-detail-body, .cat-20.article-detail-wrap { background: linear-gradient(180deg, #F3E8FF10 0%, transparent 100%); } .cat-33 .phil-detail-body, .cat-33.article-detail-wrap { background: linear-gradient(180deg, #FEE2E210 0%, transparent 100%); } .cat-34 .phil-detail-body, .cat-34.article-detail-wrap { background: linear-gradient(180deg, #DCFCE710 0%, transparent 100%); } .cat-312 .phil-detail-body, .cat-312.article-detail-wrap { background: linear-gradient(180deg, #FEF3C710 0%, transparent 100%); } .cat-313 .phil-detail-body, .cat-313.article-detail-wrap { background: linear-gradient(180deg, #F1F5F910 0%, transparent 100%); } .cat-314 .phil-detail-body, .cat-314.article-detail-wrap { background: linear-gradient(180deg, #E0E7FF10 0%, transparent 100%); } /* ===== 栏目色系：知识文章 hero 色系 ===== */ .cat-17 .page-hero { background: linear-gradient(135deg, #0369A1 0%, #0284C7 50%, #0369A1 100%) !important; } .cat-18 .page-hero { background: linear-gradient(135deg, #0D9488 0%, #14B8A6 50%, #0D9488 100%) !important; } .cat-19 .page-hero { background: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #D97706 100%) !important; } .cat-20 .page-hero { background: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 50%, #7C3AED 100%) !important; } .cat-33 .page-hero { background: linear-gradient(135deg, #B91C1C 0%, #DC2626 50%, #B91C1C 100%) !important; } .cat-34 .page-hero { background: linear-gradient(135deg, #15803D 0%, #16A34A 50%, #15803D 100%) !important; } .cat-312 .page-hero { background: linear-gradient(135deg, #B45309 0%, #D97706 50%, #B45309 100%) !important; } .cat-313 .page-hero { background: linear-gradient(135deg, #475569 0%, #64748B 50%, #475569 100%) !important; } .cat-314 .page-hero { background: linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #4338CA 100%) !important; } /* ===== 响应式 ===== */ @media (max-width: 767px) { .article-cta-card { margin: 32px 0 24px; padding: 32px 12px; } .cta-card-inner { padding: 24px 16px 20px; border-radius: 10px; } .cta-card-inner::before { border-radius: 10px 10px 0 0; } .cta-card-title { font-size: 1.1rem; } .cta-card-subtitle { font-size: 0.82rem; } .cta-card-features { grid-template-columns: 1fr; gap: 8px; } .cta-card-features li { font-size: 0.8rem; padding: 8px 12px; } .cta-card-actions { flex-direction: column; } .cta-btn-primary, .cta-btn-outline { width: 100%; justify-content: center; text-align: center; } .article-refs { margin: 20px 0; padding: 18px 16px; } .article-refs-list li { font-size: 11px; } } /* ============================================ 全站统一 Hero 系统 v2.0 高度统一 400px | 每种风格完全差异化 核心：文字清晰可读 · 动效各不相同 ============================================ */ /* ---- Hero 全局变量 ---- */ :root { --hero-height: 400px; --hero-height-mobile: 320px; --hero-padding-y: 60px; --hero-padding-y-mobile: 44px; } /* ---- Hero 基础样式（所有类型共用） ---- */ .hero-unified { position: relative; min-height: var(--hero-height); display: flex; align-items: center; overflow: hidden; padding: var(--hero-padding-y) 0; } .hero-unified > .container { position: relative; z-index: 2; } /* 底部渐变过渡 */ .hero-unified::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--bg-white, #ffffff)); pointer-events: none; z-index: 1; } /* ---- 全局文字颜色（所有Hero内文字默认白色） ---- */ .hero-unified h1, .hero-unified h2, .hero-unified h3, .hero-unified h4, .hero-unified p, .hero-unified span, .hero-unified a, .hero-unified div { color: #ffffff; } .hero-unified small { color: rgba(255,255,255,0.85); } .hero-unified a:hover { color: #ffd700; } /* ---- 全局文字排版（专业居中 · 统一规范） ---- */ .hero-unified h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: 2px; line-height: 1.5; margin-bottom: 12px; } .hero-unified p { font-size: 0.95rem; line-height: 1.7; letter-spacing: 0.5px; opacity: 0.88; } @media (max-width: 767px) { .hero-unified h1 { font-size: 1.4rem; letter-spacing: 1px; } .hero-unified p { font-size: 0.875rem; } } @media (max-width: 767px) { :root { --hero-height: auto; --hero-padding-y: var(--hero-padding-y-mobile); } .hero-unified { min-height: var(--hero-height-mobile); padding: var(--hero-padding-y-mobile) 0; } .hero-unified::after { height: 40px; } } /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 A：首页 Hero — 深空星海 + 金色粒子漂浮 ║ ║ 风格：高端大气 · 粒子漂浮+光晕浮动 · 渐入动画 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-home { background: linear-gradient(135deg, #000c2a 0%, #162b55 35%, #1a3a6e 65%, #061d38 100%) !important; min-height: var(--hero-height); } /* 浮动粒子 */ .hero-home .hero-particles { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; } .hero-particle { position:absolute; border-radius:50%; background: rgba(255,215,0,0.55); animation: heroParticleFloat linear infinite; } .hero-particle:nth-child(1){left:10%;top:20%;width:4px;height:4px;animation-duration:8s;animation-delay:0s;} .hero-particle:nth-child(2){left:25%;top:60%;width:2px;height:2px;opacity:.4;animation-duration:11s;animation-delay:1s;} .hero-particle:nth-child(3){left:50%;top:30%;width:3px;height:3px;animation-duration:9s;animation-delay:2s;} .hero-particle:nth-child(4){left:70%;top:70%;width:5px;height:5px;opacity:.3;animation-duration:13s;animation-delay:.5s;} .hero-particle:nth-child(5){left:85%;top:15%;width:2px;height:2px;animation-duration:10s;animation-delay:3s;} .hero-particle:nth-child(6){left:35%;top:85%;width:3px;height:3px;opacity:.35;animation-duration:12s;animation-delay:1.5s;} .hero-particle:nth-child(7){left:60%;top:50%;width:4px;height:4px;opacity:.25;animation-duration:14s;animation-delay:2.5s;} .hero-particle:nth-child(8){left:15%;top:45%;width:2px;height:2px;animation-duration:9.5s;animation-delay:4s;} @keyframes heroParticleFloat{ 0%{transform:translateY(0) translateX(0); opacity:0;} 15%{opacity:1;} 50%{transform:translateY(-80px) translateX(20px); opacity:.6;} 85%{opacity:.3;} 100%{transform:translateY(-160px) translateX(-15px); opacity:0;} } /* 光晕球体 */ .hero-home .hero-glow-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:1; } .orb-gold { width:320px; height:320px; background:rgba(255,215,0,0.09); top:8%; right:8%; animation: orbGold 8s ease-in-out infinite; } .orb-blue { width:260px; height:260px; background:rgba(30,120,220,0.12); bottom:3%; left:12%; animation: orbBlue 10s ease-in-out infinite; } @keyframes orbGold{ 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(22px,-16px) scale(1.1);} 66%{transform:translate(-12px,10px) scale(.93);} } @keyframes orbBlue{ 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-20px,14px) scale(1.07);} 66%{transform:translate(14px,-10px) scale(.94;} } /* 首页入场动画 — 从下方淡入上浮 */ .hero-home-animated { opacity: 0; animation: homeFadeUp .75s cubic-bezier(.22,1,.36,1) forwards; } .hero-home-animated.delay-1{animation-delay:.12s;} .hero-home-animated.delay-2{animation-delay:.28s;} .hero-home-animated.delay-3{animation-delay:.45s;} .hero-home-animated.delay-4{animation-delay:.62s;} @keyframes homeFadeUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} } /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 B：内容页 Hero — 墨玉深青 + 装饰线条展开 ║ ║ 风格：沉稳专业 · 左侧竖线生长 + 文字逐行左滑浮现 ║ ║ 用于：关于我们 / 规划哲学 / 单页内容 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-content { background: linear-gradient(160deg, #0a1020 0%, #152842 40%, #1a3654 70%, #0d2137 100%) !important; min-height: var(--hero-height); overflow: hidden; } /* 十字网格纹理 */ .hero-content::before { content:''; position:absolute; inset:0; background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M24 0v48M0 24h48'/%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; z-index:1; } /* 左侧装饰竖线组 */ .hero-content-lines { position:absolute; left:8%; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:18px; pointer-events:none; z-index:1; } .hero-content-lines span { display:block; width:0; height:2px; background:linear-gradient(90deg, #d4a017, transparent); animation: lineGrow .8s ease-out forwards; } .hero-content-lines span:nth-child(1){animation-delay:.05s;} .hero-content-lines span:nth-child(2){animation-delay:.2s; max-width:80px;} .hero-content-lines span:nth-child(3){animation-delay:.35s; max-width:50px;} .hero-content-lines span:nth-child(4){animation-delay:.5s; max-width:110px;} .hero-content-lines span:nth-child(5){animation-delay:.65s; max-width:35px;} @keyframes lineGrow{ to{width:100%;} } /* 内容页标题 — 大字加粗金色强调 */ .hero-content-title { font-size: 2.4rem; font-weight:800; color:#fff !important; letter-spacing:3px; margin-bottom:12px; } .hero-content-title small { display:block; font-weight:400; font-size:1rem; color:#f0c040 !important; letter-spacing:4px; margin-top:8px; } /* 内容页逐行浮现 — 从左侧滑入 */ .hero-content-line { opacity: 0 !important; transform: translateX(-30px); animation: contentSlideIn .6s cubic-bezier(.22,1,.36,1) forwards !important; } .hero-content-line.delay-1{animation-delay:.2s !important;} .hero-content-line.delay-2{animation-delay:.38s !important;} .hero-content-line.delay-3{animation-delay:.54s !important;} .hero-content-line.delay-4{animation-delay:.70s !important;} .hero-content-line.delay-5{animation-delay:.86s !important;} @keyframes contentSlideIn{ to{opacity:1; transform:translateX(0);} } /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 C：表单页 Hero — 深靛蓝 + 同心脉冲环呼吸 ║ ║ 风格：科技感 · 三层脉冲扩散 + 弹性缩放入场 ║ ║ 用于：预约咨询 / 财务体检 / 需求诊断 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-form { background: linear-gradient(145deg, #08142b 0%, #163666 45%, #1a4480 100%) !important; min-height: var(--hero-height); text-align:center; overflow:hidden; } /* 径向脉冲底光 */ .hero-form::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 45%, rgba(212,160,23,.07) 0%, transparent 55%), radial-gradient(circle at 30% 70%, rgba(33,99,200,.08) 0%, transparent 50%); animation: formGlow 5s ease-in-out infinite alternate; pointer-events:none; z-index:1; } @keyframes formGlow{ 0%{opacity:.5; transform:scale(.97);} 100%{opacity:1; transform:scale(1.03);} } /* 同心脉冲环 */ .hero-pulse-ring { position:absolute; top:50%; left:50%; border-radius:50%; border:1.5px solid rgba(255,215,0,.15); pointer-events:none; z-index:1; animation: pulseRingExpand 3.5s ease-out infinite; } .hero-pulse-ring:nth-child(1){ width:180px; height:180px; margin:-90px 0 0 -90px; animation-delay:0s; } .hero-pulse-ring:nth-child(2){ width:300px; height:300px; margin:-150px 0 0 -150px; animation-delay:1.1s; border-color:rgba(255,215,0,.10); } .hero-pulse-ring:nth-child(3){ width:420px; height:420px; margin:-210px 0 0 -210px; animation-delay:2.2s; border-color:rgba(255,215,0,.06); } @keyframes pulseRingExpand{ 0%{transform:scale(.5); opacity:0;} 40%{opacity:.6;} 100%{transform:scale(1.4); opacity:0;} } /* 表单页弹性入场 */ .hero-form-animated { opacity: 0 !important; animation: formBounceIn .7s cubic-bezier(.34,1.56,.64,1) forwards !important; } .hero-form-animated.delay-3{animation-delay:.25s !important;} @keyframes formBounceIn{ from{opacity:0; transform:scale(.92) translateY(16px);} to{opacity:1; transform:scale(1) translateY(0);} } /* 表单标题特殊样式 */ .hero-form .msg-hero-title { font-size:2rem; font-weight:700; color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.3); } .hero-form .msg-hero-sub { font-size:1rem; color:rgba(255,255,255,.78) !important; } .hero-form .msg-hero-sub i{color:#f0c040;} /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 D：文章/列表页 Hero — 科技蓝 + 流光扫描 ║ ║ 风格：信息感 · 水平流光扫过 + 点阵背景 + 错位入场 ║ ║ 用于：文章详情 / 列表页 / 工具页面 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-list { background: linear-gradient(135deg, #0a2050 0%, #1558a3 50%, #0d3a73 100%) !important; min-height: var(--hero-height); text-align:center; overflow:hidden; position:relative; } /* 顶部流光线扫描 */ .hero-flow-light { position:absolute; top:0; left:-100%; width:55%; height:3px; background:linear-gradient(90deg, transparent, rgba(255,215,0,.6), transparent); animation: flowSweep 4.5s ease-in-out infinite; z-index:1; box-shadow:0 0 20px rgba(255,215,0,.3); } @keyframes flowSweep{ 0%{left:-55%;} 100%{left:155%;} } /* 六边形点阵背景 */ .hero-dots-bg { position:absolute; inset:0; background-image: radial-gradient(circle at 15% 30%, rgba(255,255,255,.055) 1.2px, transparent 1.2px), radial-gradient(circle at 85% 30%, rgba(255,215,0,.05) 1.2px, transparent 1.2px), radial-gradient(circle at 50% 70%, rgba(255,255,255,.04) 1px, transparent 1px), radial-gradient(circle at 30% 80%, rgba(255,215,0,.035) 1px, transparent 1px); background-size:70px 70px, 90px 90px, 50px 50px, 110px 110px; pointer-events:none; z-index:1; } /* 列表页错位入场 */ .hero-list-animated { opacity: 0 !important; animation: listRevealIn .6s ease-out forwards !important; } .hero-list-animated.delay-1{animation-delay:.1s !important;} .hero-list-animated.delay-2{animation-delay:.26s !important;} .hero-list-animated.delay-3{animation-delay:.42s !important;} .hero-list-animated.delay-4{animation-delay:.58s !important;} @keyframes listRevealIn{ from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} } /* 列表页内元素颜色覆盖 */ .hero-list h1 { font-size:2rem; font-weight:700; color:#fff !important; text-shadow:0 2px 16px rgba(0,0,0,.25); letter-spacing:1px; } .hero-list .article-category-tag { color:#f0c040 !important; } .hero-list .article-hero-meta { color:rgba(255,255,255,.72) !important; } .hero-list .article-hero-meta i{color:#ffd700;} /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 E：服务/产品页 Hero — 暖金渐变 + 卡片浮升 ║ ║ 风格：温暖可信 · 底部光带流动 + 分栏卡片式入场 ║ ║ 用于：服务介绍 / 产品展示 / 解决方案 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-service { background: linear-gradient(135deg, #1a2744 0%, #2a4066 35%, #1e3a5c 70%, #142844 100%) !important; min-height: var(--hero-height); overflow:hidden; position:relative; } /* 底部金色光带 */ .hero-service::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #d4a017, #f0c040, #d4a017, transparent); animation: goldBarFlow 6s linear infinite; z-index:1; } @keyframes goldBarFlow{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} } /* 右侧斜切装饰 */ .hero-service::after { content:''; position:absolute; right:-15%; top:-10%; width:45%; height:120%; background:linear-gradient(135deg, rgba(212,160,23,.06), transparent); transform:rotate(-12deg); pointer-events:none; z-index:1; } /* 服务页入场 — 卡片式浮起 */ .hero-service-animated { opacity: 0 !important; animation: serviceCardRise .65s cubic-bezier(.22,1,.36,1) forwards !important; } .hero-service-animated.delay-1{animation-delay:.1s !important;} .hero-service-animated.delay-2{animation-delay:.26s !important;} .hero-service-animated.delay-3{animation-delay:.42s !important;} @keyframes serviceCardRise{ from{opacity:0; transform:translateY(24px) rotateX(8deg);} to{opacity:1; transform:translateY(0) rotateX(0);} } .hero-service h1{color:#fff !important; font-size:2.2rem; font-weight:700;} .hero-service h1 i{color:#ffd700;} /* ================================================================ ╔═══════════════════════════════════════════════════════════╗ ║ 类型 F：数据/工具页 Hero — 深绿调 + 数字跳动 ║ ║ 风格：数据驱动 · 波纹扩散 + 计数器效果 ║ ║ 用于：数据中心 / 财务健康 / 诊断工具 ║ ╚═══════════════════════════════════════════════════════════╝ ================================================================ */ .hero-data { background: linear-gradient(160deg, #061a1a 0%, #0d3333 35%, #134040 70%, #0a2525 100%) !important; min-height: var(--hero-height); text-align:center; overflow:hidden; position:relative; } /* 波纹圆环 */ .hero-data::before { content:''; position:absolute; top:50%; left:50%; width:500px; height:500px; margin:-250px 0 0 -250px; border-radius:50%; border:1px solid rgba(46,197,154,.08); animation:dataRipple 6s linear infinite; pointer-events:none; z-index:1; } @keyframes dataRipple{ 0%{transform:scale(.3); opacity:0;} 50%{opacity:.4;} 100%{transform:scale(1.6); opacity:0;} } /* 数据页打字机入场 */ .hero-data-animated { opacity: 0 !important; animation: dataTypingIn .55s steps(1) forwards !important; } .hero-data-animated.delay-1{animation-delay:.08s !important;} .hero-data-animated.delay-2{animation-delay:.22s !important;} .hero-data-animated.delay-3{animation-delay:.36s !important;} @keyframes dataTypingIn{ from{opacity:0; transform:translateY(12px); filter:blur(2px);} to{opacity:1; transform:translateY(0); filter:blur(0);} } .hero-data h1{color:#fff !important; font-size:2.1rem; font-weight:700;} .hero-data h1 i{color:#2ec57a;} /* 绿色数据感图标 */ .hero-data p{color:rgba(255,255,255,.78) !important;}