企业官网建设流程全解析

简介：这是一款面向游戏代练工作室及个人站长的报价单页HTML模板，用于快速搭建包含游戏分类、段位价格、客户评价与下单入口的营销落地页。压缩包共2个文件，均为HTML文档，体积仅12KB，核心页面基于Tailwind CSS与Font Awesome构建，无冗余框架依赖，结构按导航、英雄区、核心模块、联系区分层，方便替换游戏名称和价格后直接上线，无需复杂编译环境，对服务器配置要求不高。页面已具备热门游戏卡片展示、4大游戏价格一键切换、5档套餐标注“最受欢迎”、评价自动滚动且悬停暂停，以及多处“立即下单”按钮，配合深紫、橙、绿的游戏风格配色与移动端汉堡菜单，可自适应手机、平板和PC浏览。这套模板既可作代练业务成交页，也适合前端学习者拆解响应式布局与轻量交互写法，目前已有84人在CSDN平台学习下载。

1. 游戏代练工作室代练报价单页模板：不是把价格表搬上网那么简单

游戏代练工作室代练报价单页模板，听起来像是把Excel价格表做成网页的小工具，但真正从零做过的人才会明白，它实际上是在解决三个很现实的问题：价格变动太频繁、客户询单流程太乱、以及报价信息根本没法在微信里体面地展示。很多工作室还在用朋友圈九宫格发价目图，改一次价要重新做一张图，热门服务被人压价、冷门服务塞在角落没人看见。这篇文章要讲的就是怎么做一个能自己维护、能筛选、能引导客户直接询单的单页报价模板，适合代练工作室主理人、接单做外包的前端，以及想帮朋友把这摊事理顺的开发者。

2. 先拆需求再写页面：代练报价单页的信息架构与服务数据建模

2.1 一张报价单页要装下哪些服务：排位、陪练、代肝、副本的字段差异

代练服务和普通商品完全不同。卖一个杯子只需要名称、价格、图片，但代练服务的价格取决于你从哪个段位出发、要打到哪个段位、打几颗星、限不限时长、中途掉分了怎么算。先别碰代码，把业务字段列清楚，比什么都重要。

常见做法是把服务分成四大类：

• 排位代练：核心字段是起点段位、目标段位、星星数量、胜率要求、是否保星
• 陪练陪玩：核心字段是按小时还是按局计费、指定英雄/角色是否加价、是否开麦
• 代肝任务：核心字段是任务类型、账号等级、装备素材数量、每日上限
• 副本代打：核心字段是副本难度、次数、是否包掉落、是否带教学

这四类服务的价格字段看下来会有一个直觉：排位代练是「阶梯定价」，陪练是「按时长定价」，代肝是「按量定价」。如果用一张表硬套，不是不行，但客户在前端选起来会非常别扭。所以页面结构要按服务分类做标签筛选，而不是把所有服务混在一个列表里。

我一般会让工作室先把现有的价目表导出来，哪怕是一个Excel都行，然后按上面的分类把字段补齐。这一步做扎实，后面的JSON结构和页面布局就是水到渠成的事。

2.2 报价数据不要写死在HTML里：JSON数组与字段设计

很多第一次做报价单页的同行，会直接在div里写死价格。这样做的后果是：每次调价都要打开HTML文件，在密密麻麻的标签里找那一行数字，改完还要担心其他地方漏改。这个方向是错的，正确做法是把报价数据全部抽到一个JSON数组里，HTML里只有渲染逻辑，改价只碰数据。

下面这段JSON就是我会建议工作室用的结构：

[ { "serviceId": "wzry-star-d4", "game": "王者荣耀", "category": "排位代练", "tierFrom": "钻石4", "tierTo": "星耀5", "unit": "星", "price": 18, "originalPrice": 25, "stockStatus": "available", "queueDays": 1, "tags": ["手动", "不掉星"], "note": "每颗星按当前分段单独计价，连败补星" }, { "serviceId": "zzyl-peil-2h", "game": "英雄联盟手游", "category": "陪练", "tierFrom": null, "tierTo": null, "unit": "小时", "price": 30, "originalPrice": 40, "stockStatus": "busy", "queueDays": 2, "tags": ["开麦", "指定英雄"], "note": "钻石以下不加价，钻石以上每小时加5元" } ]

参数说明：tierFrom和tierTo在排位代练里是必填的，陪练和代肝可以置为null，前端渲染时会自动隐藏段位信息。unit决定计价单位，页面上会显示「每星18元」还是「每小时30元」。stockStatus三个值：available可接单、busy排单中、paused停接，前端直接按这个字段变换卡片状态章，不用再去删服务项。queueDays是排单等待天数，客户最关心的就是「我下单后几天能排到」，这个字段一定要有。

把数据字段定成这个样子，核心逻辑是：数据结构和页面展示解耦。调价只改price，暂时接不过来就改stockStatus，推荐位打标签就在tags里加一项。整个过程十分钟就能完成，不需要重新发布代码。

2.3 单页整体布局：没有路由的页面怎么组织区块

代练报价单页叫「单页」，就不需要引入路由或者多页面跳转。整个页面从上到下应该是这样的结构：顶部是工作室名称和主推服务轮播、中间是服务分类筛选条、下面是大面积的报价卡片网格、底部固定一个「添加客服微信询单」的悬浮条。

这个布局看着简单，但有一个细节要注意：不要加底部导航或者侧边栏，代练客户大多在微信内打开页面，浏览完一个报价卡片就希望立刻加微信询单，任何多余元素都会分散注意力。

HTML骨架如下：

<header class="page-header"> <h1>星尘代练工作室</h1> <p> 王者荣耀 / 英雄联盟手游 / 金铲铲之战<br /> 全手动打单，掉段包赔 </p> </header> <nav class="filter-bar"> <button>const services = []; // 这里存放上面JSON.parse后的数据 const grid = document.getElementById('service-grid'); function renderServices(filteredList) { grid.innerHTML = filteredList.map((item) => { const tierInfo = item.tierFrom ? `<span class="tier-badge">${item.tierFrom} → ${item.tierTo}</span>` : ''; const statusLabel = { available: '可接', busy: '排单中', paused: '停接', }[item.stockStatus]; return ` <article class="service-card">let currentFilters = { game: 'all', category: 'all', priceRange: 'all' }; function applyFilters() { let list = services.slice(); if (currentFilters.game !== 'all') { list = list.filter((item) => item.game === currentFilters.game); } if (currentFilters.category !== 'all') { list = list.filter((item) => item.category === currentFilters.category); } if (currentFilters.priceRange !== 'all') { const [min, max] = currentFilters.priceRange.split('-').map(Number); list = list.filter((item) => item.price >= min && item.price <= max); } list.sort((a, b) => { const hotRank = { available: 0, busy: 1, paused: 2 }; return hotRank[a.stockStatus] - hotRank[b.stockStatus]; }); renderServices(list); } document.querySelector('.filter-bar').addEventListener('click', (event) => { const btn = event.target.closest('button[data-filter]'); if (!btn) return; const filterKey = btn.dataset.filter; const filterValue = btn.dataset.value; currentFilters[filterKey] = filterValue; applyFilters(); });

逻辑说明：currentFilters是全局状态，初始值都是all。applyFilters函数先拷贝一份完整数据，再逐层过滤。排序这里做了个小动作：把available排最前面，busy排中间，paused排最后，这样停接的服务不会占据首屏位置。

参数说明：priceRange的格式约定是最小-最大，比如0-20表示20元内，拆分后转成数字做范围匹配。closest('button[data-filter]')是为了防止点击到按钮里的子元素拿不到>let currentSort = 'default'; function applyFilters() { let list = services.slice(); // ... 上面过滤逻辑不变 if (currentSort === 'price-asc') { list.sort((a, b) => a.price - b.price); } else if (currentSort === 'price-desc') { list.sort((a, b) => b.price - a.price); } renderServices(list); }

这里的排序和状态排序是互斥的，选了按价格升序，就不应该再按热度排。所以在price-asc和price-desc条件下直接覆盖排序逻辑。

3.3 阶梯定价展示：段位区间怎么呈现才不把客户绕晕

代练行业一个逃不开的业务规则是阶梯定价：同一个服务，钻石段位的价格和星耀段位的价格完全不一样。很多报价页踩的坑是把每种段位组合都做一张独立卡片，结果页面里有几十张卡片，客户划半天找不到自己的段位。

我建议的做法是：同一组段位路线用一张卡片，价格区间展示，点击卡片后看到每个小段的具体价格。比如「钻石4 → 星耀5」，卡片上写「每星18元起」，进入详情再看「钻石4-1每星18元，星耀5每星22元」。这样首屏卡片数量直接砍半，客户也不用来回扫。

进阶做法是把阶梯价格放在priceSteps字段里：

{ "serviceId": "wzry-star-d4", "category": "排位代练", "tierFrom": "钻石4", "tierTo": "星耀5", "priceSteps": [ { "segment": "钻石4-1", "price": 18 }, { "segment": "钻石1", "price": 20 }, { "segment": "星耀5-4", "price": 22 } ] }

渲染时，卡片主价格显示priceSteps[0].price和「起」字，点击卡片后通过弹层展示完整的priceSteps列表。这样做的好处是，卡片上的价格永远是最低起价，对客户友好，不会因为看到一个偏高的价格直接被劝退。

4. 询单与防压价：把报价单页升级成可下单的询单工作台

4.1 为什么报价页不做直接收款：人工审单、排期和防倒卖才是刚需

很多第一次做这个页面的人会问：为什么不在页面上直接集成微信支付，客户付完款自动接单？这个问题在代练场景里站不住脚。代练订单有大量前置条件：需要确认账号当前的段位截图、需要确认客户是否有指定英雄、需要告知排单周期，甚至有些单子要等客户账号实名验证才能登录。直接付款会让工作室陷入大量退款和纠纷。

而且代练工作室普遍有防倒卖需求。同行的报价被同行看到，换皮低价截胡是常态。直接标出底价的页面如果被同行下载，再随便改改就能套用，得不偿失。所以询单流程应该做成：页面展示参考价，客户复制「询单手牌」加客服微信，报上手牌后客服拉群对接。

这个「询单手牌」本质上是一个加密后的服务项ID，加一个随机数防止被批量枚举。工作室客服在微信里拿到手牌，一解码就知道客户想要哪个服务，不用反复问「你是钻石4要打到星耀5吗」这种话。

4.2 复制询单手牌与微信号：移动端兼容性最好的交互

复制手牌是最关键的交互动作，因为整个询单闭环的第一步就是这个按钮。微信内置浏览器对剪贴板API的支持不算稳定，直接用navigator.clipboard在部分安卓微信版本里会静默失败，所以要做降级方案。

let currentOrderServiceId = null; function buildOrderCode(serviceId) { const token = Math.random().toString(36).slice(2, 8); return `XCS-${serviceId}-${token}`; } function contactForService(serviceId) { currentOrderServiceId = serviceId; const code = buildOrderCode(serviceId); const data = services.find((item) => item.serviceId === serviceId); const message = `询单手牌：${code}%0A服务：${data.game} ${data.category}%0A价格区间：￥${data.price}起/${data.unit}`; const wxLink = `weixin://`; window.location.href = wxLink; copyToClipboard(`手牌：${code}，请添加客服微信时出示`); } function copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(() => { showToast('手牌已复制'); }); } else { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); showToast('已复制，请添加客服微信'); } }

逻辑说明：buildOrderCode生成手牌，XCS是工作室标识，防止和其他工作室的暗号混淆，后面跟服务ID和6位随机字符。contactForService拼接了带手牌的微信消息，并尝试拉起微信，同时触发复制。真正的复制动作在copyToClipboard里做了兼容：优先用新版剪贴板API，不能用就退回隐藏textarea加execCommand('copy')。

参数说明：window.isSecureContext在https或localhost下才是true。如果你用IP访问，不属于安全上下文，navigator.clipboard会在某些浏览器里不存在，这时走降级分支。showToast是一个自写的轻提示，这里不展开，用position: fixed的div显示几秒后消失即可。

4.3 管理端改价和上下架：一个json文件搞定全站维护

报价数据放JS里还是放外部JSON文件的权衡，我建议放外部文件。原因是把数据独立出来之后，工作室主理人只要用记事本打开services.json改数字，不用碰任何代码，改完丢到服务器覆盖原文件，刷新页面就生效，整个过程不需要重新打包代码。

代码层面只需要在页面初始化时请求一次JSON：

async function loadServices() { try { const res = await fetch('./data/services.json', { cache: 'no-store' }); if (!res.ok) throw new Error('加载失败'); const data = await res.json(); services = data; applyFilters(); } catch (err) { grid.innerHTML = '<p>报价数据加载失败，请稍后刷新页面</p>'; } }

参数说明：cache: 'no-store'是这里的关键，它让浏览器每次刷新页面都重新拉取JSON，而不是读本地缓存。这样工作室改完价格上传后，客户刷新就能看到新价格。如果你去掉这个参数，客户那边至少要等很久缓存过期才会看到更新，我见过不少报价页因为这个参数漏了，出现「客户说价格没变，后台明明改过了」的翻车现场。

5. 上线前避坑：代练报价单页常见的5个翻车现场

5.1 翻车现场：JSON少了一个逗号，整个页面白屏

现象：页面打开后报价卡片全部不显示，控制台报一个Unexpected token错误。原因：服务项数据在后台改价格时，多删了一个逗号，或者最后一个服务项后面多留了一个逗号，JSON解析直接失败。解决：给loadServices包一层更友好的异常提示还不够，我给工作室的交付文档里专门写了一句话：「所有价格数据改完，先拖进任意在线JSON校验工具里过一遍再上传」。本地开发时可以用JSON.parse包个try判断，但更省事的做法是保存时选UTF-8编码，并且不要用Windows记事本编辑JSON——记事本会自动加BOM头，某些服务器环境会因此返回异常内容。

5.2 翻车现场：原图直出，首屏加载慢到客户直接关掉

现象：报价卡片里直接塞了一张2MB的截图，首屏白等好几秒。原因：很多工作室直接把以前的战绩截图、段位截图当服务展示图用。解决：所有图片统一压缩后再上线。单张服务图片控制在80KB以内，最省事的办法是用图片压缩工具批量处理。另外给img标签加上loading="lazy"，这样首屏只加载前几张图，往下滚才加载后面的，首屏速度能快一倍。这不是玄学，是实打实的移动端用户体验问题。

5.3 翻车现场：复制微信号点了没反应，客户卡在最后一步

现象：安卓微信里点击「复制微信号」按钮，提示已复制，但客户粘贴出来是空的。原因：execCommand('copy')在某些内核版本的浏览器里要求textarea必须处于聚焦状态，而且值不能是空的，如果复制文本里带有特殊字符，偶尔会截断。解决：不要只用一个textarea，复制前textarea.focus()和textarea.select()都调一遍，然后改成用「手机号+微信号」双通道，客户加不上微信号还能打电话。我在交付模板时会把复制按钮做成同时复制「微信号+手牌」，两行文本进剪贴板，客户粘贴后直接发给客服，客服不需要再问第二句话。

5.4 翻车现场：主推服务排最后，客户看不到高利润款

现象：工作室最赚钱的套餐排在页面底部，流量全被低价引流款吃掉了。原因：报价数据顺序是按添加时间排的，没有做置顶逻辑。解决：给服务数据加一个sortWeight字段，默认是0，主推款填100，渲染时先按sortWeight降序，再按stockStatus排序。这个字段的作用和电商平台的「广告位竞价」其实是同一个逻辑，你想让哪个服务先被看到，就在数据里把这个数字改大，完全不用动代码。

5.5 翻车现场：文案踩到平台违禁词，页面被浏览器拦截

现象：页面一切正常，但在微信里打开时被提示「内容涉嫌违规」，直接无法访问。原因：报价文案里写了「稳」「包赢」「百分百」「保证王者」这类绝对化承诺。解决：做一次文案合规检查，把所有绝对化词汇替换成中性表达。代练行业的正常表达是「手动打单」「掉段补星」「按战绩结算」，不要碰那些夸张承诺。这属于行业常识，微信和浏览器对这类内容的风控一直存在，不值得去试探边界。

6. 上线后的验证与迭代：从本地能看到真正能接单

6.1 本地验证：别直接双击打开HTML，用HTTP服务测

双击打开HTML文件时，页面URL是file://协议，fetch('./data/services.json')会被浏览器拦截，因为它属于跨域请求。这个问题几乎每个新手都会遇到，然后误以为是代码写错了。正确做法是在项目目录下起一个本地HTTP服务。

# 项目根目录执行，任选一个 python3 -m http.server 8080

然后浏览器访问http://localhost:8080就能看到页面正常渲染。参数说明：8080是端口，如果被占用就换8081。这个命令在macOS和Linux自带Python的环境里直接用，Windows下没有Python的话可以用 VS Code 的 Live Server 插件替代。

6.2 用三个指标判断报价页是否合格：询单转化、改价耗时、停留时长

页面做完不是终点，能产生询单才是终点。我给自己做过的报价页定的验收标准就三条：第一，客户从打开页面到复制手牌不超过15秒，如果超过说明卡片信息不直观；第二，一次改价从改数据到刷新页面生效不超过5分钟，超过说明数据结构和代码耦合太紧；第三，页面在微信里的加载速度低于3秒，低于这个数客户基本没有耐心等。这三个指标都能在浏览器开发者工具里测出来，加载耗时和请求耗时看Network面板，询单行为可以通过在复制手牌按钮上挂一个统计事件来记录。

6.3 进阶：把报价单页接上内容分发和结构化数据

线上能稳定跑起来之后，还有一个低成本但回报明显的动作：给页面加结构化数据。搜索引擎在收录页面时会读取JSON-LD格式的服务报价信息，有机会在搜索结果里直接展示价格区间，这对「XX代练价格」这类搜索词来说是很精准的引流入口。

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Service", "name": "王者荣耀排位代练", "provider": { "@type": "LocalBusiness", "name": "星尘代练工作室" }, "offers": { "@type": "AggregateOffer", "lowPrice": "18", "highPrice": "22", "priceCurrency": "CNY" } } </script>

代码块参数说明：lowPrice和highPrice是服务的最低和最高价，直接从services.json里读出来填上即可。priceCurrency固定是CNY，不要写人民币三个字，搜索引擎只认ISO货币代码。这段代码放在HTML的</head>前面，不影响页面展示，但对搜索曝光有帮助。

另外还有一个经验：给页面起一个带搜索词的标题，不要用「工作室官网」这种名字，而是用「王者荣耀代练价格表｜XX工作室报价单页」这种结构，把游戏名、服务类型和价格三个信息放上去。搜索引擎看到的标题和你给客户看的品牌名并不冲突，前者服务搜索流量，后者服务信任感。

这套报价单页模板做完之后，我自己的一个教训是：前期数据字段如果没有按业务去抽象，后面每加一个服务类型就要改一次渲染逻辑和数据绑定，非常折腾。后来我养成了一个习惯，动手写页面之前，先把服务数据的JSON用现实业务场景模拟一遍，比如模拟一个客户从「我是钻石4想打到星耀5」到「我要加客服询单」的完整流程，走完一遍数据模型基本就确定了。希望帮到你。

本文还有配套的精品资源，点击获取