1247 lines
51 KiB
HTML
1247 lines
51 KiB
HTML
|
<!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>
|