feat: 完成视觉设计订单班-同里古镇宣传片策划案
详细说明: - 创建index.html展示宣传片策划完整方案(6-7分钟宣传片) - 实现电影琥珀主题设计系统(琥珀金#D97706+石板灰#64748B) - 4个核心section: 项目概述、视觉基调、分镜设计、预算制作 - 5个专业Agent: 客户对接、导演、编剧、分镜师、制片主任 - 统计数据动画: 7天拍摄、17个分镜、12人团队、27.38万预算 - 完整内容: 6大主题章节(古镇/历史/美食/生态/农业/夜游) - 预算表: 13项明细费用分解 - 拍摄计划: 7天进度安排+团队配置 - 影响模块: 视觉设计订单班展示系统(10/12完成) - 文件: index.html, css/styles.css, js/main.js + symlinks
This commit is contained in:
Yep_Q
@@ -0,0 +1 @@
|
|||||||
|
../../../../data/订单班文档资料/视觉设计/agent头像
|
||||||
@@ -0,0 +1,961 @@
|
|||||||
|
/* 同里古镇农文旅宣传片策划案 - 视觉设计订单班电影琥珀设计系统 */
|
||||||
|
|
||||||
|
/* ========== 设计变量 ========== */
|
||||||
|
:root {
|
||||||
|
/* 电影琥珀主题 - 视觉设计风格 */
|
||||||
|
--bg-dark: #fef3c7; /* 浅琥珀背景 */
|
||||||
|
--bg-semi-dark: rgba(254, 243, 199, 0.95); /* 半透明浅琥珀 */
|
||||||
|
--bg-overlay: rgba(255, 255, 255, 0.85); /* 白色遮罩 */
|
||||||
|
--bg-card: rgba(255, 255, 255, 0.9); /* 卡片背景 */
|
||||||
|
--primary-dark: #78350f; /* 主色深琥珀 */
|
||||||
|
--primary-amber: #d97706; /* 主色琥珀金 - 视觉设计专业 */
|
||||||
|
--accent-slate: #64748b; /* 石板灰强调 - 古镇瓦片主题 */
|
||||||
|
--accent-amber-light: #fbbf24; /* 浅琥珀色 */
|
||||||
|
--text-light: #78350f; /* 深色文字 */
|
||||||
|
--text-gray: #6b7280; /* 灰色文字 */
|
||||||
|
--border-light: rgba(217, 119, 6, 0.2); /* 琥珀色边框 */
|
||||||
|
--hover-bg: rgba(217, 119, 6, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(217, 119, 6, 0.2); /* 激活背景 */
|
||||||
|
|
||||||
|
/* 间距系统 - 针对大屏幕优化 */
|
||||||
|
--spacing-xs: 0.75rem; /* 12px */
|
||||||
|
--spacing-sm: 1.25rem; /* 20px */
|
||||||
|
--spacing-md: 2rem; /* 32px */
|
||||||
|
--spacing-lg: 3rem; /* 48px */
|
||||||
|
--spacing-xl: 4rem; /* 64px */
|
||||||
|
--spacing-2xl: 6rem; /* 96px */
|
||||||
|
--spacing-3xl: 8rem; /* 128px */
|
||||||
|
|
||||||
|
/* 字体系统 */
|
||||||
|
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
--font-display: 'Inter', sans-serif;
|
||||||
|
|
||||||
|
/* 字体大小 - 针对大屏幕优化 */
|
||||||
|
--text-xs: 0.875rem; /* 14px */
|
||||||
|
--text-sm: 1rem; /* 16px */
|
||||||
|
--text-base: 1.125rem; /* 18px */
|
||||||
|
--text-lg: 1.375rem; /* 22px */
|
||||||
|
--text-xl: 1.625rem; /* 26px */
|
||||||
|
--text-2xl: 2rem; /* 32px */
|
||||||
|
--text-3xl: 2.5rem; /* 40px */
|
||||||
|
--text-4xl: 3rem; /* 48px */
|
||||||
|
--text-5xl: 4rem; /* 64px */
|
||||||
|
|
||||||
|
/* 字重 */
|
||||||
|
--font-light: 300;
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
|
||||||
|
/* 圆角 */
|
||||||
|
--radius-sm: 0.375rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--radius-2xl: 1.5rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* 阴影 - 电影感专业主题 */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.08);
|
||||||
|
--shadow-lg: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
|
--shadow-xl: 0 8px 16px rgba(0,0,0,0.12);
|
||||||
|
--shadow-amber: 0 2px 8px rgba(217, 119, 6, 0.15);
|
||||||
|
|
||||||
|
/* 过渡 */
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 250ms ease;
|
||||||
|
--transition-slow: 350ms ease;
|
||||||
|
|
||||||
|
/* 布局 */
|
||||||
|
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 深色主题 - 深邃琥珀配色 ========== */
|
||||||
|
body.dark-theme {
|
||||||
|
--bg-dark: #78350f; /* 深邃琥珀背景 */
|
||||||
|
--bg-semi-dark: rgba(120, 53, 15, 0.95); /* 深琥珀半透明 */
|
||||||
|
--bg-overlay: rgba(217, 119, 6, 0.85); /* 深琥珀遮罩层 */
|
||||||
|
--bg-card: rgba(217, 119, 6, 0.9); /* 深琥珀卡片背景 */
|
||||||
|
--primary-dark: #78350f; /* 深邃琥珀 */
|
||||||
|
--primary-amber: #fbbf24; /* 明亮琥珀 */
|
||||||
|
--accent-slate: #94a3b8; /* 亮石板灰 */
|
||||||
|
--accent-amber-light: #fcd34d; /* 超亮琥珀色 */
|
||||||
|
--text-light: #fef3c7; /* 浅色文字 */
|
||||||
|
--text-gray: #fde68a; /* 灰色文字 */
|
||||||
|
--border-light: rgba(251, 191, 36, 0.25); /* 琥珀色边框 */
|
||||||
|
--hover-bg: rgba(217, 119, 6, 0.15); /* 悬停背景 */
|
||||||
|
--active-bg: rgba(251, 191, 36, 0.2); /* 激活背景 */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
||||||
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.5);
|
||||||
|
--shadow-lg: 0 4px 8px rgba(0,0,0,0.6);
|
||||||
|
--shadow-xl: 0 8px 16px rgba(0,0,0,0.7);
|
||||||
|
--shadow-amber: 0 2px 8px rgba(217, 119, 6, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 重置样式 ========== */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-light);
|
||||||
|
background-color: var(--bg-dark);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== Hero 区域 - 全屏图片背景 ========== */
|
||||||
|
.hero {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 0.95) 100%),
|
||||||
|
url('../images/同里古建筑航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的Hero渐变 */
|
||||||
|
body.dark-theme .hero {
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(217, 119, 6, 0.8) 100%),
|
||||||
|
url('../images/同里古建筑航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 20% 50%, rgba(217, 119, 6, 0.1) 0%, transparent 50%),
|
||||||
|
radial-gradient(circle at 80% 80%, rgba(120, 53, 15, 0.05) 0%, transparent 50%);
|
||||||
|
pointer-events: none;
|
||||||
|
animation: glow 8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--spacing-md) var(--spacing-xl);
|
||||||
|
background: rgba(217, 119, 6, 0.15);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 3px solid var(--primary-amber);
|
||||||
|
box-shadow: var(--shadow-amber);
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-badge:hover {
|
||||||
|
background: rgba(217, 119, 6, 0.25);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: clamp(3.5rem, 10vw, 6.5rem);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(217, 119, 6, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||||
|
font-weight: var(--font-light);
|
||||||
|
opacity: 0.95;
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-description {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
opacity: 0.85;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 导航 - 深色玻璃态 ========== */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
padding: var(--spacing-md) 0;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-sm) var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item span {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item.active {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
border-color: var(--primary-amber);
|
||||||
|
box-shadow: var(--shadow-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 内容区块 - 图片背景 ========== */
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
background: var(--bg-dark);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 浅色图片背景 - 每个区块使用不同图片 */
|
||||||
|
.section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/配色表.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/电影风格参考图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/地面拍摄视角.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/稻田航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块(当超过4个section时) */
|
||||||
|
.section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/古镇夜景.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(254, 243, 199, 0.9) 0%, rgba(253, 230, 138, 1) 100%),
|
||||||
|
url('../images/同里公园航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的区块背景 - 每个区块使用对应图片 */
|
||||||
|
body.dark-theme .section:nth-child(1) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/配色表.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(2) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/电影风格参考图.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(3) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/地面拍摄视角.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(4) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/稻田航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用奇偶区块(当超过4个section时) */
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(odd) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(120, 53, 15, 0.92) 0%, rgba(217, 119, 6, 0.88) 100%),
|
||||||
|
url('../images/古镇夜景.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .section:nth-child(n+5):nth-child(even) {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to bottom, rgba(217, 119, 6, 0.90) 0%, rgba(120, 53, 15, 0.88) 100%),
|
||||||
|
url('../images/同里公园航拍.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 深色主题下的特定元素调整 */
|
||||||
|
body.dark-theme .stat-item {
|
||||||
|
background: rgba(217, 119, 6, 0.8);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-item:hover {
|
||||||
|
background: rgba(251, 191, 36, 0.15);
|
||||||
|
border-color: var(--primary-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .stat-value {
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme th {
|
||||||
|
background: rgba(251, 191, 36, 0.12);
|
||||||
|
color: var(--accent-amber-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme tr:hover {
|
||||||
|
background: rgba(251, 191, 36, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: var(--container-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
object-fit: cover;
|
||||||
|
border: 3px solid var(--primary-amber);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-avatar:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
border-color: var(--accent-slate);
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--text-light);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
text-shadow: none;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 180px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, var(--primary-amber), transparent);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-xl);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro p {
|
||||||
|
color: var(--text-gray);
|
||||||
|
line-height: 1.8;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacing-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-3 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 卡片 - 图片优先布局 ========== */
|
||||||
|
.card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-2xl);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-8px);
|
||||||
|
box-shadow: var(--shadow-xl), var(--shadow-amber);
|
||||||
|
border-color: var(--primary-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
background: var(--bg-semi-dark);
|
||||||
|
border-bottom: 2px solid var(--border-light);
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
order: 3;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||||
|
.image-container {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 3/2;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
position: relative;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
order: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform var(--transition-slow);
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
text-align: center;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container:hover .image-caption {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 列表 ========== */
|
||||||
|
.feature-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li {
|
||||||
|
padding: var(--spacing-sm) 0;
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:hover {
|
||||||
|
color: var(--primary-amber);
|
||||||
|
padding-left: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 统计数据 ========== */
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
background: var(--bg-overlay);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--border-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-gray);
|
||||||
|
margin-bottom: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 表格 ========== */
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: var(--spacing-xl) 0;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: var(--bg-card);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: var(--active-bg);
|
||||||
|
color: var(--primary-amber);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
text-align: left;
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
border-bottom: 2px solid var(--primary-amber);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border-light);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background: var(--hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式 ========== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
:root {
|
||||||
|
--spacing-sm: 0.75rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 1.5rem;
|
||||||
|
--spacing-xl: 2rem;
|
||||||
|
--spacing-2xl: 3rem;
|
||||||
|
--spacing-3xl: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:nth-child(odd),
|
||||||
|
.section:nth-child(even) {
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding: var(--spacing-xs) var(--spacing-md);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: var(--spacing-2xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2,
|
||||||
|
.grid-3,
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 动画 ========== */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -1000px 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 1000px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-in {
|
||||||
|
animation: slideIn 0.6s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 工具类 ========== */
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
|
||||||
|
.mt-sm { margin-top: var(--spacing-sm); }
|
||||||
|
.mt-md { margin-top: var(--spacing-md); }
|
||||||
|
.mt-lg { margin-top: var(--spacing-lg); }
|
||||||
|
.mt-xl { margin-top: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||||
|
.mb-md { margin-bottom: var(--spacing-md); }
|
||||||
|
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||||
|
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||||
|
|
||||||
|
.hidden { display: none; }
|
||||||
|
.block { display: block; }
|
||||||
|
.flex { display: flex; }
|
||||||
|
.grid { display: grid; }
|
||||||
|
|
||||||
|
.gap-sm { gap: var(--spacing-sm); }
|
||||||
|
.gap-md { gap: var(--spacing-md); }
|
||||||
|
.gap-lg { gap: var(--spacing-lg); }
|
||||||
|
|
||||||
|
/* ========== 图片加载状态 ========== */
|
||||||
|
img {
|
||||||
|
transition: opacity var(--transition-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
img.loaded {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.error {
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: grayscale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== SVG图标尺寸统一管理 ========== */
|
||||||
|
.hero-description i[data-lucide] {
|
||||||
|
width: 24px !important;
|
||||||
|
height: 24px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert-intro h3 i[data-lucide] {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-list li i[data-lucide] {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin-right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item i[data-lucide] {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
display: block !important;
|
||||||
|
margin: 0 auto 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 主题切换按钮 ========== */
|
||||||
|
.theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn {
|
||||||
|
position: relative;
|
||||||
|
width: 64px;
|
||||||
|
height: 32px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 2px solid var(--border-light);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 6px;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-icon {
|
||||||
|
width: 18px !important;
|
||||||
|
height: 18px !important;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
color: var(--text-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-light {
|
||||||
|
color: var(--primary-amber);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.dark-theme) .theme-icon-dark {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-dark {
|
||||||
|
color: var(--primary-amber);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme .theme-icon-light {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
1
web_frontend/web_result/order-classes/visual-design/images
Symbolic link
1
web_frontend/web_result/order-classes/visual-design/images
Symbolic link
@@ -0,0 +1 @@
|
|||||||
|
../../../../data/订单班文档资料/视觉设计/notion文稿/image
|
||||||
886
web_frontend/web_result/order-classes/visual-design/index.html
Normal file
886
web_frontend/web_result/order-classes/visual-design/index.html
Normal file
@@ -0,0 +1,886 @@
|
|||||||
|
<!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 rel="stylesheet" href="css/styles.css">
|
||||||
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="dark-theme">
|
||||||
|
<!-- 主题切换按钮 -->
|
||||||
|
<div class="theme-toggle">
|
||||||
|
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||||
|
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
|
||||||
|
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hero 区域 -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="hero-badge">🎬 视觉设计订单班</div>
|
||||||
|
<h1 class="hero-title">同里古镇农文旅<br>宣传片策划案</h1>
|
||||||
|
<h2 class="hero-subtitle">影视策划 · 分镜设计 · 制作执行</h2>
|
||||||
|
<p class="hero-description">
|
||||||
|
<i data-lucide="film"></i> 6-7分钟古镇文化宣传片<br>
|
||||||
|
<i data-lucide="layers"></i> 6大主题章节全景展示<br>
|
||||||
|
<i data-lucide="camera"></i> 17个精心设计分镜镜头
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-item active">
|
||||||
|
<i data-lucide="target"></i>
|
||||||
|
<span>项目概述</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="palette"></i>
|
||||||
|
<span>视觉基调</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="frame"></i>
|
||||||
|
<span>分镜设计</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<i data-lucide="dollar-sign"></i>
|
||||||
|
<span>预算制作</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Section 1: 项目概述与宣传目标 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/客户对接-项目总监.jpg" alt="客户对接-项目总监" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="user-check"></i> 客户对接-项目总监
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">项目概述与宣传目标</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="info"></i> 项目背景</h3>
|
||||||
|
<p>本宣传片旨在全方位展示同里古镇的独特魅力,通过精心策划的6大主题章节,呈现古镇千年历史文化、江南水乡美食、生态湿地风光、现代农业产业和璀璨夜景,打造一部6-7分钟的高品质文化旅游宣传片,为同里古镇的品牌推广和旅游发展提供有力支撑。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/同里古建筑航拍.jpg" alt="同里古镇航拍" loading="lazy">
|
||||||
|
<div class="image-caption">同里古镇全景航拍</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">📍 项目定位</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="map-pin"></i> 地理位置: 江苏省苏州市吴江区同里古镇</li>
|
||||||
|
<li><i data-lucide="calendar"></i> 片长设定: 6-7分钟完整版</li>
|
||||||
|
<li><i data-lucide="layers"></i> 内容章节: 6大主题全景展示</li>
|
||||||
|
<li><i data-lucide="camera"></i> 拍摄方式: 航拍+地面+水面多角度</li>
|
||||||
|
<li><i data-lucide="palette"></i> 视觉风格: 传统色彩+现代影像</li>
|
||||||
|
<li><i data-lucide="users"></i> 目标人群: 文化旅游爱好者</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/配色表.jpg" alt="传统配色表" loading="lazy">
|
||||||
|
<div class="image-caption">宣传片配色体系</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🎨 色彩体系</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="square"></i> 青瓦灰: 古建筑主色调</li>
|
||||||
|
<li><i data-lucide="square"></i> 悟道黄: 传统文化底蕴</li>
|
||||||
|
<li><i data-lucide="square"></i> 自由白: 简约现代感</li>
|
||||||
|
<li><i data-lucide="square"></i> 山吹色: 温暖人文气息</li>
|
||||||
|
<li><i data-lucide="square"></i> 赤锖色: 历史厚重感</li>
|
||||||
|
<li><i data-lucide="square"></i> 常磐色: 生态自然美</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||||
|
<h3><i data-lucide="target"></i> 四大宣传目标</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🏛️ 文化传承</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="book-open"></i> 展示千年古镇历史底蕴</li>
|
||||||
|
<li><i data-lucide="home"></i> 呈现传统建筑艺术魅力</li>
|
||||||
|
<li><i data-lucide="users"></i> 传递江南水乡人文精神</li>
|
||||||
|
<li><i data-lucide="award"></i> 彰显文化遗产保护成果</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🍜 美食体验</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="utensils"></i> 推广地道江南传统美食</li>
|
||||||
|
<li><i data-lucide="chef-hat"></i> 展现精湛烹饪技艺</li>
|
||||||
|
<li><i data-lucide="sparkles"></i> 呈现特色美食文化</li>
|
||||||
|
<li><i data-lucide="shopping-bag"></i> 吸引美食爱好者</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🌿 生态旅游</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="trees"></i> 展示湿地生态资源</li>
|
||||||
|
<li><i data-lucide="leaf"></i> 呈现绿色发展理念</li>
|
||||||
|
<li><i data-lucide="flower"></i> 推广生态旅游体验</li>
|
||||||
|
<li><i data-lucide="sunrise"></i> 彰显人与自然和谐</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🌾 产业融合</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="tractor"></i> 展现现代农业成果</li>
|
||||||
|
<li><i data-lucide="store"></i> 推广农文旅融合模式</li>
|
||||||
|
<li><i data-lucide="trending-up"></i> 促进乡村振兴发展</li>
|
||||||
|
<li><i data-lucide="handshake"></i> 吸引产业投资合作</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">拍摄周期</div>
|
||||||
|
<div class="stat-value shooting-days">0天</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">分镜数量</div>
|
||||||
|
<div class="stat-value shot-count">0个</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">团队规模</div>
|
||||||
|
<div class="stat-value team-members">0人</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">制作预算</div>
|
||||||
|
<div class="stat-value budget-amount">0万</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 2: 影片视觉基调与内容设计 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/导演.jpg" alt="导演" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="clapperboard"></i> 导演
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">影片视觉基调与内容设计</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="eye"></i> 视觉风格定位</h3>
|
||||||
|
<p>影片采用电影级画质拍摄,结合航拍、地面和水面多角度镜头,运用传统色彩体系(青瓦灰、悟道黄、山吹色等)营造古镇意境。通过慢镜头、延时摄影等手法展现古镇四季变化和昼夜交替,配以江南丝竹音乐和现代配乐,打造兼具传统韵味与现代美感的视觉盛宴。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||||
|
<img data-src="images/电影风格参考图.jpg" alt="电影风格参考" loading="lazy">
|
||||||
|
<div class="image-caption">影片视觉风格参考</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="section-title" style="margin: var(--spacing-2xl) 0 var(--spacing-xl);">
|
||||||
|
<i data-lucide="film"></i> 六大主题章节
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/同里古建筑航拍.jpg" alt="古镇开篇" loading="lazy">
|
||||||
|
<div class="image-caption">第一章:开篇·同里古镇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🏛️ 开篇·同里古镇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="map"></i> 地理位置与历史渊源介绍</li>
|
||||||
|
<li><i data-lucide="plane"></i> 高空航拍展现古镇全貌</li>
|
||||||
|
<li><i data-lucide="droplet"></i> 水乡特色与建筑布局</li>
|
||||||
|
<li><i data-lucide="milestone"></i> "东方威尼斯"美誉由来</li>
|
||||||
|
<li><i data-lucide="clock"></i> 千年古镇时光印记</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/古镇文化展示.jpg" alt="历史文化" loading="lazy">
|
||||||
|
<div class="image-caption">第二章:历史文化篇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">📚 历史文化篇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="landmark"></i> 退思园世界遗产展示</li>
|
||||||
|
<li><i data-lucide="building"></i> 明清古建筑群落</li>
|
||||||
|
<li><i data-lucide="bridge"></i> 三桥文化与婚俗传统</li>
|
||||||
|
<li><i data-lucide="scroll"></i> 名人故居与文化遗迹</li>
|
||||||
|
<li><i data-lucide="palette"></i> 传统工艺与非遗文化</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/江南美食展示.jpg" alt="美食文化" loading="lazy">
|
||||||
|
<div class="image-caption">第三章:美食篇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🍜 美食篇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="fish"></i> 状元蹄、袜底酥等特色美食</li>
|
||||||
|
<li><i data-lucide="chef-hat"></i> 传统烹饪技艺展示</li>
|
||||||
|
<li><i data-lucide="utensils"></i> 江南饮食文化传承</li>
|
||||||
|
<li><i data-lucide="store"></i> 老字号美食店铺</li>
|
||||||
|
<li><i data-lucide="sparkles"></i> 美食制作过程呈现</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/湿地生态景观.jpg" alt="生态湿地" loading="lazy">
|
||||||
|
<div class="image-caption">第四章:生态湿地篇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🌿 生态湿地篇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="leaf"></i> 同里湿地公园自然风光</li>
|
||||||
|
<li><i data-lucide="bird"></i> 候鸟栖息与生态多样性</li>
|
||||||
|
<li><i data-lucide="flower"></i> 四季花卉与水生植物</li>
|
||||||
|
<li><i data-lucide="sunrise"></i> 晨雾与日落美景</li>
|
||||||
|
<li><i data-lucide="waves"></i> 水上观光体验</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/农旅融合展示.jpg" alt="农业产业" loading="lazy">
|
||||||
|
<div class="image-caption">第五章:农业产业篇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🌾 农业产业篇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="tractor"></i> 现代农业示范基地</li>
|
||||||
|
<li><i data-lucide="sprout"></i> 有机蔬菜与特色农产品</li>
|
||||||
|
<li><i data-lucide="store"></i> 农文旅融合发展模式</li>
|
||||||
|
<li><i data-lucide="users"></i> 农民丰收与乡村振兴</li>
|
||||||
|
<li><i data-lucide="handshake"></i> 产业合作与共同富裕</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/古镇夜景.jpg" alt="夜游同里" loading="lazy">
|
||||||
|
<div class="image-caption">第六章:夜游同里篇</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🌙 夜游同里篇</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="lightbulb"></i> 古镇夜景灯光设计</li>
|
||||||
|
<li><i data-lucide="bridge"></i> 桥影与水面倒影</li>
|
||||||
|
<li><i data-lucide="music"></i> 夜间文化演艺活动</li>
|
||||||
|
<li><i data-lucide="shopping-cart"></i> 夜市与特色商业</li>
|
||||||
|
<li><i data-lucide="star"></i> 璀璨夜色与浪漫氛围</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">影片时长</div>
|
||||||
|
<div class="stat-value video-duration">0分钟</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">拍摄章节</div>
|
||||||
|
<div class="stat-value filming-sections">0个</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">拍摄地点</div>
|
||||||
|
<div class="stat-value">15+个</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">航拍镜头</div>
|
||||||
|
<div class="stat-value">8个</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 3: 分镜设计方案 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/分镜师.jpg" alt="分镜师" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="frame"></i> 分镜师
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">分镜设计方案</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="layout"></i> 分镜设计理念</h3>
|
||||||
|
<p>本宣传片共设计17个核心分镜镜头,涵盖航拍、地面、水面等多角度拍摄,通过精心设计的画面构图、运镜方式和时长控制,确保每个镜头都能精准传达主题意境。从开篇的大气航拍到细节的人文特写,从白天的生机盎然到夜晚的璀璨灯火,全方位展现同里古镇的独特魅力。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>镜号</th>
|
||||||
|
<th>画面内容</th>
|
||||||
|
<th>拍摄方式</th>
|
||||||
|
<th>时长</th>
|
||||||
|
<th>备注</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1</td>
|
||||||
|
<td>同里古镇全景航拍</td>
|
||||||
|
<td>高空俯拍</td>
|
||||||
|
<td>15秒</td>
|
||||||
|
<td>展现古镇整体布局</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>2</td>
|
||||||
|
<td>水乡特色河道</td>
|
||||||
|
<td>低空航拍</td>
|
||||||
|
<td>12秒</td>
|
||||||
|
<td>展现水系脉络</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3</td>
|
||||||
|
<td>退思园建筑群</td>
|
||||||
|
<td>地面推进</td>
|
||||||
|
<td>20秒</td>
|
||||||
|
<td>世界遗产重点展示</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>4</td>
|
||||||
|
<td>三桥文化场景</td>
|
||||||
|
<td>平移拍摄</td>
|
||||||
|
<td>18秒</td>
|
||||||
|
<td>传统婚俗展现</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>5</td>
|
||||||
|
<td>古建筑细节特写</td>
|
||||||
|
<td>微距镜头</td>
|
||||||
|
<td>10秒</td>
|
||||||
|
<td>雕花、砖雕等工艺</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>6</td>
|
||||||
|
<td>状元蹄制作过程</td>
|
||||||
|
<td>近景拍摄</td>
|
||||||
|
<td>15秒</td>
|
||||||
|
<td>传统烹饪技艺</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>7</td>
|
||||||
|
<td>袜底酥制作特写</td>
|
||||||
|
<td>微距慢动作</td>
|
||||||
|
<td>12秒</td>
|
||||||
|
<td>酥皮层次展示</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>8</td>
|
||||||
|
<td>美食街市井生活</td>
|
||||||
|
<td>跟拍镜头</td>
|
||||||
|
<td>18秒</td>
|
||||||
|
<td>烟火气氛围</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>9</td>
|
||||||
|
<td>湿地公园全景</td>
|
||||||
|
<td>航拍环绕</td>
|
||||||
|
<td>20秒</td>
|
||||||
|
<td>生态美景全貌</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>10</td>
|
||||||
|
<td>候鸟栖息场景</td>
|
||||||
|
<td>长焦拍摄</td>
|
||||||
|
<td>15秒</td>
|
||||||
|
<td>生态多样性</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>11</td>
|
||||||
|
<td>晨雾与日出</td>
|
||||||
|
<td>延时摄影</td>
|
||||||
|
<td>25秒</td>
|
||||||
|
<td>自然意境营造</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>12</td>
|
||||||
|
<td>现代农业大棚</td>
|
||||||
|
<td>内景拍摄</td>
|
||||||
|
<td>15秒</td>
|
||||||
|
<td>科技农业展示</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>13</td>
|
||||||
|
<td>稻田丰收场景</td>
|
||||||
|
<td>航拍俯视</td>
|
||||||
|
<td>18秒</td>
|
||||||
|
<td>农业产业成果</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>14</td>
|
||||||
|
<td>农民劳作特写</td>
|
||||||
|
<td>近景拍摄</td>
|
||||||
|
<td>12秒</td>
|
||||||
|
<td>乡村振兴主题</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>15</td>
|
||||||
|
<td>古镇夜景全景</td>
|
||||||
|
<td>高空航拍</td>
|
||||||
|
<td>20秒</td>
|
||||||
|
<td>灯光璀璨效果</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>16</td>
|
||||||
|
<td>桥影与水面倒影</td>
|
||||||
|
<td>平移慢镜</td>
|
||||||
|
<td>18秒</td>
|
||||||
|
<td>夜景意境营造</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>17</td>
|
||||||
|
<td>夜市文化活动</td>
|
||||||
|
<td>摇臂拍摄</td>
|
||||||
|
<td>22秒</td>
|
||||||
|
<td>结尾氛围烘托</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/同里公园航拍.jpg" alt="航拍镜头" loading="lazy">
|
||||||
|
<div class="image-caption">航拍镜头示例</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">📐 航拍镜头设计</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="plane"></i> 高空俯拍: 展现古镇全貌</li>
|
||||||
|
<li><i data-lucide="move"></i> 环绕拍摄: 突出重点建筑</li>
|
||||||
|
<li><i data-lucide="maximize"></i> 低空跟拍: 呈现水系脉络</li>
|
||||||
|
<li><i data-lucide="crosshair"></i> 定点环拍: 营造空间感</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/地面拍摄视角.jpg" alt="地面镜头" loading="lazy">
|
||||||
|
<div class="image-caption">地面镜头示例</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🎥 地面镜头设计</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="move-right"></i> 推进镜头: 建筑细节展示</li>
|
||||||
|
<li><i data-lucide="move-horizontal"></i> 平移镜头: 场景氛围营造</li>
|
||||||
|
<li><i data-lucide="search"></i> 微距特写: 工艺细节呈现</li>
|
||||||
|
<li><i data-lucide="users"></i> 跟拍镜头: 人文生活场景</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/水面拍摄角度.jpg" alt="特殊镜头" loading="lazy">
|
||||||
|
<div class="image-caption">特殊镜头技法</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">⚡ 特殊镜头技法</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="clock"></i> 延时摄影: 日出日落场景</li>
|
||||||
|
<li><i data-lucide="gauge"></i> 慢动作: 细节过程展示</li>
|
||||||
|
<li><i data-lucide="droplet"></i> 水面反射: 意境氛围营造</li>
|
||||||
|
<li><i data-lucide="camera-off"></i> 长焦特写: 远景细节捕捉</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Section 4: 拍摄预算与制作安排 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<img src="agent-avatars/制片主任.jpg" alt="制片主任" class="agent-avatar">
|
||||||
|
<div class="agent-info">
|
||||||
|
<div class="agent-name">
|
||||||
|
<i data-lucide="briefcase"></i> 制片主任
|
||||||
|
</div>
|
||||||
|
<h2 class="section-title">拍摄预算与制作安排</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-content">
|
||||||
|
<div class="expert-intro">
|
||||||
|
<h3><i data-lucide="calculator"></i> 预算规划说明</h3>
|
||||||
|
<p>本项目总预算为¥273,800元,涵盖前期策划、拍摄制作、后期剪辑等全流程费用。拍摄周期为7天(1天场地勘察+6天正式拍摄),投入专业团队12人,配备高端摄影器材和航拍设备,确保影片品质达到行业一流水平。预算分配合理,重点投入在摄影器材租赁和后期制作环节。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container" style="margin-top: var(--spacing-xl);">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>预算项目</th>
|
||||||
|
<th>明细说明</th>
|
||||||
|
<th>金额(元)</th>
|
||||||
|
<th>占比</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>前期策划费</td>
|
||||||
|
<td>创意策划、脚本撰写、分镜设计</td>
|
||||||
|
<td>20,000</td>
|
||||||
|
<td>7.3%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>导演费用</td>
|
||||||
|
<td>导演统筹、现场执导</td>
|
||||||
|
<td>15,000</td>
|
||||||
|
<td>5.5%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>摄影费用</td>
|
||||||
|
<td>主摄影师、副摄影师</td>
|
||||||
|
<td>25,000</td>
|
||||||
|
<td>9.1%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>器材租赁</td>
|
||||||
|
<td>摄影机、航拍器、灯光、轨道等</td>
|
||||||
|
<td>45,000</td>
|
||||||
|
<td>16.4%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>场地费用</td>
|
||||||
|
<td>拍摄许可、场地租赁</td>
|
||||||
|
<td>12,000</td>
|
||||||
|
<td>4.4%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>演员费用</td>
|
||||||
|
<td>群众演员、特约演员</td>
|
||||||
|
<td>18,000</td>
|
||||||
|
<td>6.6%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>美术置景</td>
|
||||||
|
<td>场景布置、道具准备</td>
|
||||||
|
<td>15,000</td>
|
||||||
|
<td>5.5%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>后期剪辑</td>
|
||||||
|
<td>剪辑、调色、特效</td>
|
||||||
|
<td>50,000</td>
|
||||||
|
<td>18.3%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>音乐音效</td>
|
||||||
|
<td>原创配乐、音效设计</td>
|
||||||
|
<td>20,000</td>
|
||||||
|
<td>7.3%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>配音解说</td>
|
||||||
|
<td>专业配音、解说录制</td>
|
||||||
|
<td>12,000</td>
|
||||||
|
<td>4.4%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>交通食宿</td>
|
||||||
|
<td>团队差旅、食宿安排</td>
|
||||||
|
<td>18,000</td>
|
||||||
|
<td>6.6%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>制作管理</td>
|
||||||
|
<td>统筹协调、行政费用</td>
|
||||||
|
<td>15,000</td>
|
||||||
|
<td>5.5%</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>应急备用</td>
|
||||||
|
<td>不可预见费用</td>
|
||||||
|
<td>8,800</td>
|
||||||
|
<td>3.2%</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="font-weight: bold; background: var(--active-bg);">
|
||||||
|
<td>总计</td>
|
||||||
|
<td>-</td>
|
||||||
|
<td>273,800</td>
|
||||||
|
<td>100%</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-2" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/拍摄团队工作照.jpg" alt="拍摄团队" loading="lazy">
|
||||||
|
<div class="image-caption">专业拍摄团队</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">👥 团队配置(12人)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="user-check"></i> 导演: 1名 - 总体把控</li>
|
||||||
|
<li><i data-lucide="camera"></i> 摄影师: 2名 - 主机+副机</li>
|
||||||
|
<li><i data-lucide="plane"></i> 航拍师: 1名 - 无人机操作</li>
|
||||||
|
<li><i data-lucide="lightbulb"></i> 灯光师: 2名 - 灯光布置</li>
|
||||||
|
<li><i data-lucide="mic"></i> 录音师: 1名 - 现场收音</li>
|
||||||
|
<li><i data-lucide="palette"></i> 美术师: 2名 - 场景布置</li>
|
||||||
|
<li><i data-lucide="users"></i> 场务: 2名 - 现场协调</li>
|
||||||
|
<li><i data-lucide="briefcase"></i> 制片: 1名 - 统筹管理</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="image-container">
|
||||||
|
<img data-src="images/稻田航拍.jpg" alt="拍摄安排" loading="lazy">
|
||||||
|
<div class="image-caption">拍摄进度安排</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">📅 拍摄进度(7天)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="search"></i> Day 1: 场地勘察与准备工作</li>
|
||||||
|
<li><i data-lucide="building"></i> Day 2: 古镇建筑与历史文化</li>
|
||||||
|
<li><i data-lucide="utensils"></i> Day 3: 美食文化拍摄</li>
|
||||||
|
<li><i data-lucide="leaf"></i> Day 4: 生态湿地场景</li>
|
||||||
|
<li><i data-lucide="tractor"></i> Day 5: 农业产业拍摄</li>
|
||||||
|
<li><i data-lucide="moon"></i> Day 6: 夜景拍摄</li>
|
||||||
|
<li><i data-lucide="check-circle"></i> Day 7: 补拍与收尾工作</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-3" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">📷 主要器材清单</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="camera"></i> RED摄影机 + 镜头组</li>
|
||||||
|
<li><i data-lucide="plane"></i> 大疆Inspire 3航拍器</li>
|
||||||
|
<li><i data-lucide="move"></i> 电动滑轨 + 摇臂</li>
|
||||||
|
<li><i data-lucide="lightbulb"></i> LED灯光套装</li>
|
||||||
|
<li><i data-lucide="mic"></i> 专业收音设备</li>
|
||||||
|
<li><i data-lucide="monitor"></i> 监视器 + 存储设备</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">🎬 后期制作流程</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="film"></i> 素材整理与初剪(3天)</li>
|
||||||
|
<li><i data-lucide="palette"></i> 调色处理(2天)</li>
|
||||||
|
<li><i data-lucide="sparkles"></i> 特效制作(2天)</li>
|
||||||
|
<li><i data-lucide="music"></i> 配乐音效(2天)</li>
|
||||||
|
<li><i data-lucide="mic"></i> 配音解说(1天)</li>
|
||||||
|
<li><i data-lucide="check-square"></i> 成片交付(1天)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">✅ 质量保障措施</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="award"></i> 4K超高清拍摄标准</li>
|
||||||
|
<li><i data-lucide="shield"></i> 多机位备份拍摄</li>
|
||||||
|
<li><i data-lucide="clock"></i> 严格进度管理</li>
|
||||||
|
<li><i data-lucide="user-check"></i> 客户阶段性审片</li>
|
||||||
|
<li><i data-lucide="refresh-cw"></i> 免费修改2次</li>
|
||||||
|
<li><i data-lucide="star"></i> 行业一流品质保证</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">总预算</div>
|
||||||
|
<div class="stat-value">¥27.38万</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">拍摄周期</div>
|
||||||
|
<div class="stat-value">7天</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">后期周期</div>
|
||||||
|
<div class="stat-value">11天</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-label">交付标准</div>
|
||||||
|
<div class="stat-value">4K画质</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer: 项目成果总结 -->
|
||||||
|
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||||
|
<i data-lucide="award"></i> 项目成果总结
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">🎬 核心亮点</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="film"></i> 6-7分钟高品质宣传片</li>
|
||||||
|
<li><i data-lucide="layers"></i> 6大主题章节全景展示</li>
|
||||||
|
<li><i data-lucide="camera"></i> 17个精心设计分镜镜头</li>
|
||||||
|
<li><i data-lucide="palette"></i> 传统色彩体系视觉风格</li>
|
||||||
|
<li><i data-lucide="plane"></i> 航拍+地面+水面多角度</li>
|
||||||
|
<li><i data-lucide="music"></i> 原创配乐音效设计</li>
|
||||||
|
<li><i data-lucide="award"></i> 4K超高清画质标准</li>
|
||||||
|
<li><i data-lucide="users"></i> 12人专业拍摄团队</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">📊 制作数据</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="calendar"></i> 拍摄周期: 7天(含勘察)</li>
|
||||||
|
<li><i data-lucide="clock"></i> 后期制作: 11天</li>
|
||||||
|
<li><i data-lucide="dollar-sign"></i> 项目预算: ¥273,800</li>
|
||||||
|
<li><i data-lucide="camera"></i> 分镜数量: 17个</li>
|
||||||
|
<li><i data-lucide="users"></i> 团队规模: 12人</li>
|
||||||
|
<li><i data-lucide="map-pin"></i> 拍摄地点: 15+个</li>
|
||||||
|
<li><i data-lucide="plane"></i> 航拍镜头: 8个</li>
|
||||||
|
<li><i data-lucide="film"></i> 成片时长: 6-7分钟</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" style="order: 1;">
|
||||||
|
<h3 class="card-title">🎯 应用价值</h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-body" style="order: 2;">
|
||||||
|
<ul class="feature-list">
|
||||||
|
<li><i data-lucide="trending-up"></i> 提升古镇品牌形象</li>
|
||||||
|
<li><i data-lucide="users"></i> 吸引文化旅游人群</li>
|
||||||
|
<li><i data-lucide="map"></i> 推广江南水乡特色</li>
|
||||||
|
<li><i data-lucide="store"></i> 促进文旅产业发展</li>
|
||||||
|
<li><i data-lucide="handshake"></i> 招商引资宣传工具</li>
|
||||||
|
<li><i data-lucide="globe"></i> 多平台传播推广</li>
|
||||||
|
<li><i data-lucide="award"></i> 文化遗产传承展示</li>
|
||||||
|
<li><i data-lucide="zap"></i> 乡村振兴示范案例</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||||
|
<p>🎬 同里古镇农文旅宣传片策划案圆满完成!</p>
|
||||||
|
<p style="margin-top: var(--spacing-sm);">© 2024 视觉设计订单班 | 影视策划与制作解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
268
web_frontend/web_result/order-classes/visual-design/js/main.js
Normal file
268
web_frontend/web_result/order-classes/visual-design/js/main.js
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
// 同里古镇农文旅宣传片策划案 - 主要JavaScript逻辑
|
||||||
|
|
||||||
|
// 页面初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
console.log('🎬 视觉设计订单班同里宣传片策划页面加载完成');
|
||||||
|
|
||||||
|
// 初始化Lucide图标
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化组件
|
||||||
|
initNavigation();
|
||||||
|
initAnimations();
|
||||||
|
initLazyLoading();
|
||||||
|
initSmoothScroll();
|
||||||
|
updateStats();
|
||||||
|
initThemeToggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导航功能
|
||||||
|
function initNavigation() {
|
||||||
|
const navItems = document.querySelectorAll('.nav-item');
|
||||||
|
const sections = document.querySelectorAll('.section');
|
||||||
|
|
||||||
|
// 点击导航项滚动到对应区块
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
// 移除所有活跃状态
|
||||||
|
navItems.forEach(nav => nav.classList.remove('active'));
|
||||||
|
// 添加当前活跃状态
|
||||||
|
item.classList.add('active');
|
||||||
|
|
||||||
|
// 滚动到对应区块
|
||||||
|
if (sections[index]) {
|
||||||
|
const targetSection = sections[index];
|
||||||
|
const offsetTop = targetSection.offsetTop - 100;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: offsetTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动时更新导航活跃状态
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
let current = '';
|
||||||
|
sections.forEach((section, index) => {
|
||||||
|
const sectionTop = section.offsetTop - 150;
|
||||||
|
if (scrollY >= sectionTop) {
|
||||||
|
current = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
navItems.forEach((item, index) => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
if (index === current) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画初始化
|
||||||
|
function initAnimations() {
|
||||||
|
// 使用 Intersection Observer 实现滚动动画
|
||||||
|
const observerOptions = {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '0px',
|
||||||
|
threshold: 0.1
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('fade-in');
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// 观察所有需要动画的元素
|
||||||
|
const animatedElements = document.querySelectorAll('.card, .expert-intro');
|
||||||
|
animatedElements.forEach(el => {
|
||||||
|
el.style.opacity = '0';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片懒加载
|
||||||
|
function initLazyLoading() {
|
||||||
|
const images = document.querySelectorAll('img[data-src]');
|
||||||
|
|
||||||
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
const img = entry.target;
|
||||||
|
const src = img.getAttribute('data-src');
|
||||||
|
|
||||||
|
// 创建新图片对象来预加载
|
||||||
|
const tempImg = new Image();
|
||||||
|
tempImg.onload = function() {
|
||||||
|
img.src = src;
|
||||||
|
img.classList.add('loaded');
|
||||||
|
};
|
||||||
|
tempImg.onerror = function() {
|
||||||
|
// 如果图片加载失败，使用琥珀色主题占位图
|
||||||
|
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fef3c7"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23d97706"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||||
|
img.classList.add('error');
|
||||||
|
};
|
||||||
|
tempImg.src = src;
|
||||||
|
|
||||||
|
img.removeAttribute('data-src');
|
||||||
|
observer.unobserve(img);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
images.forEach(img => {
|
||||||
|
imageObserver.observe(img);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
function initSmoothScroll() {
|
||||||
|
// 为所有锚点链接添加平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const target = document.querySelector(targetId);
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新统计数据 - 影视拍摄相关数据
|
||||||
|
function updateStats() {
|
||||||
|
// 动画数字增长效果 - 影视拍摄相关数据
|
||||||
|
const stats = [
|
||||||
|
{ selector: '.shooting-days', value: 7, suffix: '天' },
|
||||||
|
{ selector: '.shot-count', value: 17, suffix: '个' },
|
||||||
|
{ selector: '.team-members', value: 12, suffix: '人' },
|
||||||
|
{ selector: '.budget-amount', value: 27.38, suffix: '万' },
|
||||||
|
{ selector: '.video-duration', value: 6.5, suffix: '分钟' },
|
||||||
|
{ selector: '.filming-sections', value: 6, suffix: '个' }
|
||||||
|
];
|
||||||
|
|
||||||
|
stats.forEach(stat => {
|
||||||
|
const element = document.querySelector(stat.selector);
|
||||||
|
if (element) {
|
||||||
|
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数字动画函数
|
||||||
|
function animateValue(element, start, end, duration, suffix = '') {
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function update(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// 使用缓动函数
|
||||||
|
const easeOutQuad = progress * (2 - progress);
|
||||||
|
let current;
|
||||||
|
|
||||||
|
// 处理小数值
|
||||||
|
if (end < 10 && end % 1 !== 0) {
|
||||||
|
current = (start + (end - start) * easeOutQuad).toFixed(1);
|
||||||
|
} else {
|
||||||
|
current = Math.floor(start + (end - start) * easeOutQuad);
|
||||||
|
}
|
||||||
|
|
||||||
|
element.textContent = current + suffix;
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 错误处理
|
||||||
|
window.addEventListener('error', function(e) {
|
||||||
|
if (e.target.tagName === 'IMG') {
|
||||||
|
console.warn('图片加载失败:', e.target.src);
|
||||||
|
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23fef3c7"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23d97706"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||||
|
e.target.classList.add('error');
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// 移动端优化
|
||||||
|
if ('ontouchstart' in window) {
|
||||||
|
document.body.classList.add('touch-device');
|
||||||
|
|
||||||
|
// 移动端点击优化
|
||||||
|
let touchStartTime;
|
||||||
|
document.addEventListener('touchstart', () => {
|
||||||
|
touchStartTime = Date.now();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('touchend', (e) => {
|
||||||
|
const touchEndTime = Date.now();
|
||||||
|
if (touchEndTime - touchStartTime < 200) {
|
||||||
|
// 快速点击
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 性能监控
|
||||||
|
if (window.performance && window.performance.timing) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const timing = window.performance.timing;
|
||||||
|
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||||
|
console.log(`页面加载时间: ${loadTime}ms`);
|
||||||
|
|
||||||
|
// 如果加载时间过长，提示用户
|
||||||
|
if (loadTime > 3000) {
|
||||||
|
console.warn('页面加载时间较长，可能需要优化');
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题切换功能
|
||||||
|
function initThemeToggle() {
|
||||||
|
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||||
|
|
||||||
|
// 从localStorage读取用户的主题偏好
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
// 如果没有保存的偏好，默认使用暗色主题
|
||||||
|
if (savedTheme === 'dark' || savedTheme === null) {
|
||||||
|
document.body.classList.add('dark-theme');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击切换主题
|
||||||
|
if (themeToggleBtn) {
|
||||||
|
themeToggleBtn.addEventListener('click', () => {
|
||||||
|
document.body.classList.toggle('dark-theme');
|
||||||
|
|
||||||
|
// 保存用户偏好
|
||||||
|
if (document.body.classList.contains('dark-theme')) {
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
} else {
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新初始化图标以确保正确显示
|
||||||
|
if (typeof lucide !== 'undefined') {
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user