diff --git a/web_frontend/web_result/order-classes/visual-design/agent-avatars b/web_frontend/web_result/order-classes/visual-design/agent-avatars
new file mode 120000
index 00000000..786c0bde
--- /dev/null
+++ b/web_frontend/web_result/order-classes/visual-design/agent-avatars
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/视觉设计/agent头像
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/visual-design/css/styles.css b/web_frontend/web_result/order-classes/visual-design/css/styles.css
new file mode 100644
index 00000000..ade7426c
--- /dev/null
+++ b/web_frontend/web_result/order-classes/visual-design/css/styles.css
@@ -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;
+}
diff --git a/web_frontend/web_result/order-classes/visual-design/images b/web_frontend/web_result/order-classes/visual-design/images
new file mode 120000
index 00000000..8a426e4b
--- /dev/null
+++ b/web_frontend/web_result/order-classes/visual-design/images
@@ -0,0 +1 @@
+../../../../data/订单班文档资料/视觉设计/notion文稿/image
\ No newline at end of file
diff --git a/web_frontend/web_result/order-classes/visual-design/index.html b/web_frontend/web_result/order-classes/visual-design/index.html
new file mode 100644
index 00000000..4ededcf2
--- /dev/null
+++ b/web_frontend/web_result/order-classes/visual-design/index.html
@@ -0,0 +1,886 @@
+
+
+
+
+
+ 同里古镇农文旅宣传片策划案 - 视觉设计订单班
+
+
+
+
+
+
+
+
+
+
+
+
+
🎬 视觉设计订单班
+
同里古镇农文旅
宣传片策划案
+
影视策划 · 分镜设计 · 制作执行
+
+ 6-7分钟古镇文化宣传片
+ 6大主题章节全景展示
+ 17个精心设计分镜镜头
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
项目背景
+
本宣传片旨在全方位展示同里古镇的独特魅力,通过精心策划的6大主题章节,呈现古镇千年历史文化、江南水乡美食、生态湿地风光、现代农业产业和璀璨夜景,打造一部6-7分钟的高品质文化旅游宣传片,为同里古镇的品牌推广和旅游发展提供有力支撑。
+
+
+
+
+
+
![同里古镇航拍]()
+
同里古镇全景航拍
+
+
+
+
+ - 地理位置: 江苏省苏州市吴江区同里古镇
+ - 片长设定: 6-7分钟完整版
+ - 内容章节: 6大主题全景展示
+ - 拍摄方式: 航拍+地面+水面多角度
+ - 视觉风格: 传统色彩+现代影像
+ - 目标人群: 文化旅游爱好者
+
+
+
+
+
+
+
![传统配色表]()
+
宣传片配色体系
+
+
+
+
+ - 青瓦灰: 古建筑主色调
+ - 悟道黄: 传统文化底蕴
+ - 自由白: 简约现代感
+ - 山吹色: 温暖人文气息
+ - 赤锖色: 历史厚重感
+ - 常磐色: 生态自然美
+
+
+
+
+
+
+
四大宣传目标
+
+
+
+
+
+
+
+ - 展示千年古镇历史底蕴
+ - 呈现传统建筑艺术魅力
+ - 传递江南水乡人文精神
+ - 彰显文化遗产保护成果
+
+
+
+
+
+
+
+
+ - 推广地道江南传统美食
+ - 展现精湛烹饪技艺
+ - 呈现特色美食文化
+ - 吸引美食爱好者
+
+
+
+
+
+
+
+
+ - 展示湿地生态资源
+ - 呈现绿色发展理念
+ - 推广生态旅游体验
+ - 彰显人与自然和谐
+
+
+
+
+
+
+
+
+ - 展现现代农业成果
+ - 推广农文旅融合模式
+ - 促进乡村振兴发展
+ - 吸引产业投资合作
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
视觉风格定位
+
影片采用电影级画质拍摄,结合航拍、地面和水面多角度镜头,运用传统色彩体系(青瓦灰、悟道黄、山吹色等)营造古镇意境。通过慢镜头、延时摄影等手法展现古镇四季变化和昼夜交替,配以江南丝竹音乐和现代配乐,打造兼具传统韵味与现代美感的视觉盛宴。
+
+
+
+
![电影风格参考]()
+
影片视觉风格参考
+
+
+
+ 六大主题章节
+
+
+
+
+
+
![古镇开篇]()
+
第一章:开篇·同里古镇
+
+
+
+
+ - 地理位置与历史渊源介绍
+ - 高空航拍展现古镇全貌
+ - 水乡特色与建筑布局
+ - "东方威尼斯"美誉由来
+ - 千年古镇时光印记
+
+
+
+
+
+
+
![历史文化]()
+
第二章:历史文化篇
+
+
+
+
+ - 退思园世界遗产展示
+ - 明清古建筑群落
+ - 三桥文化与婚俗传统
+ - 名人故居与文化遗迹
+ - 传统工艺与非遗文化
+
+
+
+
+
+
+
![美食文化]()
+
第三章:美食篇
+
+
+
+
+ - 状元蹄、袜底酥等特色美食
+ - 传统烹饪技艺展示
+ - 江南饮食文化传承
+ - 老字号美食店铺
+ - 美食制作过程呈现
+
+
+
+
+
+
+
![生态湿地]()
+
第四章:生态湿地篇
+
+
+
+
+ - 同里湿地公园自然风光
+ - 候鸟栖息与生态多样性
+ - 四季花卉与水生植物
+ - 晨雾与日落美景
+ - 水上观光体验
+
+
+
+
+
+
+
![农业产业]()
+
第五章:农业产业篇
+
+
+
+
+ - 现代农业示范基地
+ - 有机蔬菜与特色农产品
+ - 农文旅融合发展模式
+ - 农民丰收与乡村振兴
+ - 产业合作与共同富裕
+
+
+
+
+
+
+
![夜游同里]()
+
第六章:夜游同里篇
+
+
+
+
+ - 古镇夜景灯光设计
+ - 桥影与水面倒影
+ - 夜间文化演艺活动
+ - 夜市与特色商业
+ - 璀璨夜色与浪漫氛围
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
分镜设计理念
+
本宣传片共设计17个核心分镜镜头,涵盖航拍、地面、水面等多角度拍摄,通过精心设计的画面构图、运镜方式和时长控制,确保每个镜头都能精准传达主题意境。从开篇的大气航拍到细节的人文特写,从白天的生机盎然到夜晚的璀璨灯火,全方位展现同里古镇的独特魅力。
+
+
+
+
+
+
+ | 镜号 |
+ 画面内容 |
+ 拍摄方式 |
+ 时长 |
+ 备注 |
+
+
+
+
+ | 1 |
+ 同里古镇全景航拍 |
+ 高空俯拍 |
+ 15秒 |
+ 展现古镇整体布局 |
+
+
+ | 2 |
+ 水乡特色河道 |
+ 低空航拍 |
+ 12秒 |
+ 展现水系脉络 |
+
+
+ | 3 |
+ 退思园建筑群 |
+ 地面推进 |
+ 20秒 |
+ 世界遗产重点展示 |
+
+
+ | 4 |
+ 三桥文化场景 |
+ 平移拍摄 |
+ 18秒 |
+ 传统婚俗展现 |
+
+
+ | 5 |
+ 古建筑细节特写 |
+ 微距镜头 |
+ 10秒 |
+ 雕花、砖雕等工艺 |
+
+
+ | 6 |
+ 状元蹄制作过程 |
+ 近景拍摄 |
+ 15秒 |
+ 传统烹饪技艺 |
+
+
+ | 7 |
+ 袜底酥制作特写 |
+ 微距慢动作 |
+ 12秒 |
+ 酥皮层次展示 |
+
+
+ | 8 |
+ 美食街市井生活 |
+ 跟拍镜头 |
+ 18秒 |
+ 烟火气氛围 |
+
+
+ | 9 |
+ 湿地公园全景 |
+ 航拍环绕 |
+ 20秒 |
+ 生态美景全貌 |
+
+
+ | 10 |
+ 候鸟栖息场景 |
+ 长焦拍摄 |
+ 15秒 |
+ 生态多样性 |
+
+
+ | 11 |
+ 晨雾与日出 |
+ 延时摄影 |
+ 25秒 |
+ 自然意境营造 |
+
+
+ | 12 |
+ 现代农业大棚 |
+ 内景拍摄 |
+ 15秒 |
+ 科技农业展示 |
+
+
+ | 13 |
+ 稻田丰收场景 |
+ 航拍俯视 |
+ 18秒 |
+ 农业产业成果 |
+
+
+ | 14 |
+ 农民劳作特写 |
+ 近景拍摄 |
+ 12秒 |
+ 乡村振兴主题 |
+
+
+ | 15 |
+ 古镇夜景全景 |
+ 高空航拍 |
+ 20秒 |
+ 灯光璀璨效果 |
+
+
+ | 16 |
+ 桥影与水面倒影 |
+ 平移慢镜 |
+ 18秒 |
+ 夜景意境营造 |
+
+
+ | 17 |
+ 夜市文化活动 |
+ 摇臂拍摄 |
+ 22秒 |
+ 结尾氛围烘托 |
+
+
+
+
+
+
+
+
+
![航拍镜头]()
+
航拍镜头示例
+
+
+
+
+ - 高空俯拍: 展现古镇全貌
+ - 环绕拍摄: 突出重点建筑
+ - 低空跟拍: 呈现水系脉络
+ - 定点环拍: 营造空间感
+
+
+
+
+
+
+
![地面镜头]()
+
地面镜头示例
+
+
+
+
+ - 推进镜头: 建筑细节展示
+ - 平移镜头: 场景氛围营造
+ - 微距特写: 工艺细节呈现
+ - 跟拍镜头: 人文生活场景
+
+
+
+
+
+
+
![特殊镜头]()
+
特殊镜头技法
+
+
+
+
+ - 延时摄影: 日出日落场景
+ - 慢动作: 细节过程展示
+ - 水面反射: 意境氛围营造
+ - 长焦特写: 远景细节捕捉
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
预算规划说明
+
本项目总预算为¥273,800元,涵盖前期策划、拍摄制作、后期剪辑等全流程费用。拍摄周期为7天(1天场地勘察+6天正式拍摄),投入专业团队12人,配备高端摄影器材和航拍设备,确保影片品质达到行业一流水平。预算分配合理,重点投入在摄影器材租赁和后期制作环节。
+
+
+
+
+
+
+ | 预算项目 |
+ 明细说明 |
+ 金额(元) |
+ 占比 |
+
+
+
+
+ | 前期策划费 |
+ 创意策划、脚本撰写、分镜设计 |
+ 20,000 |
+ 7.3% |
+
+
+ | 导演费用 |
+ 导演统筹、现场执导 |
+ 15,000 |
+ 5.5% |
+
+
+ | 摄影费用 |
+ 主摄影师、副摄影师 |
+ 25,000 |
+ 9.1% |
+
+
+ | 器材租赁 |
+ 摄影机、航拍器、灯光、轨道等 |
+ 45,000 |
+ 16.4% |
+
+
+ | 场地费用 |
+ 拍摄许可、场地租赁 |
+ 12,000 |
+ 4.4% |
+
+
+ | 演员费用 |
+ 群众演员、特约演员 |
+ 18,000 |
+ 6.6% |
+
+
+ | 美术置景 |
+ 场景布置、道具准备 |
+ 15,000 |
+ 5.5% |
+
+
+ | 后期剪辑 |
+ 剪辑、调色、特效 |
+ 50,000 |
+ 18.3% |
+
+
+ | 音乐音效 |
+ 原创配乐、音效设计 |
+ 20,000 |
+ 7.3% |
+
+
+ | 配音解说 |
+ 专业配音、解说录制 |
+ 12,000 |
+ 4.4% |
+
+
+ | 交通食宿 |
+ 团队差旅、食宿安排 |
+ 18,000 |
+ 6.6% |
+
+
+ | 制作管理 |
+ 统筹协调、行政费用 |
+ 15,000 |
+ 5.5% |
+
+
+ | 应急备用 |
+ 不可预见费用 |
+ 8,800 |
+ 3.2% |
+
+
+ | 总计 |
+ - |
+ 273,800 |
+ 100% |
+
+
+
+
+
+
+
+
+
![拍摄团队]()
+
专业拍摄团队
+
+
+
+
+ - 导演: 1名 - 总体把控
+ - 摄影师: 2名 - 主机+副机
+ - 航拍师: 1名 - 无人机操作
+ - 灯光师: 2名 - 灯光布置
+ - 录音师: 1名 - 现场收音
+ - 美术师: 2名 - 场景布置
+ - 场务: 2名 - 现场协调
+ - 制片: 1名 - 统筹管理
+
+
+
+
+
+
+
![拍摄安排]()
+
拍摄进度安排
+
+
+
+
+ - Day 1: 场地勘察与准备工作
+ - Day 2: 古镇建筑与历史文化
+ - Day 3: 美食文化拍摄
+ - Day 4: 生态湿地场景
+ - Day 5: 农业产业拍摄
+ - Day 6: 夜景拍摄
+ - Day 7: 补拍与收尾工作
+
+
+
+
+
+
+
+
+
+
+ - RED摄影机 + 镜头组
+ - 大疆Inspire 3航拍器
+ - 电动滑轨 + 摇臂
+ - LED灯光套装
+ - 专业收音设备
+ - 监视器 + 存储设备
+
+
+
+
+
+
+
+
+ - 素材整理与初剪(3天)
+ - 调色处理(2天)
+ - 特效制作(2天)
+ - 配乐音效(2天)
+ - 配音解说(1天)
+ - 成片交付(1天)
+
+
+
+
+
+
+
+
+ - 4K超高清拍摄标准
+ - 多机位备份拍摄
+ - 严格进度管理
+ - 客户阶段性审片
+ - 免费修改2次
+ - 行业一流品质保证
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 项目成果总结
+
+
+
+
+
+
+
+ - 6-7分钟高品质宣传片
+ - 6大主题章节全景展示
+ - 17个精心设计分镜镜头
+ - 传统色彩体系视觉风格
+ - 航拍+地面+水面多角度
+ - 原创配乐音效设计
+ - 4K超高清画质标准
+ - 12人专业拍摄团队
+
+
+
+
+
+
+
+
+ - 拍摄周期: 7天(含勘察)
+ - 后期制作: 11天
+ - 项目预算: ¥273,800
+ - 分镜数量: 17个
+ - 团队规模: 12人
+ - 拍摄地点: 15+个
+ - 航拍镜头: 8个
+ - 成片时长: 6-7分钟
+
+
+
+
+
+
+
+
+ - 提升古镇品牌形象
+ - 吸引文化旅游人群
+ - 推广江南水乡特色
+ - 促进文旅产业发展
+ - 招商引资宣传工具
+ - 多平台传播推广
+ - 文化遗产传承展示
+ - 乡村振兴示范案例
+
+
+
+
+
+
+
🎬 同里古镇农文旅宣传片策划案圆满完成!
+
© 2024 视觉设计订单班 | 影视策划与制作解决方案
+
+
+
+
+
+
+
diff --git a/web_frontend/web_result/order-classes/visual-design/js/main.js b/web_frontend/web_result/order-classes/visual-design/js/main.js
new file mode 100644
index 00000000..8fdd338d
--- /dev/null
+++ b/web_frontend/web_result/order-classes/visual-design/js/main.js
@@ -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();
+ }
+ });
+ }
+}