/* ============================================================ 在线客服悬浮组件（前台 / 后台 / 用户中心共用）桌面端：默认仅显示贴边的竖条把手，悬停时向左滑出完整面板，避免常驻面板遮挡列表操作按钮与卡片；移动端：收窄为图标条并常驻（触屏无 hover）。 ============================================================ */ .fn-service { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 998; width: 62px; text-align: center; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; } .fn-service .fs-head { position: relative; z-index: 2; background: linear-gradient(135deg, #1a80ff, #2f6bf0); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 2px; line-height: 1.55; padding: 12px 2px; border-radius: 14px 0 0 14px; box-shadow: -4px 6px 24px rgba(30, 60, 130, .20); cursor: pointer; user-select: none; } .fn-service .fs-body { margin-top: 6px; background: #fff; border: 1px solid #eef2f8; border-right: none; border-radius: 14px 0 0 14px; box-shadow: -4px 6px 24px rgba(30, 60, 130, .16); overflow: visible; text-align: center; opacity: 0; pointer-events: none; transform: translateX(calc(100% + 12px)); transition: transform .24s ease, opacity .2s ease; } .fn-service:hover .fs-body, .fn-service:focus-within .fs-body { opacity: 1; pointer-events: auto; transform: translateX(0); } .fn-service .fs-item { display: block; position: relative; padding: 11px 4px 9px; color: #6b7a92; font-size: 12px; cursor: pointer; border-top: 1px solid #f2f5fa; transition: background .15s, color .15s; } .fn-service .fs-body .fs-item:first-child { border-top: none; } .fn-service .fs-item:hover { background: #f5f9ff; } .fn-service .fs-item svg { width: 26px; height: 26px; margin: 0 auto 3px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fn-service .fs-qq { color: #12b7f5; } .fn-service .fs-qq:hover { color: #0a95d6; } .fn-service .fs-wx { color: #15b55a; } .fn-service .fs-wx:hover { color: #0e9a48; } .fn-service .fs-top { color: #8a94a6; border-radius: 0 0 0 13px; } .fn-service .fs-top:hover { color: #147cf0; } /* 悬浮弹层（在按钮左侧展开） */ .fn-service .fs-pop { position: absolute; right: 72px; top: 50%; transform: translateY(-50%); width: 178px; background: #fff; border-radius: 12px; box-shadow: 0 10px 36px rgba(20, 45, 110, .22); border: 1px solid #eef2f8; padding: 14px 14px 12px; display: none; text-align: center; z-index: 999; } .fn-service .fs-pop::after { content: ''; position: absolute; right: -7px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left-color: #fff; } .fn-service .fs-item:hover .fs-pop { display: block; } .fn-service .fs-pop b { display: block; font-size: 14px; color: #1f2d3d; font-weight: 600; } .fn-service .fs-pop em { display: block; font-style: normal; color: #8a94a6; font-size: 12.5px; margin-top: 4px; word-break: break-all; } .fn-service .fs-pop i { display: block; font-style: normal; color: #147cf0; font-size: 12.5px; margin-top: 6px; font-weight: 500; } .fn-service .fs-pop img { display: block; width: 148px; height: 148px; object-fit: contain; margin: 8px auto 2px; border: 1px solid #eef2f8; border-radius: 8px; padding: 4px; background: #fafbfd; } /* ============================================================ 增值服务介绍页共用样式（软著申请 / APP上架 / 备案 / ICP·EDI许可证代办 / 微信支付商户号代办）页面在上设置 --svc-a / --svc-b 主题色变量 ============================================================ */ .svc-hero{position:relative;color:#fff;padding:66px 0 72px;text-align:center;background:linear-gradient(135deg,var(--svc-a,#3b6ef6),var(--svc-b,#6a5af9));overflow:hidden} .svc-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.16),transparent 42%),radial-gradient(circle at 82% 78%,rgba(255,255,255,.12),transparent 40%);pointer-events:none} .svc-hero .wrap{position:relative;z-index:1} .svc-hero .svc-badge{display:inline-block;font-size:13px;letter-spacing:2px;padding:5px 16px;border:1px solid rgba(255,255,255,.45);border-radius:20px;margin-bottom:18px;background:rgba(255,255,255,.1)} .svc-hero h1{font-size:38px;margin:0 0 14px;letter-spacing:1px} .svc-hero p{font-size:16.5px;opacity:.95;max-width:780px;margin:0 auto 28px;line-height:1.9} .svc-hero .hero-btns .btn-primary{background:#fff;color:var(--svc-a,#3b6ef6)} .svc-hero .svc-hero-tips{margin-top:26px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:13.5px;opacity:.92} .svc-hero .svc-hero-tips span::before{content:'✓';margin-right:6px;font-weight:700} .svc-sec{padding:58px 0} .svc-sec.alt{background:#f5f8fd} .svc-sec .sec-title{font-size:28px} .svc-sec .svc-en{display:block;text-align:center;color:#aeb8c8;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin:-4px 0 10px;font-weight:400} /* 优势卡片网格 */ .svc-grid{display:grid;gap:20px;margin-top:34px} .svc-grid.c2{grid-template-columns:repeat(2,1fr)} .svc-grid.c3{grid-template-columns:repeat(3,1fr)} .svc-grid.c4{grid-template-columns:repeat(4,1fr)} .svc-card{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:28px 24px;transition:.2s;position:relative} .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(40,60,120,.12);border-color:#dbe6ff} .svc-card .svc-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(135deg,var(--svc-a,#3b6ef6),var(--svc-b,#6a5af9));color:#fff} .svc-card .svc-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .svc-card h3{font-size:17px;margin:0 0 8px;color:#1f2d3d} .svc-card p{margin:0;color:#7a8499;font-size:13.5px;line-height:1.8} .svc-card .svc-tag{position:absolute;top:18px;right:18px;font-size:12px;color:var(--svc-a,#3b6ef6);background:#eef3ff;padding:2px 10px;border-radius:12px} /* 编号理由（软著"为什么办理"） */ .svc-reasons{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px} .svc-reason{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:26px 18px;text-align:center} .svc-reason .rn{width:42px;height:42px;line-height:42px;border-radius:50%;margin:0 auto 14px;font-weight:700;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--svc-a,#3b6ef6),var(--svc-b,#6a5af9))} .svc-reason h3{font-size:16px;margin:0 0 8px} .svc-reason p{margin:0;color:#8a94a6;font-size:12.5px;line-height:1.75} /* 材料清单 */ .svc-materials{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:34px auto 0} .svc-mat{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:16px 18px} .svc-mat .mi{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:#eef3ff;color:var(--svc-a,#3b6ef6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} .svc-mat b{display:block;font-size:14.5px;color:#1f2d3d;margin-bottom:2px} .svc-mat span{font-size:12.5px;color:#8a94a6;line-height:1.6} /* 办理流程 */ .svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;counter-reset:svcstep} .svc-steps.five{grid-template-columns:repeat(5,1fr)} .svc-step{background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:26px 20px;text-align:center;position:relative} .svc-step .sn{width:40px;height:40px;line-height:40px;border-radius:50%;background:linear-gradient(135deg,var(--svc-a,#3b6ef6),var(--svc-b,#6a5af9));color:#fff;font-weight:700;font-size:16px;margin:0 auto 12px} .svc-step h3{font-size:15.5px;margin:0 0 8px} .svc-step p{margin:0;color:#8a94a6;font-size:12.5px;line-height:1.7} /* 两栏对比（许可证/备案类型） */ .svc-cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:34px auto 0} .svc-cmp .svc-card{padding:30px 28px} .svc-cmp .svc-card.a{border-top:4px solid var(--svc-a,#3b6ef6)} .svc-cmp .svc-card.b{border-top:4px solid var(--svc-b,#6a5af9)} .svc-cmp h3{font-size:19px!important} .svc-cmp .svc-cmp-en{font-size:12px;color:#a0a8b8;margin-bottom:12px} .svc-cmp ul{list-style:none;padding:0;margin:0} .svc-cmp li{padding:8px 0;color:#4a5568;font-size:13.5px;border-bottom:1px dashed #eef1f6;line-height:1.6} .svc-cmp li:last-child{border-bottom:0} .svc-cmp li::before{content:'✓';color:var(--svc-a,#3b6ef6);font-weight:700;margin-right:8px} /* 应用商店墙 */ .svc-stores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:34px auto 0} .svc-store{background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:20px 14px;text-align:center;font-size:14px;color:#4a5568;font-weight:500;transition:.2s} .svc-store:hover{border-color:#dbe6ff;box-shadow:0 8px 22px rgba(40,60,120,.08);transform:translateY(-2px)} .svc-store .si{font-size:24px;display:block;margin-bottom:8px} /* FAQ */ .svc-faq{max-width:860px;margin:34px auto 0} .svc-faq details{background:#fff;border:1px solid #eef1f6;border-radius:10px;margin-bottom:12px;padding:16px 22px} .svc-faq summary{font-weight:600;cursor:pointer;color:#1f2d3d;outline:none;font-size:15px;list-style:none;position:relative;padding-right:24px} .svc-faq summary::-webkit-details-marker{display:none} .svc-faq summary::after{content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:20px;color:var(--svc-a,#3b6ef6);font-weight:400} .svc-faq details[open] summary::after{content:'−'} .svc-faq details p{margin:10px 0 0;color:#6b7688;font-size:14px;line-height:1.85} /* 底部 CTA */ .svc-cta{text-align:center;padding:60px 0 68px} .svc-cta h2{font-size:28px;margin:0 0 12px;color:#1f2d3d} .svc-cta p{color:#8a94a6;margin:0 0 26px;font-size:15px} .svc-cta .btn-primary{background:linear-gradient(135deg,var(--svc-a,#3b6ef6),var(--svc-b,#6a5af9));color:#fff} /* 首页合规服务卡片入口 */ .legal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px} .legal-card{display:block;background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:24px 18px;text-align:center;transition:.2s;color:inherit} .legal-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(40,60,120,.12);border-color:#dbe6ff} .legal-card .lc-ico{width:48px;height:48px;border-radius:13px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff} .legal-card .lc-ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .legal-card h3{font-size:15px;margin:0 0 6px;color:#1f2d3d} .legal-card p{margin:0;font-size:12.5px;color:#8a94a6;line-height:1.6;min-height:38px} .legal-card .lc-more{display:inline-block;margin-top:10px;font-size:13px;color:#2b6cf5} /* ============ 行业化美工增强 ============ */ /* Hero 行业水印大图标 */ .svc-hero-mark{position:absolute;right:3%;top:50%;transform:translateY(-50%);opacity:.1;pointer-events:none;line-height:0;z-index:0} .svc-hero-mark svg{width:280px;height:280px;stroke:#fff;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} /* Hero 行业数据条 */ .svc-hero-stats{position:relative;z-index:1;margin:34px auto 0;display:flex;justify-content:center;gap:14px 52px;flex-wrap:wrap;max-width:860px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)} .svc-hero-stats .hs b{display:block;font-size:25px;line-height:1.25;font-weight:800;letter-spacing:.5px} .svc-hero-stats .hs span{font-size:12.5px;opacity:.88} /* 区块标题装饰下划线 */ .svc-page .sec-title{position:relative;padding-bottom:14px} .svc-page .sec-title::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:46px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--svc-a),var(--svc-b))} /* 卡片图标改为行业彩色柔底风（覆盖默认渐变实心） */ .svc-card .svc-ico{transition:.2s} .svc-card:hover .svc-ico{transform:scale(1.06)} /* —— 软著（紫） —— */ .pg-soft .svc-grid .svc-card:nth-child(1) .svc-ico,.pg-soft .svc-mat .mi{background:#f1eefe;color:#6d5ef6} /* —— APP上架（蓝）：4 优势 —— */ .pg-applisting .svc-grid .svc-card:nth-child(1) .svc-ico{background:#e8f1ff;color:#2563eb} .pg-applisting .svc-grid .svc-card:nth-child(2) .svc-ico{background:#e6f9ff;color:#0284c7} .pg-applisting .svc-grid .svc-card:nth-child(3) .svc-ico{background:#e7f8f1;color:#059669} .pg-applisting .svc-grid .svc-card:nth-child(4) .svc-ico{background:#fff4e8;color:#ea580c} /* 应用商店品牌色块 */ .svc-store .si{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#fff} .svc-store .si svg{width:24px;height:24px;fill:currentColor} .svc-store .si span{font-size:15px;font-weight:800;letter-spacing:.5px} /* —— 备案（绿）：4 优势 —— */ .pg-icp .svc-grid .svc-card:nth-child(1) .svc-ico{background:#e7f8f1;color:#0ea572} .pg-icp .svc-grid .svc-card:nth-child(2) .svc-ico{background:#e6faf7;color:#0d9488} .pg-icp .svc-grid .svc-card:nth-child(3) .svc-ico{background:#e8f1ff;color:#2563eb} .pg-icp .svc-grid .svc-card:nth-child(4) .svc-ico{background:#fef6e7;color:#d97706} /* 备案类型对比卡头图标 */ .svc-cmp-head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .svc-cmp-head .ch-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .svc-cmp-head .ch-ico svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pg-icp .svc-cmp .a .ch-ico{background:linear-gradient(135deg,#0ea572,#0d9488)} .pg-icp .svc-cmp .b .ch-ico{background:linear-gradient(135deg,#0d9488,#0891b2)} /* —— 许可证（橙红）：4 理由 —— */ .pg-license .svc-grid .svc-card:nth-child(1) .svc-ico{background:#fff4e8;color:#ea580c} .pg-license .svc-grid .svc-card:nth-child(2) .svc-ico{background:#fef2f2;color:#dc2626} .pg-license .svc-grid .svc-card:nth-child(3) .svc-ico{background:#e8f1ff;color:#2563eb} .pg-license .svc-grid .svc-card:nth-child(4) .svc-ico{background:#f0fdf4;color:#16a34a} .pg-license .svc-cmp .a .ch-ico{background:linear-gradient(135deg,#f59e0b,#f97316)} .pg-license .svc-cmp .b .ch-ico{background:linear-gradient(135deg,#ef4444,#dc2626)} /* —— 微信支付商户号（绿）：6 支付场景 —— */ .pg-wxpay .svc-grid .svc-card .svc-ico{background:#e7f8f1;color:#07c160} .pg-wxpay .svc-grid .svc-card:nth-child(2) .svc-ico{background:#e8f1ff;color:#2563eb} .pg-wxpay .svc-grid .svc-card:nth-child(3) .svc-ico{background:#f0fdf4;color:#16a34a} .pg-wxpay .svc-grid .svc-card:nth-child(4) .svc-ico{background:#f5f3ff;color:#7c3aed} .pg-wxpay .svc-grid .svc-card:nth-child(5) .svc-ico{background:#ecfeff;color:#0891b2} .pg-wxpay .svc-grid .svc-card:nth-child(6) .svc-ico{background:#fef2f2;color:#dc2626} /* 材料/步骤图标柔底统一 */ .pg-applisting .svc-mat .mi{background:#e8f1ff;color:#2563eb} .pg-icp .svc-mat .mi{background:#e7f8f1;color:#0ea572} .pg-license .svc-mat .mi{background:#fff4e8;color:#ea580c} .pg-wxpay .svc-mat .mi{background:#e7f8f1;color:#07c160} /* CTA 区增强：渐变描边卡片 */ .svc-cta .wrap{max-width:860px;background:#fff;border:1px solid #eef1f6;border-radius:20px;padding:46px 30px;box-shadow:0 18px 46px rgba(40,60,120,.08)} @media(max-width:900px){ .svc-hero-mark{display:none} .svc-reasons{grid-template-columns:repeat(2,1fr)} .svc-steps,.svc-steps.five{grid-template-columns:repeat(2,1fr)} .svc-grid.c3,.svc-grid.c4{grid-template-columns:repeat(2,1fr)} .svc-stores{grid-template-columns:repeat(2,1fr)} .legal-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .svc-hero{padding:48px 0 54px} .svc-hero h1{font-size:27px} .svc-hero p{font-size:14.5px} .svc-grid.c2,.svc-materials,.svc-cmp{grid-template-columns:1fr} .svc-sec{padding:42px 0} .svc-sec .sec-title{font-size:23px} } /* 移动端：整条收窄为图标条并常驻（触屏无 hover） */ @media (max-width: 767px) { .fn-service { width: 48px; } .fn-service .fs-head { font-size: 12px; letter-spacing: 1px; padding: 9px 1px; border-radius: 12px 0 0 12px; } .fn-service .fs-body { transform: none; opacity: 1; pointer-events: auto; margin-top: 4px; border-radius: 12px 0 0 12px; } .fn-service .fs-item { padding: 9px 2px 7px; font-size: 0; } .fn-service .fs-item span:not(.fs-pop) { display: none; } .fn-service .fs-item svg { width: 24px; height: 24px; margin-bottom: 0; } .fn-service .fs-pop { right: 56px; } }