feishu-print

hv5zzm

HTML 编辑9,458 字符

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>退费协议</title>
  <style>
    @page {
      size: A4;
      margin: 15mm 20mm 18mm;
      @bottom-right {
        content: "{{协议编号}}-" counter(page);
        font-size: 9px;
        color: #999;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      }
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: "PingFang SC", "Microsoft YaHei", "SimSun", sans-serif;
      font-size: 14px;
      color: #222;
      background: #fff;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      line-height: 1.8;
    }
    .page {
      width: 170mm;
      margin: 0 auto;
      padding: 0;
      position: relative;
      z-index: 1;
    }
    @media print {
      body { background: none; }
      .page { width: 100%; }
    }

/* 标题 */
    .contract-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 3px;
      padding: 12mm 0 8mm;
      border-bottom: 2px solid #222;
      margin-bottom: 8mm;
    }

/* 段落区块 */
    .clause {
      margin-bottom: 8mm;
    }
    .clause-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 2.5mm;
      margin-top: 1mm;
      color: #000;
    }
    .clause-body {
      font-size: 14px;
      line-height: 2.2;
      color: #333;
      text-align: justify;
    }
    .clause-body p {
      margin-bottom: 2mm;
      text-indent: 0;
      font-weight: 600;
    }

/* 信息行 */
    .info-row {
      display: flex;
      align-items: flex-end;
      min-height: 12mm;
      margin-bottom: 2mm;
    }
    .info-label {
      font-size: 13px;
      color: #333;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .info-value {
      flex: 1;
      border-bottom: 1px solid #999;
      min-height: 9mm;
      margin-left: 2mm;
      padding: 0 2mm;
      font-size: 13px;
      font-weight: 600;
      color: #111;
      display: flex;
      align-items: center;
    }

/* 双列信息 */
    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2mm 8mm;
    }

/* 费用信息表格 */
    .fee-table {
      width: 100%;
      border-collapse: collapse;
      margin: 3mm 0 5mm;
    }
    .fee-table td {
      border: 1px solid #999;
      padding: 3mm 4mm;
      font-size: 13px;
      height: 12mm;
      vertical-align: middle;
    }
    .fee-table .td-label {
      width: 40%;
      background: #f5f5f5;
      font-weight: 600;
      color: #333;
    }
    .fee-table .td-value {
      color: #111;
      font-weight: 600;
    }

/* 勾选框 */
    .checkbox {
      display: inline-block;
      width: 3.5mm;
      height: 3.5mm;
      border: 1.2px solid #222;
      margin-right: 1.5mm;
      vertical-align: -0.5mm;
      text-align: center;
      line-height: 3mm;
      font-size: 9px;
      font-weight: 700;
    }

/* 银行信息缩进 */
    .bank-info {
      padding-left: 6mm;
      margin-top: 3mm;
    }

/* 条款正文 */
    .terms-text {
      font-size: 12px;
      line-height: 2;
      color: #444;
      text-align: justify;
      margin-bottom: 2mm;
    }
    .terms-text .item {
      margin-bottom: 2mm;
      text-indent: 2em;
    }

/* 签字区 */
    .sign-section {
      margin-top: 8mm;
      page-break-inside: avoid;
    }
    .sign-block {
      margin-bottom: 6mm;
      padding: 3mm 0;
    }
    .sign-block-title {
      font-size: 13px;
      font-weight: 700;
      color: #111;
      margin-bottom: 3mm;
      padding-bottom: 1.5mm;
    }
    .sign-row {
      display: flex;
      align-items: flex-end;
      height: 12mm;
      margin-bottom: 2mm;
    }
    .sign-row-inline {
      display: flex;
      align-items: flex-end;
      height: 12mm;
      gap: 8mm;
      margin-bottom: 2mm;
    }
    .sign-field {
      display: flex;
      align-items: flex-end;
      height: 100%;
    }
    .sign-label {
      font-size: 13px;
      color: #333;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .sign-line {
      flex: 1;
      border-bottom: 1px solid #666;
      height: 10mm;
      margin-left: 3mm;
    }

/* 分页控制 */
    .page-break {
      page-break-before: always;
    }

/* Logo 水印 - 适配黑白打印 */
    .watermark {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .watermark img {
      width: 65mm;
      height: 65mm;
      opacity: 0.06;
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
    @media print {
      .watermark {
        position: fixed;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .watermark img {
        opacity: 0.06;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
      }
    }
  </style>
</head>
<body>
  
  <div class="watermark">
    <img src="/logo.svg" alt="" aria-hidden="true" />
  </div>

<div class="contract-title">退 费 协 议</div>

<div class="clause">
      <div class="clause-body">
        <p>一、港途留学服务（深圳）咨询有限公司（以下简称：乙方）</p>
      </div>
    </div>

<div class="clause">
      <div class="clause-body">
        <p>二、家长信息（以下简称：甲方）：</p>
      </div>
      <div class="info-grid" style="margin-top:2mm;">
        <div class="info-row">
          <span class="info-label">家长姓名/微信名：</span>
          <span class="info-value">{{家长姓名}}</span>
        </div>
        <div class="info-row">
          <span class="info-label">联系电话/微信号：</span>
          <span class="info-value">{{联系电话}}</span>
        </div>
        <div class="info-row">
          <span class="info-label">学生姓名：</span>
          <span class="info-value">{{学生姓名}}</span>
        </div>
        <div class="info-row">
          <span class="info-label">班级/课程名称：</span>
          <span class="info-value">{{班级课程名称}}</span>
        </div>
      </div>
    </div>

<div class="clause">
      <div class="clause-body">
        <p>三、费用信息：</p>
      </div>
      <table class="fee-table">
        <tr>
          <td class="td-label">1. 已缴纳总金额</td>
          <td class="td-value">{{已缴纳总金额}}</td>
        </tr>
        <tr>
          <td class="td-label">2. 已上课时/天数</td>
          <td class="td-value">{{已上课时天数}}</td>
        </tr>
        <tr>
          <td class="td-label">3. 未上课时/天数</td>
          <td class="td-value">{{未上课时天数}}</td>
        </tr>
        <tr>
          <td class="td-label">4. 应退金额</td>
          <td class="td-value">{{应退金额}}</td>
        </tr>
      </table>
    </div>

<div class="clause">
      <div class="clause-body">
        <p>四、退费方式：</p>
        <p style="margin-top:1mm;"><span class="checkbox">✓</span> 银行转账（请提供账户信息）</p>
      </div>
      <div class="bank-info">
        <div class="info-row">
          <span class="info-label">开户行：</span>
          <span class="info-value">{{开户行}}</span>
        </div>
        <div class="info-row">
          <span class="info-label">账户名：</span>
          <span class="info-value">{{账户名}}</span>
        </div>
        <div class="info-row">
          <span class="info-label">账　号：</span>
          <span class="info-value">{{账号}}</span>
        </div>
      </div>
    </div>

<div class="page-break"></div>
    <div class="clause">
      <div class="clause-body">
        <p>五、保密与不贬低义务：</p>
      </div>
      <div class="terms-text">
        <div class="item">1、双方同意对本协议条款、和解金额及协商过程，以及原协议履行过程中之所有沟通记录，严格保密，未经对方书面同意，不得向第三方披露。</div>
        <div class="item">2、甲方承诺不得以任何形式（包括但不限于微信、小红书、社交媒体、公开声明等）发表损害乙方商誉之言论，具体禁止：暗示或明示乙方服务质量瑕疵；披露原协议履行细节或争议内容；委托他人或使用匿名账户进行贬低行为。</div>
        <div class="item">3、乙方承诺不得以任何方式损害甲方子女（学生{{学生姓名}}）之名誉或合法权益。</div>
      </div>
    </div>

<div class="clause">
      <div class="clause-body">
        <p>六、其他条款：</p>
      </div>
      <div class="terms-text">
        <div class="item">1、本协议为甲乙双方基于商业便利及避免争议扩大所达成之妥协方案，并非对以下事项之承认或确认：任何一方于原协议履行过程中存在违约、过失、侵权或法定责任；任何一方之行为违反诚信原则、法律或专业操守。</div>
      </div>
    </div>

<div class="sign-section">

<div class="sign-block">
        <div class="sign-block-title">家长声明（甲方）</div>
        <div class="terms-text" style="margin-bottom:3mm;">
          <p>本人确认以上信息属实，并同意按照机构退费政策办理退费手续。</p>
        </div>
        <div class="sign-row-inline">
          <div class="sign-field" style="flex:3;">
            <span class="sign-label">家长签字：</span>
            <span class="sign-line"></span>
          </div>
          <div class="sign-field" style="flex:2;">
            <span class="sign-label">日期：</span>
            <span class="sign-line"></span>
          </div>
        </div>
      </div>

<div class="sign-block">
        <div class="sign-block-title">机构处理意见（乙方）</div>
        <div class="sign-row-inline">
          <div class="sign-field" style="flex:3;">
            <span class="sign-label">经办人：</span>
            <span class="sign-line"></span>
          </div>
          <div class="sign-field" style="flex:2;">
            <span class="sign-label">处理日期：</span>
            <span class="sign-line"></span>
          </div>
        </div>

</div>

</div>
</body>
</html>

实时预览