Files
membank/.codebuddy/skills/product-detail-designer/assets/templates/亚克力单/商品卖点.html

123 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000, height=1000">
<title>商品卖点 - {{PRODUCT_NAME}}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1000px;
height: 1000px;
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%);
padding: 40px;
}
.container {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.85);
border-radius: 20px;
padding: 50px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1), inset 0 0 100px rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.6);
}
.title {
font-size: 56px;
font-weight: bold;
color: #00695c;
text-align: center;
margin-bottom: 40px;
text-shadow: 0 2px 10px rgba(0,105,92,0.2);
}
.subtitle {
font-size: 28px;
color: #4db6ac;
text-align: center;
margin-bottom: 50px;
}
.points-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.point-item {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 30px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
border: 1px solid rgba(38,166,154,0.3);
}
.point-icon {
font-size: 60px;
flex-shrink: 0;
}
.point-content h3 {
font-size: 28px;
color: #004d40;
margin-bottom: 10px;
}
.point-content p {
font-size: 20px;
color: #00796b;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="title">商品卖点</div>
<div class="subtitle">{{PRODUCT_NAME}}</div>
<div class="points-grid">
<div class="point-item">
<div class="point-icon">💎</div>
<div class="point-content">
<h3>透明亚克力材质</h3>
<p>高透光亚克力,清晰展示内部结构,科技感十足</p>
</div>
</div>
<div class="point-item">
<div class="point-icon">🎨</div>
<div class="point-content">
<h3>时尚外观设计</h3>
<p>简约现代设计,透明机身,美观大方,适合各种环境</p>
</div>
</div>
<div class="point-item">
<div class="point-icon"></div>
<div class="point-content">
<h3>低功耗静音</h3>
<p>超低功耗设计无风扇静音运行7x24小时稳定</p>
</div>
</div>
<div class="point-item">
<div class="point-icon">🔧</div>
<div class="point-content">
<h3>易于维护</h3>
<p>透明设计便于观察,拆卸方便,升级维护简单</p>
</div>
</div>
<div class="point-item">
<div class="point-icon">🌡️</div>
<div class="point-content">
<h3>散热优良</h3>
<p>开放式设计,散热效果优异,保证系统稳定运行</p>
</div>
</div>
<div class="point-item">
<div class="point-icon">💰</div>
<div class="point-content">
<h3>超高性价比</h3>
<p>入门级NAS首选功能齐全价格亲民</p>
</div>
</div>
</div>
</div>
</body>
</html>