品牌与页面模板库
检索
清除
返回总控台
💡 10槽动态插槽引擎：
每个页面款式都可以自由定义
1 到 10 个
媒体插入孔位。不管是图还是视频，发货时都可以盲传。
在您手写的 HTML 源码中，直接用
{ { media_1 } }
到
{ { media_10 } }
引用链接；如需判断是否为视频可用
逻辑。
➕ 注册新品牌
注册品牌
🏷️ Dandy
1 个专属款式
【Dandy】归属页面款式：
➕ 新建空白款式
款式(模板)名称
网页预览
最后修改时间
代码操作
Dandy
2026-03-04 17:18:31
📑 复制并新建
⚙️ 修改代码
☢️ 修改老模板：Dandy - Dandy
🧩 配置素材插槽 (定义此款式需要传几个文件，留空则隐藏)
🛠️ HTML 源码 (修改将影响所有历史批次！)：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic Dandy Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #3b5a76; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(59,90,118,1) 40%, rgba(59,90,118,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic Dandy Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
📑 复制 [ Dandy ] 生成新款式
分配给哪个品牌：
Dandy
Barbas
31
新款式名称：
🧩 配置素材插槽
🛠️ 新代码工作区：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic Dandy Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #3b5a76; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(59,90,118,1) 40%, rgba(59,90,118,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic Dandy Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
➕ 为【Dandy】创建空白模板
新款式名称：
🧩 声明需要的插槽名称
🛠️ 编写 HTML：
<html> <head><title>New Template</title></head> <body> <h1>Hello World</h1> </body> </html>
🏷️ Barbas
1 个专属款式
【Barbas】归属页面款式：
➕ 新建空白款式
款式(模板)名称
网页预览
最后修改时间
代码操作
Barbas
无
2026-03-04 17:18:31
📑 复制并新建
⚙️ 修改代码
☢️ 修改老模板：Barbas - Barbas
🧩 配置素材插槽 (定义此款式需要传几个文件，留空则隐藏)
🛠️ HTML 源码 (修改将影响所有历史批次！)：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic Barbas Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #1c1c1e; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(28,28,30,1) 40%, rgba(28,28,30,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic Barbas Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
📑 复制 [ Barbas ] 生成新款式
分配给哪个品牌：
Dandy
Barbas
31
新款式名称：
🧩 配置素材插槽
🛠️ 新代码工作区：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic Barbas Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #1c1c1e; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(28,28,30,1) 40%, rgba(28,28,30,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic Barbas Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
➕ 为【Barbas】创建空白模板
新款式名称：
🧩 声明需要的插槽名称
🛠️ 编写 HTML：
<html> <head><title>New Template</title></head> <body> <h1>Hello World</h1> </body> </html>
🏷️ 31
1 个专属款式
【31】归属页面款式：
➕ 新建空白款式
款式(模板)名称
网页预览
最后修改时间
代码操作
31
无
2026-03-04 17:18:31
📑 复制并新建
⚙️ 修改代码
☢️ 修改老模板：31 - 31
🧩 配置素材插槽 (定义此款式需要传几个文件，留空则隐藏)
🛠️ HTML 源码 (修改将影响所有历史批次！)：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic 31 Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #8b0000; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(139,0,0,1) 40%, rgba(139,0,0,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic 31 Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
📑 复制 [ 31 ] 生成新款式
分配给哪个品牌：
Dandy
Barbas
31
新款式名称：
🧩 配置素材插槽
🛠️ 新代码工作区：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Authentic 31 Product</title><style> ::-webkit-scrollbar { display: none; } body, html { -ms-overflow-style: none; scrollbar-width: none; margin: 0; padding: 0; background-color: #8b0000; overflow-x: hidden; overflow-y: auto; } .wrap { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 120px; box-sizing: border-box; } .top-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 80px; z-index: 50; } .sound-btn { position: absolute; top: 20px; right: 20px; z-index: 200; background: rgba(0,0,0,0.3); color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s ease; } .media-box { width: 100%; display: flex; align-items: flex-start; justify-content: center; } .media-box img, .media-box video { width: 100%; display: block; object-fit: contain; } .footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; text-align: center; padding: 80px 0 30px 0; z-index: 100; background: linear-gradient(to top, rgba(139,0,0,1) 40%, rgba(139,0,0,0) 100%); pointer-events: none; } .footer-content { pointer-events: auto; } .bottom-logo { width: 100px; height: auto; margin-bottom: 10px; } .scan-info { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; font-family: sans-serif; } .scan-count { font-size: 16px; color: white; font-weight: bold; } .first-scan { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 3px; letter-spacing: 0.5px;} .title { font-size: 22px; font-weight: 700; color: white; font-family: sans-serif; } .payment-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); box-sizing: border-box; padding: 0 20px; } .payment-box { background: white; border-radius: 16px; padding: 30px 20px; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); pointer-events: auto; box-sizing: border-box; } .pay-icon { font-size: 50px; margin-bottom: 10px; } .pay-title { font-size: 20px; font-weight: bold; color: #d32f2f; margin-bottom: 15px; } .pay-text { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; text-align: left; } </style></head><body><div class="wrap">{% if show_payment_reminder %}<div class="payment-overlay"><div class="payment-box"><div class="pay-icon">🔒</div><div class="pay-title">Service Suspended<br><span style="font-size:14px;">页面已暂停服务</span></div><div class="pay-text">{{ payment_reminder_text }}</div></div></div>{% endif %}{% if media_1 %}<img src="{{ media_1 }}" class="top-logo" alt="Top Logo">{% endif %}<div class="media-box">{% if is_video_2 %}<video id="mainVideo" src="{{ media_2 }}#t=0.001" playsinline webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" autoplay loop muted preload="auto"></video><div class="sound-btn" id="soundBtn" onclick="toggleSound(event)">🔇</div>{% elif media_2 %}<img src="{{ media_2 }}" alt="Product">{% endif %}</div><div class="footer"><div class="footer-content">{% if media_3 %}<img src="{{ media_3 }}" class="bottom-logo" alt="Bottom Logo">{% endif %}<div class="scan-info"><div class="scan-count">Scan Count: {{ scan_count }}</div>{% if first_scan_time %}<div class="first-scan">First Activated: {{ first_scan_time }}</div>{% endif %}</div><div class="title">Authentic 31 Product</div></div></div></div>{% if is_video_2 %}<script>var v = document.getElementById('mainVideo'); var btn = document.getElementById('soundBtn'); function forcePlayVideo() { if (v && v.paused) { v.play().catch(function(e){}); } } document.addEventListener("DOMContentLoaded", forcePlayVideo); document.addEventListener("WeixinJSBridgeReady", forcePlayVideo, false); function unmuteOnInteract() { if (v) { v.muted = false; v.play().catch(function(e){}); btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } } ['touchstart', 'touchmove', 'scroll', 'click'].forEach(function(evt) { document.body.addEventListener(evt, unmuteOnInteract, {once: true}); }); function toggleSound(event) { if(event) event.stopPropagation(); if (v.muted) { v.muted = false; btn.innerHTML = '🔊'; btn.style.background = 'rgba(255,255,255,0.8)'; btn.style.color = '#333'; } else { v.muted = true; btn.innerHTML = '🔇'; btn.style.background = 'rgba(0,0,0,0.3)'; btn.style.color = 'white'; } }</script>{% endif %}</body></html>
➕ 为【31】创建空白模板
新款式名称：
🧩 声明需要的插槽名称
🛠️ 编写 HTML：
<html> <head><title>New Template</title></head> <body> <h1>Hello World</h1> </body> </html>