| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <?php
- /**
- * A4 节日贺卡 HTML 模板(链科云打印)
- *
- * @var array $data
- */
- $escape = function ($value) {
- return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
- };
- $paper = $data['paper'] ?? [
- 'pageSize' => 'A4 portrait',
- 'pageMargin' => '10mm',
- 'contentWidth' => '190mm',
- 'cardWidth' => '140mm',
- 'cardHeight' => '200mm',
- ];
- ?>
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title><?= $escape($data['cardTitle'] ?? '节日贺卡') ?></title>
- <style>
- @page {
- size: <?= $escape($paper['pageSize']) ?>;
- margin: <?= $escape($paper['pageMargin']) ?>;
- }
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- margin: 0;
- padding: 0;
- background: #ffffff;
- font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
- }
- .page-center {
- width: 100%;
- border: 0;
- border-collapse: collapse;
- }
- .card-page {
- width: <?= $escape($paper['contentWidth']) ?>;
- max-width: 100%;
- margin: 0 auto;
- padding: 15mm 0;
- }
- .greeting-card {
- position: relative;
- width: <?= $escape($paper['cardWidth']) ?>;
- height: <?= $escape($paper['cardHeight']) ?>;
- margin: 0 auto;
- background: #ffffff;
- border-radius: 8mm;
- box-shadow: 0 2mm 8mm rgba(0, 0, 0, 0.08);
- overflow: hidden;
- text-align: center;
- }
- /* 左上粉紫光晕 */
- .glow-pink {
- position: absolute;
- left: -20mm;
- top: -20mm;
- width: 70mm;
- height: 70mm;
- background: radial-gradient(circle, rgba(255, 182, 193, 0.55) 0%, rgba(230, 190, 255, 0.25) 45%, transparent 70%);
- pointer-events: none;
- }
- /* 右下暖黄光晕 */
- .glow-yellow {
- position: absolute;
- right: -15mm;
- bottom: -15mm;
- width: 65mm;
- height: 65mm;
- background: radial-gradient(circle, rgba(255, 220, 120, 0.55) 0%, rgba(255, 235, 180, 0.2) 50%, transparent 72%);
- pointer-events: none;
- }
- .card-inner {
- position: relative;
- z-index: 1;
- height: 100%;
- padding: 18mm 14mm 16mm;
- }
- .card-to {
- margin-top: 6mm;
- font-size: 20px;
- color: #888888;
- letter-spacing: 1px;
- }
- .card-title {
- margin-top: 22mm;
- font-size: 52px;
- font-weight: bold;
- color: #8B2942;
- letter-spacing: 6px;
- }
- .card-message {
- margin-top: 16mm;
- font-size: 22px;
- line-height: 2;
- color: #555555;
- }
- .card-message p {
- margin: 0;
- }
- .card-from {
- position: absolute;
- right: 14mm;
- bottom: 16mm;
- font-size: 20px;
- color: #666666;
- text-align: right;
- }
- @media print {
- body {
- padding: 0;
- margin: 0;
- }
- .card-page {
- width: <?= $escape($paper['contentWidth']) ?>;
- margin: 0 auto;
- }
- }
- </style>
- </head>
- <body>
- <table class="page-center" cellpadding="0" cellspacing="0" border="0">
- <tr>
- <td align="center" valign="top">
- <div class="card-page">
- <div class="greeting-card">
- <div class="glow-pink"></div>
- <div class="glow-yellow"></div>
- <div class="card-inner">
- <div class="card-to"><?= $escape($data['toText'] ?? '') ?></div>
- <div class="card-title"><?= $escape($data['titleText'] ?? '') ?></div>
- <div class="card-message">
- <?php foreach (($data['messageLines'] ?? []) as $line): ?>
- <p><?= $escape($line) ?></p>
- <?php endforeach; ?>
- </div>
- <div class="card-from"><?= $escape($data['fromText'] ?? '') ?></div>
- </div>
- </div>
- </div>
- </td>
- </tr>
- </table>
- </body>
- </html>
|