WhatsApp 外贸增长实战指南 · 06让网站访客，
一键与你的 WhatsApp 建立联系 #
访客在你的网站上翻产品、看参数、犹豫——然后关掉页面走了。这一步要做的事：在他还没走之前，给他一个「直接说话」的入口。
约 6 分钟读完3 个操作要点网站前端两个入口
AL买手 · Alex
WhatsApp · 已同步到后台
Is this tumbler available in 500 pcs?
Yes — 500 pcs is available. May I know your target market?
AI 建议回复访客来自官网 20oz 系列产品页，停留约 2 分钟，看过规格与起订量。
独立图标AI 对话页来源轨迹
他在产品页上犹豫了半分钟，然后走了 #
（访客翻了两款产品，看了参数，想问问起订量，然后关掉了页面）
这个买家从搜索结果点进你的官网，看了两款 20oz 保温杯，停在规格表上想了半分钟：500 支能不能做、交期多久、能不能印 logo。页面上只有一个「联系我们」表单，要填姓名、邮箱、留言，然后等一封不知道什么时候来的邮件。他想了想，关掉页面，去了下一家。
想说话的人，被要求先填一张表 #
不是访客没有需求，是我们把「联系」这件事设计得太麻烦了。
表单本身就是一道门槛 #
填姓名、邮箱、需求，再等回复。愿意填完的人，本来就比想咨询的人少得多。
等回复的时间，人已经走了 #
邮件回复按小时算，客户的耐心按分钟算。等他收到回信，采购节奏可能已经换了别人。
聊起来才发现问的是别的 #
等业务员看到留言再回，客户当时关心的问题可能早就变了 —— 又要重新问一遍。
在他想说话的地方，放一个能说话的入口 #
网站前端提供两个接入位置：一个让访客随时能找到你，一个让正在跟 AI 聊的人随时能换人。
1独立 WhatsApp 图标访客在任何页面点一下，直接发起对话。
2AI 对话页的转接入口已经在跟 AI「Alex」聊的访客，可以从右上角转到 WhatsApp 继续。
3带着来源与轨迹进来对话开始时，客户从哪来、看过什么已经带过来了。
4会话进入后台与其它 WhatsApp 会话一样归到公司，可以正常接手和跟进。
两个入口，覆盖两种不同的犹豫一个解决「我想问但找不到人」，一个解决「我问了一半，想找个真人确认」。前者是入口，后者是出口 —— 但方向都是把人留在你的对话里。
三步把两个入口接上 #
两个位置分别对应两种场景，配置好之后，访客的动作都能落到同一套会话体系里。
01操作目的让访客在任何页面都能「一键说话」，不必经过表单。
你要做的在网站前端放置 WhatsApp 入口图标，设置点击后发起的对话。
系统会怎样访客点击图标直接进入 WhatsApp 对话，消息落到公司绑定的账号上。
位置和样式按你的站点来定，判断标准只有一条：访客想咨询的那一刻，能不能一眼看到它。
图标是「主动找人」，不是「装饰」一个放在角落、和页面融为一体的图标，等于没有。它应该像一个随时可用的对话按钮，而不是一条需要被发现的备注。
操作目的让正在跟 AI「Alex」聊的访客，随时可以换成一个真人继续。
你要做的在网站前端 AI「Alex」的对话页，右上角配置 WhatsApp 转接入口。
系统会怎样访客点击后，从 AI 对话转入 WhatsApp，继续跟同一个客户身份往下聊。
为什么要留这个口子：AI 能答常见问题、能介绍产品，但到了「要报价、要样品、要谈条款」这一步，很多客户还是更愿意跟一个真人确认。右上角这个入口，就是那个「随时可以找人」的按钮 —— 不用重新开头，也不用放弃刚才说过的话。
操作目的让接手的业务员知道这个人从哪来、关心什么。
你要做的这一步不需要额外操作 —— 入口本身会把客户的来源信息一起带过来。
系统会怎样客户的来源与轨迹信息在 WhatsApp 中均可读取，接手时已经知道他从哪个页面来、看过哪些产品。
这件事的价值在于「第一句话」：知道来路的回复可以从「您刚看的 20oz 系列，500 支是可以做的」开始；不知道来路的，只能从「您好，请问需要什么」重新问一遍。
入口要能带信息，才不只是个按钮如果入口只是打开一个空白对话框，访客还得把需求重讲一遍，那和在页面上放个邮箱地址差别不大。
真正改变了什么把「想咨询」的那一刻，留在自己的网站上 #
咨询不用先填表想说话就点一下，门槛从「填完表单等邮件」降到「发一句话」。
AI 聊到一半，可以换人AI 对话页右上角留了口子，客户不必重新开头，也不用放弃已经说过的内容。
来的不只是消息，还有来路客户来源与轨迹随会话一起进来，第一句回复就能接上他正在看的东西。
入口的具体形态以实际页面为准网站前端两个入口的位置、样式与转接方式，会随站点版本调整；配置时以你所用版本的页面为准。
访客已经在你的网站上了，别让他空手离开 #
一个入口解决「找不到人」，一个入口解决「聊到一半想换人」。两处都接上，网站上的流量才有机会变成对话。
#xw-tut{–ink:#0B1F35;–ink2:#14304C;–green:#12B76A;–green-d:#0A8F52;–green-l:#E9F8F0;
–wa:#25D366;–bg:#F5F8FC;–card:#FFFFFF;–line:#E4EBF3;–tx:#0C1A28;–mut:#5C6E80;–amber:#B45309;–amber-l:#FEF6E7;
box-sizing:border-box;max-width:1080px;margin:0 auto;padding:0 4px;color:var(–tx);
font-family:-apple-system,BlinkMacSystemFont,”Segoe UI”,”PingFang SC”,”Hiragino Sans GB”,”Microsoft YaHei”,sans-serif;
font-size:16.5px;line-height:1.78;-webkit-font-smoothing:antialiased}#xw-tut *, #xw-tut *::before, #xw-tut *::after{box-sizing:border-box}#xw-tut p{margin:0 0 14px;color:inherit}#xw-tut ul{margin:0 0 14px;padding-left:0;list-style:none}#xw-tut li{position:relative;padding-left:26px;margin-bottom:9px}#xw-tut li::before{content:””;position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:2px;
background:var(–green);transform:rotate(45deg)}#xw-tut strong{font-weight:600;color:var(–tx)}#xw-tut a{color:var(–green-d);text-decoration:none;border-bottom:1px solid rgba(18,183,106,.35)}#xw-tut a:hover{border-bottom-color:var(–green-d)}#xw-tut h2, #xw-tut h3, #xw-tut h4{margin:0;line-height:1.35;letter-spacing:-.01em;font-weight:650;color:inherit}#xw-tut img{max-width:100%;height:auto;display:block}#xw-tut svg.xw-i{width:1em;height:1em;flex:none}#xw-tut /* ———- hero ———- */
.xw-hero{position:relative;overflow:hidden;border-radius:24px;margin:0 0 44px;
background:linear-gradient(135deg,#0B1F35 0%,#102A45 52%,#0C2138 100%);
padding:52px 48px 48px;color:#fff;box-shadow:0 24px 60px -28px rgba(11,31,53,.55)}#xw-tut .xw-hero::before{content:””;position:absolute;width:520px;height:520px;right:-160px;top:-220px;border-radius:50%;
background:radial-gradient(circle,rgba(18,183,106,.42),rgba(18,183,106,0) 68%)}#xw-tut .xw-hero::after{content:””;position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:46px 46px;mask-image:linear-gradient(115deg,transparent 32%,#000 100%);
-webkit-mask-image:linear-gradient(115deg,transparent 32%,#000 100%)}#xw-tut .xw-hero>*{position:relative;z-index:1}#xw-tut .xw-hero__grid{display:flex;flex-wrap:wrap;gap:38px;align-items:center}#xw-tut .xw-hero__txt{flex:2 1 360px;min-width:min(100%,340px)}#xw-tut .xw-brand{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:999px;margin-bottom:22px}#xw-tut .xw-brand .xw-dot{width:7px;height:7px;border-radius:50%;background:var(–wa);box-shadow:0 0 0 4px rgba(37,211,102,.22)}#xw-tut .xw-hero h1, #xw-tut .xw-hero .xw-hero__h1{font-size:clamp(25px,3.1vw,38px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:18px}#xw-tut .xw-hero h1 em, #xw-tut .xw-hero .xw-hero__h1 em{font-style:normal;font-weight:700;color:#4ADE9B}#xw-tut .xw-hero__lead{font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.76);max-width:560px;margin-bottom:26px}#xw-tut .xw-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}#xw-tut .xw-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(255,255,255,.8);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:7px 13px;border-radius:9px}#xw-tut .xw-meta svg{color:#4ADE9B}#xw-tut .xw-cta{display:flex;flex-wrap:wrap;gap:12px}#xw-tut .xw-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;padding:13px 22px;
border-radius:11px;border:1px solid transparent;transition:.18s;cursor:pointer}#xw-tut .xw-btn–p{background:var(–green);color:#04231A;box-shadow:0 12px 26px -12px rgba(18,183,106,.85)}#xw-tut .xw-btn–p:hover{background:#19c876;transform:translateY(-1px)}#xw-tut .xw-btn–g{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}#xw-tut .xw-btn–g:hover{background:rgba(255,255,255,.14)}#xw-tut a.xw-btn{border-bottom:none}#xw-tut .xw-mock{flex:1 1 300px;min-width:min(100%,300px);background:#fff;border-radius:18px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
border:1px solid rgba(255,255,255,.5)}#xw-tut .xw-mock__top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #EDF1F6;margin-bottom:14px}#xw-tut .xw-mock__av{width:32px;height:32px;border-radius:50%;background:var(–green-l);color:var(–green-d);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}#xw-tut .xw-mock__nm{font-size:13.5px;font-weight:600;color:#12293F}#xw-tut .xw-mock__st{font-size:11.5px;color:#7E8C9B}#xw-tut .xw-mock__wa{margin-left:auto;color:var(–wa)}#xw-tut .xw-b{font-size:12.6px;line-height:1.6;padding:9px 13px;border-radius:12px;margin-bottom:9px;max-width:88%}#xw-tut .xw-b–in{background:#F3F6FA;color:#31465A;border-top-left-radius:4px}#xw-tut .xw-b–out{background:#E7F9EF;color:#0C3B26;margin-left:auto;border-top-right-radius:4px}#xw-tut .xw-b–ai{background:#F7FBF9;border:1px dashed #B7E6CD;color:#22513B;font-size:12.2px;max-width:100%}#xw-tut .xw-b–ai b{display:flex;align-items:center;gap:6px;color:var(–green-d);font-size:11.5px;font-weight:600;margin-bottom:5px}#xw-tut .xw-mock__bar{display:flex;align-items:center;gap:8px;margin-top:12px}#xw-tut .xw-chip{font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:7px;border:1px solid var(–line);color:#3B5166;background:#fff;white-space:nowrap}#xw-tut .xw-chip–g{color:var(–green-d);border-color:#BCE7D0;background:#F2FBF6}#xw-tut .xw-mock__in{flex:1;height:32px;border-radius:8px;border:1px solid var(–line);background:#FAFCFE}#xw-tut /* ———- generic ———- */
.xw-sec{margin-bottom:52px}#xw-tut .xw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(–green-d);margin-bottom:12px}#xw-tut .xw-eyebrow::before{content:””;width:20px;height:2px;border-radius:2px;background:var(–green)}#xw-tut .xw-h2{font-size:clamp(21px,2.3vw,27px);font-weight:700;margin-bottom:10px}#xw-tut .xw-sub{color:var(–mut);font-size:15.5px;max-width:780px;margin-bottom:26px}#xw-tut .xw-grid{display:grid;gap:18px}#xw-tut .xw-g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}#xw-tut .xw-g2{grid-template-columns:repeat(2,1fr)}#xw-tut .xw-card{background:var(–card);border:1px solid var(–line);border-radius:16px;padding:24px;
box-shadow:0 1px 2px rgba(13,27,42,.03)}#xw-tut .xw-card h3{font-size:16.5px;font-weight:650;margin-bottom:8px}#xw-tut .xw-card p{margin:0;color:var(–mut);font-size:14.6px;line-height:1.72}#xw-tut .xw-icobox{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
font-size:20px;margin-bottom:15px;background:var(–green-l);color:var(–green-d)}#xw-tut .xw-icobox svg{width:21px;height:21px}#xw-tut .xw-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));background:var(–card);border:1px solid var(–line);
border-radius:16px;overflow:hidden}#xw-tut .xw-flow__it{padding:22px 20px;border-right:1px solid var(–line)}#xw-tut .xw-flow__it:last-child{border-right:none}#xw-tut .xw-flow__n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(–green-d);margin-bottom:8px}#xw-tut .xw-flow__t{font-size:15.5px;font-weight:650;margin-bottom:6px}#xw-tut .xw-flow__d{font-size:13.4px;color:var(–mut);line-height:1.6}#xw-tut /* ———- steps ———- */
.xw-steps{position:relative}#xw-tut .xw-step{position:relative;padding:0 0 34px 62px;border-left:2px solid #E8EEF6;margin-left:19px}#xw-tut .xw-step:last-child{border-left-color:transparent;padding-bottom:0}#xw-tut .xw-step__no{position:absolute;left:-20px;top:0;width:38px;height:38px;border-radius:11px;background:var(–ink);
color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
box-shadow:0 8px 18px -8px rgba(11,31,53,.6)}#xw-tut .xw-step__h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px;padding-top:6px}#xw-tut .xw-step__h h3{font-size:18.5px;font-weight:680}#xw-tut .xw-step__body{padding-top:6px}#xw-tut .xw-path{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:600;
color:#1E4B33;background:var(–green-l);border:1px solid #C7EBD8;padding:7px 12px;border-radius:9px;margin:4px 0 14px}#xw-tut .xw-path svg{color:var(–green-d)}#xw-tut .xw-path i{font-style:normal;color:#5E8E77;font-weight:500}#xw-tut .xw-fig{margin:18px 0 0;background:#F8FAFC;border:1px solid var(–line);border-radius:14px;padding:14px}#xw-tut .xw-fig img{border-radius:9px;width:auto;max-width:100%;margin:0 auto;border:1px solid #E9EFF6;background:#fff}#xw-tut .xw-fig–sm{max-width:268px;margin-left:0}#xw-tut .xw-fig–sm img{margin:0}#xw-tut .xw-fig figcaption{font-size:13px;color:var(–mut);margin-top:11px;display:flex;gap:8px;align-items:flex-start;line-height:1.6}#xw-tut .xw-fig figcaption::before{content:””;width:3px;border-radius:3px;background:var(–green);flex:none;align-self:stretch}#xw-tut .xw-figs{display:grid;gap:14px;margin-top:18px}#xw-tut .xw-figs–2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}#xw-tut .xw-figs .xw-fig{margin:0}#xw-tut .xw-note{display:flex;gap:13px;border-radius:13px;padding:16px 18px;margin:16px 0 0;font-size:14.6px;line-height:1.72}#xw-tut .xw-note svg{width:19px;height:19px;flex:none;margin-top:3px}#xw-tut .xw-note p{margin:0}#xw-tut .xw-note b{display:block;font-weight:650;margin-bottom:3px}#xw-tut .xw-note–tip{background:var(–green-l);border:1px solid #C7EBD8;color:#1C4B35}#xw-tut .xw-note–tip svg{color:var(–green-d)}#xw-tut .xw-note–warn{background:var(–amber-l);border:1px solid #F5DFB7;color:#6B4708}#xw-tut .xw-note–warn svg{color:var(–amber)}#xw-tut .xw-note–info{background:#EEF5FE;border:1px solid #D3E4FA;color:#1B4374}#xw-tut .xw-note–info svg{color:#2563EB}#xw-tut .xw-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:8px}#xw-tut .xw-cmp__c{background:#fff;border:1px solid var(–line);border-radius:16px;padding:22px}#xw-tut .xw-cmp__c–best{border-color:#B7E6CD;box-shadow:0 0 0 3px rgba(18,183,106,.1)}#xw-tut .xw-tag{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:6px;margin-bottom:12px}#xw-tut .xw-tag–g{background:var(–green);color:#fff}#xw-tut .xw-tag–n{background:#EEF2F7;color:#5C6E80}#xw-tut .xw-cmp__c h4{font-size:16.5px;font-weight:650;margin-bottom:8px}#xw-tut .xw-cmp__c>p{font-size:14.4px;color:var(–mut);margin-bottom:14px}#xw-tut .xw-mini{display:flex;gap:10px;flex-wrap:wrap}#xw-tut .xw-mini span{font-size:12.6px;font-weight:600;color:#33506B;background:#F4F7FB;border-radius:8px;padding:7px 11px}#xw-tut .xw-mini span b{color:var(–green-d);margin-right:5px}#xw-tut .xw-cmp__f{font-size:13.4px;color:#7A8A9A;margin:12px 0 0}#xw-tut .xw-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin:6px 0 18px}#xw-tut .xw-bar__i{background:#fff;border:1px solid var(–line);border-radius:14px;padding:16px 12px;text-align:center}#xw-tut .xw-bar__i svg{width:22px;height:22px;color:var(–ink2);margin-bottom:9px}#xw-tut .xw-bar__i div{font-size:14px;font-weight:600}#xw-tut .xw-bar__i small{display:block;font-size:11.5px;color:#8A99A8;margin-top:3px}#xw-tut .xw-bar__i–biz{background:#FBFDFF;border-color:#D9E7F5}#xw-tut .xw-bar__i–ai{background:linear-gradient(160deg,#F2FBF6,#EAF7F1);border-color:#C7EBD8}#xw-tut .xw-bar__i–ai svg{color:var(–green-d)}#xw-tut .xw-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13.2px;color:var(–mut)}#xw-tut .xw-legend span{display:inline-flex;align-items:center;gap:7px}#xw-tut .xw-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}#xw-tut .xw-sub3{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin:16px 0 0}#xw-tut .xw-sub3 div{background:#fff;border:1px solid var(–line);border-radius:13px;padding:16px 18px}#xw-tut .xw-sub3 b{display:flex;align-items:center;gap:9px;font-size:14.6px;font-weight:650;margin-bottom:6px}#xw-tut .xw-sub3 b i{width:21px;height:21px;border-radius:6px;background:var(–green-l);color:var(–green-d);
font-style:normal;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}#xw-tut .xw-sub3 p{margin:0;font-size:13.5px;color:var(–mut);line-height:1.65}#xw-tut .xw-sw{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}#xw-tut .xw-sw span{font-size:13px;padding:8px 13px;border-radius:9px;background:#fff;border:1px solid var(–line);color:#3B5166}#xw-tut .xw-sw span.on{background:var(–green-l);border-color:#BCE7D0;color:#1C4B35;font-weight:600}#xw-tut .xw-sw span.off{color:#93A2B1;border-style:dashed}#xw-tut .xw-end{background:linear-gradient(135deg,#0B1F35,#123152);border-radius:22px;padding:44px 42px;color:#fff;
text-align:center;margin-top:12px}#xw-tut .xw-end h3{font-size:clamp(19px,2vw,24px);font-weight:700;margin-bottom:12px}#xw-tut .xw-end p{color:rgba(255,255,255,.74);max-width:620px;margin:0 auto 26px;font-size:15.4px}#xw-tut .xw-end .xw-cta{justify-content:center}#xw-tut .xw-rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:12px}#xw-tut .xw-rel a{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(–line);border-radius:13px;
padding:16px 18px;border-bottom:1px solid var(–line);transition:.16s}#xw-tut .xw-rel a:hover{border-color:#BCE7D0;background:#FBFEFC;transform:translateY(-1px)}#xw-tut .xw-rel svg{width:19px;height:19px;color:var(–green-d);flex:none}#xw-tut .xw-rel b{font-size:14.8px;font-weight:600;color:var(–tx);flex:1}#xw-tut .xw-rel small{display:block;font-weight:400;font-size:12.8px;color:#7A8A9A;margin-top:2px}#xw-tut .xw-rel span{color:#A3B0BD;font-size:15px}
@media (max-width:960px){#xw-tut .xw-hero{padding:40px 30px}#xw-tut .xw-bar{grid-template-columns:repeat(2,1fr)}#xw-tut .xw-flow{grid-template-columns:repeat(2,1fr)}#xw-tut .xw-flow__it:nth-child(2){border-right:none}#xw-tut .xw-flow__it:nth-child(-n+2){border-bottom:1px solid var(–line)}
}
@media (max-width:640px){#xw-tut{font-size:15.6px}#xw-tut .xw-hero{padding:30px 20px;border-radius:18px}#xw-tut .xw-hero__lead{font-size:15.4px}#xw-tut .xw-meta span{font-size:12.6px}#xw-tut .xw-btn{width:100%;justify-content:center}#xw-tut .xw-g3, #xw-tut .xw-g2, #xw-tut .xw-cmp, #xw-tut .xw-figs–2, #xw-tut .xw-bar, #xw-tut .xw-sub3, #xw-tut .xw-flow, #xw-tut .xw-rel{grid-template-columns:1fr}#xw-tut .xw-flow__it{border-right:none;border-bottom:1px solid var(–line)}#xw-tut .xw-flow__it:last-child{border-bottom:none}#xw-tut .xw-step{padding-left:44px;margin-left:16px}#xw-tut .xw-step__no{width:32px;height:32px;left:-17px;font-size:13px;border-radius:9px}#xw-tut .xw-end{padding:32px 22px}#xw-tut .xw-card{padding:19px}#xw-tut .xw-fig{padding:10px}#xw-tut .xw-fig–sm{max-width:100%}#xw-tut .xw-sub4{grid-template-columns:1fr}#xw-tut .xw-essence{flex-direction:column;gap:14px;padding:22px 20px}
}#xw-tut /* ———- series nav ———- */
.xw-series{background:#fff;border:1px solid var(–line);border-radius:16px;padding:18px 20px;margin:0 0 36px}#xw-tut .xw-series__t{display:block;font-size:12.2px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(–mut);margin-bottom:13px}#xw-tut .xw-series__list{display:flex;flex-wrap:wrap;gap:8px}#xw-tut .xw-series__list a, #xw-tut .xw-series__list span{display:inline-flex;align-items:center;gap:8px;font-size:13.4px;font-weight:600;
padding:9px 13px;border-radius:10px;border:1px solid var(–line);background:#fff;color:#3B5166;
text-decoration:none;border-bottom:1px solid var(–line);transition:.16s}#xw-tut .xw-series__list a:hover{border-color:#BCE7D0;background:#F6FDF9;color:#1C4B35;transform:translateY(-1px)}#xw-tut .xw-series__list b{font-weight:800;font-size:11.4px;letter-spacing:.03em;color:var(–green-d);
background:var(–green-l);border-radius:6px;padding:2px 6px}#xw-tut .xw-series__list .is-on{background:var(–ink);border-color:var(–ink);color:#fff}#xw-tut .xw-series__list .is-on b{background:rgba(255,255,255,.16);color:#7BEFB4}#xw-tut .xw-series__list .is-soon{color:#A9B6C3;border-style:dashed;background:#FBFCFE}#xw-tut .xw-series__list .is-soon b{background:#F1F4F8;color:#A9B6C3}#xw-tut /* ———- next / prev band ———- */
.xw-next{display:flex;align-items:center;gap:18px;margin-top:8px;border-radius:18px;padding:26px 28px;
background:linear-gradient(125deg,#0B1F35,#123152);color:#fff;text-decoration:none;border-bottom:none}#xw-tut a.xw-next{border-bottom:none}#xw-tut .xw-next:hover{background:linear-gradient(125deg,#0d2540,#16395f)}#xw-tut .xw-next__k{font-size:11.8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7BEFB4;margin-bottom:7px;display:block}#xw-tut .xw-next__t{display:block;font-size:19px;font-weight:700}#xw-tut .xw-next__d{display:block;font-size:13.8px;color:rgba(255,255,255,.7);margin-top:5px}#xw-tut .xw-next__g{flex:1}#xw-tut .xw-next__a{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.1);
display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}#xw-tut .xw-next–soon{opacity:.62}#xw-tut .xw-next–soon .xw-next__k{color:#9FB6C9}#xw-tut /* ———- series nav: two groups ———- */
.xw-series__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:9px}#xw-tut .xw-series__row:last-child{margin-bottom:0}#xw-tut .xw-series__g{font-size:11.6px;font-weight:700;letter-spacing:.06em;color:#8A99A8;background:#F2F5F9;
border-radius:7px;padding:6px 10px;flex:none;min-width:66px;text-align:center}#xw-tut /* ———- pain points ———- */
.xw-pain .xw-icobox{background:#FDF2F2;color:#C0392B}#xw-tut /* ———- real scenario ———- */
.xw-scene{background:#fff;border:1px solid var(–line);border-left:3px solid var(–green);
border-radius:14px;padding:22px 24px;box-shadow:0 1px 2px rgba(13,27,42,.03)}#xw-tut .xw-scene__q{background:#F6F9FC;border-radius:12px;padding:14px 16px;margin:0 0 12px;
font-size:15.2px;line-height:1.72;color:#22394F}#xw-tut .xw-scene__q b{color:var(–green-d)}#xw-tut .xw-scene__n{margin:0;font-size:14.6px;line-height:1.78;color:var(–mut)}#xw-tut .xw-scene__n strong{color:var(–tx)}#xw-tut /* ———- numbered chain ———- */
.xw-chain{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:18px 0 0}#xw-tut .xw-chain>div{background:#fff;border:1px solid var(–line);border-radius:13px;padding:15px 16px}#xw-tut .xw-chain b{display:flex;align-items:center;gap:9px;font-size:14.4px;font-weight:650;margin-bottom:7px}#xw-tut .xw-chain b i{width:21px;height:21px;border-radius:6px;background:var(–green-l);color:var(–green-d);
font-style:normal;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}#xw-tut .xw-chain p{margin:0;font-size:13.3px;color:var(–mut);line-height:1.62}#xw-tut /* ———- value list ———- */
.xw-val{display:grid;gap:12px}#xw-tut .xw-val>div{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(–line);
border-radius:13px;padding:16px 18px}#xw-tut .xw-val svg{width:19px;height:19px;color:var(–green-d);flex:none;margin-top:3px}#xw-tut .xw-val b{display:block;font-size:14.8px;font-weight:650;margin-bottom:4px}#xw-tut .xw-val p{margin:0;font-size:14.2px;color:var(–mut);line-height:1.7}#xw-tut /* ———- step: purpose / action / result ———- */
.xw-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:10px;margin:14px 0 0}#xw-tut .xw-trio>div{background:#F7FAFD;border:1px solid var(–line);border-radius:11px;padding:12px 14px}#xw-tut .xw-trio b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(–mut);margin-bottom:5px}#xw-tut .xw-trio p{margin:0;font-size:13.6px;line-height:1.62;color:#31465A}#xw-tut .xw-trio>div:last-child{background:#F2FBF6;border-color:#C7EBD8}#xw-tut .xw-trio>div:last-child b{color:var(–green-d)}#xw-tut /* ———- closing cta card ———- */
.xw-cta-card{background:#fff;border:1px solid var(–line);border-radius:18px;padding:30px 26px;text-align:center;
margin-top:6px;box-shadow:0 1px 2px rgba(13,27,42,.03)}#xw-tut .xw-cta-card h3{font-size:19px;font-weight:700;margin-bottom:9px}#xw-tut .xw-cta-card p{color:var(–mut);font-size:14.6px;max-width:580px;margin:0 auto 20px}#xw-tut .xw-cta-card .xw-cta{justify-content:center}#xw-tut .xw-btn–o{background:#fff;color:var(–ink);border-color:var(–line)}#xw-tut .xw-btn–o:hover{border-color:#BCE7D0;background:#F6FDF9;transform:translateY(-1px)}#xw-tut /* ———- step 4: four business directions ———- */
.xw-sub4{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:16px 0 0}#xw-tut .xw-sub4__c{background:#fff;border:1px solid var(–line);border-radius:14px;padding:18px 18px 16px;
display:flex;flex-direction:column}#xw-tut .xw-sub4__i{width:38px;height:38px;border-radius:11px;background:var(–green-l);color:var(–green-d);
display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}#xw-tut .xw-sub4__i svg{width:20px;height:20px}#xw-tut .xw-sub4__c h4{font-size:16.5px;font-weight:680;margin-bottom:7px}#xw-tut .xw-sub4__c p{margin:0 0 12px;font-size:14px;color:var(–mut);line-height:1.7}#xw-tut .xw-sub4__c small{display:flex;gap:7px;font-size:13px;font-weight:600;color:#1C4B35;
background:var(–green-l);border:1px solid #C7EBD8;border-radius:9px;padding:9px 11px;margin-top:auto;line-height:1.55}#xw-tut .xw-sub4__c small::before{content:””;width:3px;border-radius:3px;background:var(–green);flex:none}#xw-tut /* ———- one-paragraph essence ———- */
.xw-essence{position:relative;display:flex;gap:20px;align-items:flex-start;border-radius:18px;padding:28px 30px;
background:linear-gradient(135deg,#0B1F35,#123152);color:#fff;overflow:hidden;
box-shadow:0 20px 48px -28px rgba(11,31,53,.6)}#xw-tut .xw-essence::before{content:””;position:absolute;width:340px;height:340px;right:-120px;bottom:-180px;border-radius:50%;
background:radial-gradient(circle,rgba(18,183,106,.34),rgba(18,183,106,0) 70%)}#xw-tut .xw-essence__i{position:relative;z-index:1;width:46px;height:46px;border-radius:13px;flex:none;
background:rgba(37,211,102,.16);border:1px solid rgba(37,211,102,.34);color:#4ADE9B;
display:flex;align-items:center;justify-content:center;font-size:23px}#xw-tut .xw-essence__i svg{width:24px;height:24px}#xw-tut .xw-essence p{position:relative;z-index:1;margin:0;font-size:15.4px;line-height:1.86;color:rgba(255,255,255,.86)}#xw-tut .xw-essence strong{color:#4ADE9B;font-weight:650}
｜B2B交易增长系统
评论 (0)
这篇文章还没有评论者，快来成为第一位！