greeting-card-a4.php 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <?php
  2. /**
  3. * A4 节日贺卡 HTML 模板(链科云打印)
  4. *
  5. * @var array $data
  6. */
  7. $escape = function ($value) {
  8. return htmlspecialchars((string)$value, ENT_QUOTES, 'UTF-8');
  9. };
  10. $paper = $data['paper'] ?? [
  11. 'pageSize' => 'A4 portrait',
  12. 'pageMargin' => '10mm',
  13. 'contentWidth' => '190mm',
  14. 'cardWidth' => '140mm',
  15. 'cardHeight' => '200mm',
  16. ];
  17. ?>
  18. <!DOCTYPE html>
  19. <html lang="zh-CN">
  20. <head>
  21. <meta charset="UTF-8">
  22. <title><?= $escape($data['cardTitle'] ?? '节日贺卡') ?></title>
  23. <style>
  24. @page {
  25. size: <?= $escape($paper['pageSize']) ?>;
  26. margin: <?= $escape($paper['pageMargin']) ?>;
  27. }
  28. * {
  29. margin: 0;
  30. padding: 0;
  31. box-sizing: border-box;
  32. }
  33. body {
  34. margin: 0;
  35. padding: 0;
  36. background: #ffffff;
  37. font-family: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
  38. }
  39. .page-center {
  40. width: 100%;
  41. border: 0;
  42. border-collapse: collapse;
  43. }
  44. .card-page {
  45. width: <?= $escape($paper['contentWidth']) ?>;
  46. max-width: 100%;
  47. margin: 0 auto;
  48. padding: 15mm 0;
  49. }
  50. .greeting-card {
  51. position: relative;
  52. width: <?= $escape($paper['cardWidth']) ?>;
  53. height: <?= $escape($paper['cardHeight']) ?>;
  54. margin: 0 auto;
  55. background: #ffffff;
  56. border-radius: 8mm;
  57. box-shadow: 0 2mm 8mm rgba(0, 0, 0, 0.08);
  58. overflow: hidden;
  59. text-align: center;
  60. }
  61. /* 左上粉紫光晕 */
  62. .glow-pink {
  63. position: absolute;
  64. left: -20mm;
  65. top: -20mm;
  66. width: 70mm;
  67. height: 70mm;
  68. background: radial-gradient(circle, rgba(255, 182, 193, 0.55) 0%, rgba(230, 190, 255, 0.25) 45%, transparent 70%);
  69. pointer-events: none;
  70. }
  71. /* 右下暖黄光晕 */
  72. .glow-yellow {
  73. position: absolute;
  74. right: -15mm;
  75. bottom: -15mm;
  76. width: 65mm;
  77. height: 65mm;
  78. background: radial-gradient(circle, rgba(255, 220, 120, 0.55) 0%, rgba(255, 235, 180, 0.2) 50%, transparent 72%);
  79. pointer-events: none;
  80. }
  81. .card-inner {
  82. position: relative;
  83. z-index: 1;
  84. height: 100%;
  85. padding: 18mm 14mm 16mm;
  86. }
  87. .card-to {
  88. margin-top: 6mm;
  89. font-size: 20px;
  90. color: #888888;
  91. letter-spacing: 1px;
  92. }
  93. .card-title {
  94. margin-top: 22mm;
  95. font-size: 52px;
  96. font-weight: bold;
  97. color: #8B2942;
  98. letter-spacing: 6px;
  99. }
  100. .card-message {
  101. margin-top: 16mm;
  102. font-size: 22px;
  103. line-height: 2;
  104. color: #555555;
  105. }
  106. .card-message p {
  107. margin: 0;
  108. }
  109. .card-from {
  110. position: absolute;
  111. right: 14mm;
  112. bottom: 16mm;
  113. font-size: 20px;
  114. color: #666666;
  115. text-align: right;
  116. }
  117. @media print {
  118. body {
  119. padding: 0;
  120. margin: 0;
  121. }
  122. .card-page {
  123. width: <?= $escape($paper['contentWidth']) ?>;
  124. margin: 0 auto;
  125. }
  126. }
  127. </style>
  128. </head>
  129. <body>
  130. <table class="page-center" cellpadding="0" cellspacing="0" border="0">
  131. <tr>
  132. <td align="center" valign="top">
  133. <div class="card-page">
  134. <div class="greeting-card">
  135. <div class="glow-pink"></div>
  136. <div class="glow-yellow"></div>
  137. <div class="card-inner">
  138. <div class="card-to"><?= $escape($data['toText'] ?? '') ?></div>
  139. <div class="card-title"><?= $escape($data['titleText'] ?? '') ?></div>
  140. <div class="card-message">
  141. <?php foreach (($data['messageLines'] ?? []) as $line): ?>
  142. <p><?= $escape($line) ?></p>
  143. <?php endforeach; ?>
  144. </div>
  145. <div class="card-from"><?= $escape($data['fromText'] ?? '') ?></div>
  146. </div>
  147. </div>
  148. </div>
  149. </td>
  150. </tr>
  151. </table>
  152. </body>
  153. </html>