<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝详情页模板</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
<style>
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('https://assets-persist.lovart.ai/agent-static-assets/Alibaba-PuHuiTi-Bold.otf') format('opentype');
font-weight: bold;
}
@font-face {
font-family: 'NotoSansHans';
src: url('https://assets-persist.lovart.ai/agent-static-assets/NotoSansHans-Regular.otf') format('opentype');
font-weight: normal;
}
@font-face {
font-family: 'NotoSansHansMedium';
src: url('https://assets-persist.lovart.ai/agent-static-assets/NotoSansHans-Medium.otf') format('opentype');
font-weight: 500;
}
body {
width: 750px;
margin: 0 auto;
background-color: #F7F8FA;
font-family: 'NotoSansHans', sans-serif;
color: #333;
overflow-x: hidden;
}
img {
display: block;
width: 100%;
height: auto;
}
/* Utility Classes */
.container {
width: 100%;
background: #fff;
}
.section {
margin-bottom: 24px;
background: #fff;
padding-bottom: 40px;
}
.section-header {
text-align: center;
padding: 60px 0 40px;
position: relative;
}
.section-header h2 {
font-family: 'AlibabaPuHuiTi', sans-serif;
font-size: 36px;
color: #1a1a1a;
letter-spacing: 2px;
margin-bottom: 12px;
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
display: block;
width: 40px;
height: 4px;
background: #C6A87C;
margin: 10px auto 0;
border-radius: 2px;
}
.section-header p {
font-family: 'NotoSansHans', sans-serif;
font-size: 24px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Hero Section */
.hero {
position: relative;
background: #fff;
}
.hero-text {
padding: 40px 32px;
text-align: left;
}
.hero-title {
font-family: 'AlibabaPuHuiTi', sans-serif;
font-size: 48px;
line-height: 1.2;
color: #111;
margin-bottom: 16px;
}
.hero-subtitle {
font-size: 28px;
color: #666;
margin-bottom: 30px;
}
.tag-row {
display: flex;
gap: 16px;
}
.tag {
background: #F5F5F5;
padding: 8px 16px;
border-radius: 4px;
font-size: 22px;
color: #555;
display: flex;
align-items: center;
gap: 6px;
}
.tag i {
color: #C6A87C;
}
/* Selling Points */
.selling-points {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 0 32px;
}
.point-card {
background: #FAFAFA;
padding: 30px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
}
.point-icon {
font-size: 48px;
color: #C6A87C;
margin-bottom: 16px;
}
.point-title {
font-family: 'NotoSansHansMedium', sans-serif;
font-size: 28px;
color: #333;
margin-bottom: 8px;
}
.point-desc {
font-size: 22px;
color: #999;
}
/* Product Showcase */
.showcase-text-block {
padding: 32px;
background: linear-gradient(to bottom, #fff, #FAFAFA);
}
.feature-box {
position: relative;
margin: 32px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.feature-content {
padding: 40px;
background: #fff;
}
.feature-title {
font-size: 32px;
font-family: 'AlibabaPuHuiTi', sans-serif;
margin-bottom: 16px;
color: #222;
}
.feature-desc {
font-size: 26px;
line-height: 1.6;
color: #666;
text-align: justify;
}
/* Scene */
.scene-container {
position: relative;
}
.scene-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
padding: 60px 32px 40px;
color: #fff;
}
.scene-title {
font-size: 36px;
font-family: 'AlibabaPuHuiTi', sans-serif;
margin-bottom: 10px;
}
.scene-sub {
font-size: 24px;
opacity: 0.9;
}
/* Specs Table */
.specs-container {
padding: 0 32px;
}
.specs-table {
width: 100%;
border-collapse: collapse;
font-size: 24px;
}
.specs-table td {
padding: 20px;
border-bottom: 1px solid #eee;
}
.specs-label {
color: #888;
width: 30%;
}
.specs-value {
color: #333;
font-family: 'NotoSansHansMedium', sans-serif;
}
/* Quality Section */
.quality-grid {
padding: 0 32px;
}
.quality-card {
background: #fff;
border: 1px solid #eee;
margin-bottom: 24px;
padding: 24px;
display: flex;
align-items: center;
gap: 20px;
}
.quality-num {
font-size: 40px;
font-weight: bold;
color: #EFEFEF;
font-family: 'AlibabaPuHuiTi';
width: 60px;
}
.quality-text h3 {
font-size: 28px;
margin-bottom: 6px;
}
.quality-text p {
font-size: 22px;
color: #888;
}
/* Footer Guarantee */
.guarantee {
background: #2C2C2C;
color: #fff;
padding: 60px 32px;
text-align: center;
}
.guarantee-title {
font-size: 36px;
margin-bottom: 40px;
font-family: 'AlibabaPuHuiTi', sans-serif;
color: #C6A87C;
}
.guarantee-icons {
display: flex;
justify-content: space-around;
}
.g-item i {
font-size: 48px;
margin-bottom: 16px;
display: block;
color: #fff;
}
.g-item span {
font-size: 24px;
color: #ccc;
}
/* Placeholder styles for generic parts */
.text-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
color: #ddd;
}
.text-divider span {
margin: 0 15px;
color: #999;
font-size: 24px;
letter-spacing: 4px;
}
.text-divider::before, .text-divider::after {
content: '';
height: 1px;
width: 60px;
background: #ddd;
}
</style>
</head>
<body>
<div class="container">
<!-- 1. 主体产品展示区 -->
<div class="section hero" style="margin-bottom: 0;">
<img src="https://img.alicdn.com/imgextra/i2/454603628/O1CN01FIbFRJ1cfg2WkPC5o_!!454603628.png" alt="Main Product">
<div class="hero-text">
<h1 class="hero-title">悬浮视觉 · 生活美学<br>现代极简亚克力桌腿</h1>
<p class="hero-subtitle">打破传统界限，重塑空间艺术感</p>
<div class="tag-row">
<div class="tag"><i class="ri-vip-diamond-line"></i> 高透亚克力</div>
<div class="tag"><i class="ri-tree-line"></i> 进口颗粒</div>
<div class="tag"><i class="ri-palette-line"></i> 环保净味</div>
</div>
</div>
</div>
<!-- 2. 核心卖点展示区 -->
<div class="section">
<div class="section-header">
<h2>核心卖点</h2>
<p>CORE SELLING POINTS</p>
</div>
<div class="selling-points">
<div class="point-card">
<i class="ri-contrast-drop-2-line point-icon"></i>
<h3 class="point-title">晶莹剔透</h3>
<p class="point-desc">高纯度亚克力桌腿</p>
</div>
<div class="point-card">
<i class="ri-medal-line point-icon"></i>
<h3 class="point-title">匠心工艺</h3>
<p class="point-desc">精细打磨圆润边角</p>
</div>
<div class="point-card">
<i class="ri-home-heart-line point-icon"></i>
<h3 class="point-title">百搭风格</h3>
<p class="point-desc">适配多种家居场景</p>
</div>
<div class="point-card">
<i class="ri-shield-check-line point-icon"></i>
<h3 class="point-title">稳固承重</h3>
<p class="point-desc">科学结构经久耐用</p>
</div>
</div>
</div>
<!-- 3. 产品特性区 (Details) -->
<div class="section" style="background-color: #FAFAFA; padding-top: 1px;">
<div class="section-header">
<h2>作品鉴赏</h2>
<p>PRODUCT DETAILS</p>
</div>
<div class="feature-box">
<img src="https://img.alicdn.com/imgextra/i4/454603628/O1CN01JsZdqT1cfg2XVxkLs_!!454603628.png" alt="Detail Shot">
<div class="feature-content">
<h3 class="feature-title">看不见的支撑,看得见的品味</h3>
<p class="feature-desc">
厚实的透明亚克力板,内嵌不对称椭圆形镂空设计,将功能与艺术完美融合。"隐形"桌腿让木质桌面成为视觉焦点,透明材质释放空间束缚,尤其适合小户型或开放式设计。温润木与清透亚克力的材质碰撞,既有自然温馨又不失现代时尚。光线穿透间,为居家环境注入明亮与宽敞,成就简约而不简单的高级质感。
</p>
</div>
</div>
<div class="feature-box">
<img src="https://img.alicdn.com/imgextra/i2/454603628/O1CN01EJGtoG1cfg2WMixcW_!!454603628.png" alt="Detail Shot">
<div class="feature-content">
<h3 class="feature-title">双椭圆设计,现代艺术的支撑力</h3>
<p class="feature-desc">
晶莹剔透的亚克力桌腿,嵌入两个抽象椭圆形透明线成独特视觉焦点。透明材质创造"漂浮感",有效减少空间视觉阻碍,让小户型也能拥有开阔视野。木质桌面与亚克力桌腿的冷暖对比,既保留自然温润,又融入现代时尚。光影交织间,为空间增添动态美感,轻松融入极简、北欧或轻奢风格,彰显精致生活态度。
</p>
</div>
</div>
<div class="feature-box">
<img src="https://img.alicdn.com/imgextra/i4/454603628/O1CN01sH6qHf1cfg2XKsFT0_!!454603628.png" alt="Detail Shot">
<div class="feature-content">
<h3 class="feature-title">延伸空间的透明魔法</h3>
<p class="feature-desc">
从厨房到餐桌,无缝衔接的优雅。高透明亚克力桌腿,光线可穿透,视觉上几乎隐形,营造开放通透的整体氛围。独特的椭圆形镂空设计,增添现代艺术感和设计趣味性。极简现代风格完美契合当代家居趋势,能与现有厨房中岛或柜体无缝连接,创造多功能延伸空间。最大化空间感,提升家居格调,轻松融入现代简约、北欧风或轻奢主义风格,成为时尚焦点。
</p>
</div>
</div>
</div>
<!-- 4. 应用场景区 -->
<div class="section">
<div class="section-header">
<h2>生活美学</h2>
<p>LIFESTYLE SCENES</p>
</div>
<div class="scene-container">
<!-- Reusing the main image as scene context since it fits perfectly -->
<div style="height: 900px; overflow: hidden; position: relative;">
<img src="https://img.alicdn.com/imgextra/i1/454603628/O1CN01Ajenx61cfg2XJoync_!!454603628.png" style="position: absolute; top: -100px;" alt="Scene">
</div>
<div class="scene-overlay">
<div class="scene-title">艺术与功能的完美融合</div>
<div class="scene-sub">客厅 / 书房 / 办公室 / 艺术空间</div>
</div>
</div>
<div class="showcase-text-block">
<p class="feature-desc" style="text-align: center;">
这种打破规整的曲线设计<br>注入强烈的现代艺术气息和独特个性<br>透明材质几乎"隐形",让深色实木桌面仿佛悬浮空中<br>充满未来感。<br>
</p>
</div>
<div class="scene-container">
<!-- Reusing the main image as scene context since it fits perfectly -->
<div style="height: 900px; overflow: hidden; position: relative;">
<img src="https://img.alicdn.com/imgextra/i4/454603628/O1CN01tNgStx1cfg2Xdb0P6_!!454603628.png" style="position: absolute; top: -100px;" alt="Scene">
</div>
<div class="scene-overlay">
<div class="scene-title">艺术悬浮,轻盈入室</div>
<div class="scene-sub">和谐 / 优雅 / 稳固 / 动态美感</div>
</div>
</div>
<div class="showcase-text-block">
<p class="feature-desc" style="text-align: center;">
桌腿与透明亚克力腿的餐椅完美搭配<br>整体风格和谐统一<br>亚克力的反光折射特性<br>在光线下产生微妙光影变化,为用餐空间增添动态美感<br>极致通透的设计,让小型空间也能拥有开阔视野<br>木质的厚重与亚克力的轻盈形成完美平衡<br>彰显现代艺术家具的高端品质与优雅格调。
</p>
</div>
</div>
<!-- 5. 质量工艺展示区 -->
<div class="section">
<div class="section-header">
<h2>工厂实力</h2>
<p>FACTORY QUALITY</p>
</div>
<img src="https://a.lovart.ai/artifacts/user/VaJd8tpyyO2QeBPC.png" alt="Factory" style="margin-bottom: 30px;">
<div class="quality-grid">
<div class="quality-card">
<div class="quality-num">01</div>
<div class="quality-text">
<h3>佛山源头工厂</h3>
<p>拒绝中间商差价，源头工厂售后保障</p>
</div>
</div>
<div class="quality-card">
<div class="quality-num">02</div>
<div class="quality-text">
<h3>严苛质检标准</h3>
<p>多道工序层层把关，只做精品</p>
</div>
</div>
<div class="quality-card">
<div class="quality-num">03</div>
<div class="quality-text">
<h3>环保选材认证</h3>
<p>甲醛释放量符合国家标准，健康无异味</p>
</div>
</div>
</div>
</div>
<!-- 6. 产品规格区 -->
<div class="section">
<div class="section-header">
<h2>产品规格</h2>
<p>SPECIFICATIONS</p>
</div>
<!-- Using installation image as technical reference -->
<div style="padding: 0 32px 30px;">
<img src="https://img.alicdn.com/imgextra/i3/454603628/O1CN01DNYQOw1cfg2Ug1oOV_!!454603628.png" style="border-radius: 12px; border: 1px solid #eee;" alt="Installation">
</div>
<div class="specs-container">
<table class="specs-table">
<tr>
<td class="specs-label">产品名称</td>
<td class="specs-value">亚克力双镂空桌腿</td>
</tr>
<tr>
<td class="specs-label">主要材质</td>
<td class="specs-value">全新透明亚克力</td>
</tr>
<tr>
<td class="specs-label">产品风格</td>
<td class="specs-value">现代简约 / 轻奢 / 北欧</td>
</tr>
<tr>
<td class="specs-label">安装方式</td>
<td class="specs-value">整装（附赠安装工具）</td>
</tr>
<tr>
<td class="specs-label">包装尺寸</td>
<td class="specs-value">825mm * 260mm * 760mm</td>
</tr>
<tr>
<td class="specs-label">产品重量</td>
<td class="specs-value">约12kg（不同尺寸略有差别）</td>
</tr>
</tr>
</table>
</div>
</div>
<!-- 7. 包装运输保障区 -->
<div class="section" style="margin-bottom: 0;">
<div class="section-header">
<h2>包装运输</h2>
<p>PACKAGING & SHIPPING</p>
</div>
<img src="https://a.lovart.ai/artifacts/user/kVMAZUd5UCfLkx5Y.png" alt="Packaging">
<div class="showcase-text-block">
<h3 style="font-size: 30px; margin-bottom: 12px; font-family: 'AlibabaPuHuiTi';">多重防护 安全直达</h3>
<p class="feature-desc">
采用专业加厚瓦楞纸箱+护角+定制泡沫全方位包裹。<br>
大件商品默认打木架发货，确保运输途中产品完好无损。
</p>
</div>
</div>
<!-- 底部保障 -->
<div class="guarantee">
<div class="guarantee-title">购物无忧保障</div>
<div class="guarantee-icons">
<div class="g-item">
<i class="ri-truck-line"></i>
<span>送货上门</span>
</div>
<div class="g-item">
<i class="ri-exchange-cny-line"></i>
<span>破损包赔</span>
</div>
<div class="g-item">
<i class="ri-customer-service-2-line"></i>
<span>售后无忧</span>
</div>
</div>
<div style="margin-top: 40px; font-size: 20px; color: #666;">
- 佛山顺德工厂 · 支持跨境电商 -
</div>
</div>
</div>
</body>
</html>
index.html
assets
index.html