| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>绍兴黄酒产业的数字化转型与品牌创新战略</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Microsoft YaHei', sans-serif; |
| overflow: hidden; |
| background: #1a1a1a; |
| color: #fff; |
| } |
| |
| .slide { |
| position: absolute; |
| width: 100vw; |
| height: 100vh; |
| display: none; |
| justify-content: center; |
| align-items: center; |
| padding: 2rem; |
| background: linear-gradient(135deg, #1a1a1a 0%, #2a1a2a 100%); |
| } |
| |
| .slide.active { |
| display: flex; |
| } |
| |
| #particles-js { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 1; |
| } |
| |
| .content { |
| position: relative; |
| z-index: 2; |
| width: 80%; |
| max-width: 1200px; |
| } |
| |
| .cover { |
| text-align: center; |
| } |
| |
| .cover h1 { |
| font-size: 3em; |
| margin-bottom: 1em; |
| background: linear-gradient(120deg, #ff6b6b, #ffd93d); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: titleFade 1s ease-in; |
| } |
| |
| .cover h2 { |
| font-size: 1.8em; |
| margin-bottom: 0.5em; |
| color: #fff; |
| opacity: 0; |
| animation: subtitleFade 1s ease-in 0.5s forwards; |
| } |
| |
| .cover p { |
| font-size: 1.2em; |
| color: #ffd93d; |
| opacity: 0; |
| animation: textFade 1s ease-in 1s forwards; |
| } |
| |
| .card { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border-radius: 15px; |
| padding: 2rem; |
| margin: 1rem 0; |
| transform: translateY(20px); |
| opacity: 0; |
| animation: cardFade 0.5s ease-out forwards; |
| } |
| |
| .card h3 { |
| color: #ff6b6b; |
| margin-bottom: 1rem; |
| } |
| |
| .card-container { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 2rem; |
| } |
| |
| @keyframes titleFade { |
| from { |
| transform: translateY(-50px); |
| opacity: 0; |
| } |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes subtitleFade { |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @keyframes textFade { |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @keyframes cardFade { |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| |
| .progress-bar { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| height: 3px; |
| background: linear-gradient(to right, #ff6b6b, #ffd93d); |
| transition: width 0.3s ease; |
| z-index: 3; |
| } |
| |
| .guide-text { |
| text-align: center; |
| color: #fff; |
| opacity: 0.5; |
| font-size: 0.8em; |
| position: fixed; |
| bottom: 20px; |
| width: 100%; |
| z-index: 3; |
| } |
| |
| .cover-subtitle { |
| font-size: 1.4em; |
| color: #ff6b6b; |
| margin: 2em 0; |
| opacity: 0; |
| animation: textFade 1s ease-in 1.5s forwards; |
| } |
| |
| .stat-highlight { |
| color: #ffd93d; |
| font-weight: bold; |
| } |
| |
| .theory-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1.5rem; |
| margin-top: 1.5rem; |
| } |
| |
| .theory-card { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 12px; |
| padding: 1.5rem; |
| border-left: 4px solid #ff6b6b; |
| animation: cardFade 0.5s ease-out forwards; |
| } |
| |
| .policy-timeline { |
| position: relative; |
| margin: 2rem 0; |
| padding-left: 2rem; |
| } |
| |
| .timeline-item { |
| position: relative; |
| padding-bottom: 2rem; |
| padding-left: 2rem; |
| border-left: 2px solid #ff6b6b; |
| } |
| |
| .timeline-item::before { |
| content: ''; |
| position: absolute; |
| left: -8px; |
| top: 0; |
| width: 14px; |
| height: 14px; |
| border-radius: 50%; |
| background: #ffd93d; |
| } |
| |
| .model-visualization { |
| display: flex; |
| justify-content: space-around; |
| align-items: center; |
| margin: 2rem 0; |
| flex-wrap: wrap; |
| } |
| |
| .model-item { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| width: 120px; |
| height: 120px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin: 1rem; |
| text-align: center; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .policy-card { |
| background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1)); |
| border-radius: 15px; |
| padding: 1.5rem; |
| margin: 1rem 0; |
| backdrop-filter: blur(5px); |
| } |
| |
| .policy-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
| |
| .model-item svg { |
| margin-bottom: 0.5rem; |
| color: #ffd93d; |
| } |
| |
| .theory-card h3 i, |
| .policy-card h4 i { |
| margin-right: 0.5rem; |
| color: #ff6b6b; |
| } |
| |
| .policy-card { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 12px; |
| padding: 1.5rem; |
| margin: 1rem 0; |
| border-left: 4px solid #ff6b6b; |
| transition: transform 0.3s ease; |
| } |
| |
| .policy-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .policy-card ul li { |
| margin: 0.5rem 0; |
| display: flex; |
| align-items: center; |
| } |
| |
| .policy-card ul li i { |
| margin-right: 0.5rem; |
| color: #ffd93d; |
| } |
| |
| .timeline-item::after { |
| content: ''; |
| position: absolute; |
| left: -1px; |
| top: 0; |
| width: 2px; |
| height: 100%; |
| background: linear-gradient(to bottom, #ff6b6b 0%, rgba(255, 107, 107, 0.1) 100%); |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .policy-card { |
| animation: fadeInUp 0.5s ease forwards; |
| animation-delay: calc(var(--animation-order) * 0.1s); |
| } |
| |
| .model-item { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| padding: 1.5rem; |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 50%; |
| width: 150px; |
| height: 150px; |
| margin: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .model-item:hover { |
| transform: scale(1.05); |
| background: rgba(255, 255, 255, 0.12); |
| } |
| |
| .digital-framework { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 2rem; |
| } |
| |
| .framework-circle { |
| animation: rotate 20s linear infinite; |
| } |
| |
| @keyframes rotate { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| |
| .digital-pillars { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1.5rem; |
| width: 100%; |
| } |
| |
| .pillar-card { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| padding: 1.5rem; |
| backdrop-filter: blur(10px); |
| transition: transform 0.3s ease; |
| } |
| |
| .pillar-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .pillar-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| color: #ff6b6b; |
| } |
| |
| .pillar-content ul li { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin: 0.8rem 0; |
| color: #fff; |
| } |
| |
| .pillar-content ul li i { |
| color: #ffd93d; |
| } |
| |
| .management-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1rem; |
| } |
| |
| .management-item { |
| padding: 1rem; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| transition: transform 0.3s ease; |
| } |
| |
| .management-item:hover { |
| transform: scale(1.05); |
| } |
| |
| .management-item h4 { |
| color: #ffd93d; |
| margin-bottom: 0.5rem; |
| } |
| |
| |
| .aisas-container { |
| margin-top: 2rem; |
| } |
| |
| .aisas-flow, .aisas-flow-bottom { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 1rem; |
| margin: 2rem 0; |
| } |
| |
| .aisas-step { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| padding: 1.5rem; |
| width: 200px; |
| text-align: center; |
| backdrop-filter: blur(10px); |
| transition: transform 0.3s ease; |
| } |
| |
| .aisas-step:hover { |
| transform: translateY(-5px); |
| } |
| |
| .step-icon { |
| width: 64px; |
| height: 64px; |
| margin: 0 auto 1rem; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #ffd93d; |
| } |
| |
| .aisas-step h3 { |
| color: #ff6b6b; |
| margin-bottom: 0.5rem; |
| } |
| |
| .aisas-step p { |
| color: #ffd93d; |
| margin-bottom: 1rem; |
| } |
| |
| .aisas-step ul { |
| text-align: left; |
| list-style: none; |
| } |
| |
| .aisas-step ul li { |
| margin: 0.5rem 0; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .aisas-step ul li:before { |
| content: '•'; |
| color: #ffd93d; |
| } |
| |
| .flow-arrow { |
| color: #ff6b6b; |
| font-size: 2rem; |
| animation: pulse 1.5s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.2); } |
| 100% { transform: scale(1); } |
| } |
| .swot-container { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1.5rem; |
| margin-top: 2rem; |
| } |
| |
| .swot-item { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| padding: 1.5rem; |
| backdrop-filter: blur(5px); |
| transition: transform 0.3s ease; |
| } |
| |
| .swot-item:hover { |
| transform: translateY(-5px); |
| } |
| |
| .swot-item.strengths { |
| border-left: 4px solid #4CAF50; |
| } |
| |
| .swot-item.weaknesses { |
| border-left: 4px solid #f44336; |
| } |
| |
| .swot-item.opportunities { |
| border-left: 4px solid #2196F3; |
| } |
| |
| .swot-item.threats { |
| border-left: 4px solid #FF9800; |
| } |
| |
| .swot-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .swot-header svg { |
| width: 24px; |
| height: 24px; |
| } |
| |
| .swot-header h3 { |
| color: #ff6b6b; |
| font-size: 1.5em; |
| } |
| |
| .swot-list { |
| list-style: none; |
| padding: 0; |
| } |
| |
| .swot-list li { |
| display: flex; |
| align-items: start; |
| gap: 0.8rem; |
| margin-bottom: 1rem; |
| line-height: 1.5; |
| } |
| |
| .swot-list li svg { |
| width: 18px; |
| height: 18px; |
| flex-shrink: 0; |
| margin-top: 3px; |
| } |
| |
| .matrix-container { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 1.5rem; |
| margin-top: 2rem; |
| } |
| |
| .matrix-item { |
| padding: 1.5rem; |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| transition: transform 0.3s ease; |
| } |
| |
| .matrix-item:hover { |
| transform: scale(1.02); |
| } |
| |
| .matrix-header { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
| |
| .matrix-content { |
| padding: 1rem; |
| background: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| } |
| |
| .marketing-ecosystem { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 2rem; |
| } |
| |
| .ecosystem-center { |
| margin-bottom: 2rem; |
| } |
| |
| .strategy-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 2rem; |
| width: 100%; |
| } |
| |
| .strategy-card { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| padding: 1.5rem; |
| backdrop-filter: blur(10px); |
| transform: translateY(20px); |
| opacity: 0; |
| animation: cardFloat 0.5s ease-out forwards; |
| animation-delay: var(--delay); |
| } |
| |
| @keyframes cardFloat { |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| |
| .strategy-icon { |
| margin-bottom: 1rem; |
| display: flex; |
| justify-content: center; |
| } |
| |
| .strategy-card h3 { |
| color: #ff6b6b; |
| text-align: center; |
| margin-bottom: 1rem; |
| } |
| |
| .strategy-card ul { |
| list-style: none; |
| } |
| |
| .strategy-card ul li { |
| margin: 0.5rem 0; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .strategy-card ul li:before { |
| content: '•'; |
| color: #ffd93d; |
| } |
| |
| |
| .channel-innovation { |
| margin-top: 2rem; |
| } |
| |
| .hexagon-container { |
| display: flex; |
| justify-content: space-around; |
| margin-bottom: 3rem; |
| } |
| |
| .hexagon { |
| width: 200px; |
| height: 230px; |
| background: rgba(255, 255, 255, 0.08); |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 2rem; |
| transition: transform 0.3s ease; |
| animation: hexPulse 2s infinite; |
| } |
| |
| .hexagon:hover { |
| transform: translateY(-10px); |
| } |
| |
| @keyframes hexPulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .channel-details { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 2rem; |
| } |
| |
| .channel-card { |
| background: rgba(255, 255, 255, 0.08); |
| border-radius: 15px; |
| padding: 1.5rem; |
| backdrop-filter: blur(10px); |
| border-left: 4px solid #ff6b6b; |
| transform: translateY(20px); |
| opacity: 0; |
| animation: slideUp 0.5s ease-out forwards; |
| animation-delay: calc(var(--delay) + 0.3s); |
| } |
| |
| @keyframes slideUp { |
| to { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| } |
| |
| .channel-card h4 { |
| color: #ffd93d; |
| margin-bottom: 1rem; |
| } |
| |
| .channel-content ul { |
| list-style: none; |
| } |
| |
| .channel-content ul li { |
| margin: 0.8rem 0; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .channel-content ul li:before { |
| content: '→'; |
| color: #ff6b6b; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="particles-js"></div> |
| <div class="progress-bar"></div> |
|
|
| |
| <div class="slide active" id="slide1"> |
| <div class="content cover"> |
| <h1>传统产业数字化转型与品牌创新</h1> |
| <h2>基于绍兴黄酒产业振兴策略研究</h2> |
| <p class="cover-subtitle">立足浙江省共同富裕示范区建设</p> |
| <p>推动传统产业转型升级 • 促进文化与技术融合</p> |
| <p>深化数字化改革 • 打造世界级黄酒产业集群</p> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide2"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b; margin-bottom: 2rem; font-size: 2em;">研究背景与意义</h2> |
| <div class="card-container"> |
| <div class="card" style="animation-delay: 0.2s;"> |
| <h3>产业现状分析</h3> |
| <ul style="list-style: none;"> |
| <li style="margin-bottom: 1rem;">📈 <span class="stat-highlight">经济规模</span>：2023年产业销售收入达36亿元，同比增长9.4%，带动就业3万余人，年出口创汇超2亿美元。</li> |
| <li style="margin-bottom: 1rem;">🚀 <span class="stat-highlight">创新成果</span>：智能化酿造线投产，新产品产值增长62%，研发投入占比提升至4.2%，数字化改造率达65%。</li> |
| <li>🏆 <span class="stat-highlight">品牌价值</span>：入选首批国家级非遗项目，获世界地理标志保护，年均接待产业游客突破200万人次。</li> |
| </ul> |
| </div> |
| <div class="card" style="animation-delay: 0.4s;"> |
| <h3>发展挑战</h3> |
| <ul style="list-style: none;"> |
| <li style="margin-bottom: 1rem;">👥 <span class="stat-highlight">消费断层</span>：年轻消费者认知度不足，传统消费群体年龄老化，品牌年轻化转型迫在眉睫。</li> |
| <li style="margin-bottom: 1rem;">🎯 <span class="stat-highlight">品牌更新</span>：传统文化符号与现代消费需求脱节，品牌形象与新生代审美存在代际差异。</li> |
| <li style="margin-bottom: 1rem;">💻 <span class="stat-highlight">数字化短板</span>：智能制造水平有待提升，数字营销体系不完善，大数据应用能力薄弱。</li> |
| <li>🌏 <span class="stat-highlight">国际化瓶颈</span>：海外市场拓展不足，国际化品牌建设滞后，文化输出效果有限。</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide" id="slide3"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">品牌重塑理论基础</h2> |
| <p style="color: #ffd93d; margin-bottom: 2rem;">基于Aaker品牌资产模型的分析框架</p> |
| <div class="model-visualization"> |
| <div class="model-item"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="12" cy="12" r="3"></circle> |
| <path d="M2 12h3m14 0h3M12 2v3m0 14v3"></path> |
| </svg> |
| <div>品牌认知<br>数字化触达</div> |
| </div> |
| <div class="model-item"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2L2 7l10 5 10-5-10-5z"></path> |
| <path d="M2 17l10 5 10-5"></path> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| <div>品牌联想<br>文化融合</div> |
| </div> |
| <div class="model-item"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> |
| </svg> |
| <div>感知质量<br>透明生产</div> |
| </div> |
| <div class="model-item"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> |
| </svg> |
| <div>品牌忠诚<br>体验升级</div> |
| </div> |
| </div> |
| <div class="theory-grid"> |
| <div class="theory-card"> |
| <h3><i class="fas fa-bullseye"></i> 数字化营销策略</h3> |
| <ul> |
| <li>内容营销与社交媒体矩阵建设</li> |
| <li>品牌故事数字化呈现</li> |
| <li>消费者数据分析与应用</li> |
| <li>全渠道营销整合策略</li> |
| </ul> |
| </div> |
| <div class="theory-card"> |
| <h3><i class="fas fa-chart-line"></i> 品牌价值提升</h3> |
| <ul> |
| <li>传统文化与现代审美融合</li> |
| <li>生产过程可视化展示</li> |
| <li>会员体系数字化升级</li> |
| <li>品牌体验场景创新</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
|
|
| |
| <div class="slide" id="slide4"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">数字化转型理论框架</h2> |
| <div class="digital-framework"> |
| <div class="framework-circle"> |
| <svg width="100" height="100" viewBox="0 0 100 100"> |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#ff6b6b" stroke-width="2"/> |
| <circle cx="50" cy="50" r="35" fill="none" stroke="#ffd93d" stroke-width="2"/> |
| <text x="50" y="45" text-anchor="middle" fill="#fff" font-size="12">数字化</text> |
| <text x="50" y="60" text-anchor="middle" fill="#fff" font-size="12">转型</text> |
| </svg> |
| </div> |
| <div class="digital-pillars"> |
| <div class="pillar-card operations"> |
| <div class="pillar-header"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path> |
| <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path> |
| <line x1="6" y1="1" x2="6" y2="4"></line> |
| <line x1="10" y1="1" x2="10" y2="4"></line> |
| <line x1="14" y1="1" x2="14" y2="4"></line> |
| </svg> |
| <h3>运营数字化</h3> |
| </div> |
| <div class="pillar-content"> |
| <ul> |
| <li><i class="fas fa-cog"></i> 智能酿造系统升级</li> |
| <li><i class="fas fa-vial"></i> 质量检测自动化</li> |
| <li><i class="fas fa-box"></i> 包装生产线智能化</li> |
| <li><i class="fas fa-industry"></i> 工业4.0标准对标</li> |
| <li><i class="fas fa-chart-line"></i> 生产效率监控</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="pillar-card marketing"> |
| <div class="pillar-header"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> |
| </svg> |
| <h3>营销数字化</h3> |
| </div> |
| <div class="pillar-content"> |
| <ul> |
| <li><i class="fas fa-users"></i> 大数据客户画像</li> |
| <li><i class="fas fa-robot"></i> AI个性化推荐</li> |
| <li><i class="fas fa-broadcast-tower"></i> 全渠道营销整合</li> |
| <li><i class="fas fa-user-circle"></i> 数字化用户运营</li> |
| <li><i class="fas fa-chart-pie"></i> 营销效果分析</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="pillar-card management"> |
| <div class="pillar-header"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> |
| <line x1="3" y1="9" x2="21" y2="9"></line> |
| <line x1="9" y1="21" x2="9" y2="9"></line> |
| </svg> |
| <h3>管理数字化</h3> |
| </div> |
| <div class="pillar-content"> |
| <div class="management-grid"> |
| <div class="management-item"> |
| <h4><i class="fas fa-database"></i> ERP系统整合</h4> |
| <p>全流程数据打通</p> |
| </div> |
| <div class="management-item"> |
| <h4><i class="fas fa-brain"></i> 决策支持系统</h4> |
| <p>数据驱动决策</p> |
| </div> |
| <div class="management-item"> |
| <h4><i class="fas fa-link"></i> 供应链优化</h4> |
| <p>智能库存管理</p> |
| </div> |
| <div class="management-item"> |
| <h4><i class="fas fa-shield-alt"></i> 风险控制</h4> |
| <p>实时监控预警</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide5"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">消费者行为理论：AISAS模型应用</h2> |
| <div class="aisas-container"> |
| <div class="aisas-flow"> |
| <div class="aisas-step attention"> |
| <div class="step-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <line x1="12" y1="16" x2="12" y2="12"></line> |
| <line x1="12" y1="8" x2="12.01" y2="8"></line> |
| </svg> |
| </div> |
| <h3>Attention</h3> |
| <p>注意力获取</p> |
| <ul> |
| <li>短视频营销</li> |
| <li>社交媒体曝光</li> |
| <li>KOL合作</li> |
| </ul> |
| </div> |
| <div class="flow-arrow">→</div> |
| <div class="aisas-step interest"> |
| <div class="step-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path> |
| </svg> |
| </div> |
| <h3>Interest</h3> |
| <p>兴趣培养</p> |
| <ul> |
| <li>品牌故事</li> |
| <li>文化体验</li> |
| <li>互动活动</li> |
| </ul> |
| </div> |
| <div class="flow-arrow">→</div> |
| <div class="aisas-step search"> |
| <div class="step-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="11" cy="11" r="8"></circle> |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> |
| </svg> |
| </div> |
| <h3>Search</h3> |
| <p>主动搜索</p> |
| <ul> |
| <li>SEO优化</li> |
| <li>内容营销</li> |
| <li>口碑管理</li> |
| </ul> |
| </div> |
| </div> |
| <div class="aisas-flow-bottom"> |
| <div class="aisas-step action"> |
| <div class="step-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> |
| <polyline points="22 4 12 14.01 9 11.01"></polyline> |
| </svg> |
| </div> |
| <h3>Action</h3> |
| <p>购买转化</p> |
| <ul> |
| <li>场景化购物</li> |
| <li>一键下单</li> |
| <li>会员权益</li> |
| </ul> |
| </div> |
| <div class="flow-arrow">→</div> |
| <div class="aisas-step share"> |
| <div class="step-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="18" cy="5" r="3"></circle> |
| <circle cx="6" cy="12" r="3"></circle> |
| <circle cx="18" cy="19" r="3"></circle> |
| <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line> |
| <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line> |
| </svg> |
| </div> |
| <h3>Share</h3> |
| <p>分享传播</p> |
| <ul> |
| <li>社交分享</li> |
| <li>口碑激励</li> |
| <li>用户见证</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide6"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">政策支持体系</h2> |
| <div class="policy-timeline"> |
| <div class="timeline-item"> |
| <h3><i class="fas fa-university"></i> 省级支持政策</h3> |
| <div class="policy-card"> |
| <h4>《浙江高质量发展建设共同富裕示范区实施方案》</h4> |
| <ul> |
| <li><i class="fas fa-digital-tachograph"></i>以数字化改革推动高质量发展，推动城乡区域公共服务均等化，促进经济和社会结构优化，加快传统产业与数字经济融合</li> |
| </ul> |
| </div> |
| <div class="policy-card"> |
| <h4>《浙江省传统产业改造提升行动计划》</h4> |
| <ul> |
| <li><i class="fas fa-industry"></i> 深化"腾笼换鸟、凤凰涅槃"战略， 建立国家示范区，支持未来产业发展</li> |
| </ul> |
| </div> |
| </div> |
| <div class="timeline-item"> |
| <h3><i class="fas fa-building"></i> 市级振兴政策《绍兴黄酒产业振兴政策》</h3> |
| <div class="policy-grid"> |
| <div class="policy-card"> |
| <h4><i class="fas fa-project-diagram"></i> 重大项目支持</h4> |
| <ul> |
| <li>特色小镇建设支持，用地指标保障，最高100万元奖励</li> |
| </ul> |
| </div> |
| <div class="policy-card"> |
| <h4><i class="fas fa-flask"></i> 科技创新补助</h4> |
| <ul> |
| <li>关键技术项目300万元，市区两级共同承担，创新平台建设支持</li> |
| </ul> |
| </div> |
| <div class="policy-card"> |
| <h4><i class="fas fa-users"></i> 人才培养激励</h4> |
| <ul> |
| <li>"绍兴工匠"奖励，技艺传承工作室补贴，专项人才培养计划</li> |
| </ul> |
| </div> |
| <div class="policy-card"> |
| <h4><i class="fas fa-bullhorn"></i> 营销推广支持</h4> |
| <ul> |
| <li>品牌宣传资金500万，"一带一路"参展补助，国际市场开拓支持</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide" id="slide7"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">SWOT分析（内部环境）</h2> |
| <div class="swot-container"> |
| <div class="swot-item strengths"> |
| <div class="swot-header"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2"> |
| <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path> |
| <line x1="16" y1="8" x2="2" y2="22"></line> |
| <line x1="17.5" y1="15" x2="9" y2="15"></line> |
| </svg> |
| <h3>优势 Strengths</h3> |
| </div> |
| <ul class="swot-list"> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M12 3L20 7.5V16.5L12 21L4 16.5V7.5L12 3Z"></path> |
| </svg> |
| 深厚的历史文化底蕴：品牌故事可挖掘和传播空间广阔 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <path d="M8 14s1.5 2 4 2 4-2 4-2"></path> |
| <line x1="9" y1="9" x2="9.01" y2="9"></line> |
| <line x1="15" y1="9" x2="15.01" y2="9"></line> |
| </svg> |
| 地理标志产品保护：保障品牌质量和市场竞争力 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> |
| <circle cx="9" cy="7" r="4"></circle> |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> |
| <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> |
| </svg> |
| 显著的产业集群效应：产业链上下游资源整合优势明显 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"></path> |
| <line x1="16" y1="5" x2="22" y2="5"></line> |
| <line x1="19" y1="2" x2="19" y2="8"></line> |
| </svg> |
| 政策大力支持：省市各级政策推动数字化与品牌发展 |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="swot-item weaknesses"> |
| <div class="swot-header"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#f44336" stroke-width="2"> |
| <line x1="18" y1="6" x2="6" y2="18"></line> |
| <line x1="6" y1="6" x2="18" y2="18"></line> |
| </svg> |
| <h3>劣势 Weaknesses</h3> |
| </div> |
| <ul class="swot-list"> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> |
| <circle cx="12" cy="7" r="4"></circle> |
| </svg> |
| 品牌年轻化不足：品牌吸引年轻消费者的能力有待提升 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <line x1="12" y1="8" x2="12" y2="16"></line> |
| <line x1="8" y1="12" x2="16" y2="12"></line> |
| </svg> |
| 营销创新能力待提高：缺少基于数据驱动的营销方案 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> |
| <circle cx="8.5" cy="8.5" r="1.5"></circle> |
| <polyline points="21 15 16 10 5 21"></polyline> |
| </svg> |
| 产品同质化现象：缺乏独特性，无法形成市场差异化竞争 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path> |
| <circle cx="12" cy="13" r="4"></circle> |
| </svg> |
| 数字化水平滞后：传统生产和销售模式未全面适应数字化时代 |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide8"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">SWOT分析（外部环境）</h2> |
| <div class="swot-container"> |
| <div class="swot-item opportunities"> |
| <div class="swot-header"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#2196F3" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <path d="M8 14s1.5 2 4 2 4-2 4-2"></path> |
| <line x1="9" y1="9" x2="9.01" y2="9"></line> |
| <line x1="15" y1="9" x2="15.01" y2="9"></line> |
| </svg> |
| <h3>机会 Opportunities</h3> |
| </div> |
| <ul class="swot-list"> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path> |
| <circle cx="12" cy="10" r="3"></circle> |
| </svg> |
| 国潮文化兴起：为品牌年轻化和文化传播提供新机遇 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> |
| </svg> |
| 健康饮酒理念普及：消费者更加注重健康，低度酒市场潜力大 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> |
| <line x1="8" y1="21" x2="16" y2="21"></line> |
| <line x1="12" y1="17" x2="12" y2="21"></line> |
| </svg> |
| 数字经济发展迅速：新兴技术和数字营销平台提供突破机会 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M12 3v19"></path> |
| <path d="M5 10h14"></path> |
| <path d="M5 16h14"></path> |
| </svg> |
| 共同富裕示范区建设：进一步助推地方经济与产业创新 |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="swot-item threats"> |
| <div class="swot-header"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#FF9800" stroke-width="2"> |
| <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> |
| <line x1="12" y1="9" x2="12" y2="13"></line> |
| <line x1="12" y1="17" x2="12.01" y2="17"></line> |
| </svg> |
| <h3>威胁 Threats</h3> |
| </div> |
| <ul class="swot-list"> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> |
| <circle cx="9" cy="7" r="4"></circle> |
| <line x1="23" y1="11" x2="17" y2="11"></line> |
| </svg> |
| 年轻消费群体流失：如果无法及时创新，市场将面临用户断层风险 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <polyline points="23 4 23 10 17 10"></polyline> |
| <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path> |
| </svg> |
| 替代品竞争加剧：进口葡萄酒、啤酒和鸡尾酒的市场威胁加大 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M12 2L2 7l10 5 10-5-10-5z"></path> |
| <path d="M2 17l10 5 10-5"></path> |
| <path d="M2 12l10 5 10-5"></path> |
| </svg> |
| 原材料成本上升：供应链不稳定导致生产成本增加 |
| </li> |
| <li> |
| <svg viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"></circle> |
| <path d="M2 12h20"></path> |
| <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> |
| </svg> |
| 国际市场竞争激烈：全球化市场环境下面临更高质量标准与竞争 |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide" id="slide9"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">产品创新策略</h2> |
| <div class="innovation-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem;"> |
| <div class="innovation-showcase" style="background: rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem; position: relative; overflow: hidden;"> |
| <div class="showcase-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path> |
| <line x1="16" y1="8" x2="2" y2="22"></line> |
| <line x1="17.5" y1="15" x2="9" y2="15"></line> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">微创新产品系列</h3> |
| </div> |
| <div class="product-cards" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> |
| <div class="product-card" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">低度数系列</h4> |
| <p>8°-12°轻饮系列</p> |
| </div> |
| <div class="product-card" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">果味型黄酒</h4> |
| <p>青梅/桂花/荔枝</p> |
| </div> |
| <div class="product-card" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">气泡型黄酒</h4> |
| <p>起泡工艺创新</p> |
| </div> |
| <div class="product-card" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">养生型黄酒</h4> |
| <p>添加药食同源</p> |
| </div> |
| </div> |
| </div> |
| <div class="packaging-innovation" style="background: rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem;"> |
| <div class="showcase-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path> |
| <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline> |
| <line x1="12" y1="22.08" x2="12" y2="12"></line> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">包装创新设计</h3> |
| </div> |
| <div class="design-features" style="display: flex; flex-direction: column; gap: 1rem;"> |
| <div class="feature" style="background: rgba(255,217,61,0.1); padding: 1.5rem; border-radius: 10px;"> |
| <h4 style="color: #ffd93d;">便携化设计</h4> |
| <ul style="list-style: none; padding: 0;"> |
| <li>• 随身mini系列</li> |
| <li>• 便携式包装</li> |
| </ul> |
| </div> |
| <div class="feature" style="background: rgba(255,217,61,0.1); padding: 1.5rem; border-radius: 10px;"> |
| <h4 style="color: #ffd93d;">环保材料</h4> |
| <ul style="list-style: none; padding: 0;"> |
| <li>• 可降解包装</li> |
| <li>• 循环使用设计</li> |
| </ul> |
| </div> |
| <div class="feature" style="background: rgba(255,217,61,0.1); padding: 1.5rem; border-radius: 10px;"> |
| <h4 style="color: #ffd93d;">定制化服务</h4> |
| <ul style="list-style: none; padding: 0;"> |
| <li>• 个性化标签</li> |
| <li>• 礼盒定制</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide10"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">营销创新策略</h2> |
| <div class="marketing-ecosystem"> |
| <div class="ecosystem-center"> |
| <svg width="120" height="120" viewBox="0 0 120 120"> |
| <circle cx="60" cy="60" r="55" fill="none" stroke="#ff6b6b" stroke-width="2"> |
| <animate attributeName="r" from="50" to="55" dur="2s" repeatCount="indefinite" /> |
| </circle> |
| <circle cx="60" cy="60" r="40" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <animate attributeName="r" from="35" to="40" dur="2s" repeatCount="indefinite" /> |
| </circle> |
| <text x="60" y="65" text-anchor="middle" fill="#fff" font-size="14">数字营销生态</text> |
| </svg> |
| </div> |
| <div class="strategy-grid"> |
| <div class="strategy-card" style="--delay: 0.1s"> |
| <div class="strategy-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5 0-.28-.03-.56-.08-.83A7.72 7.72 0 0 0 23 3z"/> |
| </svg> |
| </div> |
| <h3>数字营销矩阵</h3> |
| <ul> |
| <li>社交媒体运营</li> |
| <li>短视频内容</li> |
| <li>KOL战略合作</li> |
| <li>品牌自媒体</li> |
| </ul> |
| </div> |
| <div class="strategy-card" style="--delay: 0.2s"> |
| <div class="strategy-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
| <polyline points="3.27 6.96 12 12.01 20.73 6.96"/> |
| <line x1="12" y1="22.08" x2="12" y2="12"/> |
| </svg> |
| </div> |
| <h3>沉浸式体验</h3> |
| <ul> |
| <li>文化艺术融合</li> |
| <li>互动体验设计</li> |
| <li>打卡地标营造</li> |
| <li>新媒体展示</li> |
| </ul> |
| </div> |
| <div class="strategy-card" style="--delay: 0.3s"> |
| <div class="strategy-icon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <polygon points="12 2 2 7 12 12 22 7 12 2"/> |
| <polyline points="2 17 12 22 22 17"/> |
| <polyline points="2 12 12 17 22 12"/> |
| </svg> |
| </div> |
| <h3>文化IP开发</h3> |
| <ul> |
| <li>非遗文化结合</li> |
| <li>名人故事融入</li> |
| <li>品牌活动策划</li> |
| <li>文创产品研发</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide11"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">渠道创新策略</h2> |
| <div class="channel-innovation"> |
| <div class="channel-flow"> |
| <div class="hexagon-container"> |
| <div class="hexagon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> |
| <polyline points="9 22 9 12 15 12 15 22"/> |
| </svg> |
| <h3>线下体验</h3> |
| <p>实体门店升级</p> |
| </div> |
| <div class="hexagon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/> |
| <line x1="8" y1="21" x2="16" y2="21"/> |
| <line x1="12" y1="17" x2="12" y2="21"/> |
| </svg> |
| <h3>线上渠道</h3> |
| <p>数字化平台</p> |
| </div> |
| <div class="hexagon"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| <circle cx="9" cy="7" r="4"/> |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| </svg> |
| <h3>社群运营</h3> |
| <p>会员体系</p> |
| </div> |
| </div> |
| <div class="channel-details"> |
| <div class="channel-card"> |
| <h4>全渠道布局</h4> |
| <div class="channel-content"> |
| <ul> |
| <li>O2O模式整合</li> |
| <li>多平台数据互通</li> |
| <li>智能导购系统</li> |
| </ul> |
| </div> |
| </div> |
| <div class="channel-card"> |
| <h4>社群营销体系</h4> |
| <div class="channel-content"> |
| <ul> |
| <li>私域流量运营</li> |
| <li>会员权益体系</li> |
| <li>积分激励计划</li> |
| </ul> |
| </div> |
| </div> |
| <div class="channel-card"> |
| <h4>体验空间革新</h4> |
| <div class="channel-content"> |
| <ul> |
| <li>文化体验馆</li> |
| <li>品鉴活动策划</li> |
| <li>艺术展览融合</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide" id="slide12"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">数字化转型路径</h2> |
| <div class="digital-transformation-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem;"> |
| |
| |
| <div class="transformation-card" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; animation: fadeInUp 0.5s ease forwards; animation-delay: 0.1s;"> |
| <div class="card-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M2 13.5V7h6v6.5a3 3 0 0 1-6 0z"/> |
| <path d="M9 11h6v2.5a3 3 0 1 1-6 0V11z"/> |
| <path d="M16 8.5a3 3 0 1 1 6 0V16H16V8.5z"/> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">生产数字化</h3> |
| </div> |
| <div class="feature-list"> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">智能制造系统</h4> |
| <p>机器学习优化酿造工艺</p> |
| <p>实时监控生产数据</p> |
| </div> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">品质管控体系</h4> |
| <p>物联网传感器监测</p> |
| <p>质量追溯系统</p> |
| </div> |
| <div class="feature" style="padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">供应链协同平台</h4> |
| <p>数字化管理系统</p> |
| <p>智能调度优化</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="transformation-card" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; animation: fadeInUp 0.5s ease forwards; animation-delay: 0.2s;"> |
| <div class="card-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| <circle cx="9" cy="7" r="4"/> |
| <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">营销数字化</h3> |
| </div> |
| <div class="feature-list"> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">用户画像系统</h4> |
| <p>行为数据分析</p> |
| <p>个性化推荐</p> |
| </div> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">智能推荐引擎</h4> |
| <p>AI精准营销</p> |
| <p>用户体验优化</p> |
| </div> |
| <div class="feature" style="padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">数字化会员体系</h4> |
| <p>积分商城运营</p> |
| <p>社交媒体互动</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="transformation-card" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; animation: fadeInUp 0.5s ease forwards; animation-delay: 0.3s;"> |
| <div class="card-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/> |
| <polyline points="3.27 6.96 12 12.01 20.73 6.96"/> |
| <line x1="12" y1="22.08" x2="12" y2="12"/> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">管理数字化</h3> |
| </div> |
| <div class="feature-list"> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">ERP系统升级</h4> |
| <p>大数据平台整合</p> |
| <p>供应链效率提升</p> |
| </div> |
| <div class="feature" style="margin-bottom: 1rem; padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">大数据决策平台</h4> |
| <p>市场趋势分析</p> |
| <p>消费者洞察</p> |
| </div> |
| <div class="feature" style="padding: 1rem; background: rgba(255,107,107,0.1); border-radius: 10px;"> |
| <h4 style="color: #ff6b6b;">数字化人才培养</h4> |
| <p>培训体系建设</p> |
| <p>数据分析能力</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide13"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">实施路径与时间表</h2> |
| <div class="timeline-container" style="margin-top: 2rem;"> |
| |
| <div class="timeline-phase" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; margin-bottom: 2rem; animation: slideIn 0.5s ease forwards;"> |
| <div class="phase-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"/> |
| <text x="12" y="16" text-anchor="middle" fill="#ffd93d" font-size="12">1</text> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">第一阶段：基础建设期</h3> |
| </div> |
| <div class="phase-content" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>建立数字化基础设施</p> |
| <p>完成ERP系统改造</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>制定品牌重塑策略</p> |
| <p>文化传播规划</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>消费者调研</p> |
| <p>微创新产品试验</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="timeline-phase" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; margin-bottom: 2rem; animation: slideIn 0.5s ease forwards; animation-delay: 0.2s;"> |
| <div class="phase-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"/> |
| <text x="12" y="16" text-anchor="middle" fill="#ffd93d" font-size="12">2</text> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">第二阶段：全面推进期</h3> |
| </div> |
| <div class="phase-content" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>新产品正式上市</p> |
| <p>数字营销方案实施</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>打造社群生态系统</p> |
| <p>优化用户体验</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>开展跨界合作</p> |
| <p>文化推广活动</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="timeline-phase" style="background: rgba(255,255,255,0.08); border-radius: 15px; padding: 2rem; animation: slideIn 0.5s ease forwards; animation-delay: 0.4s;"> |
| <div class="phase-header" style="display: flex; align-items: center; margin-bottom: 1.5rem;"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"/> |
| <text x="12" y="16" text-anchor="middle" fill="#ffd93d" font-size="12">3</text> |
| </svg> |
| <h3 style="color: #ffd93d; margin-left: 1rem;">第三阶段：深化发展期</h3> |
| </div> |
| <div class="phase-content" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>评估营销效果</p> |
| <p>优化市场策略</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>扩展国际市场</p> |
| <p>提升全球影响力</p> |
| </div> |
| <div class="task" style="background: rgba(255,107,107,0.1); padding: 1rem; border-radius: 10px;"> |
| <p>深化品牌体验</p> |
| <p>构建品牌资产</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="slide" id="slide14"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">预期成果与保障措施</h2> |
| <div style="display: flex; flex-direction: column; align-items: center;"> |
| <div style="display: flex; width: 100%; gap: 2rem; margin-top: 1rem;"> |
| <div style="flex: 1; background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px;"> |
| <div class="chart-container" style="width: 250px; height: 250px; margin: 0 auto;"> |
| <canvas id="radarChart"></canvas> |
| </div> |
| </div> |
| <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;"> |
| <div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px;"> |
| <h3 style="color: #ffd93d; font-size: 1.1em; margin-bottom: 1rem;">关键指标预期</h3> |
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> |
| <div style="color: #ff6b6b; display: flex; align-items: center;"> |
| <span style="width: 8px; height: 8px; background: #ff6b6b; border-radius: 50%; margin-right: 8px;"></span> |
| 品牌价值 20% |
| </div> |
| <div style="color: #ffd93d; display: flex; align-items: center;"> |
| <span style="width: 8px; height: 8px; background: #ffd93d; border-radius: 50%; margin-right: 8px;"></span> |
| 年轻消费 30% |
| </div> |
| <div style="color: #4ecdc4; display: flex; align-items: center;"> |
| <span style="width: 8px; height: 8px; background: #4ecdc4; border-radius: 50%; margin-right: 8px;"></span> |
| 数字营销 25% |
| </div> |
| <div style="color: #96ceb4; display: flex; align-items: center;"> |
| <span style="width: 8px; height: 8px; background: #96ceb4; border-radius: 50%; margin-right: 8px;"></span> |
| 新品销售 15% |
| </div> |
| </div> |
| </div> |
| <div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px;"> |
| <h3 style="color: #ffd93d; font-size: 1.1em; margin-bottom: 1rem;">实施重点</h3> |
| <ul style="color: #fff; margin: 0; padding-left: 1.2rem; line-height: 1.6;"> |
| <li>持续推进数字化改革</li> |
| <li>加强品牌文化建设</li> |
| <li>优化产品结构体系</li> |
| <li>提升运营管理效率</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div style="display: flex; justify-content: space-between; width: 100%; margin-top: 2rem; gap: 2rem;"> |
| <div class="guarantee-item" style="flex: 1; background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px; text-align: center;"> |
| <div style="width: 60px; height: 60px; background: rgba(255, 217, 61, 0.1); border-radius: 50%; margin: 0 auto 1rem; display: flex; justify-content: center; align-items: center;"> |
| <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> |
| </svg> |
| </div> |
| <h3 style="color: #ffd93d; font-size: 1.1em; margin-bottom: 0.5rem;">组织保障</h3> |
| <p style="color: #fff; font-size: 0.9em; margin: 0;">高效决策小组<br/>定期项目审核</p> |
| </div> |
| |
| <div class="guarantee-item" style="flex: 1; background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px; text-align: center;"> |
| <div style="width: 60px; height: 60px; background: rgba(255, 217, 61, 0.1); border-radius: 50%; margin: 0 auto 1rem; display: flex; justify-content: center; align-items: center;"> |
| <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <circle cx="12" cy="12" r="10"/> |
| <line x1="12" y1="8" x2="12" y2="16"/> |
| <line x1="8" y1="12" x2="16" y2="12"/> |
| </svg> |
| </div> |
| <h3 style="color: #ffd93d; font-size: 1.1em; margin-bottom: 0.5rem;">资金保障</h3> |
| <p style="color: #fff; font-size: 0.9em; margin: 0;">多渠道融资<br/>政府产业基金</p> |
| </div> |
| |
| <div class="guarantee-item" style="flex: 1; background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 15px; text-align: center;"> |
| <div style="width: 60px; height: 60px; background: rgba(255, 217, 61, 0.1); border-radius: 50%; margin: 0 auto 1rem; display: flex; justify-content: center; align-items: center;"> |
| <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="2"> |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
| <circle cx="12" cy="7" r="4"/> |
| </svg> |
| </div> |
| <h3 style="color: #ffd93d; font-size: 1.1em; margin-bottom: 0.5rem;">人才保障</h3> |
| <p style="color: #fff; font-size: 0.9em; margin: 0;">培养体系建设<br/>激励机制完善</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="slide" id="slide15"> |
| <div class="content"> |
| <h2 style="color: #ff6b6b;">结语</h2> |
| <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 200px);"> |
| <div style="background: rgba(255,255,255,0.08); padding: 3rem; border-radius: 20px; max-width: 800px; text-align: center;"> |
| <div style="margin-bottom: 2rem;"> |
| <h3 style="color: #ffd93d; font-size: 1.4em; margin-bottom: 1rem;">创新点总结</h3> |
| <p style="color: #fff; font-size: 1.1em;">结合传统文化与现代技术，构建数字化转型的综合生态系统</p> |
| </div> |
| |
| <div style="width: 60px; height: 2px; background: rgba(255,217,61,0.3); margin: 2rem auto;"></div> |
| |
| <div style="margin-bottom: 2rem;"> |
| <h3 style="color: #ffd93d; font-size: 1.4em; margin-bottom: 1rem;">实施价值展望</h3> |
| <p style="color: #fff; font-size: 1.1em;">以文化传播为核心，实现绍兴黄酒的全球化和年轻化</p> |
| </div> |
| |
| <div style="width: 60px; height: 2px; background: rgba(255,217,61,0.3); margin: 2rem auto;"></div> |
| |
| <div> |
| <h3 style="color: #ffd93d; font-size: 1.4em; margin-bottom: 1rem;">后续研究方向</h3> |
| <p style="color: #fff; font-size: 1.1em;">探索更多基于数字经济的品牌创新模式，推动可持续发展</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="slide" id="slide16"> |
| <div class="content" style="height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;"> |
| <div style="text-align: center;"> |
| <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ffd93d" stroke-width="1.5" style="margin-bottom: 2rem;"> |
| <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> |
| </svg> |
| <h2 style="color: #ff6b6b; font-size: 2.5em; margin-bottom: 1.5rem;">感谢聆听</h2> |
| <p style="color: #fff; font-size: 1.2em; opacity: 0.8;">欢迎提出宝贵意见</p> |
| </div> |
| </div> |
| </div> |
| <style> |
| @keyframes pulseEffect { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| </style> |
| <script> |
| |
| const script = document.createElement('script'); |
| script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js'; |
| document.head.appendChild(script); |
| script.onload = function() { |
| |
| const ctx = document.getElementById('radarChart').getContext('2d'); |
| |
| |
| const charts = [ |
| { |
| label: '品牌价值提升', |
| value: 20, |
| color: '#ff6b6b' |
| }, |
| { |
| label: '年轻消费者占比', |
| value: 30, |
| color: '#ffd93d' |
| }, |
| { |
| label: '数字化营销收入', |
| value: 25, |
| color: '#4ecdc4' |
| }, |
| { |
| label: '新产品销售占比', |
| value: 15, |
| color: '#96ceb4' |
| } |
| ]; |
| new Chart(ctx, { |
| type: 'doughnut', |
| data: { |
| labels: charts.map(chart => chart.label), |
| datasets: [{ |
| data: charts.map(chart => chart.value), |
| backgroundColor: charts.map(chart => chart.color), |
| borderColor: 'rgba(255, 255, 255, 0.1)', |
| borderWidth: 2, |
| cutout: '60%' |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right', |
| labels: { |
| color: '#fff', |
| font: { |
| size: 14 |
| }, |
| padding: 20, |
| generateLabels: function(chart) { |
| const data = chart.data; |
| return data.labels.map((label, i) => ({ |
| text: `${label}: ${data.datasets[0].data[i]}%`, |
| fillStyle: data.datasets[0].backgroundColor[i], |
| strokeStyle: data.datasets[0].backgroundColor[i], |
| lineWidth: 0, |
| hidden: false, |
| index: i |
| })); |
| } |
| } |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return `${context.label}: ${context.raw}%`; |
| } |
| } |
| } |
| }, |
| animation: { |
| animateRotate: true, |
| animateScale: true |
| } |
| } |
| }); |
| }; |
| |
| |
| particlesJS('particles-js', { |
| particles: { |
| number: { value: 80, density: { enable: true, value_area: 800 } }, |
| color: { value: '#ffd93d' }, |
| shape: { type: 'circle' }, |
| opacity: { value: 0.5, random: true }, |
| size: { value: 3, random: true }, |
| line_linked: { |
| enable: true, |
| distance: 150, |
| color: '#ff6b6b', |
| opacity: 0.2, |
| width: 1 |
| }, |
| move: { |
| enable: true, |
| speed: 2, |
| direction: 'none', |
| random: true, |
| straight: false, |
| out_mode: 'out' |
| } |
| } |
| }); |
| |
| |
| let currentSlide = 1; |
| const totalSlides = 16; |
| |
| |
| function goToSlide(slideNumber) { |
| if (slideNumber < 1 || slideNumber > totalSlides) return; |
| |
| document.querySelector(`#slide${currentSlide}`).classList.remove('active'); |
| currentSlide = slideNumber; |
| document.querySelector(`#slide${currentSlide}`).classList.add('active'); |
| updateProgressBar(); |
| } |
| |
| |
| function nextSlide() { |
| goToSlide(currentSlide === totalSlides ? 1 : currentSlide + 1); |
| } |
| |
| |
| function previousSlide() { |
| goToSlide(currentSlide === 1 ? totalSlides : currentSlide - 1); |
| } |
| |
| |
| document.addEventListener('click', (event) => { |
| |
| const clickX = event.clientX; |
| const windowWidth = window.innerWidth; |
| |
| |
| if (clickX < windowWidth / 2) { |
| previousSlide(); |
| } else { |
| nextSlide(); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', (event) => { |
| switch(event.key) { |
| case 'ArrowLeft': |
| case 'ArrowUp': |
| previousSlide(); |
| break; |
| case 'ArrowRight': |
| case 'ArrowDown': |
| nextSlide(); |
| break; |
| } |
| }); |
| |
| |
| function updateProgressBar() { |
| const progress = (currentSlide - 1) / totalSlides * 100; |
| document.querySelector('.progress-bar').style.width = `${progress}%`; |
| } |
| |
| |
| updateProgressBar(); |
| </script> |
| </body> |
| </html> |
|
|
