79 lines
4.9 KiB
PHP
79 lines
4.9 KiB
PHP
<?php
|
|
/** @var array $layout */
|
|
/** @var array $item */
|
|
/** @var string $module */
|
|
if (empty($layout) || !is_array($layout)) return;
|
|
|
|
$slug = $module === 'product' ? ($item['slug'] ?? '') : '';
|
|
$price = $module === 'product' ? ($item['price'] ?? 0) : 0;
|
|
$specsArr = [];
|
|
if ($module === 'product' && !empty($item['specs'])) {
|
|
$d = json_decode($item['specs'], true);
|
|
if (is_array($d)) $specsArr = $d;
|
|
}
|
|
?>
|
|
<section class="section" style="padding-top:24px">
|
|
<div class="container">
|
|
<div style="position:relative" id="pbWrap">
|
|
<div class="pb-stage pb-front" id="pbFront" style="width:720px;position:relative;background:var(--c-surface,#fff);border:1px solid var(--c-border,#e2e8f0);margin:0 auto;min-height:420px;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.08)">
|
|
<?php foreach ($layout as $el):
|
|
$pos = 'position:absolute;left:' . (int)($el['x'] ?? 0) . 'px;top:' . (int)($el['y'] ?? 0) . 'px;width:' . (int)($el['w'] ?? 200) . 'px;z-index:' . (int)($el['z'] ?? 1) . ';';
|
|
$type = $el['type'] ?? 'text';
|
|
$txtColor = (empty($el['color']) || ($el['color'] ?? '') === '#0f172a') ? 'var(--c-text,#0f172a)' : e($el['color']);
|
|
if ($type === 'image'):
|
|
$ai = ($el['align'] ?? 'left') === 'center' ? 'center' : (($el['align'] ?? 'left') === 'right' ? 'flex-end' : 'flex-start');
|
|
$jc = !empty($el['v']) ? 'center' : 'flex-start';
|
|
?>
|
|
<div class="pb-fe" style="<?php echo $pos; ?>display:flex;flex-direction:column;align-items:<?php echo $ai; ?>;justify-content:<?php echo $jc; ?>">
|
|
<img src="<?php echo e($el['src']); ?>" alt="" style="object-fit:cover;border-radius:4px;max-width:100%;width:auto;display:block">
|
|
</div>
|
|
<?php elseif ($type === 'button'): ?>
|
|
<a class="pb-fe" href="<?php echo e($el['href'] ?? '#'); ?>" style="<?php echo $pos; ?>display:inline-block;background:<?php echo e($el['bg'] ?? '#0ea5e9'); ?>;color:<?php echo e($el['tc'] ?? '#fff'); ?>;padding:10px 22px;border-radius:10px;text-decoration:none;font-weight:600;font-size:<?php echo ($el['size'] === 'lg' ? '18px' : ($el['size'] === 'sm' ? '13px' : '15px')); ?>"><?php echo e($el['text'] ?? '按钮'); ?></a>
|
|
<?php elseif ($type === 'buy'): ?>
|
|
<a class="pb-fe" href="<?php echo site_url('order/checkout/' . $slug); ?>" style="<?php echo $pos; ?>display:inline-block;background:#ef4444;color:#fff;padding:12px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px">立即购买</a>
|
|
<?php elseif ($type === 'price'): ?>
|
|
<div class="pb-fe" style="<?php echo $pos; ?>text-align:<?php echo e($el['align'] ?? 'left'); ?>;font-size:28px;font-weight:700;color:<?php echo $txtColor; ?>">¥<?php echo e($price); ?> <small style="font-size:14px;font-weight:400">起/套</small></div>
|
|
<?php elseif ($type === 'specs'): ?>
|
|
<div class="pb-fe" style="<?php echo $pos; ?>text-align:<?php echo e($el['align'] ?? 'left'); ?>">
|
|
<table style="width:100%;border-collapse:collapse;font-size:14px">
|
|
<?php foreach ($specsArr as $s): ?><tr><td style="padding:8px 10px;border-bottom:1px solid var(--c-border,#eee);color:var(--c-muted,#64748b)"><?php echo e($s['k'] ?? ''); ?></td><td style="padding:8px 10px;border-bottom:1px solid var(--c-border,#eee);font-weight:600;color:var(--c-text,#0f172a)"><?php echo e($s['v'] ?? ''); ?></td></tr><?php endforeach; ?>
|
|
</table>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="pb-fe" style="<?php echo $pos; ?>font-size:<?php echo (int)($el['fontSize'] ?? 18); ?>px;color:<?php echo $txtColor; ?>;font-weight:<?php echo !empty($el['bold']) ? 700 : 400; ?>;text-align:<?php echo e($el['align'] ?? 'left'); ?>;<?php echo !empty($el['v']) ? 'writing-mode:vertical-rl;' : '' ?>line-height:1.4;white-space:pre-wrap;word-break:break-word"><?php echo e($el['text'] ?? ''); ?></div>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
(function () {
|
|
var STAGE_W = 720, stage = document.getElementById('pbFront'), wrap = document.getElementById('pbWrap');
|
|
if (!stage || !wrap) return;
|
|
function maxBottom() {
|
|
var m = 420, kids = stage.children;
|
|
for (var i = 0; i < kids.length; i++) {
|
|
var k = kids[i];
|
|
var y = parseInt(k.style.top, 10) || 0;
|
|
var b = y + k.offsetHeight;
|
|
if (b > m) m = b;
|
|
}
|
|
return m;
|
|
}
|
|
function fit() {
|
|
var h = maxBottom();
|
|
stage.style.height = h + 'px';
|
|
var avail = wrap.clientWidth, scale = Math.min(1, avail / STAGE_W);
|
|
stage.style.transform = 'scale(' + scale + ')';
|
|
stage.style.transformOrigin = 'top left';
|
|
wrap.style.width = (STAGE_W * scale) + 'px';
|
|
wrap.style.height = (h * scale) + 'px';
|
|
wrap.style.margin = '0 auto';
|
|
}
|
|
fit();
|
|
window.addEventListener('resize', fit);
|
|
stage.querySelectorAll('img').forEach(function (im) { im.addEventListener('load', fit); });
|
|
})();
|
|
</script>
|