|
|
<!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> |
|
|
|
