feishu-print

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">

<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>

实时预览