2418 lines
127 KiB
HTML
2418 lines
127 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='zh-CN'>
|
||
<head>
|
||
<meta charset='UTF-8'>
|
||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
<title>何泽 | 大健康产业专家</title>
|
||
|
||
<!-- Google Fonts -->
|
||
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap' rel='stylesheet'>
|
||
|
||
<!-- Lucide Icons -->
|
||
<script src='https://unpkg.com/lucide@latest/dist/umd/lucide.min.js'></script>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src='https://cdn.tailwindcss.com'></script>
|
||
|
||
<!-- Flowbite -->
|
||
<script src='https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js'></script>
|
||
|
||
<!-- GSAP for animations -->
|
||
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js'></script>
|
||
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js'></script>
|
||
|
||
<!-- ECharts for data visualization -->
|
||
<script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
|
||
|
||
<!-- Theme CSS -->
|
||
<link rel='stylesheet' href='health_theme_elegant.css'>
|
||
|
||
<style>
|
||
/* Tailwind Configuration */
|
||
@import url('./health_theme_elegant.css');
|
||
|
||
body {
|
||
font-family: var(--font-sans) !important;
|
||
background: var(--background) !important;
|
||
color: var(--foreground) !important;
|
||
line-height: var(--leading-normal) !important;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: var(--font-heading) !important;
|
||
font-weight: 600 !important;
|
||
letter-spacing: var(--tracking-tight) !important;
|
||
}
|
||
|
||
|
||
/* Navigation */
|
||
.nav-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(from var(--background) r g b / 0.85);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
border-bottom: 1px solid var(--border);
|
||
z-index: 1000;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.nav-scrolled {
|
||
background: rgba(from var(--background) r g b / 0.95);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.nav-link {
|
||
position: relative;
|
||
font-family: var(--font-heading);
|
||
font-weight: 500;
|
||
color: var(--foreground);
|
||
text-decoration: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: var(--radius-sm);
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: var(--primary);
|
||
background: rgba(from var(--primary) r g b / 0.05);
|
||
}
|
||
|
||
.nav-link::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--primary);
|
||
transform: translateX(-50%);
|
||
transition: width var(--transition-fast);
|
||
}
|
||
|
||
.nav-link:hover::after {
|
||
width: 80%;
|
||
}
|
||
|
||
/* Button Styles */
|
||
.btn {
|
||
font-family: var(--font-heading);
|
||
font-weight: 600;
|
||
border-radius: var(--radius);
|
||
transition: all var(--transition-fast);
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary);
|
||
color: var(--primary-foreground);
|
||
border: 1px solid var(--primary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--primary-hover);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--secondary);
|
||
color: var(--secondary-foreground);
|
||
border: 1px solid var(--secondary);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--secondary-hover);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--primary);
|
||
border: 1px solid var(--primary);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: var(--primary);
|
||
color: var(--primary-foreground);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero-section {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
padding-top: 5rem;
|
||
background: var(--background);
|
||
}
|
||
|
||
.hero-floating-elements {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.floating-blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(40px);
|
||
opacity: 0.1;
|
||
animation: float 8s ease-in-out infinite;
|
||
}
|
||
|
||
.blob-1 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: var(--primary);
|
||
top: 20%;
|
||
left: 10%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.blob-2 {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: var(--accent);
|
||
top: 60%;
|
||
right: 15%;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
.blob-3 {
|
||
width: 250px;
|
||
height: 250px;
|
||
background: var(--chart-3);
|
||
bottom: 20%;
|
||
left: 20%;
|
||
animation-delay: 4s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||
33% { transform: translate(30px, -30px) rotate(120deg); }
|
||
66% { transform: translate(-20px, 20px) rotate(240deg); }
|
||
}
|
||
|
||
.hero-avatar {
|
||
position: relative;
|
||
width: 280px;
|
||
height: 280px;
|
||
margin: 0 auto 2rem;
|
||
}
|
||
|
||
.hero-avatar::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -10px;
|
||
background: var(--gradient-primary);
|
||
border-radius: 50%;
|
||
animation: avatarGlow 3s ease-in-out infinite;
|
||
}
|
||
|
||
.hero-avatar img {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
border: 4px solid var(--card);
|
||
z-index: 2;
|
||
}
|
||
|
||
@keyframes avatarGlow {
|
||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||
50% { opacity: 0.6; transform: scale(1.05); }
|
||
}
|
||
|
||
/* Data Cards */
|
||
.data-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.data-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--gradient-primary);
|
||
}
|
||
|
||
.data-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.progress-container {
|
||
position: relative;
|
||
height: 8px;
|
||
background: var(--muted);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: var(--gradient-primary);
|
||
border-radius: 4px;
|
||
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
||
animation: shimmer 2s infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(100%); }
|
||
}
|
||
|
||
/* Section Cards */
|
||
.section-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.section-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
/* Skill Cards */
|
||
.skill-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.skill-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--primary);
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
transition: opacity var(--transition-fast);
|
||
}
|
||
|
||
.skill-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.skill-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.skill-icon {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: var(--gradient-primary);
|
||
border-radius: var(--radius);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1rem;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.skill-card:hover .skill-icon {
|
||
transform: scale(1.1) rotate(5deg);
|
||
}
|
||
|
||
/* Project Cards */
|
||
.project-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-slow);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-8px) rotateX(-2deg);
|
||
box-shadow: var(--shadow-xl);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.project-image {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 200px;
|
||
}
|
||
|
||
.project-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform var(--transition-slow);
|
||
}
|
||
|
||
.project-card:hover .project-image img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.project-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(45deg, rgba(from var(--primary) r g b / 0.8), rgba(from var(--accent) r g b / 0.6));
|
||
opacity: 0;
|
||
transition: opacity var(--transition-normal);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.project-card:hover .project-overlay {
|
||
opacity: 1;
|
||
}
|
||
|
||
.project-tag {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
background: rgba(from var(--primary) r g b / 0.1);
|
||
color: var(--primary);
|
||
border: 1px solid rgba(from var(--primary) r g b / 0.2);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
margin-right: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.project-card:hover .project-tag {
|
||
background: rgba(from var(--primary) r g b / 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Hero Page Styles */
|
||
.hero-skill-tag {
|
||
display: inline-block;
|
||
padding: 0.75rem 1.5rem;
|
||
background: rgba(from var(--primary) r g b / 0.1);
|
||
color: var(--primary);
|
||
border: 1px solid rgba(from var(--primary) r g b / 0.2);
|
||
border-radius: var(--radius-xl);
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
transition: all var(--transition-normal);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.hero-skill-tag:hover {
|
||
background: rgba(from var(--primary) r g b / 0.2);
|
||
border-color: rgba(from var(--primary) r g b / 0.4);
|
||
transform: translateY(-3px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.btn-large {
|
||
padding: 1rem 2rem !important;
|
||
font-size: 1.125rem !important;
|
||
border-radius: var(--radius-xl) !important;
|
||
font-weight: 600 !important;
|
||
transition: all var(--transition-normal) !important;
|
||
position: relative !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.btn-large::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||
transition: all var(--transition-slow);
|
||
}
|
||
|
||
.btn-large:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-large:hover {
|
||
transform: translateY(-3px) !important;
|
||
box-shadow: var(--shadow-xl) !important;
|
||
}
|
||
|
||
/* Contact Cards */
|
||
.contact-card {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.contact-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* Personal Evaluation Styles */
|
||
.evaluation-content {
|
||
position: relative;
|
||
}
|
||
|
||
.evaluation-text p {
|
||
text-align: justify;
|
||
text-justify: inter-ideograph;
|
||
}
|
||
|
||
.evaluation-highlights {
|
||
background: rgba(from var(--primary) r g b / 0.02);
|
||
border: 1px solid rgba(from var(--primary) r g b / 0.1);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
}
|
||
|
||
.highlight-item {
|
||
text-align: center;
|
||
padding: 1.5rem;
|
||
background: var(--card);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.highlight-item:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.highlight-icon {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: rgba(from var(--primary) r g b / 0.1);
|
||
border-radius: 50%;
|
||
margin: 0 auto;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.highlight-item:hover .highlight-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Professional Skills Styles */
|
||
.skills-content {
|
||
position: relative;
|
||
}
|
||
|
||
.skill-detail-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
padding: 1.5rem 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.skill-detail-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.skill-number {
|
||
flex-shrink: 0;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
background: var(--primary);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.compound-skill-item {
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid rgba(from var(--border) r g b / 0.5);
|
||
}
|
||
|
||
.compound-skill-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.compound-skill-item h4 {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* Personal Information Styles */
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 0;
|
||
border-bottom: 1px solid rgba(from var(--border) r g b / 0.3);
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: 600;
|
||
color: var(--muted-foreground);
|
||
min-width: 80px;
|
||
}
|
||
|
||
.info-value {
|
||
font-weight: 500;
|
||
color: var(--foreground);
|
||
text-align: right;
|
||
}
|
||
|
||
/* Education Background Styles */
|
||
.education-content {
|
||
position: relative;
|
||
}
|
||
|
||
.course-section {
|
||
background: rgba(from var(--muted) r g b / 0.5);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.course-category-title {
|
||
font-weight: 600;
|
||
font-size: 0.875rem;
|
||
color: var(--accent);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.course-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.course-tag {
|
||
display: inline-block;
|
||
padding: 0.375rem 0.75rem;
|
||
background: rgba(from var(--accent) r g b / 0.1);
|
||
color: var(--accent);
|
||
border: 1px solid rgba(from var(--accent) r g b / 0.2);
|
||
border-radius: var(--radius-sm);
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.course-tag:hover {
|
||
background: rgba(from var(--accent) r g b / 0.2);
|
||
border-color: rgba(from var(--accent) r g b / 0.4);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 4rem;
|
||
height: 4rem;
|
||
background: var(--gradient-primary);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 1rem;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.contact-card:hover .contact-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* Stats Cards */
|
||
.stat-card {
|
||
background: var(--gradient-primary);
|
||
color: var(--primary-foreground);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
box-shadow: var(--shadow-md);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px) scale(1.02);
|
||
box-shadow: var(--shadow-xl);
|
||
}
|
||
|
||
/* Chart Containers */
|
||
.chart-container {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.5rem;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.chart-container:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
/* Scroll Progress */
|
||
.scroll-progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 3px;
|
||
background: var(--gradient-primary);
|
||
z-index: 1001;
|
||
transition: width 0.1s ease;
|
||
}
|
||
|
||
/* Animations */
|
||
.fade-in {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all var(--transition-slow);
|
||
}
|
||
|
||
.fade-in.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.stagger-1 { transition-delay: 0.1s; }
|
||
.stagger-2 { transition-delay: 0.2s; }
|
||
.stagger-3 { transition-delay: 0.3s; }
|
||
.stagger-4 { transition-delay: 0.4s; }
|
||
.stagger-5 { transition-delay: 0.5s; }
|
||
|
||
/* Mobile Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero-section {
|
||
text-align: center;
|
||
padding: 6rem 1rem 3rem;
|
||
}
|
||
|
||
.hero-avatar {
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
|
||
.hero-skill-tag {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.btn-large {
|
||
padding: 0.875rem 1.5rem !important;
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
.data-card,
|
||
.section-card,
|
||
.skill-card,
|
||
.contact-card {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.floating-blob {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Back to Top Button */
|
||
.back-to-top {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
right: 2rem;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: var(--primary);
|
||
color: var(--primary-foreground);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: var(--shadow-lg);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: all var(--transition-normal);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.back-to-top.visible {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.back-to-top:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-xl);
|
||
}
|
||
|
||
/* Project Modal Styles */
|
||
.project-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
backdrop-filter: blur(10px);
|
||
z-index: 9999;
|
||
display: none;
|
||
padding: 2rem;
|
||
overflow-y: auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.project-modal.active {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
}
|
||
|
||
.project-modal-content {
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-2xl);
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
max-height: 90vh;
|
||
overflow: hidden;
|
||
position: relative;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.project-modal-header {
|
||
background: var(--gradient-primary);
|
||
color: white;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.project-modal-close {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: none;
|
||
color: white;
|
||
border-radius: 50%;
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.project-modal-close:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.project-modal-body {
|
||
display: flex;
|
||
height: calc(90vh - 200px);
|
||
}
|
||
|
||
.project-sidebar {
|
||
width: 300px;
|
||
background: var(--muted);
|
||
border-right: 1px solid var(--border);
|
||
padding: 1.5rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.project-main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.project-flow-nav {
|
||
background: var(--background);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0;
|
||
display: flex;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.flow-nav-item {
|
||
background: none;
|
||
border: none;
|
||
padding: 1rem 1.5rem;
|
||
color: var(--muted-foreground);
|
||
cursor: pointer;
|
||
transition: all var(--transition-normal);
|
||
white-space: nowrap;
|
||
border-bottom: 3px solid transparent;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.flow-nav-item:hover {
|
||
background: var(--muted);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.flow-nav-item.active {
|
||
color: var(--primary);
|
||
border-bottom-color: var(--primary);
|
||
background: rgba(from var(--primary) r g b / 0.05);
|
||
}
|
||
|
||
.project-flow-content {
|
||
flex: 1;
|
||
padding: 2rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.flow-section {
|
||
display: none;
|
||
}
|
||
|
||
.flow-section.active {
|
||
display: block;
|
||
}
|
||
|
||
.flow-image {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 1.5rem auto;
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-md);
|
||
display: block;
|
||
}
|
||
|
||
.project-info-item {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.project-info-label {
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.project-info-value {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.project-responsibilities {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.project-responsibilities h4 {
|
||
color: var(--primary);
|
||
margin-bottom: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-responsibilities ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.project-responsibilities li {
|
||
margin-bottom: 0.5rem;
|
||
padding-left: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.project-responsibilities li::before {
|
||
content: '→';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--primary);
|
||
font-weight: bold;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.project-modal {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.project-modal-content {
|
||
margin-top: 1rem;
|
||
max-height: 95vh;
|
||
}
|
||
|
||
.project-modal-body {
|
||
flex-direction: column;
|
||
height: auto;
|
||
max-height: calc(95vh - 150px);
|
||
}
|
||
|
||
.project-sidebar {
|
||
width: 100%;
|
||
border-right: none;
|
||
border-bottom: 1px solid var(--border);
|
||
max-height: 200px;
|
||
}
|
||
|
||
.project-flow-nav {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.flow-nav-item {
|
||
font-size: var(--text-sm);
|
||
padding: 0.75rem 1rem;
|
||
}
|
||
}
|
||
|
||
/* 新的模态框布局样式 */
|
||
.project-modal-content {
|
||
width: 95% !important;
|
||
max-width: 1400px !important;
|
||
max-height: 95vh !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
.project-modal-header {
|
||
padding: 1.5rem 2rem !important;
|
||
flex-shrink: 0 !important;
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
text-align: left !important;
|
||
}
|
||
|
||
.header-info h2 {
|
||
margin: 0 !important;
|
||
font-size: var(--text-2xl) !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.header-meta {
|
||
margin-top: 0.5rem !important;
|
||
display: flex !important;
|
||
gap: 0.5rem !important;
|
||
font-size: var(--text-sm) !important;
|
||
opacity: 0.9 !important;
|
||
}
|
||
|
||
.close-btn {
|
||
background: rgba(255, 255, 255, 0.2) !important;
|
||
border: none !important;
|
||
color: white !important;
|
||
font-size: 1.5rem !important;
|
||
width: 2.5rem !important;
|
||
height: 2.5rem !important;
|
||
border-radius: 50% !important;
|
||
cursor: pointer !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
transition: background var(--transition-fast) !important;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: rgba(255, 255, 255, 0.3) !important;
|
||
}
|
||
|
||
/* 横向流程导航栏 */
|
||
.project-flow-nav {
|
||
background: var(--card) !important;
|
||
border-bottom: 1px solid var(--border) !important;
|
||
padding: 0 2rem !important;
|
||
display: flex !important;
|
||
gap: 0 !important;
|
||
overflow-x: auto !important;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.flow-nav-item {
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 1rem 1.5rem !important;
|
||
font-size: var(--text-sm) !important;
|
||
color: var(--muted-foreground) !important;
|
||
cursor: pointer !important;
|
||
white-space: nowrap !important;
|
||
border-bottom: 2px solid transparent !important;
|
||
transition: all var(--transition-fast) !important;
|
||
font-family: var(--font-sans) !important;
|
||
}
|
||
|
||
.flow-nav-item:hover {
|
||
color: var(--primary) !important;
|
||
background: var(--muted) !important;
|
||
}
|
||
|
||
.flow-nav-item.active {
|
||
color: var(--primary) !important;
|
||
border-bottom-color: var(--primary) !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/* 流程内容区域 */
|
||
.flow-content-container {
|
||
flex: 1 !important;
|
||
overflow-y: auto !important;
|
||
padding: 2rem !important;
|
||
}
|
||
|
||
.flow-section {
|
||
display: none !important;
|
||
gap: 2rem !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
.flow-section.active {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* 左侧流程图片 */
|
||
.flow-image-wrapper {
|
||
flex: 0 0 45% !important;
|
||
max-width: 45% !important;
|
||
display: flex !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
.flow-image {
|
||
width: 100% !important;
|
||
height: 400px !important;
|
||
border-radius: var(--radius-lg) !important;
|
||
box-shadow: var(--shadow-lg) !important;
|
||
object-fit: contain !important;
|
||
background-color: var(--muted) !important;
|
||
}
|
||
|
||
/* 右侧流程详情 */
|
||
.flow-details {
|
||
flex: 1 !important;
|
||
padding-left: 2rem !important;
|
||
overflow-y: auto !important;
|
||
}
|
||
|
||
.flow-title {
|
||
font-size: var(--text-xl) !important;
|
||
font-weight: 600 !important;
|
||
color: var(--primary) !important;
|
||
margin-bottom: 1.5rem !important;
|
||
font-family: var(--font-heading) !important;
|
||
}
|
||
|
||
.flow-description,
|
||
.flow-responsibilities {
|
||
margin-bottom: 2rem !important;
|
||
}
|
||
|
||
.flow-description h4,
|
||
.flow-responsibilities h4 {
|
||
font-size: var(--text-lg) !important;
|
||
font-weight: 600 !important;
|
||
color: var(--foreground) !important;
|
||
margin-bottom: 1rem !important;
|
||
font-family: var(--font-heading) !important;
|
||
}
|
||
|
||
.flow-description p,
|
||
.flow-responsibilities p {
|
||
line-height: var(--leading-relaxed) !important;
|
||
color: var(--foreground) !important;
|
||
font-size: var(--text-base) !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.project-modal-content {
|
||
width: 98% !important;
|
||
max-height: 98vh !important;
|
||
}
|
||
|
||
.project-flow-nav {
|
||
padding: 0 1rem !important;
|
||
}
|
||
|
||
.flow-nav-item {
|
||
padding: 0.75rem 1rem !important;
|
||
font-size: var(--text-xs) !important;
|
||
}
|
||
|
||
.flow-content-container {
|
||
padding: 1rem !important;
|
||
}
|
||
|
||
.flow-section {
|
||
flex-direction: column !important;
|
||
gap: 1.5rem !important;
|
||
}
|
||
|
||
.flow-image-wrapper {
|
||
flex: none !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
.flow-details {
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.flow-image {
|
||
height: 280px !important;
|
||
object-fit: contain !important;
|
||
background-color: var(--muted) !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Scroll Progress -->
|
||
<div class='scroll-progress' id='scrollProgress'></div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class='nav-container' id='navbar'>
|
||
<div class='max-w-7xl mx-auto px-6 py-4'>
|
||
<div class='flex items-center justify-between'>
|
||
<div class='flex items-center space-x-2'>
|
||
<div class='text-2xl'>⚕</div>
|
||
<div class='font-bold text-xl' style='font-family: var(--font-heading);'>何泽</div>
|
||
</div>
|
||
<div class='hidden md:flex space-x-2'>
|
||
<a href='#home' class='nav-link'>首页</a>
|
||
<a href='#about' class='nav-link'>关于</a>
|
||
<a href='#skills' class='nav-link'>技能</a>
|
||
<a href='#projects' class='nav-link'>项目</a>
|
||
<a href='#evaluation' class='nav-link'>评价</a>
|
||
<a href='#contact' class='nav-link'>联系</a>
|
||
</div>
|
||
<button class='btn btn-primary px-4 py-2'>
|
||
<i data-lucide='download' class='w-4 h-4 mr-2'></i>
|
||
下载简历
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id='home' class='hero-section'>
|
||
<div class='hero-floating-elements'>
|
||
<div class='floating-blob blob-1'></div>
|
||
<div class='floating-blob blob-2'></div>
|
||
<div class='floating-blob blob-3'></div>
|
||
</div>
|
||
|
||
<div class='max-w-4xl mx-auto px-6 relative z-10'>
|
||
<div class='text-center'>
|
||
<div class='hero-avatar mx-auto mb-8'>
|
||
<img src='../../何泽.png' alt='何泽' class='w-full h-full object-cover'>
|
||
</div>
|
||
|
||
<h1 class='text-6xl lg:text-7xl font-bold mb-6' style='font-family: var(--font-heading);'>
|
||
<span style='color: var(--primary);'>何泽</span>
|
||
</h1>
|
||
|
||
<div class='text-2xl lg:text-3xl mb-4' style='color: var(--foreground); font-weight: 500;'>
|
||
大健康产业专业人才
|
||
</div>
|
||
|
||
<div class='text-lg text-gray-600 mb-8'>
|
||
药品生产技术专业 · 南阳医学高等专科学校
|
||
</div>
|
||
|
||
|
||
<div class='flex flex-wrap justify-center gap-3 mb-12'>
|
||
<span class='hero-skill-tag'>健康管理</span>
|
||
<span class='hero-skill-tag'>药品生产</span>
|
||
<span class='hero-skill-tag'>质量控制</span>
|
||
<span class='hero-skill-tag'>数据分析</span>
|
||
<span class='hero-skill-tag'>系统管理</span>
|
||
<span class='hero-skill-tag'>法规合规</span>
|
||
</div>
|
||
|
||
<div class='flex flex-col sm:flex-row gap-6 justify-center'>
|
||
<a href='#contact' class='btn btn-primary btn-large px-8 py-4 text-lg'>
|
||
<i data-lucide='mail' class='w-5 h-5 mr-3'></i>
|
||
联系我
|
||
</a>
|
||
<a href='#projects' class='btn btn-outline btn-large px-8 py-4 text-lg'>
|
||
<i data-lucide='briefcase' class='w-5 h-5 mr-3'></i>
|
||
查看项目
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id='about' class='py-20' style='background: var(--background);'>
|
||
<div class='max-w-7xl mx-auto px-6'>
|
||
<h2 class='text-4xl font-bold text-center mb-12'>
|
||
<span style='color: var(--primary);'>关于</span>
|
||
<span>我</span>
|
||
</h2>
|
||
|
||
<div class='grid lg:grid-cols-2 gap-8'>
|
||
<div class='section-card fade-in'>
|
||
<h3 class='text-2xl font-semibold mb-6' style='color: var(--primary);'>个人信息</h3>
|
||
<div class='space-y-4'>
|
||
<div class='info-item'>
|
||
<div class='info-label'>姓名</div>
|
||
<div class='info-value'>何泽</div>
|
||
</div>
|
||
<div class='info-item'>
|
||
<div class='info-label'>专业</div>
|
||
<div class='info-value'>药品生产技术</div>
|
||
</div>
|
||
<div class='info-item'>
|
||
<div class='info-label'>学历</div>
|
||
<div class='info-value'>专科</div>
|
||
</div>
|
||
<div class='info-item'>
|
||
<div class='info-label'>毕业院校</div>
|
||
<div class='info-value'>南阳医学高等专科学校</div>
|
||
</div>
|
||
<div class='info-item'>
|
||
<div class='info-label'>在校时间</div>
|
||
<div class='info-value'>2018.9 - 2021.6</div>
|
||
</div>
|
||
<div class='info-item'>
|
||
<div class='info-label'>专业领域</div>
|
||
<div class='info-value'>大健康产业 · 药品生产技术 · 健康管理</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='section-card fade-in'>
|
||
<h3 class='text-2xl font-semibold mb-6' style='color: var(--accent);'>教育背景</h3>
|
||
<div class='education-content'>
|
||
<div class='education-header mb-4'>
|
||
<h4 class='text-lg font-semibold mb-2'>南阳医学高等专科学校</h4>
|
||
<p class='text-gray-600 mb-1'>药品生产技术专业</p>
|
||
<p class='text-gray-500 text-sm mb-4'>2018.9 - 2021.6</p>
|
||
</div>
|
||
|
||
<div class='education-description mb-6'>
|
||
<p class='text-gray-600 leading-relaxed mb-4'>
|
||
系统学习药品生产技术，掌握药品生产全流程的质量控制要求，
|
||
熟悉GLP/GCP/GMP/GSP等法规核心要点，具备基础的法规合规意识与行业审慎思维。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='course-section'>
|
||
<h5 class='text-base font-semibold mb-3' style='color: var(--primary);'>主要专业课程</h5>
|
||
<div class='course-grid'>
|
||
<div class='course-category mb-4'>
|
||
<h6 class='course-category-title'>基础理论课程</h6>
|
||
<div class='course-tags'>
|
||
<span class='course-tag'>药物化学</span>
|
||
<span class='course-tag'>药物分析</span>
|
||
<span class='course-tag'>药理学</span>
|
||
<span class='course-tag'>药剂学</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='course-category mb-4'>
|
||
<h6 class='course-category-title'>生产工艺课程</h6>
|
||
<div class='course-tags'>
|
||
<span class='course-tag'>制药工艺学</span>
|
||
<span class='course-tag'>制药设备</span>
|
||
<span class='course-tag'>药品生产管理</span>
|
||
<span class='course-tag'>制剂技术</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='course-category mb-4'>
|
||
<h6 class='course-category-title'>质量控制课程</h6>
|
||
<div class='course-tags'>
|
||
<span class='course-tag'>药品质量管理</span>
|
||
<span class='course-tag'>GMP实施</span>
|
||
<span class='course-tag'>质量检验技术</span>
|
||
<span class='course-tag'>药事管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='course-category'>
|
||
<h6 class='course-category-title'>实践技能课程</h6>
|
||
<div class='course-tags'>
|
||
<span class='course-tag'>制药实训</span>
|
||
<span class='course-tag'>质量检验实训</span>
|
||
<span class='course-tag'>生产实习</span>
|
||
<span class='course-tag'>毕业设计</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Skills Section -->
|
||
<section id='skills' class='py-20' style='background: var(--background);'>
|
||
<div class='max-w-7xl mx-auto px-6'>
|
||
<h2 class='text-4xl font-bold text-center mb-12'>
|
||
<span style='color: var(--accent);'>专业</span>
|
||
<span>技能</span>
|
||
</h2>
|
||
|
||
<div class='skills-content max-w-6xl mx-auto mb-16'>
|
||
<div class='grid lg:grid-cols-2 gap-12'>
|
||
<!-- 核心能力 -->
|
||
<div class='section-card fade-in'>
|
||
<h3 class='text-2xl font-semibold mb-6' style='color: var(--primary);'>（一）核心能力</h3>
|
||
<div class='space-y-6'>
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>1</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
熟悉健康管理信息化工具与常用监测设备，能在居民电子健康档案/健康管理系统中完成评估表、干预方案与随访记录的规范录入与查询，配合Excel进行体重、腰围、血压等关键指标的趋势分析，并能正确使用血压计、血糖仪、体脂秤等家用设备实现数据留痕与可追溯。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>2</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
具备"评估—干预—随访—再评估"的项目化实践思路，能依据首诊问诊与基础指标为客户设定阶段性健康目标，结合5A/5R等行为改变框架开展饮食、运动与睡眠等生活方式干预，按周月复盘依从性与结局指标，并在达不到目标时迭代计划以保证方案持续有效。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>3</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
具备健康状况监测与动态评估能力，熟悉体重、BMI、腰围/臀围、血压、血糖等核心指标的判定口径，能够在随访中依据最新中国成人体重与肥胖诊疗标准识别超重/肥胖风险，及时调整能量摄入与活动量，形成"指标—措施—复测"的闭环管理。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>4</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
具备可穿戴与家用医疗设备的数据对接经验，能完成蓝牙血压计、血糖仪、体脂秤与手环的绑定、时间同步与校准，按需设置采集频率与异常阈值；掌握CSV/Excel批量导入与异常日志核对方法，并将设备数据与个体档案关联用于趋势评估。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>5</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
熟悉医疗影像/检验结果的系统化查阅流程，能在PACS/LIS中调取必要报告用于健康评估与转介参考（不做诊断），按规范摘录关键指标并同步到健康档案；对报告更新设置订阅/提醒，保证随访计划与最新结果保持一致。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>6</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
具备知识沉淀与版本留痕的文档管理能力，能用 Notion/Confluence/石墨文档规范化沉淀评估模板、随访SOP与话术库；结合 OneDrive/企业网盘开启版本历史与权限分级，记录变更日志与责任人，建立"模板—使用—复盘—迭代"的持续改进闭环。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='skill-detail-item'>
|
||
<div class='skill-number'>7</div>
|
||
<p class='text-gray-700 leading-relaxed'>
|
||
熟悉 CRM/工单与信息留痕工具，如 HubSpot/飞书CRM/企业微信SCRM 建立客户标签、回访任务与SLA时限，统一电话/IM沟通记录与附件归档；定期生成客户分层、触达响应与满意度报表，提高跟进效率与服务一致性。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 复合能力 -->
|
||
<div class='section-card fade-in'>
|
||
<h3 class='text-2xl font-semibold mb-6' style='color: var(--accent);'>（二）复合能力</h3>
|
||
<div class='space-y-4'>
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>1. 医疗服务与健康管理常识</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解我我国医疗体系的基本结构与服务流程，了解常见疾病的诊断路径、健康指标的解读方式（如BMI、血压、体检指标等），具备慢病管理、健康干预及医患沟通的基础能力。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>2. 患者安全意识</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解生命体征监测、口服给药、基础感染控制、伤口处理等护理技能基础，理解护理伦理、患者沟通与人文关怀的基本原则。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>3. 药品生命周期与法规体系理解</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
熟悉药品从研发、注册到生产、上市后的全生命周期管理要求，了解GLP/GCP/GMP/GSP等法规核心要点，具备基础的法规合规意识与行业审慎思维。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>4. 质量控制认知与iso体系</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解药品、保健品等在研发、生产与流通全流程中的质量控制关键节点，掌握GMP、ISO9001、ISO22000等主流质量体系的基本要求与执行标准，具备样品留存、检测流程、偏差处理与验证方法等实务知识，具备生产端质量意识。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>5. 医药检测分析技能基础</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
具备分析天平、pH计、电导率仪、UV-Vis分光度计、TLC、HPLC等基础仪器操作知识，理解药品检验关键指标及其与质量控制的关系。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>6. 基础制药工艺</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解片剂、胶囊、注射剂等主要剂型生产工艺流程，掌握常见制粒、压片、灭菌、冻干等关键环节的基本原理与控制方法。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>7. 企业管理信息系统基础</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解MES、ERP、SCM等医药制造企业常用的智能系统架构与功能逻辑，掌握药品生产环节的信息追溯、质量管理与物料调度等数字化管理思路，具备从工艺流程到数据系统的跨环节理解能力。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>8. 药品流通与经营体系认知</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
了解药品从原料采购、研发注册到生产流通的完整产业链结构，掌握原料药（API）、辅料、中间体等基础概念及作用，熟悉MAH制度、GLP/GMP/GSP等关键监管要求，初步了解药品批发、零售、电商流通等经营路径，理解互联网销售相关法规，具备基本的医药商业意识。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>9. 医疗人工智能与数据技术基础认知</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
具备医疗人工智能的基础认知，了解AI在医学影像分析、药物筛选、临床问诊与智慧养老等典型场景中的实际应用，理解生成式AI和机器学习的基本原理，具备医疗行业的数据技术适应能力。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='compound-skill-item'>
|
||
<h4 class='font-semibold mb-2' style='color: var(--primary);'>10. 药品营销能力</h4>
|
||
<p class='text-gray-700 text-sm leading-relaxed'>
|
||
掌握产品经理视角下的客户需求识别、药品推广策略、患者教育与沟通技巧，具备基本的医药产品营销素养。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Projects Section -->
|
||
<section id='projects' class='py-20' style='background: var(--background);'>
|
||
<div class='max-w-7xl mx-auto px-6'>
|
||
<h2 class='text-4xl font-bold text-center mb-12'>
|
||
<span style='color: var(--chart-3);'>项目</span>
|
||
<span>经验</span>
|
||
</h2>
|
||
|
||
<div class='grid md:grid-cols-2 lg:grid-cols-3 gap-8'>
|
||
<!-- Project 1 -->
|
||
<div class='project-card fade-in stagger-1' onclick='openProjectModal("project1")'>
|
||
<div class='project-image'>
|
||
<img src='../../public/某产妇产后康复全流程项目/某产妇产后康复全流程项目-总图.jpg'
|
||
alt='某产妇产后康复全流程项目'
|
||
class='w-full h-full object-cover'>
|
||
<div class='project-overlay'>
|
||
<i data-lucide='external-link' class='w-8 h-8 text-white'></i>
|
||
</div>
|
||
</div>
|
||
<div class='p-6'>
|
||
<h3 class='text-xl font-semibold mb-3'>某产妇产后康复全流程项目</h3>
|
||
<p class='text-gray-600 mb-4'>
|
||
为产妇提供全方位的产后康复服务，包括身体机能恢复、心理疏导和营养指导，确保母婴健康。
|
||
</p>
|
||
<div class='flex flex-wrap gap-2 mb-4'>
|
||
<span class='project-tag'>产后康复</span>
|
||
<span class='project-tag'>心理疏导</span>
|
||
<span class='project-tag'>营养指导</span>
|
||
</div>
|
||
<div class='flex items-center justify-between'>
|
||
<span class='text-sm text-gray-500'>2024年3月</span>
|
||
<button class='btn btn-outline text-sm py-1 px-3'>
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Project 2 -->
|
||
<div class='project-card fade-in stagger-2' onclick='openProjectModal("project2")'>
|
||
<div class='project-image'>
|
||
<img src='../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目-总图.jpg'
|
||
alt='腓肠肌拉伤康复项目'
|
||
class='w-full h-full object-cover'>
|
||
<div class='project-overlay'>
|
||
<i data-lucide='external-link' class='w-8 h-8 text-white'></i>
|
||
</div>
|
||
</div>
|
||
<div class='p-6'>
|
||
<h3 class='text-xl font-semibold mb-3'>腓肠肌Ⅱ级拉伤运动康复项目</h3>
|
||
<p class='text-gray-600 mb-4'>
|
||
针对腓肠肌拉伤患者，制定个性化的康复训练方案，通过专业的理疗手段促进肌肉功能恢复。
|
||
</p>
|
||
<div class='flex flex-wrap gap-2 mb-4'>
|
||
<span class='project-tag'>运动康复</span>
|
||
<span class='project-tag'>物理治疗</span>
|
||
<span class='project-tag'>功能训练</span>
|
||
</div>
|
||
<div class='flex items-center justify-between'>
|
||
<span class='text-sm text-gray-500'>2024年1月</span>
|
||
<button class='btn btn-outline text-sm py-1 px-3'>
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Project 3 -->
|
||
<div class='project-card fade-in stagger-3' onclick='openProjectModal("project3")'>
|
||
<div class='project-image'>
|
||
<img src='../../public/东阿阿胶品牌运营与网络营销项目/东阿阿胶品牌运营与网络营销项目-主图.jpg'
|
||
alt='东阿阿胶品牌运营项目'
|
||
class='w-full h-full object-cover'>
|
||
<div class='project-overlay'>
|
||
<i data-lucide='external-link' class='w-8 h-8 text-white'></i>
|
||
</div>
|
||
</div>
|
||
<div class='p-6'>
|
||
<h3 class='text-xl font-semibold mb-3'>东阿阿胶品牌运营与网络营销项目</h3>
|
||
<p class='text-gray-600 mb-4'>
|
||
为东阿阿胶制定数字化营销策略，通过多平台内容创作和精准投放，提升品牌知名度和市场影响力。
|
||
</p>
|
||
<div class='flex flex-wrap gap-2 mb-4'>
|
||
<span class='project-tag'>品牌策划</span>
|
||
<span class='project-tag'>内容营销</span>
|
||
<span class='project-tag'>数据分析</span>
|
||
</div>
|
||
<div class='flex items-center justify-between'>
|
||
<span class='text-sm text-gray-500'>2023年9月</span>
|
||
<button class='btn btn-outline text-sm py-1 px-3'>
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Project 4 -->
|
||
<div class='project-card fade-in stagger-1' onclick='openProjectModal("project4")'>
|
||
<div class='project-image'>
|
||
<img src='../../public/定制化职场女性轻医美美肤方案/定制化职场女性轻医美美肤方案-主图.jpg'
|
||
alt='轻医美美肤方案'
|
||
class='w-full h-full object-cover'>
|
||
<div class='project-overlay'>
|
||
<i data-lucide='external-link' class='w-8 h-8 text-white'></i>
|
||
</div>
|
||
</div>
|
||
<div class='p-6'>
|
||
<h3 class='text-xl font-semibold mb-3'>定制化职场女性轻医美美肤方案</h3>
|
||
<p class='text-gray-600 mb-4'>
|
||
为职场女性量身定制轻医美美肤方案，结合个人肌肤状况和工作需求，提供专业的美容护理服务。
|
||
</p>
|
||
<div class='flex flex-wrap gap-2 mb-4'>
|
||
<span class='project-tag'>轻医美</span>
|
||
<span class='project-tag'>皮肤管理</span>
|
||
<span class='project-tag'>个性定制</span>
|
||
</div>
|
||
<div class='flex items-center justify-between'>
|
||
<span class='text-sm text-gray-500'>2024年9月</span>
|
||
<button class='btn btn-outline text-sm py-1 px-3'>
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Project 5 -->
|
||
<div class='project-card fade-in stagger-2' onclick='openProjectModal("project5")'>
|
||
<div class='project-image'>
|
||
<img src='../../public/阿莫西林胶囊制剂生产工艺优化项目/阿莫西林胶囊制剂生产工艺优化项目-主图.jpeg'
|
||
alt='阿莫西林工艺优化项目'
|
||
class='w-full h-full object-cover'>
|
||
<div class='project-overlay'>
|
||
<i data-lucide='external-link' class='w-8 h-8 text-white'></i>
|
||
</div>
|
||
</div>
|
||
<div class='p-6'>
|
||
<h3 class='text-xl font-semibold mb-3'>阿莫西林胶囊制剂生产工艺优化项目</h3>
|
||
<p class='text-gray-600 mb-4'>
|
||
通过工艺分析和优化，提升阿莫西林胶囊的生产效率和产品质量，建立完善的质量控制体系。
|
||
</p>
|
||
<div class='flex flex-wrap gap-2 mb-4'>
|
||
<span class='project-tag'>工艺优化</span>
|
||
<span class='project-tag'>质量控制</span>
|
||
<span class='project-tag'>制药工程</span>
|
||
</div>
|
||
<div class='flex items-center justify-between'>
|
||
<span class='text-sm text-gray-500'>2023年6月</span>
|
||
<button class='btn btn-outline text-sm py-1 px-3'>
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Evaluation Section -->
|
||
<section id='evaluation' class='py-20' style='background: var(--background);'>
|
||
<div class='max-w-6xl mx-auto px-6'>
|
||
<h2 class='text-4xl font-bold text-center mb-12'>
|
||
<span style='color: var(--primary);'>个人</span>
|
||
<span>评价</span>
|
||
</h2>
|
||
|
||
<div class='evaluation-content max-w-4xl mx-auto'>
|
||
<div class='section-card fade-in'>
|
||
<div class='evaluation-text'>
|
||
<p class='text-lg text-gray-700 leading-relaxed mb-6'>
|
||
在健康管理实习中，我能够规范使用健康管理系统与监测设备，采集和分析体重、血压、血糖等核心指标，确保数据准确与可追溯。
|
||
通过参与"评估—干预—随访—再评估"的闭环流程，我逐步掌握了基于5A/5R框架的行为干预方法，能够在饮食、运动与睡眠管理中形成实践经验。
|
||
</p>
|
||
|
||
<p class='text-lg text-gray-700 leading-relaxed mb-6'>
|
||
同时，我具备可穿戴设备与PACS/LIS系统的数据操作能力，能够对接健康档案并进行趋势监控。
|
||
在知识沉淀与客户管理中，我熟练使用文档协作与CRM工具，提升服务一致性与客户跟进效率。
|
||
</p>
|
||
|
||
<p class='text-lg text-gray-700 leading-relaxed'>
|
||
具备责任心与改进意识，能够在健康管理与心血管风险干预场景中展现出较强的岗位潜力。
|
||
</p>
|
||
</div>
|
||
|
||
<div class='evaluation-highlights mt-8'>
|
||
<div class='grid md:grid-cols-3 gap-6'>
|
||
<div class='highlight-item'>
|
||
<div class='highlight-icon mb-3'>
|
||
<i data-lucide='activity' class='w-8 h-8' style='color: var(--primary);'></i>
|
||
</div>
|
||
<h4 class='text-lg font-semibold mb-2' style='color: var(--primary);'>专业技能</h4>
|
||
<p class='text-gray-600'>健康管理系统操作、监测设备使用、数据分析与趋势监控</p>
|
||
</div>
|
||
|
||
<div class='highlight-item'>
|
||
<div class='highlight-icon mb-3'>
|
||
<i data-lucide='users' class='w-8 h-8' style='color: var(--accent);'></i>
|
||
</div>
|
||
<h4 class='text-lg font-semibold mb-2' style='color: var(--accent);'>服务能力</h4>
|
||
<p class='text-gray-600'>客户管理、文档协作、CRM工具应用、服务流程优化</p>
|
||
</div>
|
||
|
||
<div class='highlight-item'>
|
||
<div class='highlight-icon mb-3'>
|
||
<i data-lucide='target' class='w-8 h-8' style='color: var(--chart-3);'></i>
|
||
</div>
|
||
<h4 class='text-lg font-semibold mb-2' style='color: var(--chart-3);'>发展潜力</h4>
|
||
<p class='text-gray-600'>责任心强、持续改进、健康管理与风险干预场景适应力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section id='contact' class='py-20' style='background: var(--background);'>
|
||
<div class='max-w-7xl mx-auto px-6'>
|
||
<h2 class='text-4xl font-bold text-center mb-12'>
|
||
<span style='color: var(--chart-5);'>联系</span>
|
||
<span>方式</span>
|
||
</h2>
|
||
|
||
<div class='grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16'>
|
||
<div class='contact-card fade-in stagger-1'>
|
||
<div class='contact-icon'>
|
||
<i data-lucide='mail' class='w-6 h-6 text-white'></i>
|
||
</div>
|
||
<h3 class='text-lg font-semibold mb-2'>邮箱地址</h3>
|
||
<p class='text-gray-600 mb-4'>lhy@health.com</p>
|
||
<button class='btn btn-primary text-sm py-2 px-4'>
|
||
发送邮件
|
||
</button>
|
||
</div>
|
||
|
||
<div class='contact-card fade-in stagger-2'>
|
||
<div class='contact-icon'>
|
||
<i data-lucide='phone' class='w-6 h-6 text-white'></i>
|
||
</div>
|
||
<h3 class='text-lg font-semibold mb-2'>联系电话</h3>
|
||
<p class='text-gray-600 mb-4'>138-8888-8888</p>
|
||
<button class='btn btn-secondary text-sm py-2 px-4'>
|
||
立即拨打
|
||
</button>
|
||
</div>
|
||
|
||
<div class='contact-card fade-in stagger-3'>
|
||
<div class='contact-icon'>
|
||
<i data-lucide='map-pin' class='w-6 h-6 text-white'></i>
|
||
</div>
|
||
<h3 class='text-lg font-semibold mb-2'>工作地点</h3>
|
||
<p class='text-gray-600 mb-4'>苏州工业园区</p>
|
||
<button class='btn btn-outline text-sm py-2 px-4'>
|
||
查看位置
|
||
</button>
|
||
</div>
|
||
|
||
<div class='contact-card fade-in stagger-4'>
|
||
<div class='contact-icon'>
|
||
<i data-lucide='message-circle' class='w-6 h-6 text-white'></i>
|
||
</div>
|
||
<h3 class='text-lg font-semibold mb-2'>微信咨询</h3>
|
||
<p class='text-gray-600 mb-4'>health_expert_lhy</p>
|
||
<button class='btn btn-primary text-sm py-2 px-4'>
|
||
添加微信
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class='py-12 border-t border-gray-200'>
|
||
<div class='max-w-7xl mx-auto px-6 text-center'>
|
||
<div class='flex items-center justify-center space-x-2 mb-4'>
|
||
<div class='text-2xl'>⚕</div>
|
||
<div class='text-xl font-bold' style='font-family: var(--font-heading);'>罗浩宇 | 大健康产业专家</div>
|
||
</div>
|
||
<p class='text-gray-600'>
|
||
© 2024 健康专业服务 | 致力于推动大健康产业发展
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Back to Top Button -->
|
||
<button class='back-to-top' id='backToTop'>
|
||
<i data-lucide='chevron-up' class='w-5 h-5'></i>
|
||
</button>
|
||
|
||
<!-- Project Modal -->
|
||
<div id='projectModal' class='project-modal'>
|
||
<div id='modalContent' class='project-modal-content'>
|
||
<!-- Content will be dynamically generated by JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Initialize Lucide icons
|
||
lucide.createIcons();
|
||
|
||
// Scroll progress and navbar effects
|
||
window.addEventListener('scroll', () => {
|
||
const scrollTop = window.pageYOffset;
|
||
const docHeight = document.body.offsetHeight - window.innerHeight;
|
||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||
|
||
// Update progress bar
|
||
document.getElementById('scrollProgress').style.width = scrollPercent + '%';
|
||
|
||
// Navbar scroll effect
|
||
const navbar = document.getElementById('navbar');
|
||
if (scrollTop > 100) {
|
||
navbar.classList.add('nav-scrolled');
|
||
} else {
|
||
navbar.classList.remove('nav-scrolled');
|
||
}
|
||
|
||
// Back to top button
|
||
const backToTop = document.getElementById('backToTop');
|
||
if (scrollTop > 300) {
|
||
backToTop.classList.add('visible');
|
||
} else {
|
||
backToTop.classList.remove('visible');
|
||
}
|
||
});
|
||
|
||
// Back to top functionality
|
||
document.getElementById('backToTop').addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// Smooth scrolling for navigation links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
const navHeight = document.querySelector('.nav-container').offsetHeight;
|
||
const targetPosition = target.offsetTop - navHeight - 20;
|
||
|
||
window.scrollTo({
|
||
top: targetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Intersection Observer for fade-in animations
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe all fade-in elements
|
||
document.querySelectorAll('.fade-in').forEach(el => {
|
||
observer.observe(el);
|
||
});
|
||
|
||
// Progress bar animations
|
||
const progressObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const progressFills = entry.target.closest('section').querySelectorAll('.progress-fill');
|
||
progressFills.forEach(fill => {
|
||
const width = fill.dataset.width;
|
||
if (width) {
|
||
setTimeout(() => {
|
||
fill.style.width = width + '%';
|
||
}, 300);
|
||
}
|
||
});
|
||
progressObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
// Observe sections with progress bars
|
||
document.querySelectorAll('#home, #skills').forEach(section => {
|
||
progressObserver.observe(section);
|
||
});
|
||
|
||
// Initialize Charts
|
||
function initCharts() {
|
||
// Colors from CSS variables
|
||
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim();
|
||
const accentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
|
||
const chart3Color = getComputedStyle(document.documentElement).getPropertyValue('--chart-3').trim();
|
||
const chart4Color = getComputedStyle(document.documentElement).getPropertyValue('--chart-4').trim();
|
||
const chart5Color = getComputedStyle(document.documentElement).getPropertyValue('--chart-5').trim();
|
||
|
||
// Pie Chart
|
||
const pieChart = echarts.init(document.getElementById('pieChart'));
|
||
const pieOption = {
|
||
color: [primaryColor, accentColor, chart3Color, chart4Color, chart5Color],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c}% ({d}%)'
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['30%', '70%'],
|
||
data: [
|
||
{ value: 35, name: '产后康复' },
|
||
{ value: 20, name: '慢病管理' },
|
||
{ value: 15, name: '轻医美护理' },
|
||
{ value: 12, name: '药品质控' },
|
||
{ value: 10, name: '健康教育' },
|
||
{ value: 8, name: '数字医疗' }
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
pieChart.setOption(pieOption);
|
||
|
||
// Radar Chart
|
||
const radarChart = echarts.init(document.getElementById('radarChart'));
|
||
const radarOption = {
|
||
color: [primaryColor],
|
||
tooltip: {},
|
||
radar: {
|
||
indicator: [
|
||
{ name: '健康监测', max: 100 },
|
||
{ name: '数据分析', max: 100 },
|
||
{ name: '康复护理', max: 100 },
|
||
{ name: '慢病管理', max: 100 },
|
||
{ name: '医疗设备', max: 100 },
|
||
{ name: '健康教育', max: 100 },
|
||
{ name: '质量管理', max: 100 },
|
||
{ name: '智慧医疗', max: 100 }
|
||
],
|
||
axisLine: {
|
||
lineStyle: { color: '#e5e5e5' }
|
||
},
|
||
splitLine: {
|
||
lineStyle: { color: '#e5e5e5' }
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'radar',
|
||
data: [{
|
||
value: [90, 85, 88, 82, 87, 92, 80, 75],
|
||
name: '专业能力'
|
||
}],
|
||
areaStyle: {
|
||
opacity: 0.3
|
||
}
|
||
}]
|
||
};
|
||
radarChart.setOption(radarOption);
|
||
|
||
// Line Chart
|
||
const lineChart = echarts.init(document.getElementById('lineChart'));
|
||
const lineOption = {
|
||
color: [accentColor],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2023.01', '2023.06', '2023.09', '2024.01', '2024.03', '2024.09'],
|
||
axisLine: { lineStyle: { color: '#e5e5e5' } },
|
||
axisLabel: { color: '#666' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '项目数量',
|
||
axisLine: { lineStyle: { color: '#e5e5e5' } },
|
||
axisLabel: { color: '#666' },
|
||
splitLine: { lineStyle: { color: '#f5f5f5' } }
|
||
},
|
||
series: [{
|
||
name: '项目经验',
|
||
type: 'line',
|
||
data: [1, 1, 2, 2, 3, 5],
|
||
smooth: true,
|
||
areaStyle: {
|
||
opacity: 0.3
|
||
}
|
||
}]
|
||
};
|
||
lineChart.setOption(lineOption);
|
||
|
||
// Responsive charts
|
||
window.addEventListener('resize', () => {
|
||
pieChart.resize();
|
||
radarChart.resize();
|
||
lineChart.resize();
|
||
});
|
||
}
|
||
|
||
// Initialize charts when page loads
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
setTimeout(initCharts, 100);
|
||
});
|
||
|
||
// Project Modal Functions
|
||
const projectData = {
|
||
project1: {
|
||
title: '某产妇产后康复全流程项目',
|
||
company: '广州南大菲特医疗健康科技有限公司',
|
||
position: '产后康复师',
|
||
duration: '2024.03~2024.12',
|
||
description: '本项目聚焦产后女性盆底功能恢复与腰骶痛缓解，依托"院内治疗—居家巩固—随访复评"的闭环路径，按肌激活、耐力构建、核心整合、巩固维持四阶段推进。以量化指标为牵引，结合电刺激、生物反馈、凯格尔进阶、核心稳定课程与情境压力测试，持续校正代偿，提升收缩质量与日常控制力。26周干预后，肌力、耐力、结构与症状同步改善，漏尿与疼痛清零，帮助产妇安全回归通勤、家务、轻运动等日常功能场景，形成可复制的标准化服务范式。',
|
||
mainImage: '../../public/某产妇产后康复全流程项目/某产妇产后康复全流程项目-总图.jpg',
|
||
flows: [
|
||
{
|
||
name: '基线评估',
|
||
image: '../../public/某产妇产后康复全流程项目/流程一：基线评估.jpg',
|
||
description: '以产后42天为首诊窗口，完成力量、耐力、结构、症状四维量化，统一量表与设备口径，建立可追溯基线并进行风险分级。结合漏尿频次、VAS与牛津分级确定训练上限与禁忌，明确8/12/26周目标与转段阈值。同步完成健康宣教与家庭作业布置，提供日志模板与复评时间表，确保从首周起形成"评估—处方—随访"的执行闭环。',
|
||
responsibilities: '1. 数据采集：在导师监督下按标准流程采集持续收缩压、持续时间、超声厚度、牛津分级与症状自评，排除屏气、夹臀等代偿，确保同口径记录进入EMR，作为处方依据与转段判定底稿。\n2. 风险分级：依据肌力等级与漏尿频次判定中高风险，列出禁忌动作与退出准则，设置疼痛与疲劳阈值，向患者解释原因与目的，降低早期过载或情绪焦虑导致的依从性波动。\n3. 目标设定：对齐日常角色需求，将8/12/26周目标写入随访单，区分"有效变化阈值"与"达标标准"，便于后续复评比对与路径回退或加速决策。\n4. 宣教布置：示教正确呼吸节律与体感辨识，发放居家要点清单与视频拍摄规范，明确每周提交频次，提升日志质量与远程抽查有效性。'
|
||
},
|
||
{
|
||
name: '处方制定',
|
||
image: '../../public/某产妇产后康复全流程项目/流程二：处方制定.jpg',
|
||
description: '基于标准化方案进行个体化微调，构建"门诊治疗—居家训练—团体课程"三轨路径，分为激活、耐力、整合、巩固四阶段。为每阶段定义频次、时长、强度与质量门槛，明确进退级规则与协作接口。通过周度对账核对日志与门诊记录，必要时开启1:1技术纠正，避免错误模式固化，保证处方既安全又具足够剂量。',
|
||
responsibilities: '1. 分期编排：将1–4周确定为激活阶段，5–12周为耐力阶段，13–20周为整合阶段，21–26周为巩固阶段；为每阶段匹配设备参数、组数与情境任务，写入处方卡便于患者执行与追踪。\n2. 参数微调：参考主观用力感与疲劳度，每次门诊后微调脉宽、频率、组间休息与收缩比值；对高敏感个体降低强度延长周期，平衡效果与舒适度。\n3. 协同落地：按周核对PT记录、医师意见与患者日志，发现代偿或疼痛即触发纠偏流程；必要时加开个训课次，确保质量先于数量。\n4. 过程留痕：将处方变更、异常事件与纠偏结果同步EMR，形成"决定—执行—复评"的链路证据，支撑后续回顾与方案优化。'
|
||
},
|
||
{
|
||
name: '电刺激实施',
|
||
image: '../../public/某产妇产后康复全流程项目/流程三：电刺激实施.jpg',
|
||
description: '在激活阶段以低强度电刺激提升纤维募集，配合生物反馈建立"感觉—动作—视觉"回路，统一用力节奏与呼吸策略，快速纠正错误模式。采用每周三次门诊频次，根据耐受逐次调强，确保舒适前提下达到有效阈值，为耐力构建与情境迁移奠定神经肌肉控制基础。',
|
||
responsibilities: '1. 处方执行：按设备规范设置脉宽200–400µs、频率15–50Hz、单次20min，结合10min反馈训练；记录即刻主观感受与疲劳级别，为下次参数调整提供依据。\n2. 代偿纠正：通过实时曲线提示识别夹臀、耸肩、腹压冲顶等问题，采用口令与触觉提示校正节律与幅度，确保形成可迁移的基础收缩模式。\n3. 依从管理：治疗后复盘动作质量与家庭作业完成度，标记常见错误并拍摄要点短视频回传，提升患者在家时的模仿准确度。\n4. 风险控制：设置不适报警阈值与停机标准，出现刺痛或延迟痛时及时降档或暂停，并向上汇报以评估是否延长激活周期。'
|
||
},
|
||
{
|
||
name: '居家进阶',
|
||
image: '../../public/某产妇产后康复全流程项目/流程四：居家进阶.jpg',
|
||
description: '在耐力阶段采用"时间—强度—情境"三维进阶，先确保动作质量，再增加收缩持续时间与组数，随后引入轻量负荷及日常高腹压场景。通过App打卡、视频抽查与周度远程随访，及时发现代偿并回炉纠偏，确保从"床边能做"过渡到"生活能控"，兼顾训练剂量与安全边界。',
|
||
responsibilities: '1. 负荷渐进：结合阴道哑铃20g起步逐级至60g，在无疼痛、无漏尿、无代偿前提下进阶；慢缩与快缩交替，强调放松同等重要，避免高张疲劳。\n2. 情境融合：围绕提重物、咳嗽、抱婴等场景训练"预收缩"策略，使用情境提示卡帮助患者在关键瞬间先收缩再发力，降低突发腹压导致的渗漏。\n3. 质量抽查：每周抽查日志与短视频，按要点清单逐条反馈；发现问题即预约门诊纠偏，防止错误模式固化影响后续整合期。\n4. 异常处理：一旦出现不适或症状反跳，立即降低负荷或暂停负重，回到体感训练与反馈强化一周后再评估进阶条件。'
|
||
},
|
||
{
|
||
name: '核心稳定训练',
|
||
image: '../../public/某产妇产后康复全流程项目/流程五：核心稳定训练.jpg',
|
||
description: '在整合阶段强调盆底—腹横肌—膈肌—多裂肌的压力管理协同，通过死虫式、桥式、侧桥及变式在不同体位与支撑面加载，训练抗伸展与抗旋转控制，恢复腰盆稳定与步态质量。以团体课为主、个训补强为辅，逐步加入动态负荷与多任务情境，提升在通勤、家务、轻运动中的稳定输出能力。',
|
||
responsibilities: '1. 动作处方：按低位到高位递进配置保持时间与重复次数，强调盆底先行收缩与呼吸节律配合；对进展慢者拆分动作阶段，保障质量优先。\n2. 负荷管理：通过弹力带与自重阻力微调强度，出现疼痛或疲劳即降级或延长休息；用RPE主观量表辅助控制训练剂量。\n3. 课堂纠偏：团体课中使用口令、触觉与镜像反馈统一动作语言；对问题集中学员安排1:1短时纠偏，避免集体节奏牵引下的错误放大。\n4. 中期复评：完成12周复查，记录持续收缩压、持续时间、牛津分级与症状转归；达标者进入巩固期，未达标者保留部分激活内容延长整合周期。'
|
||
},
|
||
{
|
||
name: '结案评估',
|
||
image: '../../public/某产妇产后康复全流程项目/流程六：结案评估.png',
|
||
description: '在巩固阶段完成力量与协调强化后，进入情境压力测试与复发预防；以客观指标、主观功能与情境测试三维判定疗效，未达标者安排2–4周专项补强。出院前发放12周维持处方与异常预警阈值，约定复查节点，确保长期稳定。通过EMR形成"指标—结果—建议"闭环，为后续同类个案提供可复用路径。',
|
||
responsibilities: '1. 巩固执行：每日完成巩固组（自重深蹲、弹力带抗阻等）并维持电刺激每周一次；记录体感与疲劳，防止强度过冲导致功能回退。\n2. 压力测试：在快走、上下楼、抱婴等情境下验证"先收缩再发力"策略，必要时提供友好替代动作清单，确保真实生活场景下的稳定性。\n3. 终末复评：对比基线与阶段数据，确认持续收缩压、持续时间、结构厚度与症状清零是否同步达标；不达标则出具补强方案与复评时间表。\n4. 维持计划：发放每周≥3次、每次10–15min的维持处方与自我监测表，设定异常预警条件（新发漏尿或疼痛），提示及时回院评估与调整。'
|
||
}
|
||
]
|
||
},
|
||
project2: {
|
||
title: '腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目',
|
||
company: '沈阳晟合健康咨询有限公司',
|
||
position: '康复训练师',
|
||
duration: '2024.03~2024.12',
|
||
description: '本项目聚焦运动员及大众人群在腓肠肌Ⅱ级拉伤后的系统康复路径，覆盖急性期保护、亚急性激活、中期力量构建、走跑过渡、功能强化及回归评估全过程。通过循证的 PEACE & LOVE 原则进行早期控痛控肿，再逐步引入等长、离心与弹性训练，结合主观痛感、功能量表与影像学指标实现阶段性进阶。项目以"疼痛阈值—动作质量—翌日反应"为核心监控体系，确保负荷递增与组织修复同步，最终在客观指标（单腿提踵 ≥25 次@60 bpm、LSI ≥90%、步态/足底压力对称）与主观功能（5 km 慢跑耐受）达标后，完成运动回归与复发预防。',
|
||
mainImage: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目-总图.jpg',
|
||
flows: [
|
||
{
|
||
name: '急性期评估',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程一：急性期评估.jpg',
|
||
description: '在受伤后 24–72 小时内进行初诊，完成疼痛、肌力、关节活动度与步态等系统评估，统一量表与检测口径建立三维基线。参照处理原则实施保护、加压、抬高和用户教育，排查红旗风险如血栓与严重撕裂，明确首周负荷边界。目标是"控痛控肿+无代偿步行"，为后续阶段设定进阶最低门槛。',
|
||
responsibilities: '1. 基线检测：完成疼痛评分（VAS 7/10）、单腿提踵次数（伤侧 0 次 vs 健侧 25 次）、小腿围差（-3.6 cm）、等长力矩差（-37 Nm），并采集影像学证据确诊腓肠肌Ⅱ级撕裂。\n2. 症状管理：采用保护、抬高、加压、患者教育等策略避免早期强牵拉与高负荷，允许在低痛范围内进行踝泵等血管性轻活动，保持循环与基础神经输入。\n3. 红旗筛查：结合临床表现排查"啪响伴大片瘀斑、进行性肿胀、静息痛加剧、DVT 征象"等情况，必要时立即转诊进一步影像和血液学检测。\n4. 阶段门槛：设定进入下一阶段标准：疼痛≤3/10、步态接近对称、可完成 10 分钟无痛步行；若不达标则延长保护期并复评。'
|
||
},
|
||
{
|
||
name: '肌肉激活',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程二：肌肉激活.jpg',
|
||
description: '当疼痛与肿胀控制后进入激活阶段，重点是恢复肌纤维募集与早期代谢耐受。训练以等长收缩、短弧跖屈、舒适拉伸为主，配合低频电刺激。所有训练遵循"剂量可视化+翌日反应校验"，确保负荷递增不超过组织修复速度。目标是在安全区间逐步恢复基础收缩与肌肉控制，为力量构建阶段做准备。',
|
||
responsibilities: '1. 电刺激与体感训练：采用低频电刺激（20 min/次）配合踝泵（约 100 次/日）与轻量跖屈收缩，帮助建立神经肌肉通路，改善循环并恢复早期感觉输入。\n2. 训练日志：指导患者记录每日训练次数、疼痛等级和疲劳度，用于下一次门诊时的参数微调，实现"数据—反应—调整"闭环。\n3. 动作质量把控：在门诊监督下检查是否存在耸肩、屏气或髋关节代偿，若发现立即纠正，保证每次训练动作的纯净度与有效性。\n4. 进阶判定：患者能在轻度辅助下完成单腿提踵 ≥5–8 次，且翌日无肿胀或反跳痛，方可进入下一阶段。'
|
||
},
|
||
{
|
||
name: '力量构建',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程三：力量构建.jpg',
|
||
description: '在中期以跖屈肌群的力量、耐力和离心控制提升为核心，逐渐引入弹力带抗阻、台阶提踵与单腿硬拉等动作。强调"质量先于数量"，通过每周 2 次门诊+2 次居家模式，稳步缩小双侧差异。所有负荷递增均需结合主观用力感与翌日反应判定，避免因过载导致组织再次受损。',
|
||
responsibilities: '1. 处方设计：安排弹力带跖屈/背屈 4×15、台阶提踵分膝伸/膝屈各 3×12、单腿硬拉 3×12，逐周微增阻力与容量，确保动作不代偿。\n2. 离心引入：在可耐受范围逐步加入低量离心训练（下放缓慢、上举可辅助），提高肌腱—肌腱交界区的变形容忍，减少再伤风险。\n3. 训练结构：采用"技术纠正—负荷巩固"周期模式，门诊强调技术质量，居家巩固强度，形成互补闭环。\n4. 通过标准：能稳定完成单腿提踵 ≥15–20 次、30 分钟快走无不适、疼痛 ≤3/10，即可进入走跑过渡阶段。'
|
||
},
|
||
{
|
||
name: '走跑过渡',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程四：走跑过渡.jpg',
|
||
description: '当力量与耐力达到初步标准后，进入走跑过渡期。此阶段以间歇走跑和低量弹性训练为核心，重建地面反作用力管理与快速收缩能力。所有训练都以"无痛—无跛行—翌日无反跳"为前提，逐步延长跑步时间并引入基础跳跃，帮助患者平稳过渡到慢跑。',
|
||
responsibilities: '1. 间歇设计：制定走跑交替方案，从 1:1 逐步增加到 3:1，重点控制步频与着地策略，避免技术质量下降。\n2. 弹性引入：安排低量跳跃、跳绳和小范围切步，观察落地对称性与节律稳定性，杜绝过早进入高强度弹跳。\n3. 监测反馈：利用训练日志与患者口述记录"跑后感受与翌日反应"，发现肿胀或疼痛立即降级，确保进程安全。\n4. 通过标准：单腿提踵 ≥25 次、单脚跳 ≥10 次无痛、力量差 <10%，满足条件方可进入功能强化阶段。'
|
||
},
|
||
{
|
||
name: '功能强化',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程五：功能强化.jpg',
|
||
description: '在具备基本慢跑与弹性能力后，重点转向髋膝踝力链整合与全身功能协调。训练形式包括坡度冲刺、核心抗旋与抗伸展练习、桥式与侧桥变式。目标是确保患者在多任务情境下保持动作质量，逐步过渡到持续慢跑和日常运动的稳定承载。',
|
||
responsibilities: '1. 动作整合：设计跑步机倒走、坡道冲刺与核心稳定练习，提升下肢与核心的协同发力，减少代偿与过度负荷集中。\n2. 强度控制：采用"容量先行、强度递增"的模式，按周微调坡度、距离与组数，保证训练节律稳定。\n3. 进度监控：结合心率曲线与主观负荷（RPE）进行评估，若出现夜间痛或疲劳感持续，则立即减量并复查。\n4. 阶段目标：达到无痛完成 5 km 慢跑，步态与足底压力保持对称，满足进入最终评估的条件。'
|
||
},
|
||
{
|
||
name: '回归评估',
|
||
image: '../../public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程六：回归评估.jpg',
|
||
description: '在康复末期通过"力量对称性—步态/压力对称—影像复核"的三重验证，判断是否达到安全回归运动的门槛。结合功能量表与实际慢跑表现，确保组织修复与运动能力恢复保持一致。完成后给予维持处方与复发预防方案，支持长期稳定。',
|
||
responsibilities: '1. 客观复测：进行等速肌力测试，确认 LSI ≥90%，结合单腿提踵节律化（≥25 次@60 bpm）与步态分析保证对称性。\n2. 足底压力评估：利用压力垫测试足跟—跖骨压力差，确保峰值差 <5%，动作对称且无异常偏移。\n3. 影像确认：安排超声检查，验证腓肠肌纤维连续性与厚度对称，为最终康复结案提供影像学支撑。\n4. 维持方案：发放每周小腿力量训练≥2 次、低量弹性训练≥1 次的处方，并设定"疼痛、肿胀、跛行"三类预警条件，出现即暂停训练并复评。'
|
||
}
|
||
]
|
||
},
|
||
project3: {
|
||
title: '东阿阿胶品牌运营与网络营销项目',
|
||
company: '珠海麦香工坊食品有限公司',
|
||
position: '品牌运营专员',
|
||
duration: '2024.03~2024.12',
|
||
description: '本项目聚焦大健康产业的品牌数字化运营，结合东阿阿胶"滋补养生"的传统文化属性与现代健康消费需求，构建覆盖抖音、小红书、微博和视频号的内容矩阵。通过数据驱动选题策划、用户行为分析与精准广告投放，提升目标人群的品牌认知度和好感度。项目特别关注65岁以上老年人及其子女群体，采用"价值内容+体验活动+私域转化"的全链路模式，形成品牌传播闭环。在此过程中，团队建立了标准化的内容复盘机制与用户画像库，实现了粉丝数稳步增长、互动率提升和用户复购率上升，增强了东阿阿胶在大健康赛道的品牌竞争力。',
|
||
mainImage: '../../public/东阿阿胶品牌运营与网络营销项目/东阿阿胶品牌运营与网络营销项目-主图.jpg',
|
||
flows: [
|
||
{
|
||
name: '品牌定位调研',
|
||
image: '../../public/东阿阿胶品牌运营与网络营销项目/流程一：品牌定位调研.jpeg',
|
||
description: '在项目初期，重点完成对目标人群的健康消费需求与品牌竞争力的系统调研。通过线上问卷、电话访谈和社交平台评论分析，获取一手用户行为与偏好数据，并结合《中国健康消费趋势白皮书》等行业报告，构建多维度用户画像。在此基础上，完成竞品的定性与定量对比，为东阿阿胶在健康滋补品赛道的差异化定位提供决策依据。',
|
||
responsibilities: '1. 消费需求收集：设计并发布线上问卷，回收超过500份有效样本；结合社交平台关键词抓取，提炼"免疫力提升""慢性病调理"等高频需求点，形成需求分析报告。\n2. 竞品监测整理：通过巨量算数与新榜平台追踪竞品的广告投放与热搜话题，归纳核心打法并转化为竞品矩阵表，支持内部定位研讨。\n3. 用户画像建模：基于SPSS与Excel完成数据清洗与分层，建立"高消费能力中青年""健康意识增强型老年人""子女代购型"三类人群模型。\n4. 市场趋势分析：结合统计年鉴和第三方研究数据，输出老龄化率增长与健康品市场规模预测，绘制折线与柱状图，为品牌中长期战略提供参考。'
|
||
},
|
||
{
|
||
name: '内容矩阵搭建',
|
||
image: '../../public/东阿阿胶品牌运营与网络营销项目/流程二：内容矩阵搭建.jpeg',
|
||
description: '围绕多平台运营目标，构建覆盖抖音、小红书、微博和视频号的内容矩阵。不同平台采用差异化内容策略，如抖音偏向短视频快节奏表达，小红书偏向长图笔记与生活方式分享，微博注重话题热点带动。通过建立选题池和标签库，确保内容生产稳定高效，并结合平台反馈实时优化文案和视觉形式。',
|
||
responsibilities: '1. 选题策划执行：结合健康消费趋势和节气热点，每月形成20+选题库，涵盖健康知识科普、品牌文化故事和用户见证案例，保障内容多样化。\n2. 视觉物料制作：使用PS/AI完成长图、KV与静态海报设计，结合CapCut实现视频快剪和字幕标准化，保证输出符合平台视觉逻辑。\n3. 数据驱动优化：跟踪视频播放完播率与用户互动率，将低于行业均值的内容单独复盘，形成改进建议并优化后续选题。\n4. 互动维护：每日监控评论区与私信，输出用户FAQ清单，建立标准化回复模板，减少重复劳动并提升用户体验。'
|
||
},
|
||
{
|
||
name: '活动传播落地',
|
||
image: '../../public/东阿阿胶品牌运营与网络营销项目/流程三：活动传播落地.png',
|
||
description: '围绕"养生节""健康中国日"等节点策划并执行整合传播活动。活动包括达人挑战赛、品牌直播和话题互动，覆盖公域与私域触点，形成从曝光到转化的完整路径。团队需在活动前明确物料需求、KOL合作范围和传播排期，活动后进行全面复盘，沉淀经验以优化下轮执行。',
|
||
responsibilities: '1. 传播方案执行：参与制定活动执行清单，涵盖主题确认、时间排期、物料审核和发布节奏，确保所有环节可控。\n2. 达人对接管理：筛选并对接10+健康养生类KOL，核对合作脚本与视频排期，保证内容符合品牌调性。\n3. 直播执行支持：在品牌直播中协助后台操作，包括商品上架、抽奖互动及留言收集，活动期间实时记录数据与问题点。\n4. 活动复盘分析：使用Excel完成曝光量、点击率与转化率数据对比，绘制图表并输出复盘PPT，供团队复盘与汇报使用。'
|
||
},
|
||
{
|
||
name: '数据分析优化',
|
||
image: '../../public/东阿阿胶品牌运营与网络营销项目/流程四：数据分析优化.jpeg',
|
||
description: '项目进入稳定期后，重点通过数据指标分析实现持续优化。以曝光、点击、完播、转化为四个核心指标，建立监控看板，识别不同平台与不同题材的内容差异。结合用户反馈，迭代内容策略，沉淀长期可复用的内容库与标准化复盘模板，提高团队整体运营效率。',
|
||
responsibilities: '1. 多维度数据整理：定期导出平台后台数据，构建内容表现矩阵，标注"高效选题"和"低效题材"，为后续选题提供参考。\n2. 选题池建设：将高效题材沉淀为标签库，如"滋补日常""节气养生"，逐步扩展为50+选题池，提高选题效率。\n3. 指标优化建议：针对低完播率视频，提出在前3秒加入强记忆点、在字幕中突出卖点的优化方案，形成标准化改进清单。\n4. 成果沉淀复盘：编制月度复盘报告，输出关键数据走势、问题清单与优化措施，支持季度传播计划与资源分配。'
|
||
},
|
||
{
|
||
name: '社群与私域管理',
|
||
image: '../../public/东阿阿胶品牌运营与网络营销项目/流程五：社群与私域管理.jpeg',
|
||
description: '为提升用户忠诚度与复购率，项目搭建社群与私域流量池，形成"公域种草—私域转化—复购维护"的闭环。通过社群活动、专属日历和KOL/KOC合作，增强用户互动粘性，并将高潜用户沉淀为长期会员群体。',
|
||
responsibilities: '1. 社群活动执行：协助制定社群运营日历，设计健康打卡、知识问答等活动，提升群成员活跃度。\n2. KOL/KOC合作：参与达人筛选与合作文案审核，确保内容合法合规且贴合品牌调性。\n3. 转化效果跟进：监控私域投放链接的点击和下单转化率，记录达成情况并进行复盘分析。'
|
||
}
|
||
]
|
||
},
|
||
project4: {
|
||
title: '定制化职场女性轻医美美肤方案',
|
||
company: '济南莎蔓莉莎管理咨询有限公司',
|
||
position: '医美咨询师',
|
||
duration: '2024.03~2024.12',
|
||
description: '本项目聚焦职场女性在长期工作压力与环境影响下的肤质问题，目标是通过系统化的轻医美方案提升客户的皮肤健康与形象自信。项目涵盖需求收集、个性化治疗方案设计、预约与确认、治疗执行、术后跟进、关系维护与投诉处理等环节。通过应用Visia皮肤检测、M22超光子嫩肤与瑞蓝唯瑅水光注射等技术，确保方案科学、安全、有效。该项目在提升客户肤质的同时，也强化了医美咨询师与医生协同的服务模式，实现了客户满意度与机构口碑的双重提升。',
|
||
mainImage: '../../public/定制化职场女性轻医美美肤方案/定制化职场女性轻医美美肤方案-主图.jpg',
|
||
flows: [
|
||
{
|
||
name: '客户需求收集',
|
||
image: '../../public/定制化职场女性轻医美美肤方案/流程一：客户需求评估.jpg',
|
||
description: '在客户初诊环节，通过问诊、面谈与皮肤检测工具收集数据，全面了解客户的皮肤问题与心理诉求，并结合生活习惯和预算进行初步分类，为医生设计个性化方案奠定基础。在此过程中，既要确保数据客观准确，又要缓解客户紧张情绪，建立信任关系。',
|
||
responsibilities: '1. 面谈记录：在首次面诊时，逐项记录客户的肤质问题、生活习惯及期望效果，并建立电子档案，确保信息完整可追溯。\n2. 工具检测：在导师指导下操作Visia皮肤检测仪，采集色素沉着、毛孔粗大、油脂分泌等关键指标，形成定量化数据支撑。\n3. 情绪疏导：在问诊过程中观察客户紧张情绪，使用案例讲解与轻度心理疏导帮助客户放松，提升信任感。\n4. 数据整理：将客户面谈结果与检测数据录入系统，生成初步分析报告，作为医生后续方案设计的重要依据。'
|
||
},
|
||
{
|
||
name: '治疗方案沟通',
|
||
image: '../../public/定制化职场女性轻医美美肤方案/流程二：美肤方案制定.jpg',
|
||
description: '在医生制定治疗大纲后，协助完成与客户的沟通解释工作，重点是让客户理解治疗原理、周期、风险和注意事项。需要在保持医学专业性的同时，使用客户能理解的语言进行转述，避免过度承诺，确保客户在知情同意的基础上做出决策。',
|
||
responsibilities: '1. 项目解读：结合客户的皮肤问题，逐一讲解超光子嫩肤、水光注射的作用机制和适应症，确保客户清楚每个项目的目标与效果边界。\n2. 风险提示：对治疗可能出现的短暂红肿、爆痘等副作用进行客观说明，强调术前停用维A酸类产品等注意事项，减少客户预期落差。\n3. 多方沟通：在医生、客户之间搭建桥梁，将医生的参数与操作要点转化为客户易懂的信息，促进方案达成共识。\n4. 方案确认：与客户反复确认预算、时间与疗程安排，最终生成治疗确认单，确保无信息遗漏。'
|
||
},
|
||
{
|
||
name: '预约确认',
|
||
image: '../../public/定制化职场女性轻医美美肤方案/流程三：预约与确认.jpg',
|
||
description: '在治疗方案确认后，完成治疗时间、费用和术前准备的确认，确保客户在充分知情的情况下顺利进入执行环节。该流程需要高度注重细节，防止信息偏差或遗漏导致的客户不满。',
|
||
responsibilities: '1. 知情同意：详细解读《治疗知情同意书》，逐条解释风险点和术后恢复建议，帮助客户安心签署。\n2. 时间安排：结合客户工作节奏和恢复期，协助合理安排治疗时间，避免与生理期、重要会议等冲突。\n3. 费用确认：与客户逐项确认费用明细，确保其对价格与支付方式清楚无误，并通过系统生成预约短信。\n4. 术前提醒：在治疗前一周和治疗当天分别推送注意事项提醒，如避免化妆、停用刺激性产品等，确保治疗条件最佳化。'
|
||
},
|
||
{
|
||
name: '治疗协助',
|
||
image: '../../public/定制化职场女性轻医美美肤方案/流程四：医美服务执行.jpg',
|
||
description: '在医生主导治疗过程中，协助安抚客户情绪、实时记录治疗反馈，并在必要时协助处理护理事项。重点在于保障客户体验顺畅，确保治疗数据与客户感受完整记录，形成可复盘的资料。',
|
||
responsibilities: '1. 情绪陪伴：在客户接受超光子嫩肤时，持续与其沟通，缓解紧张感，确保治疗过程的配合度。\n2. 数据记录：同步记录医生操作的滤片选择、能量参数与治疗时间，整理为客户个人治疗日志，便于后续追踪。\n3. 反馈收集：在治疗间隙询问客户感受，并即时反馈给医生，用于动态调整治疗参数，提升安全性。\n4. 术后交接：协助护士完成冷敷与舒缓护理，提醒客户注意防晒和饮食禁忌，确保恢复过程顺畅。'
|
||
},
|
||
{
|
||
name: '术后随访',
|
||
image: '../../public/定制化职场女性轻医美美肤方案/流程五：术后跟进服务.jpg',
|
||
description: '在客户术后恢复阶段，通过多渠道随访、护理指导与效果跟踪，确保客户得到持续支持。既要保证治疗效果得到验证，也要及时发现并解决客户的不适或疑虑，维持客户满意度。',
|
||
responsibilities: '1. 即时回访：在治疗当天通过微信推送术后注意事项，并在1天、3天、7天节点主动回访客户，解答常见问题。\n2. 恢复跟踪：记录客户术后出现的干燥或轻微爆痘情况，指导护理措施，避免问题加重。\n3. 效果对比：在术后1个月邀请客户复诊，使用Visia进行效果对比，形成"术前—术后"数据，明确改善幅度。\n4. 数据归档：将随访内容录入系统，供团队复盘使用，并作为后续方案优化的依据。'
|
||
}
|
||
]
|
||
},
|
||
project5: {
|
||
title: '阿莫西林胶囊制剂生产工艺优化项目',
|
||
company: '陕西秦岭七药协同创新中心有限公司',
|
||
position: '制剂工程师',
|
||
duration: '2024.03~2024.12',
|
||
description: '本项目围绕阿莫西林胶囊的处方与工艺优化开展，聚焦解决溶出度不足、稳定性偏差和批间一致性差等问题。通过对粉碎、制粒、干燥、混合和充填等工序的改进，提升制剂的生物利用度和质量稳定性。项目在粉体粒径控制、湿材制备条件、颗粒干燥曲线和辅料比例等方面进行了系统优化，最终将溶出度提升至98%以上，符合《中国药典》相关标准，并通过长期稳定性试验证实货架期达到18–24个月。研究成果为小试工艺向中试和产业化放大提供了可靠依据，确保产品质量稳定、临床疗效可控和市场竞争力增强。',
|
||
mainImage: '../../public/阿莫西林胶囊制剂生产工艺优化项目/阿莫西林胶囊制剂生产工艺优化项目-主图.jpeg',
|
||
flows: [
|
||
{
|
||
name: '原料药粉碎控制',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程一：原料药粉碎控制.jpeg',
|
||
description: '在工艺初始阶段，对阿莫西林原料药进行粒径细化是确保溶出性能和后续工序稳定性的关键。通过超微粉碎机将粉体细化至900目，增加比表面积以改善溶出速率，并控制粉碎过程的压力与温度以避免药物降解。实验中需实时检测粒径分布，保证各批次粉末均匀一致，减少批间差异，确保符合药典粒径检测标准。',
|
||
responsibilities: '1. 粒径检测执行：在粉碎完成后，利用粒度分布仪和标准筛进行双重检测，确保粒径达到900目标准，同时将检测结果与历史数据对比，保证粉体性能稳定。\n2. 温度与压力监控：在粉碎过程中设置传感器记录腔体温度与进气压力，保持在35–40℃与0.1–0.3MPa范围，防止粉末因过热或超压导致药物降解或晶型转变。\n3. 批间一致性分析：将每批次粉体样品的粒径曲线进行比对，分析均匀性差异，若出现偏差立即追溯原因并采取纠正措施。\n4. 数据记录归档：将粉碎时间、温度、压力和粒径检测数据系统录入批生产记录，确保溯源完整，满足GMP审计要求。'
|
||
},
|
||
{
|
||
name: '湿法制粒成型',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程二：湿法制粒成型.jpeg',
|
||
description: '湿材进入制粒机后需通过切刀和筛网的作用形成均匀颗粒。该过程对颗粒形貌、大小分布和含水量有严格要求，因为它直接影响胶囊的装量均匀性与溶出速率。需严格设定制粒参数，并在过程中进行抽样监控，保证颗粒外观一致性。',
|
||
responsibilities: '1. 制粒机参数调控：根据工艺方案调整刀速和筛网孔径，避免颗粒过大或过小，确保其形貌规则，便于后续干燥。\n2. 颗粒外观抽检：在制粒过程中定时取样，利用放大镜检查颗粒外观，要求呈规则球形或短柱状，不得出现明显长条或碎片。\n3. 含水量监控：在制粒完成后使用快速水分测定仪检测含水率，保证其处于合适范围，避免干燥难度过大或崩解性不足。\n4. 质量异常处理：若发现颗粒形貌或含水率不符合要求，立即中止工序并返工，确保批次不流入后续环节造成报废风险。'
|
||
},
|
||
{
|
||
name: '颗粒干燥处理',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程三：颗粒干燥处理.jpeg',
|
||
description: '湿颗粒需在沸腾干燥机中进行分段干燥，通过合理控制进风温度和干燥时间，使颗粒内外水分均匀蒸发。该环节既要保证终点含水率≤3%，也要避免因温度过高导致阿莫西林降解。过程数据需实时监控和记录，以验证工艺稳定性。',
|
||
responsibilities: '1. 干燥温度控制：前段维持在50–60℃促进表面水分快速蒸发，后段降至40–45℃延长50–60分钟，使内部水分逐步排出。\n2. 水分终点检测：在干燥过程中分时段采样，使用在线水分检测仪监控含水率，确保批次均在≤3%标准内。\n3. 干燥曲线比对：建立干燥曲线数据库，将不同批次曲线进行对比，分析差异并评估工艺一致性。\n4. GMP合规记录：将干燥时长、温度和水分数据逐条填写至工艺记录表，并由质控人员复核签字，保证工序可追溯。'
|
||
},
|
||
{
|
||
name: '辅料均匀混合',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程四：辅料均匀混合.jpeg',
|
||
description: '干燥颗粒经筛分后需与崩解剂和润滑剂充分混合，以保证胶囊剂具有良好的崩解性和流动性。混合过程的均匀性是确保剂量分布与溶出一致性的关键，需通过均匀度检测进行验证。',
|
||
responsibilities: '1. 辅料称量执行：严格按照处方称量崩解剂和润滑剂，由两人交叉复核并签字，避免因称量错误导致比例失衡。\n2. 混合机操作：在多向运动混合机中运行15–20分钟，并每隔5分钟取不同点位样品检测，确保RSD＜5%。\n3. 均匀度检测：通过含量均匀度实验对样品进行验证，确认辅料分布均一，避免局部成分偏差。\n4. 记录与归档：将称量表、混合时间、检测数据录入批生产记录，并形成电子档案，满足审计追溯。'
|
||
},
|
||
{
|
||
name: '胶囊充填作业',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程五：胶囊充填作业.jpeg',
|
||
description: '将合格颗粒装入胶囊壳，要求装量差异≤±5%，并通过在线检测剔除不合格胶囊。充填过程不仅考验设备稳定性，也需要操作人员实时监控并维护，确保产能和质量双重达标。',
|
||
responsibilities: '1. 装量均一抽检：每隔30分钟抽取样品进行重量检测，保证胶囊装量差异在药典允许范围内。\n2. 设备调试维护：在生产前完成清洁与润滑，确认充填速度≥50,000粒/小时，并记录产能表现。\n3. 在线剔除控制：设定自动剔除阈值，实时去除重量不合格胶囊，避免进入包装环节。\n4. 批次信息登记：将充填参数、抽检结果与剔除数量完整记录，提交质控部门复核。'
|
||
},
|
||
{
|
||
name: '成品包装密封',
|
||
image: '../../public/阿莫西林胶囊制剂生产工艺优化项目/流程六：成品包装密封.jpeg',
|
||
description: '充填完成的胶囊经抛光和外观检测后进入包装工序。采用PVC药用硬片与铝箔密封包装，确保避光、防潮、防污染。该环节需进行密封性检测并规范记录，保证产品符合储存与运输要求。',
|
||
responsibilities: '1. 包材质量确认：逐批核对供应商提供的检验证书，确认PVC和铝箔符合药包材规范。\n2. 密封性能测试：抽检成品进行真空泄漏和热封强度测试，保证包装完整性。\n3. 储存环境控制：记录库房温度25℃±2℃、湿度≤60%，并实时监测，确保产品在有效期内稳定。\n4. 生产批次归档：完成包装批次记录，包括日期、班次、检测结果和操作人员信息，确保追溯合规。'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
let currentFlowIndex = 0;
|
||
let currentProjectId = null;
|
||
|
||
function openProjectModal(projectId) {
|
||
console.log('openProjectModal called with:', projectId);
|
||
const modal = document.getElementById('projectModal');
|
||
const project = projectData[projectId];
|
||
|
||
if (!modal) {
|
||
console.error('Modal element not found');
|
||
return;
|
||
}
|
||
|
||
if (!project) {
|
||
console.error('Project not found:', projectId);
|
||
return;
|
||
}
|
||
|
||
currentProjectId = projectId;
|
||
currentFlowIndex = 0;
|
||
|
||
// 更新模态框内容 - 新布局
|
||
document.getElementById('modalContent').innerHTML = `
|
||
<div class='project-modal-header'>
|
||
<div class='header-info'>
|
||
<h2>${project.title}</h2>
|
||
<div class='header-meta'>
|
||
<span>${project.company}</span>
|
||
<span>•</span>
|
||
<span>${project.position}</span>
|
||
<span>•</span>
|
||
<span>${project.duration}</span>
|
||
</div>
|
||
</div>
|
||
<button class='close-btn' onclick='closeProjectModal()'>
|
||
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
|
||
<line x1='18' y1='6' x2='6' y2='18'></line>
|
||
<line x1='6' y1='6' x2='18' y2='18'></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 横向流程导航栏 -->
|
||
<div class='project-flow-nav'>
|
||
${project.flows.map((flow, index) => `
|
||
<button class='flow-nav-item ${index === 0 ? 'active' : ''}'
|
||
onclick='switchFlow(\"${projectId}\", ${index})'>
|
||
流程${index + 1}：${flow.name}
|
||
</button>
|
||
`).join('')}
|
||
</div>
|
||
|
||
<!-- 流程内容区域 -->
|
||
<div class='flow-content-container'>
|
||
${project.flows.map((flow, index) => `
|
||
<div class='flow-section ${index === 0 ? 'active' : ''}' id='flow-${projectId}-${index}'>
|
||
<!-- 左侧：流程图片 -->
|
||
<div class='flow-image-wrapper'>
|
||
<img src='${flow.image}' alt='${flow.name}' class='flow-image'>
|
||
</div>
|
||
|
||
<!-- 右侧：流程详情 -->
|
||
<div class='flow-details'>
|
||
<h3 class='flow-title'>${flow.name}</h3>
|
||
|
||
<div class='flow-description'>
|
||
<h4>流程描述</h4>
|
||
<p>${flow.description}</p>
|
||
</div>
|
||
|
||
<div class='flow-responsibilities'>
|
||
<h4>工作内容</h4>
|
||
<p>${flow.responsibilities.replace(/\n/g, '<br>')}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
`;
|
||
|
||
modal.style.display = 'flex';
|
||
modal.style.opacity = '1';
|
||
modal.style.pointerEvents = 'auto';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function switchFlow(projectId, flowIndex) {
|
||
// 更新导航按钮状态
|
||
document.querySelectorAll('.flow-nav-item').forEach((btn, index) => {
|
||
if (index === flowIndex) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新流程内容显示
|
||
document.querySelectorAll('.flow-section').forEach((section, index) => {
|
||
if (index === flowIndex) {
|
||
section.classList.add('active');
|
||
} else {
|
||
section.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
currentFlowIndex = flowIndex;
|
||
}
|
||
|
||
function closeProjectModal() {
|
||
const modal = document.getElementById('projectModal');
|
||
modal.style.opacity = '0';
|
||
modal.style.pointerEvents = 'none';
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
// Close modal when clicking outside
|
||
document.getElementById('projectModal').addEventListener('click', (e) => {
|
||
if (e.target.id === 'projectModal') {
|
||
closeProjectModal();
|
||
}
|
||
});
|
||
|
||
console.log('🏥 Modern Health Resume Loaded Successfully!');
|
||
</script>
|
||
</body>
|
||
</html> |