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大主题全景展示
  • +
  • 拍摄方式: 航拍+地面+水面多角度
  • +
  • 视觉风格: 传统色彩+现代影像
  • +
  • 目标人群: 文化旅游爱好者
  • +
+
+
+ +
+
+ 传统配色表 +
宣传片配色体系
+
+
+

🎨 色彩体系

+
+
+
    +
  • 青瓦灰: 古建筑主色调
  • +
  • 悟道黄: 传统文化底蕴
  • +
  • 自由白: 简约现代感
  • +
  • 山吹色: 温暖人文气息
  • +
  • 赤锖色: 历史厚重感
  • +
  • 常磐色: 生态自然美
  • +
+
+
+
+ +
+

四大宣传目标

+
+ +
+
+
+

🏛️ 文化传承

+
+
+
    +
  • 展示千年古镇历史底蕴
  • +
  • 呈现传统建筑艺术魅力
  • +
  • 传递江南水乡人文精神
  • +
  • 彰显文化遗产保护成果
  • +
+
+
+ +
+
+

🍜 美食体验

+
+
+
    +
  • 推广地道江南传统美食
  • +
  • 展现精湛烹饪技艺
  • +
  • 呈现特色美食文化
  • +
  • 吸引美食爱好者
  • +
+
+
+ +
+
+

🌿 生态旅游

+
+
+
    +
  • 展示湿地生态资源
  • +
  • 呈现绿色发展理念
  • +
  • 推广生态旅游体验
  • +
  • 彰显人与自然和谐
  • +
+
+
+ +
+
+

🌾 产业融合

+
+
+
    +
  • 展现现代农业成果
  • +
  • 推广农文旅融合模式
  • +
  • 促进乡村振兴发展
  • +
  • 吸引产业投资合作
  • +
+
+
+
+ +
+
+
拍摄周期
+
0天
+
+
+
分镜数量
+
0个
+
+
+
团队规模
+
0人
+
+
+
制作预算
+
0万
+
+
+
+
+
+ + +
+
+
+ 导演 +
+
+ 导演 +
+

影片视觉基调与内容设计

+
+
+ +
+
+

视觉风格定位

+

影片采用电影级画质拍摄,结合航拍、地面和水面多角度镜头,运用传统色彩体系(青瓦灰、悟道黄、山吹色等)营造古镇意境。通过慢镜头、延时摄影等手法展现古镇四季变化和昼夜交替,配以江南丝竹音乐和现代配乐,打造兼具传统韵味与现代美感的视觉盛宴。

+
+ +
+ 电影风格参考 +
影片视觉风格参考
+
+ +

+ 六大主题章节 +

+ +
+
+
+ 古镇开篇 +
第一章:开篇·同里古镇
+
+
+

🏛️ 开篇·同里古镇

+
+
+
    +
  • 地理位置与历史渊源介绍
  • +
  • 高空航拍展现古镇全貌
  • +
  • 水乡特色与建筑布局
  • +
  • "东方威尼斯"美誉由来
  • +
  • 千年古镇时光印记
  • +
+
+
+ +
+
+ 历史文化 +
第二章:历史文化篇
+
+
+

📚 历史文化篇

+
+
+
    +
  • 退思园世界遗产展示
  • +
  • 明清古建筑群落
  • +
  • 三桥文化与婚俗传统
  • +
  • 名人故居与文化遗迹
  • +
  • 传统工艺与非遗文化
  • +
+
+
+ +
+
+ 美食文化 +
第三章:美食篇
+
+
+

🍜 美食篇

+
+
+
    +
  • 状元蹄、袜底酥等特色美食
  • +
  • 传统烹饪技艺展示
  • +
  • 江南饮食文化传承
  • +
  • 老字号美食店铺
  • +
  • 美食制作过程呈现
  • +
+
+
+ +
+
+ 生态湿地 +
第四章:生态湿地篇
+
+
+

🌿 生态湿地篇

+
+
+
    +
  • 同里湿地公园自然风光
  • +
  • 候鸟栖息与生态多样性
  • +
  • 四季花卉与水生植物
  • +
  • 晨雾与日落美景
  • +
  • 水上观光体验
  • +
+
+
+ +
+
+ 农业产业 +
第五章:农业产业篇
+
+
+

🌾 农业产业篇

+
+
+
    +
  • 现代农业示范基地
  • +
  • 有机蔬菜与特色农产品
  • +
  • 农文旅融合发展模式
  • +
  • 农民丰收与乡村振兴
  • +
  • 产业合作与共同富裕
  • +
+
+
+ +
+
+ 夜游同里 +
第六章:夜游同里篇
+
+
+

🌙 夜游同里篇

+
+
+
    +
  • 古镇夜景灯光设计
  • +
  • 桥影与水面倒影
  • +
  • 夜间文化演艺活动
  • +
  • 夜市与特色商业
  • +
  • 璀璨夜色与浪漫氛围
  • +
+
+
+
+ +
+
+
影片时长
+
0分钟
+
+
+
拍摄章节
+
0个
+
+
+
拍摄地点
+
15+个
+
+
+
航拍镜头
+
8个
+
+
+
+
+
+ + +
+
+
+ 分镜师 +
+
+ 分镜师 +
+

分镜设计方案

+
+
+ +
+
+

分镜设计理念

+

本宣传片共设计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,0007.3%
导演费用导演统筹、现场执导15,0005.5%
摄影费用主摄影师、副摄影师25,0009.1%
器材租赁摄影机、航拍器、灯光、轨道等45,00016.4%
场地费用拍摄许可、场地租赁12,0004.4%
演员费用群众演员、特约演员18,0006.6%
美术置景场景布置、道具准备15,0005.5%
后期剪辑剪辑、调色、特效50,00018.3%
音乐音效原创配乐、音效设计20,0007.3%
配音解说专业配音、解说录制12,0004.4%
交通食宿团队差旅、食宿安排18,0006.6%
制作管理统筹协调、行政费用15,0005.5%
应急备用不可预见费用8,8003.2%
总计-273,800100%
+
+ +
+
+
+ 拍摄团队 +
专业拍摄团队
+
+
+

👥 团队配置(12人)

+
+
+
    +
  • 导演: 1名 - 总体把控
  • +
  • 摄影师: 2名 - 主机+副机
  • +
  • 航拍师: 1名 - 无人机操作
  • +
  • 灯光师: 2名 - 灯光布置
  • +
  • 录音师: 1名 - 现场收音
  • +
  • 美术师: 2名 - 场景布置
  • +
  • 场务: 2名 - 现场协调
  • +
  • 制片: 1名 - 统筹管理
  • +
+
+
+ +
+
+ 拍摄安排 +
拍摄进度安排
+
+
+

📅 拍摄进度(7天)

+
+
+
    +
  • 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次
  • +
  • 行业一流品质保证
  • +
+
+
+
+ +
+
+
总预算
+
¥27.38万
+
+
+
拍摄周期
+
7天
+
+
+
后期周期
+
11天
+
+
+
交付标准
+
4K画质
+
+
+
+
+
+ + +
+
+

+ 项目成果总结 +

+ +
+
+
+

🎬 核心亮点

+
+
+
    +
  • 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(); + } + }); + } +}