Files
xingshi-packaging/index.html
2026-03-17 16:59:54 +08:00

1247 lines
51 KiB
HTML
Raw Permalink 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=device-width, initial-scale=1.0">
<title>卡特光 · 醒狮系列 | 产品包装设计方案</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
/* 品牌基础色 */
--brand-black: #0D0D0D;
--brand-gold: #D4A853;
--brand-gold-light: #E8C87A;
--brand-gold-dark: #B08D3F;
--brand-red: #C41E3A;
--brand-red-dark: #8B1429;
--brand-white: #F5F5F0;
--brand-gray: #2A2A2A;
/* 产品专属色 */
--tong-gold: #FFD700;
--wei-orange: #FF6B35;
--gu-bronze: #8B7355;
--chao-purple: #6B4EE6;
/* 字体 */
--font-serif: 'Noto Serif SC', serif;
--font-sans: 'Noto Sans SC', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 50%, #0D0D0D 100%);
color: var(--brand-white);
line-height: 1.8;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
/* 封面页 */
.hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(180deg, rgba(212,168,83,0.1) 0%, transparent 50%);
border-bottom: 2px solid var(--brand-gold);
margin-bottom: 60px;
}
.hero h1 {
font-family: var(--font-serif);
font-size: 3.5rem;
font-weight: 900;
color: var(--brand-gold);
text-shadow: 0 0 40px rgba(212,168,83,0.5);
margin-bottom: 20px;
letter-spacing: 0.1em;
}
.hero .subtitle {
font-size: 1.5rem;
color: var(--brand-gold-light);
font-weight: 300;
letter-spacing: 0.3em;
}
.hero .tagline {
margin-top: 30px;
font-family: var(--font-serif);
font-size: 1.2rem;
color: rgba(245,245,240,0.7);
font-style: italic;
}
/* 章节标题 */
.section {
margin-bottom: 80px;
}
.section-title {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--brand-gold);
border-left: 4px solid var(--brand-gold);
padding-left: 20px;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 15px;
}
.section-title::before {
content: "◆";
color: var(--brand-red);
}
/* 色彩系统 */
.color-system {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.color-card {
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.color-card.brand-black { background: var(--brand-black); border: 1px solid #333; }
.color-card.brand-gold { background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)); }
.color-card.brand-red { background: var(--brand-red); }
.color-card.brand-white { background: var(--brand-white); color: #333; }
.color-card .color-name {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 10px;
}
.color-card .color-value {
font-family: monospace;
font-size: 0.9rem;
opacity: 0.8;
}
/* 产品专属色 */
.product-colors {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.product-color-card {
padding: 30px;
border-radius: 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.product-color-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
}
.product-color-card.tong {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
border: 2px solid var(--tong-gold);
}
.product-color-card.wei {
background: linear-gradient(135deg, #1a1a1a, #2d2418);
border: 2px solid var(--wei-orange);
}
.product-color-card.gu {
background: linear-gradient(135deg, #1a1a1a, #252018);
border: 2px solid var(--gu-bronze);
}
.product-color-card.chao {
background: linear-gradient(135deg, #1a1a1a, #1a1528);
border: 2px solid var(--chao-purple);
}
.product-color-card .product-name {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.product-color-card.tong .product-name { color: var(--tong-gold); }
.product-color-card.wei .product-name { color: var(--wei-orange); }
.product-color-card.gu .product-name { color: var(--gu-bronze); }
.product-color-card.chao .product-name { color: var(--chao-purple); }
/* 产品包装展示 */
.product-showcase {
display: grid;
gap: 60px;
}
.product-item {
background: linear-gradient(135deg, rgba(26,26,26,0.8) 0%, rgba(13,13,13,0.9) 100%);
border-radius: 20px;
padding: 50px;
border: 1px solid rgba(212,168,83,0.2);
position: relative;
overflow: hidden;
}
.product-item::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
border-radius: 50%;
opacity: 0.1;
filter: blur(80px);
}
.product-item.tong::before { background: var(--tong-gold); }
.product-item.wei::before { background: var(--wei-orange); }
.product-item.gu::before { background: var(--gu-bronze); }
.product-item.chao::before { background: var(--chao-purple); }
.product-header {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.product-icon {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 900;
font-family: var(--font-serif);
}
.product-item.tong .product-icon {
background: linear-gradient(135deg, var(--tong-gold), #B8860B);
color: #1a1a1a;
box-shadow: 0 0 40px rgba(255,215,0,0.3);
}
.product-item.wei .product-icon {
background: linear-gradient(135deg, var(--wei-orange), #CC5500);
color: white;
box-shadow: 0 0 40px rgba(255,107,53,0.3);
}
.product-item.gu .product-icon {
background: linear-gradient(135deg, var(--gu-bronze), #654321);
color: white;
box-shadow: 0 0 40px rgba(139,115,85,0.3);
}
.product-item.chao .product-icon {
background: linear-gradient(135deg, var(--chao-purple), #4834A0);
color: white;
box-shadow: 0 0 40px rgba(107,78,230,0.3);
}
.product-title-group h3 {
font-family: var(--font-serif);
font-size: 2.2rem;
margin-bottom: 10px;
}
.product-item.tong h3 { color: var(--tong-gold); }
.product-item.wei h3 { color: var(--wei-orange); }
.product-item.gu h3 { color: var(--gu-bronze); }
.product-item.chao h3 { color: var(--chao-purple); }
.product-tag {
display: inline-block;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
background: rgba(255,255,255,0.1);
}
.product-slogan {
font-family: var(--font-serif);
font-size: 1.4rem;
font-style: italic;
margin: 20px 0;
padding: 20px;
border-left: 3px solid;
background: rgba(255,255,255,0.03);
}
.product-item.tong .product-slogan { border-color: var(--tong-gold); color: var(--tong-gold); }
.product-item.wei .product-slogan { border-color: var(--wei-orange); color: var(--wei-orange); }
.product-item.gu .product-slogan { border-color: var(--gu-bronze); color: var(--gu-bronze); }
.product-item.chao .product-slogan { border-color: var(--chao-purple); color: var(--chao-purple); }
.product-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.detail-block {
background: rgba(255,255,255,0.03);
padding: 25px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.05);
}
.detail-block h4 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-gold);
margin-bottom: 15px;
}
.detail-block ul {
list-style: none;
}
.detail-block li {
padding: 8px 0;
padding-left: 20px;
position: relative;
}
.detail-block li::before {
content: "▸";
position: absolute;
left: 0;
color: var(--brand-gold);
}
/* 包装六面规划 */
.box-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}
.box-face {
background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(13,13,13,0.95));
border: 1px solid rgba(212,168,83,0.3);
border-radius: 12px;
padding: 30px;
position: relative;
min-height: 200px;
}
.box-face::after {
content: attr(data-face);
position: absolute;
top: 10px;
right: 15px;
font-size: 0.75rem;
color: rgba(212,168,83,0.5);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.box-face h4 {
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--brand-gold);
margin-bottom: 15px;
}
.box-face ul {
list-style: none;
font-size: 0.9rem;
}
.box-face li {
padding: 5px 0;
color: rgba(245,245,240,0.8);
}
/* 展开图示意 */
.unfold-diagram {
background: rgba(26,26,26,0.5);
border-radius: 20px;
padding: 50px;
margin-top: 40px;
border: 1px solid rgba(212,168,83,0.2);
}
.unfold-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 150px);
gap: 10px;
max-width: 800px;
margin: 0 auto;
}
.unfold-cell {
background: linear-gradient(135deg, rgba(212,168,83,0.1), rgba(212,168,83,0.05));
border: 2px solid rgba(212,168,83,0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.9rem;
position: relative;
}
.unfold-cell.main {
background: linear-gradient(135deg, rgba(212,168,83,0.2), rgba(212,168,83,0.1));
border-color: var(--brand-gold);
}
.unfold-cell .face-name {
font-weight: 700;
color: var(--brand-gold);
margin-bottom: 5px;
}
.unfold-cell .face-size {
font-size: 0.75rem;
color: rgba(245,245,240,0.6);
}
/* 工艺说明 */
.craft-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.craft-card {
background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(13,13,13,0.9));
border-radius: 16px;
padding: 35px;
border: 1px solid rgba(212,168,83,0.2);
}
.craft-card h4 {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--brand-gold);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.craft-card .icon {
width: 40px;
height: 40px;
background: rgba(212,168,83,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.craft-card p {
color: rgba(245,245,240,0.8);
line-height: 1.8;
}
/* 规格表 */
.spec-table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
}
.spec-table th,
.spec-table td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid rgba(212,168,83,0.2);
}
.spec-table th {
font-family: var(--font-serif);
color: var(--brand-gold);
font-weight: 600;
background: rgba(212,168,83,0.1);
}
.spec-table tr:hover {
background: rgba(212,168,83,0.05);
}
/* 页脚 */
.footer {
text-align: center;
padding: 60px 20px;
border-top: 1px solid rgba(212,168,83,0.2);
margin-top: 80px;
}
.footer-logo {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--brand-gold);
margin-bottom: 20px;
}
.footer p {
color: rgba(245,245,240,0.5);
font-size: 0.9rem;
}
/* 响应式 */
@media (max-width: 1024px) {
.product-colors {
grid-template-columns: repeat(2, 1fr);
}
.box-layout {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.product-colors {
grid-template-columns: 1fr;
}
.box-layout {
grid-template-columns: 1fr;
}
.unfold-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 120px);
}
.product-header {
flex-direction: column;
text-align: center;
}
}
/* 装饰元素 */
.decoration-line {
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
margin: 30px auto;
}
.highlight {
color: var(--brand-gold);
font-weight: 600;
}
/* 3D渲染规范 */
.render-specs {
background: rgba(0,0,0,0.3);
border-radius: 16px;
padding: 40px;
margin-top: 40px;
border: 1px solid rgba(212,168,83,0.2);
}
.render-specs h4 {
font-family: var(--font-serif);
color: var(--brand-gold);
margin-bottom: 20px;
font-size: 1.2rem;
}
.render-specs code {
background: rgba(212,168,83,0.1);
padding: 2px 8px;
border-radius: 4px;
font-family: monospace;
color: var(--brand-gold-light);
}
.dimension-box {
display: inline-block;
background: rgba(212,168,83,0.1);
border: 1px solid var(--brand-gold);
padding: 15px 25px;
border-radius: 8px;
margin: 10px 10px 10px 0;
font-family: monospace;
}
</style>
</head>
<body>
<div class="container">
<!-- 封面 -->
<header class="hero">
<h1>卡特光 · 醒狮系列</h1>
<p class="subtitle">产品包装设计方案</p>
<div class="decoration-line"></div>
<p class="tagline">「承东方狮魂,耀前路无垠」</p>
</header>
<!-- 第一章:视觉系统 -->
<section class="section">
<h2 class="section-title">整体视觉系统</h2>
<h3 style="color: var(--brand-gold); margin-bottom: 20px; font-family: var(--font-serif);">品牌色彩体系</h3>
<div class="color-system">
<div class="color-card brand-black">
<div class="color-name">墨黑</div>
<div class="color-value">#0D0D0D</div>
<div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.7;">主背景色,沉稳大气</div>
</div>
<div class="color-card brand-gold">
<div class="color-name">鎏金</div>
<div class="color-value">#D4A853</div>
<div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.9;">品牌主色,醒狮之魂</div>
</div>
<div class="color-card brand-red">
<div class="color-name">朱红</div>
<div class="color-value">#C41E3A</div>
<div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.9;">点缀色,东方韵味</div>
</div>
<div class="color-card brand-white">
<div class="color-name" style="color: #333;">宣纸白</div>
<div class="color-value" style="color: #666;">#F5F5F0</div>
<div style="margin-top: 10px; font-size: 0.85rem; color: #666;">文字主色,温润如玉</div>
</div>
</div>
<h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">产品专属色彩</h3>
<div class="product-colors">
<div class="product-color-card tong">
<div class="product-name">醒狮·瞳</div>
<div style="color: var(--tong-gold); font-size: 0.9rem;">帝王金 #FFD700</div>
<div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">狮头 · 核心/灵魂</div>
</div>
<div class="product-color-card wei">
<div class="product-name">醒狮·威</div>
<div style="color: var(--wei-orange); font-size: 0.9rem;">烈焰橙 #FF6B35</div>
<div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">狮尾 · 力量/爆发</div>
</div>
<div class="product-color-card gu">
<div class="product-name">醒狮·鼓</div>
<div style="color: var(--gu-bronze); font-size: 0.9rem;">古铜褐 #8B7355</div>
<div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">鼓手 · 节奏/指挥</div>
</div>
<div class="product-color-card chao">
<div class="product-name">醒狮·潮</div>
<div style="color: var(--chao-purple); font-size: 0.9rem;">电光紫 #6B4EE6</div>
<div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">少年 · 新生代/活力</div>
</div>
</div>
<h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">字体规范</h3>
<div class="detail-block" style="margin-top: 20px;">
<ul>
<li><span class="highlight">品牌标题:</span>Noto Serif SC思源宋体- 用于产品名称、系列标题,体现东方文化底蕴</li>
<li><span class="highlight">正文信息:</span>Noto Sans SC思源黑体- 用于产品说明、技术参数,确保清晰易读</li>
<li><span class="highlight">英文/数字:</span>Inter / Roboto - 用于型号、规格数据,现代简洁</li>
<li><span class="highlight">装饰字体:</span>手写体风格 - 用于slogan增添人文温度</li>
</ul>
</div>
<h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">核心图形元素</h3>
<div class="craft-section">
<div class="craft-card">
<h4><span class="icon"></span>醒狮图腾</h4>
<p>抽象化醒狮头部轮廓线条流畅有力融合LED光带元素。采用烫金/UV工艺呈现在光线下呈现金属质感。</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>光束纹理</h4>
<p>从中心向外辐射的光束线条,象征透镜的照明效果。采用压纹工艺,触感立体,呼应"光耀全场"的品牌理念。</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>传统云纹</h4>
<p>融入中国传统祥云纹样,作为背景底纹使用,增添东方美学韵味,与醒狮主题呼应。</p>
</div>
</div>
</section>
<!-- 第二章:产品包装方案 -->
<section class="section">
<h2 class="section-title">四款产品包装方案</h2>
<div class="product-showcase">
<!-- 醒狮·瞳 -->
<div class="product-item tong">
<div class="product-header">
<div class="product-icon"></div>
<div class="product-title-group">
<h3>醒狮·瞳</h3>
<span class="product-tag">旗舰性能版</span>
</div>
</div>
<div class="product-slogan">「狮王睁眼,光耀全场」</div>
<div class="product-details">
<div class="detail-block">
<h4>色彩方案</h4>
<ul>
<li>主色调:墨黑 (#0D0D0D) 80%</li>
<li>强调色:帝王金 (#FFD700) 15%</li>
<li>点缀色:朱红 (#C41E3A) 5%</li>
<li>整体呈现黑金奢华质感</li>
</ul>
</div>
<div class="detail-block">
<h4>核心图形</h4>
<ul>
<li>正面:立体烫金狮头正面图腾</li>
<li>狮眼位置采用镂空+金色内衬</li>
<li>光束从狮眼向四周辐射</li>
<li>云纹底纹压花处理</li>
</ul>
</div>
<div class="detail-block">
<h4>文案布局</h4>
<ul>
<li>正面:「醒狮·瞳」竖排大字</li>
<li>副标题:狮王睁眼,光耀全场</li>
<li>侧面:旗舰性能版 + 核心卖点</li>
<li>背面:产品故事与技术参数</li>
</ul>
</div>
<div class="detail-block">
<h4>工艺建议</h4>
<ul>
<li>狮头图腾:立体烫金</li>
<li>狮眼UV上光+局部击凸</li>
<li>光束线条:丝印金墨</li>
<li>整体:哑光覆膜+局部UV</li>
</ul>
</div>
</div>
</div>
<!-- 醒狮·威 -->
<div class="product-item wei">
<div class="product-header">
<div class="product-icon"></div>
<div class="product-title-group">
<h3>醒狮·威</h3>
<span class="product-tag">远射巨炮版</span>
</div>
</div>
<div class="product-slogan">「一啸千里,势不可挡」</div>
<div class="product-details">
<div class="detail-block">
<h4>色彩方案</h4>
<ul>
<li>主色调:墨黑 (#0D0D0D) 75%</li>
<li>强调色:烈焰橙 (#FF6B35) 20%</li>
<li>点缀色:鎏金 (#D4A853) 5%</li>
<li>黑橙搭配,力量感十足</li>
</ul>
</div>
<div class="detail-block">
<h4>核心图形</h4>
<ul>
<li>正面:狮尾甩动动态剪影</li>
<li>配合向前冲刺的速度线</li>
<li>光束呈汇聚状指向远方</li>
<li>火焰纹理点缀边缘</li>
</ul>
</div>
<div class="detail-block">
<h4>文案布局</h4>
<ul>
<li>正面:「醒狮·威」横排大字</li>
<li>副标题:一啸千里,势不可挡</li>
<li>侧面:远射巨炮版 + 射程数据</li>
<li>背面:高速路况场景图</li>
</ul>
</div>
<div class="detail-block">
<h4>工艺建议</h4>
<ul>
<li>狮尾图形:烫橙金</li>
<li>速度线UV上光</li>
<li>火焰纹理:热压变色油墨</li>
<li>整体:触感膜+局部UV</li>
</ul>
</div>
</div>
</div>
<!-- 醒狮·鼓 -->
<div class="product-item gu">
<div class="product-header">
<div class="product-icon"></div>
<div class="product-title-group">
<h3>醒狮·鼓</h3>
<span class="product-tag">启动响应版</span>
</div>
</div>
<div class="product-slogan">「鼓声一响,光随心动」</div>
<div class="product-details">
<div class="detail-block">
<h4>色彩方案</h4>
<ul>
<li>主色调:墨黑 (#0D0D0D) 70%</li>
<li>强调色:古铜褐 (#8B7355) 25%</li>
<li>点缀色:鎏金 (#D4A853) 5%</li>
<li>复古质感,沉稳可靠</li>
</ul>
</div>
<div class="detail-block">
<h4>核心图形</h4>
<ul>
<li>正面:醒狮鼓手击鼓姿态</li>
<li>声波/节奏波纹向外扩散</li>
<li>传统鼓面纹理装饰</li>
<li>机械齿轮元素点缀</li>
</ul>
</div>
<div class="detail-block">
<h4>文案布局</h4>
<ul>
<li>正面:「醒狮·鼓」居中大字</li>
<li>副标题:鼓声一响,光随心动</li>
<li>侧面:瞬启快启 + 响应时间</li>
<li>背面:智能散热系统图解</li>
</ul>
</div>
<div class="detail-block">
<h4>工艺建议</h4>
<ul>
<li>鼓手图形:烫古铜金</li>
<li>声波纹理:压纹工艺</li>
<li>鼓面纹理:布纹纸材质</li>
<li>整体:亚光覆膜+局部UV</li>
</ul>
</div>
</div>
</div>
<!-- 醒狮·潮 -->
<div class="product-item chao">
<div class="product-header">
<div class="product-icon"></div>
<div class="product-title-group">
<h3>醒狮·潮</h3>
<span class="product-tag">年轻个性版</span>
</div>
</div>
<div class="product-slogan">「国潮觉醒,自有光」</div>
<div class="product-details">
<div class="detail-block">
<h4>色彩方案</h4>
<ul>
<li>主色调:墨黑 (#0D0D0D) 65%</li>
<li>强调色:电光紫 (#6B4EE6) 30%</li>
<li>点缀色:霓虹粉 (#FF1493) 5%</li>
<li>赛博朋克与国潮融合</li>
</ul>
</div>
<div class="detail-block">
<h4>核心图形</h4>
<ul>
<li>正面:少年狮队大头佛形象</li>
<li>霓虹光效边框装饰</li>
<li>几何化狮头图案</li>
<li>潮流涂鸦元素点缀</li>
</ul>
</div>
<div class="detail-block">
<h4>文案布局</h4>
<ul>
<li>正面:「醒狮·潮」创意字体</li>
<li>副标题:国潮觉醒,自有光</li>
<li>侧面:个性光型展示</li>
<li>背面:潮流场景搭配图</li>
</ul>
</div>
<div class="detail-block">
<h4>工艺建议</h4>
<ul>
<li>图形:烫彩虹金</li>
<li>霓虹边框:夜光油墨</li>
<li>涂鸦元素:丝印荧光色</li>
<li>整体:镭射覆膜+局部UV</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 第三章:包装六面规划 -->
<section class="section">
<h2 class="section-title">包装六面内容规划</h2>
<div style="background: rgba(212,168,83,0.1); padding: 30px; border-radius: 12px; margin-bottom: 30px;">
<p style="color: var(--brand-gold);">📦 包装尺寸规格:<span class="dimension-box">265mm</span> × <span class="dimension-box">205mm</span> × <span class="dimension-box">100mm</span>(长×宽×高)</p>
</div>
<div class="box-layout">
<div class="box-face main" data-face="FRONT">
<h4>正面 (265×100mm)</h4>
<ul>
<li>产品名称大字(竖排/横排)</li>
<li>醒狮图腾核心图形</li>
<li>产品系列标识</li>
<li>品牌Logo卡特光</li>
<li>版本标签(旗舰/远射等)</li>
</ul>
</div>
<div class="box-face" data-face="BACK">
<h4>背面 (265×100mm)</h4>
<ul>
<li>产品故事/品牌理念</li>
<li>详细技术参数表</li>
<li>使用场景示意图</li>
<li>认证标志/条形码</li>
<li>生产信息/二维码</li>
</ul>
</div>
<div class="box-face" data-face="LEFT">
<h4>左侧面 (100×205mm)</h4>
<ul>
<li>产品型号</li>
<li>核心卖点图标</li>
<li>主文案slogan</li>
<li>装饰性狮纹</li>
</ul>
</div>
<div class="box-face" data-face="RIGHT">
<h4>右侧面 (100×205mm)</h4>
<ul>
<li>产品剖面示意图</li>
<li>安装指引简图</li>
<li>防伪标识</li>
<li>客服/官网信息</li>
</ul>
</div>
<div class="box-face" data-face="TOP">
<h4>顶面 (265×205mm)</h4>
<ul>
<li>品牌Logo居中</li>
<li>系列名称</li>
<li>产品名称</li>
<li>开启指示箭头</li>
<li>密封贴位置</li>
</ul>
</div>
<div class="box-face" data-face="BOTTOM">
<h4>底面 (265×205mm)</h4>
<ul>
<li>产品型号/批次号</li>
<li>生产日期</li>
<li>制造商信息</li>
<li>回收标志</li>
<li>注意事项图标</li>
</ul>
</div>
</div>
</section>
<!-- 第四章:展开图设计 -->
<section class="section">
<h2 class="section-title">包装展开图设计说明</h2>
<div class="unfold-diagram">
<h3 style="text-align: center; color: var(--brand-gold); margin-bottom: 30px; font-family: var(--font-serif);">盒型展开示意图</h3>
<div class="unfold-grid">
<div class="unfold-cell" style="grid-column: 2;">
<span class="face-name">顶面</span>
<span class="face-size">265×205mm</span>
</div>
<div></div>
<div></div>
<div class="unfold-cell" style="grid-column: 1; grid-row: 2;">
<span class="face-name">左侧面</span>
<span class="face-size">100×205mm</span>
</div>
<div class="unfold-cell main" style="grid-column: 2; grid-row: 2;">
<span class="face-name">正面</span>
<span class="face-size">265×100mm</span>
</div>
<div class="unfold-cell" style="grid-column: 3; grid-row: 2;">
<span class="face-name">右侧面</span>
<span class="face-size">100×205mm</span>
</div>
<div class="unfold-cell" style="grid-column: 4; grid-row: 2;">
<span class="face-name">背面</span>
<span class="face-size">265×100mm</span>
</div>
<div class="unfold-cell" style="grid-column: 2; grid-row: 3;">
<span class="face-name">底面</span>
<span class="face-size">265×205mm</span>
</div>
<div></div>
<div></div>
</div>
<div style="margin-top: 40px; padding: 30px; background: rgba(0,0,0,0.3); border-radius: 12px;">
<h4 style="color: var(--brand-gold); margin-bottom: 20px;">展开图尺寸计算</h4>
<table class="spec-table">
<tr>
<th>方向</th>
<th>计算方式</th>
<th>总尺寸</th>
</tr>
<tr>
<td>横向</td>
<td>左侧面(100) + 正面(265) + 右侧面(100) + 背面(265) + 粘口(20)</td>
<td><code>750mm</code></td>
</tr>
<tr>
<td>纵向</td>
<td>顶面(205) + 正面(100) + 底面(205) + 折边(40)</td>
<td><code>550mm</code></td>
</tr>
</table>
<p style="margin-top: 20px; color: rgba(245,245,240,0.7);">
<span class="highlight">出血位:</span>各边 +3mm | <span class="highlight">裁切线:</span>实线 | <span class="highlight">折痕线:</span>虚线
</p>
</div>
</div>
</section>
<!-- 第五章:材质与工艺 -->
<section class="section">
<h2 class="section-title">材质与工艺规范</h2>
<h3 style="color: var(--brand-gold); margin-bottom: 20px; font-family: var(--font-serif);">推荐材质</h3>
<table class="spec-table">
<tr>
<th>材质类型</th>
<th>规格</th>
<th>适用产品</th>
<th>特点</th>
</tr>
<tr>
<td>黑卡纸</td>
<td>350g-400g</td>
<td>醒狮·瞳</td>
<td>自带黑色,适合烫金工艺,质感高级</td>
</tr>
<tr>
<td>触感纸</td>
<td>300g-350g</td>
<td>醒狮·威/鼓</td>
<td>细腻触感,提升开箱体验</td>
</tr>
<tr>
<td>镭射卡纸</td>
<td>300g</td>
<td>醒狮·潮</td>
<td>炫彩效果,符合潮流定位</td>
</tr>
<tr>
<td>瓦楞内衬</td>
<td>E坑/B坑</td>
<td>全系列</td>
<td>缓冲保护,可定制形状</td>
</tr>
</table>
<h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">工艺详解</h3>
<div class="craft-section">
<div class="craft-card">
<h4><span class="icon"></span>烫金工艺</h4>
<p><strong>适用:</strong>品牌Logo、产品名称、狮头图腾<br>
<strong>颜色:</strong>亮金/哑金/古铜金/橙金(按产品区分)<br>
<strong>效果:</strong>金属光泽,提升档次感<br>
<strong>注意:</strong>线条不宜过细最小0.2mm</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>UV上光</h4>
<p><strong>适用:</strong>狮眼、光束线条、重点图形<br>
<strong>类型:</strong>局部UV / 满版UV<br>
<strong>效果:</strong>高光泽度,视觉焦点突出<br>
<strong>注意:</strong>与哑光底形成对比</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>压纹工艺</h4>
<p><strong>适用:</strong>云纹底纹、品牌暗纹<br>
<strong>纹理:</strong>布纹/皮纹/定制狮纹<br>
<strong>效果:</strong>触感立体,增加质感<br>
<strong>注意:</strong>深度0.3-0.5mm为宜</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>击凸/压凹</h4>
<p><strong>适用:</strong>产品名称、核心图形<br>
<strong>效果:</strong>3D立体效果高端大气<br>
<strong>注意:</strong>需配合烫金使用效果更佳</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>覆膜工艺</h4>
<p><strong>类型:</strong>哑光膜/触感膜/镭射膜<br>
<strong>效果:</strong>保护印刷+质感提升<br>
<strong>建议:</strong>全系列采用覆膜,增强耐用性</p>
</div>
<div class="craft-card">
<h4><span class="icon"></span>特殊油墨</h4>
<p><strong>夜光油墨:</strong>醒狮·潮霓虹边框<br>
<strong>温变油墨:</strong>可玩性互动元素<br>
<strong>香味油墨:</strong>开箱嗅觉体验(可选)</p>
</div>
</div>
</section>
<!-- 第六章3D渲染规范 -->
<section class="section">
<h2 class="section-title">3D渲染设计规范</h2>
<div class="render-specs">
<h4>📐 基础尺寸参数</h4>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
<div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">外盒尺寸</div>
<div style="font-family: monospace; margin-top: 10px;">
长: 265mm<br>
宽: 205mm<br>
高: 100mm
</div>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">材质厚度</div>
<div style="font-family: monospace; margin-top: 10px;">
纸板: 0.5mm<br>
覆膜: 0.02mm<br>
总厚度: ~0.6mm
</div>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">展开图尺寸</div>
<div style="font-family: monospace; margin-top: 10px;">
宽度: 750mm<br>
高度: 550mm<br>
分辨率: 300dpi
</div>
</div>
</div>
<h4>🎨 材质贴图规范</h4>
<table class="spec-table">
<tr>
<th>材质属性</th>
<th>参数值</th>
<th>说明</th>
</tr>
<tr>
<td>基础色 (Base Color)</td>
<td>#0D0D0D</td>
<td>墨黑色主背景</td>
</tr>
<tr>
<td>粗糙度 (Roughness)</td>
<td>0.7-0.9</td>
<td>纸质哑光质感</td>
</tr>
<tr>
<td>金属度 (Metallic)</td>
<td>0.0</td>
<td>非金属材质</td>
</tr>
<tr>
<td>法线强度 (Normal)</td>
<td>0.3-0.5</td>
<td>压纹纹理高度</td>
</tr>
<tr>
<td>高光 (Specular)</td>
<td>0.1-0.2</td>
<td>微弱反光</td>
</tr>
</table>
<h4 style="margin-top: 30px;">💡 灯光设置建议</h4>
<ul style="list-style: none; margin-top: 15px;">
<li style="padding: 8px 0;"><span class="highlight">主光源:</span>暖白色 (色温 4000K) - 模拟自然光</li>
<li style="padding: 8px 0;"><span class="highlight">补光:</span>冷白色 (色温 5500K) - 突出烫金反光</li>
<li style="padding: 8px 0;"><span class="highlight">轮廓光:</span>金色 (RGB: 212,168,83) - 强调边缘</li>
<li style="padding: 8px 0;"><span class="highlight">环境光:</span>深灰色 (RGB: 40,40,40) - 营造高级感</li>
</ul>
<h4 style="margin-top: 30px;">📷 渲染角度推荐</h4>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">正面视角</div>
<div style="font-size: 0.9rem; margin-top: 5px;">0° 水平 / 0° 垂直</div>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">45° 展示角</div>
<div style="font-size: 0.9rem; margin-top: 5px;">45° 水平 / 30° 垂直</div>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">俯视角度</div>
<div style="font-size: 0.9rem; margin-top: 5px;">0° 水平 / 60° 垂直</div>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
<div style="color: var(--brand-gold); font-weight: 600;">开箱视角</div>
<div style="font-size: 0.9rem; margin-top: 5px;">半开盖展示内部</div>
</div>
</div>
<h4 style="margin-top: 30px;">📁 输出文件规格</h4>
<table class="spec-table">
<tr>
<th>用途</th>
<th>格式</th>
<th>分辨率</th>
<th>色彩模式</th>
</tr>
<tr>
<td>印刷生产</td>
<td>AI / PDF</td>
<td>300dpi</td>
<td>CMYK</td>
</tr>
<tr>
<td>3D渲染贴图</td>
<td>PNG / TIFF</td>
<td>300dpi</td>
<td>RGB</td>
</tr>
<tr>
<td>电商展示</td>
<td>JPG / PNG</td>
<td>150dpi</td>
<td>RGB</td>
</tr>
<tr>
<td>宣传物料</td>
<td>PSD / AI</td>
<td>300dpi</td>
<td>CMYK + RGB</td>
</tr>
</table>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-logo">卡特光 · 醒狮系列</div>
<p>承东方狮魂,耀前路无垠</p>
<p style="margin-top: 10px; font-size: 0.8rem;">包装设计方案 v1.0 | 2026</p>
</footer>
</div>
</body>
</html>