← 返回
dse513
删除
保存
HTML 编辑
13,626 字符
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>客户见面登记表(DSE)</title> <style> @page { size: A4; margin: 6mm; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", "SimSun", sans-serif; font-size: 12px; line-height: 1.3; color: #1f2933; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page { width: 210mm; margin: 0 auto; padding: 6mm; background: #fff; } @media print { body { background: none; } .page { width: 100%; min-height: auto; margin: 0; padding: 0; } } /* Header */ .header { display: flex; align-items: flex-end; border-bottom: 2px solid #111827; padding-bottom: 2mm; margin-bottom: 2mm; } .header-left { flex: 1; } .header-left h1 { font-size: 20px; font-weight: 700; color: #111827; } .header-left .subtitle { margin-top: 1mm; font-size: 9px; color: #4b5563; } .header-box { width: 44mm; height: 12mm; border: 1px solid #111827; margin-left: 3mm; padding: 1.5mm 2mm; display: flex; flex-direction: column; justify-content: flex-start; } .header-box .label { font-size: 8px; color: #6b7280; } .header-box .f-text { font-size: 13px; font-weight: 700; color: #111827; margin-top: 0.5mm; } /* Section */ .section { border: 1px solid #9ca3af; margin-bottom: 2mm; } .section-title { background: #1f2937; color: #fff; font-size: 11px; font-weight: 700; padding: 1.3mm 2.5mm; } .section-body { padding: 0; } /* 统一行 — grid 行 */ .row { display: grid; overflow: hidden; } .cols-5 { grid-template-columns: repeat(5, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-4-result { grid-template-columns: 1.25fr 1.25fr 31mm 31mm; } /* 单元格 */ .cell { padding: 1.5mm 2mm; border-right: 1px solid #555; border-bottom: 1px solid #555; display: flex; flex-direction: column; overflow: hidden; } .cell:last-child { border-right: 0; } .cell.span-2 { grid-column: span 2; } .cell.span-3 { grid-column: span 3; } .cell.full { grid-column: 1 / -1; border-right: 0; } .row:last-child .cell { border-bottom: 0; } /* Label */ .label { font-size: 10px; color: #374151; white-space: nowrap; flex-shrink: 0; margin-bottom: 0.5mm; } /* 参数框容器 */ .f-box { flex: 1; display: flex; align-items: center; overflow: hidden; } /* 文本渲染容器 */ .f-text { width: 100%; max-height: 100%; font-size: 12px; font-weight: 600; color: #111827; line-height: 1.3; word-break: break-word; overflow: hidden; white-space: pre-wrap; } /* 勾选框 */ .checkline { display: flex; flex-wrap: wrap; gap: 1.5mm 2.5mm; align-items: center; font-size: 10px; color: #111827; } .box { display: inline-block; width: 3mm; height: 3mm; border: 1px solid #111827; margin-right: 0.8mm; vertical-align: -0.4mm; text-align: center; line-height: 2.6mm; font-size: 8px; font-style: normal; font-weight: 700; } .choice { white-space: nowrap; } .choice-current { display: none; } /* 签名区 */ .sign-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; margin-top: 2mm; } .sign { height: 12mm; border: 1px solid #111827; padding: 1.5mm 2mm; font-size: 9px; color: #6b7280; } </style> </head> <body> <div class="page"> <!-- Header --> <div class="header"> <div class="header-left"> <h1>客户见面登记表</h1> <div class="subtitle">香港DSE升学规划|线下会面记录|客户需求与销售跟进</div> </div> <div class="header-box"> <span class="label">填写日期</span> <span class="f-text">{{填写日期}}</span> </div> <div class="header-box"> <span class="label">见面编号</span> <span class="f-text">{{见面编号}}</span> </div> </div> <!-- 一、到访与会面记录 --> <section class="section"> <div class="section-title">一、到访与会面记录</div> <div class="section-body"> <div class="row cols-5" style="height:18mm"> <div class="cell" style="height:18mm"> <span class="label">见面人员</span> <div class="f-box"><span class="f-text">{{见面人员}}</span></div> </div> <div class="cell" style="height:18mm"> <span class="label">见面时间</span> <div class="f-box"><span class="f-text">{{见面时间}}</span></div> </div> <div class="cell" style="height:18mm"> <span class="label">是否实际到访</span> <div class="f-box"> <div class="checkline" data-current="{{是否实际到访}}"> <span class="choice" data-value="是"><i class="box"></i>是</span> <span class="choice" data-value="否"><i class="box"></i>否</span> </div> </div> <span class="choice-current">{{是否实际到访}}</span> </div> <div class="cell" style="height:18mm"> <span class="label">学生是否参与会面</span> <div class="f-box"> <div class="checkline" data-current="{{学生是否参与会面}}"> <span class="choice" data-value="是"><i class="box"></i>是</span> <span class="choice" data-value="否"><i class="box"></i>否</span> </div> </div> <span class="choice-current">{{学生是否参与会面}}</span> </div> <div class="cell" style="height:18mm"> <span class="label">实际见面时长</span> <div class="f-box"><span class="f-text">{{实际见面时长}}</span></div> </div> </div> </div> </section> <!-- 二、学生学业与升学背景 --> <section class="section"> <div class="section-title">二、学生学业与升学背景</div> <div class="section-body"> <div class="row cols-3" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">客户微信名</span><div class="f-box"><span class="f-text">{{客户微信名}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">孩子性格</span><div class="f-box"><span class="f-text">{{孩子性格}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">家长性格</span><div class="f-box"><span class="f-text">{{家长性格}}</span></div></div> </div> <div class="row cols-3" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">目前成绩</span><div class="f-box"><span class="f-text">{{目前成绩}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">目前在读情况</span><div class="f-box"><span class="f-text">{{目前在读情况}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">评测结果</span><div class="f-box"><span class="f-text">{{评测结果}}</span></div></div> </div> <div class="row cols-3" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">选修科目</span><div class="f-box"><span class="f-text">{{选修科目}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">目标专业</span><div class="f-box"><span class="f-text">{{目标专业}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">补充升学方向</span><div class="f-box"><span class="f-text">{{补充升学方向}}</span></div></div> </div> </div> </section> <!-- 三、客户沟通与方案需求 --> <section class="section"> <div class="section-title">三、客户沟通与方案需求</div> <div class="section-body"> <div class="row cols-4" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">实际见面客户</span><div class="f-box"><span class="f-text">{{实际见面客户}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">家长态度</span><div class="f-box"><span class="f-text">{{家长态度}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">孩子态度</span><div class="f-box"><span class="f-text">{{孩子态度}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">1v1补习开放程度</span><div class="f-box"><span class="f-text">{{1v1补习开放程度}}</span></div></div> </div> <div class="row cols-4" style="height:18mm"> <div class="cell span-2" style="height:18mm"> <span class="label">保证计划</span> <div class="f-box"> <div class="checkline" data-current="{{保证计划}}"> <span class="choice" data-value="未讨论"><i class="box"></i>未讨论</span> <span class="choice" data-value="试课后再定"><i class="box"></i>试课后再定</span> <span class="choice" data-value="港8"><i class="box"></i>港8</span> <span class="choice" data-value="港5"><i class="box"></i>港5</span> <span class="choice" data-value="港3"><i class="box"></i>港3</span> </div> </div> <span class="choice-current">{{保证计划}}</span> </div> <div class="cell" style="height:18mm"><span class="label">目前常住地</span><div class="f-box"><span class="f-text">{{目前常住地}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">住宿安排</span><div class="f-box"><span class="f-text">{{住宿安排}}</span></div></div> </div> <div class="row cols-4" style="height:18mm"> <div class="cell full" style="height:18mm"><span class="label">交费方法</span><div class="f-box"><span class="f-text">{{交费方法}}</span></div></div> </div> <div class="row cols-2" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">客户需求</span><div class="f-box"><span class="f-text">{{客户需求}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">客户保证需求</span><div class="f-box"><span class="f-text">{{客户保证需求}}</span></div></div> </div> <div class="row cols-3" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">关注点</span><div class="f-box"><span class="f-text">{{关注点}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">卡点</span><div class="f-box"><span class="f-text">{{卡点}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">涉及转介绍备注</span><div class="f-box"><span class="f-text">{{转介绍备注}}</span></div></div> </div> <div class="row cols-3" style="height:18mm"> <div class="cell full" style="height:18mm"><span class="label">其他承诺</span><div class="f-box"><span class="f-text">{{其他承诺}}</span></div></div> </div> </div> </section> <!-- 四、跟进结论与成单判断 --> <section class="section"> <div class="section-title">四、跟进结论与成单判断</div> <div class="section-body"> <div class="row cols-4-result" style="height:18mm"> <div class="cell" style="height:18mm"><span class="label">下一步</span><div class="f-box"><span class="f-text">{{下一步}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">最新销售方向</span><div class="f-box"><span class="f-text">{{最新销售方向}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">下次跟进日期</span><div class="f-box"><span class="f-text">{{下次跟进日期}}</span></div></div> <div class="cell" style="height:18mm"><span class="label">成单概率(0~5)</span><div class="f-box"><span class="f-text">{{成单概率}}</span></div></div> </div> <div class="row cols-3" style="height:18mm"> <div class="cell full" style="height:18mm"><span class="label">其他情况备注</span><div class="f-box"><span class="f-text">{{其他情况备注}}</span></div></div> </div> </div> </section> <!-- 签名区 --> <div class="sign-row"> <div class="sign">填写签字</div> <div class="sign">录入签字</div> <div class="sign">录入日期</div> </div> </div> <script> (function () { /* --- 勾选框逻辑 --- */ document.querySelectorAll(".checkline[data-current]").forEach(function (group) { var current = (group.getAttribute("data-current") || "").trim(); if (!current || current.indexOf("{{") === 0) return; group.querySelectorAll(".choice").forEach(function (choice) { var value = (choice.getAttribute("data-value") || "").trim(); var box = choice.querySelector(".box"); if (box && value === current) box.textContent = "✓"; }); }); /* --- 字段级自适应字号 --- */ var MIN_FONT_SIZE = 7; var STEP = 0.5; function fitValue(el) { var text = (el.textContent || "").trim(); if (!text || text.indexOf("{{") === 0) return; var maxH = el.parentElement.clientHeight; if (maxH <= 0) return; var fontSize = parseFloat(getComputedStyle(el).fontSize); if (el.scrollHeight <= maxH) return; while (el.scrollHeight > maxH && fontSize > MIN_FONT_SIZE) { fontSize -= STEP; el.style.fontSize = fontSize + "px"; el.style.lineHeight = fontSize <= 9 ? "1.2" : "1.3"; } } document.querySelectorAll(".f-text").forEach(fitValue); })(); </script> </body> </html>
实时预览