HTML怎么做CRM商机看板_html CRM商机管道看板页面【代码详解】-html教程-PHP中文网

纯html+css仅能实现静态crm商机管道看板，适合打印或wiki快照；需js支持状态切换、拖拽排序等交互，且拖拽不自动保存，数据一致性须后端保障。

html怎么做crm商机看板_html crm商机管道看板页面【代码详解】

用纯 HTML + CSS 搭一个可读性强的 CRM 商机管道看板，够用但别硬扛逻辑

纯 HTML 无法处理商机状态流转、用户权限或实时更新。它只适合做静态展示页——比如给销售团队打印出来贴在墙上，或嵌入内部 Wiki 作为「当前快照」。真要交互，得配 JavaScript（哪怕只加个 onclick 切换阶段）或接后端 API。别指望单个 .html 文件实现“CRM 系统”。

商机数据必须手动写死在 HTML 里，或靠 JS 注入（此时已不是“纯 HTML”）
每个阶段列（如「初步接触」「方案演示」「合同审批」）建议用 section 或带 data-stage 的 div 包裹，方便后续加 JS
列宽别设固定像素，用 flex: 1 或 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 更适应不同屏幕

<div class="pipeline">
  <section data-stage="lead"><h3>潜在客户</h3></section><section data-stage="qualified"><h3>已确认</h3></section><section data-stage="proposal"><h3>提案中</h3></section>
</div>

CSS 实现横向滚动管道布局，避免移动端被挤碎

默认横向排列商机卡片在手机上会溢出，用户得左右拖——这比垂直滚动更反直觉。正确做法是：PC 端横排，移动端强制竖排，用媒体查询切。

不要用 white-space: nowrap + overflow-x: auto 做横滚，它破坏语义、影响可访问性，且 iOS Safari 对 touch 横向滚动支持不稳定
推荐用 display: grid 配合 @media (max-width: 768px) 把 .pipeline 从 grid-template-columns: repeat(5, 1fr) 改成 grid-template-columns: 1fr
商机卡片用 min-width: 260px（不是 width: 260px），保证内容多时能撑开，不强制截断

常见错误：float: left 布局在管道场景下极易塌陷，且无法响应式；inline-block 卡片间有看不见的空白字符间隙，导致宽度计算偏差。

商机卡片里哪些字段必须有，哪些可以砍掉

销售最关心三件事：客户是谁、值多少钱、卡在哪一步。其他都是干扰。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须包含：customer-name（客户名称）、amount（金额，带单位）、stage-badge（当前阶段标签，用 span + 背景色）
强烈建议包含：next-step-date（下次跟进时间，用 time 标签包裹，语义清晰）、owner（负责人，带头像占位符）
可以砍掉：创建时间、最后修改人、自定义字段 ID、冗余的「商机编号」（除非你内部真靠编号沟通）

金额别写 ¥50,000 —— 用 ¥50000，方便后续加千分位 JS 或样式控制货币符号大小。

加一行 JS 让卡片可拖拽排序，不用引入库

纯 HTML 不支持拖拽重排，但加不到 20 行原生 JS 就能启用（基于 dragstart/dragover/drop）。

关键点：目标列（section）必须监听 dragover 并 preventDefault()，否则 drop 不触发
商机卡片设 draggable="true"，拖动时加 opacity: .6 视觉反馈
drop 事件里用 Array.from(target.querySelectorAll('.opportunity')).length 获取当前列数量，决定插入位置