2743 lines
136 KiB
Plaintext
2743 lines
136 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>旅行设计师 | 让世界更精彩</title>
|
||
|
||
<!-- 字体 -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||
<!-- 年轻化文旅样式 -->
|
||
<link rel="stylesheet" href="youth-travel-style.css">
|
||
<!-- 加载动画样式 -->
|
||
<link rel="stylesheet" href="loader-animation.css">
|
||
<!-- 英雄页地图样式 -->
|
||
<link rel="stylesheet" href="hero-map-style.css">
|
||
<!-- 现代技能展示样式 -->
|
||
<link rel="stylesheet" href="skills-modern-style.css">
|
||
<!-- 个人总结样式 -->
|
||
<link rel="stylesheet" href="personal-summary-style.css">
|
||
<!-- 教育背景样式 -->
|
||
<link rel="stylesheet" href="education-style.css">
|
||
<!-- ECharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
|
||
<!-- 防止滚动位置记忆 -->
|
||
<style>
|
||
/* 确保页面始终从顶部开始 */
|
||
html {
|
||
scroll-behavior: auto !important;
|
||
}
|
||
|
||
/* 页面加载时隐藏滚动，防止跳动 */
|
||
html.loading {
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 立即滚动到顶部（在页面解析时就执行）
|
||
if (history.scrollRestoration) {
|
||
history.scrollRestoration = 'manual';
|
||
}
|
||
window.scrollTo(0, 0);
|
||
document.documentElement.classList.add('loading');
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 加载动画 -->
|
||
<div class="page-loader" id="loader">
|
||
<div class="loader-content">
|
||
<!-- 飞机动画 -->
|
||
<div class="plane-container">
|
||
<svg class="plane-path" viewBox="0 0 300 200">
|
||
<path class="flight-path" d="M 30 100 Q 150 50 270 100" stroke="#00b4d8" stroke-width="2" fill="none" stroke-dasharray="5,5" opacity="0.3"/>
|
||
</svg>
|
||
<div class="plane">
|
||
<i class="bi bi-airplane-fill"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 世界地图轮廓 -->
|
||
<div class="map-outline">
|
||
<svg viewBox="0 0 400 200">
|
||
<circle cx="100" cy="80" r="3" fill="#90e0ef" opacity="0.6"/>
|
||
<circle cx="200" cy="100" r="3" fill="#90e0ef" opacity="0.6"/>
|
||
<circle cx="300" cy="70" r="3" fill="#90e0ef" opacity="0.6"/>
|
||
<circle cx="150" cy="120" r="3" fill="#90e0ef" opacity="0.6"/>
|
||
<circle cx="250" cy="90" r="3" fill="#90e0ef" opacity="0.6"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 护照戳动画 -->
|
||
<div class="passport-stamps">
|
||
<div class="stamp stamp-1">TRAVEL</div>
|
||
<div class="stamp stamp-2">DESIGN</div>
|
||
<div class="stamp stamp-3">探索</div>
|
||
</div>
|
||
|
||
<!-- 加载文字 -->
|
||
<div class="loader-text">
|
||
<h3>欢迎登机</h3>
|
||
<div class="loading-dots">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 进度条 -->
|
||
<div class="loader-progress">
|
||
<div class="progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="travel-nav">
|
||
<div class="nav-container">
|
||
<a href="#home" class="nav-logo">
|
||
<i class="bi bi-compass-fill"></i>
|
||
<span>Travel Designer</span>
|
||
</a>
|
||
|
||
<button class="nav-toggle" id="navToggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
|
||
<ul class="nav-menu" id="navMenu">
|
||
<li><a href="#home" class="nav-link active">
|
||
<i class="bi bi-house"></i> 首页
|
||
</a></li>
|
||
<li><a href="#about" class="nav-link">
|
||
<i class="bi bi-person"></i> 关于
|
||
</a></li>
|
||
<li><a href="#education" class="nav-link">
|
||
<i class="bi bi-mortarboard"></i> 教育
|
||
</a></li>
|
||
<li><a href="#projects" class="nav-link">
|
||
<i class="bi bi-briefcase"></i> 项目
|
||
</a></li>
|
||
<li><a href="#journey" class="nav-link">
|
||
<i class="bi bi-map"></i> 旅程
|
||
</a></li>
|
||
<li><a href="#skills" class="nav-link">
|
||
<i class="bi bi-award"></i> 技能
|
||
</a></li>
|
||
<li><a href="#contact" class="nav-link">
|
||
<i class="bi bi-envelope"></i> 联系
|
||
</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section id="home" class="hero-travel" style="position: relative; overflow: hidden;">
|
||
<!-- 世界地图背景 -->
|
||
<div id="hero-map-background"></div>
|
||
|
||
<div class="hero-content" style="position: relative; z-index: 10; background: rgba(10, 14, 39, 0.5); backdrop-filter: blur(15px); border-radius: 20px; padding: 40px; max-width: 800px; pointer-events: auto;">
|
||
<div class="passport-stamp">TRAVEL DESIGNER</div>
|
||
|
||
<h1 class="hero-title">
|
||
把世界装进设计里<br>
|
||
让旅行更有温度
|
||
</h1>
|
||
|
||
<div class="hero-subtitle">
|
||
</div>
|
||
|
||
<p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); margin: 30px auto; max-width: 600px; line-height: 1.8;">
|
||
我是一名00后，用年轻的视角重新定义文旅体验。<br>
|
||
从背包客到设计师，我把旅途的感动变成可触摸的产品。
|
||
</p>
|
||
|
||
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
|
||
<a href="#about" class="btn-travel btn-primary">
|
||
<i class="bi bi-compass"></i> 开始探索
|
||
</a>
|
||
<a href="#projects" class="btn-travel btn-outline">
|
||
<i class="bi bi-collection"></i> 查看作品
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 关于我 -->
|
||
<section id="about" class="section-padding" style="background: rgba(255,255,255,0.02);">
|
||
<div class="container">
|
||
<h2 class="text-gradient" style="text-align: center; font-size: 3rem; margin-bottom: 50px;">
|
||
关于我
|
||
</h2>
|
||
|
||
<div style="max-width: 1200px; margin: 0 auto;">
|
||
<div class="about-card-modern">
|
||
<!-- 顶部装饰条 -->
|
||
<div class="about-header-decoration">
|
||
<div class="decoration-line"></div>
|
||
<span class="decoration-text">PROFILE</span>
|
||
<div class="decoration-line"></div>
|
||
</div>
|
||
|
||
<div class="about-content-wrapper">
|
||
<!-- 左侧内容区 -->
|
||
<div class="about-info-section">
|
||
<!-- 个人信息统一卡片 -->
|
||
<div class="personal-info-card">
|
||
<div class="info-card-header">
|
||
<i class="bi bi-person-badge-fill"></i>
|
||
<span>基本信息</span>
|
||
</div>
|
||
<div class="info-items">
|
||
<div class="info-item">
|
||
<span class="info-label">姓名</span>
|
||
<span class="info-value">万圆</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-label">性别</span>
|
||
<span class="info-value">男</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-label">现居地</span>
|
||
<span class="info-value">苏州市吴江区</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-label">求职意向</span>
|
||
<span class="info-value">活动策划师助理</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-label">专业背景</span>
|
||
<span class="info-value">旅游管理专业</span>
|
||
</div>
|
||
<div class="info-divider"></div>
|
||
<div class="info-item">
|
||
<span class="info-label">毕业院校</span>
|
||
<span class="info-value">苏州信息职业技术学院</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技能标签云 -->
|
||
<div class="skills-section">
|
||
<h4 class="section-title">
|
||
<i class="bi bi-stars"></i>
|
||
专注领域
|
||
</h4>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">活动策划与执行</span>
|
||
<span class="skill-tag">品牌传播与推广</span>
|
||
<span class="skill-tag">新媒体运营</span>
|
||
<span class="skill-tag">文旅项目策划</span>
|
||
<span class="skill-tag">数据分析</span>
|
||
<span class="skill-tag">用户运营</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧头像区 -->
|
||
<div class="profile-photo-section">
|
||
<div class="photo-frame-modern">
|
||
<img src="20250907-160125.jpg" alt="个人照片" class="profile-photo" loading="eager">
|
||
</div>
|
||
<div class="photo-info">
|
||
<h3 class="profile-name">万圆</h3>
|
||
<span class="profile-title">Travel Designer</span>
|
||
</div>
|
||
|
||
<!-- 个人座右铭 -->
|
||
<div class="motto-card">
|
||
<div class="motto-quotes">
|
||
<i class="bi bi-quote quote-left"></i>
|
||
<p>让每一次旅行都成为难忘的故事，用设计连接世界与心灵。</p>
|
||
<i class="bi bi-quote quote-right"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 教育背景 -->
|
||
<section id="education" class="section-padding" style="background: linear-gradient(135deg, rgba(0, 14, 39, 0.98) 0%, rgba(38, 70, 83, 0.98) 100%);">
|
||
<div class="container">
|
||
<h2 class="text-gradient" style="text-align: center; font-size: 3rem; margin-bottom: 50px;">
|
||
教育背景
|
||
</h2>
|
||
|
||
<div class="education-wrapper" style="max-width: 1000px; margin: 0 auto;">
|
||
<!-- 教育时间线 -->
|
||
<div class="education-timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-date">
|
||
<span class="date-badge">2018.9 - 2021.6</span>
|
||
</div>
|
||
<div class="timeline-content">
|
||
<div class="edu-card">
|
||
<div class="edu-header">
|
||
<div class="edu-icon">
|
||
<i class="bi bi-mortarboard-fill"></i>
|
||
</div>
|
||
<div class="edu-title">
|
||
<h3>苏州信息职业技术学院</h3>
|
||
<p class="edu-degree">旅游管理专业 · 大专</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="edu-body">
|
||
<h4 class="course-title">
|
||
<i class="bi bi-book"></i> 主修课程
|
||
</h4>
|
||
<div class="course-grid">
|
||
<div class="course-item">
|
||
<i class="bi bi-briefcase-fill"></i>
|
||
<span>旅游社经营与管理</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-map-fill"></i>
|
||
<span>景区服务与管理</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>酒店经营与管理</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-cart-fill"></i>
|
||
<span>旅游电子商务</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-lightbulb-fill"></i>
|
||
<span>旅游策划理论与实务</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-phone-fill"></i>
|
||
<span>旅游新媒体营销</span>
|
||
</div>
|
||
<div class="course-item">
|
||
<i class="bi bi-people-fill"></i>
|
||
<span>客户关系管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="edu-highlights">
|
||
<p class="highlight-text">
|
||
<i class="bi bi-star-fill" style="color: #ffd700;"></i>
|
||
通过系统的专业学习，掌握了旅游行业运营管理、活动策划、新媒体营销等核心技能，为从事活动策划工作打下了坚实的理论基础。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 文旅项目展示 -->
|
||
<section id="projects" class="section-padding" style="background: rgba(255,255,255,0.02);">
|
||
<div class="container">
|
||
<h2 class="text-gradient" style="text-align: center; font-size: 3rem; margin-bottom: 30px;">
|
||
我参与的文旅项目
|
||
</h2>
|
||
|
||
<!-- 项目分类导航栏 -->
|
||
<div class="project-category-nav">
|
||
<button class="category-tab active" data-category="all">
|
||
<i class="bi bi-grid-3x3-gap"></i>
|
||
<span>全部项目</span>
|
||
</button>
|
||
<button class="category-tab" data-category="management">
|
||
<i class="bi bi-briefcase"></i>
|
||
<span>项目经营管理</span>
|
||
</button>
|
||
<button class="category-tab" data-category="planning">
|
||
<i class="bi bi-calendar-event"></i>
|
||
<span>商业活动策划</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="projects-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
|
||
<!-- 项目1：舟山民宿运营 - 项目经营管理 -->
|
||
<div class="travel-project" data-project="minsu" data-category="management" onclick="openProjectModal('minsu')" style="cursor: pointer;">
|
||
<img src="public/舟山某民宿180天提升入住率项目/民宿运营项目总图.jpg" class="project-image" alt="舟山民宿运营项目">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">民宿运营</span>
|
||
<span class="tag">营销推广</span>
|
||
<span class="tag">2023-2024</span>
|
||
</div>
|
||
<h3 class="project-title">舟山民宿180天提升入住率项目</h3>
|
||
<p class="project-description">
|
||
通过优化客房体验、OTA运营、社群直播营销、会员体系建设，在180天内成功提升民宿入住率40%，打造可复制的运营模式。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2023.5-2024.9</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>民宿运营助理</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>昆山天天旅行社有限公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目2：谷子店经营 - 项目经营管理 -->
|
||
<div class="travel-project" data-project="guzi" data-category="management" onclick="openProjectModal('guzi')" style="cursor: pointer;">
|
||
<img src="public/谷子店开店与经营管理/谷子店开店与经营管理 主图.png" class="project-image" alt="谷子店经营项目">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">零售运营</span>
|
||
<span class="tag">IP经营</span>
|
||
<span class="tag">2023-2024</span>
|
||
</div>
|
||
<h3 class="project-title">谷子店开店与经营管理</h3>
|
||
<p class="project-description">
|
||
郑州热门商圈二次元周边店运营，通过正版授权、SKU优化、私域运营等策略，6个月内实现月均坪效突破7000元/㎡。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2023.5-2024.9</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>二次元周边选品专员</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>Mts次元贩售动漫玩具店</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目3：2024合肥国际3C电子产业博览会 - 商业活动策划 -->
|
||
<div class="travel-project" data-project="exhibition" data-category="planning" onclick="openProjectModal('exhibition')" style="cursor: pointer;">
|
||
<img src="public/2024 合肥国际 3C 电子产业博览会策划项目/2024 合肥国际 3C 电子产业博览会策划项目-总图.jpg" class="project-image" alt="2024合肥国际3C电子产业博览会">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">会展执行</span>
|
||
<span class="tag">商业策划</span>
|
||
<span class="tag">2024</span>
|
||
</div>
|
||
<h3 class="project-title">2024合肥国际3C电子产业博览会策划项目</h3>
|
||
<p class="project-description">
|
||
立足合肥电子信息产业，聚焦3C终端全生态链展示，打造六大场景沉浸式体验，实现B端商务撮合与C端体验运营双线并行。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2024.3-2024.12</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>商业会展执行专员</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>荣益诚文化发展（上海）有限公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目4：春风摩托车营销 - 商业活动策划 -->
|
||
<div class="travel-project" data-project="chunfeng" data-category="planning" onclick="openProjectModal('chunfeng')" style="cursor: pointer;">
|
||
<img src="public/春风 450MT新品上市营销活动策划项目/商业活动策划_春风 450MT新品上市营销活动策划项目总图.jpeg" class="project-image" alt="春风摩托车营销项目">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">活动策划</span>
|
||
<span class="tag">新品上市</span>
|
||
<span class="tag">2024</span>
|
||
</div>
|
||
<h3 class="project-title">春风450MT新品上市营销活动</h3>
|
||
<p class="project-description">
|
||
全程参与摩托车新品上市营销活动，从方案撰写、场景设计到传播落地、达人协作，累计触达用户超50万+。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2024.3-2024.6</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>营销活动助理</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>苏州风时网络科技有限公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目4：自驾游SEO优化 - 商业活动策划 -->
|
||
<div class="travel-project" data-project="seo" data-category="planning" onclick="openProjectModal('seo')" style="cursor: pointer;">
|
||
<img src="public/某自驾游平台SEO:SEM全流程优化项目/seo主图.jpg" class="project-image" alt="自驾游SEO优化项目">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">SEO优化</span>
|
||
<span class="tag">数字营销</span>
|
||
<span class="tag">2023-2024</span>
|
||
</div>
|
||
<h3 class="project-title">自驾游平台SEO/SEM全流程优化</h3>
|
||
<p class="project-description">
|
||
通过关键词优化、网站结构改进、内容营销等策略，帮助自驾游平台自然流量提升120%，转化率提升35%。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2023.8-2024.2</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>SEO运营实习生</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>信大互动（常熟）信息科技有限公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目5：森林湿地景区新媒体运营 - 项目经营管理 -->
|
||
<div class="travel-project" data-project="wetland" data-category="management" onclick="openProjectModal('wetland')" style="cursor: pointer;">
|
||
<img src="public/某地森林湿地自然景区多平台新媒体运营方案/主图：丽江旅游景区封面.jpeg" class="project-image" alt="森林湿地景区新媒体运营">
|
||
<div class="project-content">
|
||
<div class="project-tags">
|
||
<span class="tag">新媒体运营</span>
|
||
<span class="tag">生态旅游</span>
|
||
<span class="tag">2024</span>
|
||
</div>
|
||
<h3 class="project-title">某地森林湿地自然景区多平台新媒体运营方案</h3>
|
||
<p class="project-description">
|
||
通过构建全方位多平台新媒体运营体系，120天内提升景区线上曝光度50%，增加游客数量30%，打造可复制的森林湿地景区运营模式。
|
||
</p>
|
||
<div class="project-meta">
|
||
<div class="meta-item">
|
||
<i class="bi bi-calendar3"></i>
|
||
<span>2024.3-2024.12</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-person-badge"></i>
|
||
<span>新媒体运营专员</span>
|
||
</div>
|
||
<div class="meta-item">
|
||
<i class="bi bi-building"></i>
|
||
<span>万户候国际旅行社有限公司</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- 技能护照 -->
|
||
<section id="skills" class="section-padding" style="background: rgba(255,255,255,0.02);">
|
||
<div class="container">
|
||
<h2 class="text-gradient" style="text-align: center; font-size: 3rem; margin-bottom: 50px;">
|
||
技能护照
|
||
</h2>
|
||
|
||
<!-- 技能展示新布局 -->
|
||
<div class="skills-top-section" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 60px;">
|
||
<!-- 左侧雷达图 -->
|
||
<div style="text-align: center; padding: 20px; overflow: visible;">
|
||
<h3 style="color: #52b788; margin-bottom: 20px; font-size: 1.5rem;">技能雷达分析</h3>
|
||
<canvas id="skillRadar" width="500" height="500" style="max-width: 100%; display: block; margin: 0 auto;"></canvas>
|
||
</div>
|
||
|
||
<!-- 右侧技能说明 -->
|
||
<div style="background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px;">
|
||
<h3 style="color: #f4a261; margin-bottom: 25px; font-size: 1.4rem;">
|
||
<i class="bi bi-info-circle-fill"></i> 专业技能说明
|
||
</h3>
|
||
<div style="max-height: 400px; overflow-y: auto; padding-right: 15px;">
|
||
<p style="color: rgba(255,255,255,0.9); line-height: 1.8; margin-bottom: 20px;">
|
||
通过系统的旅游管理专业学习和实习经历，我已经掌握了活动策划与执行的核心技能体系。从前期市场调研、创意构思到现场执行、数据复盘，我能够全流程参与并协助完成各类活动项目。
|
||
</p>
|
||
|
||
<div style="margin-bottom: 20px;">
|
||
<h4 style="color: #00b4d8; font-size: 1.1rem; margin-bottom: 10px;">技能特点</h4>
|
||
<ul style="list-style: none; padding: 0; color: rgba(255,255,255,0.8); line-height: 1.8;">
|
||
<li>✓ 扎实的理论基础：系统学习旅游管理专业知识</li>
|
||
<li>✓ 实践经验积累：参与摩托车新品上市营销活动全流程</li>
|
||
<li>✓ 工具熟练运用：精通办公软件和AIGC创意工具</li>
|
||
<li>✓ 跨界协作能力：能够对接多方资源，促进项目落地</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 技能签证板块 -->
|
||
<div class="skill-passport" style="margin-top: 100px;">
|
||
<div class="passport-header">
|
||
SKILLS PASSPORT · 技能签证
|
||
</div>
|
||
|
||
<div class="visa-stamps">
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-calendar-event" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">活动执行</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
策划统筹<br>现场管理<br>应急预案
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-megaphone" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">品牌传播</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
文化IP策划<br>跨界联动<br>差异化推广
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-palette2" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">视觉设计</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
Canva<br>Figma<br>Photoshop
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-robot" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">AIGC工具</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
ChatGPT<br>Stable Diffusion<br>Suno
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-phone" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">新媒体运营</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
短视频制作<br>直播搭建<br>私域维护
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visa-stamp">
|
||
<i class="bi bi-cpu" style="font-size: 2rem; color: #ffd700;"></i>
|
||
<h4 style="margin: 10px 0 5px; color: #ffd700;">智慧文旅</h4>
|
||
<p style="font-size: 0.9rem; color: rgba(255,255,255,0.8);">
|
||
OTA平台<br>票务系统<br>智能导览
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 个人总结 -->
|
||
<section id="personal-summary" class="section-padding" style="background: linear-gradient(135deg, rgba(0, 14, 39, 0.95) 0%, rgba(38, 70, 83, 0.95) 100%);">
|
||
<div class="container">
|
||
<div class="summary-wrapper" style="max-width: 900px; margin: 0 auto;">
|
||
<!-- 标题部分 -->
|
||
<div style="text-align: center; margin-bottom: 50px;">
|
||
<div style="display: inline-flex; align-items: center; gap: 15px; margin-bottom: 20px;">
|
||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #00b4d8, #0077b6); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
|
||
<i class="bi bi-person-lines-fill" style="color: white; font-size: 2rem;"></i>
|
||
</div>
|
||
<h2 class="text-gradient" style="font-size: 3rem; margin: 0;">个人总结</h2>
|
||
</div>
|
||
<p style="color: rgba(255, 255, 255, 0.6); font-size: 1.1rem;">Personal Summary</p>
|
||
</div>
|
||
|
||
<!-- 内容卡片 -->
|
||
<div class="summary-card">
|
||
<div class="summary-quote-mark">"</div>
|
||
|
||
<!-- 核心内容 -->
|
||
<div class="summary-content">
|
||
<p class="summary-text">
|
||
我是一名刚完成实习的<span class="highlight-text">大专毕业生</span>，主修<span class="highlight-text">会展策划与管理专业</span>，对活动创意策划与传播运营具有浓厚兴趣。
|
||
</p>
|
||
|
||
<p class="summary-text">
|
||
在<span class="highlight-text">"摩托车新品上市营销活动"</span>中，我全程参与方案撰写、场景设计、传播落地、达人协作与效果追踪，逐步理解从创意触发到客户体验再到复盘优化的活动闭环逻辑。
|
||
</p>
|
||
|
||
<p class="summary-text">
|
||
实习让我锻炼了<span class="skill-tag">文案表达</span>、<span class="skill-tag">资源协调</span>与<span class="skill-tag">成本控制</span>的能力，并提升了跨部门沟通和执行力。
|
||
</p>
|
||
|
||
<p class="summary-text">
|
||
我热爱策划工作，愿意不断学习，未来希望成为一名<span class="highlight-text">善于创意、数据敏感且执行落地力强的活动策划师</span>。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="summary-quote-mark summary-quote-end">"</div>
|
||
|
||
<!-- 关键标签 -->
|
||
<div class="summary-tags">
|
||
<span class="tag-item"><i class="bi bi-mortarboard"></i> 会展策划与管理</span>
|
||
<span class="tag-item"><i class="bi bi-rocket-takeoff"></i> 活动策划新人</span>
|
||
<span class="tag-item"><i class="bi bi-heart"></i> 热爱创意</span>
|
||
<span class="tag-item"><i class="bi bi-graph-up-arrow"></i> 持续学习</span>
|
||
</div>
|
||
|
||
<!-- 装饰元素 -->
|
||
<div class="summary-decoration"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="contact" class="section-padding">
|
||
<div class="container">
|
||
<h2 class="text-gradient" style="text-align: center; font-size: 3rem; margin-bottom: 50px;">
|
||
联系我，一起创造旅行奇迹
|
||
</h2>
|
||
|
||
<div class="destination-card" style="max-width: 700px; margin: 0 auto; text-align: center;">
|
||
<h3 style="font-size: 2rem; margin-bottom: 20px; color: #00b4d8;">
|
||
让我们聊聊你的下一个项目
|
||
</h3>
|
||
|
||
<p style="font-size: 1.1rem; color: rgba(255,255,255,0.8); margin-bottom: 40px;">
|
||
无论是设计一个旅行App，打造一个民宿品牌，<br>
|
||
还是策划一场营销活动，我都愿意听听你的想法。
|
||
</p>
|
||
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px;">
|
||
<a href="mailto:pux655@163.com" class="btn-travel btn-primary" style="display: block;">
|
||
<i class="bi bi-envelope"></i> pux655@163.com
|
||
</a>
|
||
<a href="tel:15722704916" class="btn-travel btn-outline" style="display: block;">
|
||
<i class="bi bi-telephone"></i> 15722704916
|
||
</a>
|
||
</div>
|
||
|
||
<div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;">
|
||
<a href="#" style="color: #00b4d8; font-size: 28px; transition: transform 0.3s;">
|
||
<i class="bi bi-instagram"></i>
|
||
</a>
|
||
<a href="#" style="color: #07c160; font-size: 28px; transition: transform 0.3s;" title="微信">
|
||
<i class="bi bi-wechat"></i>
|
||
</a>
|
||
<a href="#" style="color: #ff6767; font-size: 28px; transition: transform 0.3s;" title="小红书">
|
||
<i class="bi bi-book-half"></i>
|
||
</a>
|
||
<a href="#" style="color: #000000; font-size: 28px; transition: transform 0.3s;" title="抖音">
|
||
<i class="bi bi-tiktok"></i>
|
||
</a>
|
||
<a href="#" style="color: #e6162d; font-size: 28px; transition: transform 0.3s;" title="微博">
|
||
<i class="bi bi-sina-weibo"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer style="text-align: center; padding: 40px 20px; background: rgba(38, 70, 83, 0.3);">
|
||
<p style="color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 10px;">
|
||
© 2024 Travel Designer · 让每一次旅行都值得被设计
|
||
</p>
|
||
</footer>
|
||
|
||
<!-- 引入ECharts背景地图 -->
|
||
<script src="echarts-background-map.js"></script>
|
||
|
||
<script>
|
||
// 页面刷新时滚动到顶部
|
||
window.onbeforeunload = function () {
|
||
window.scrollTo(0, 0);
|
||
};
|
||
|
||
// 页面加载完成时确保在顶部
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
window.scrollTo(0, 0);
|
||
});
|
||
|
||
// 加载动画
|
||
window.addEventListener('load', () => {
|
||
// 再次确保滚动到顶部
|
||
window.scrollTo(0, 0);
|
||
document.documentElement.scrollTop = 0;
|
||
document.body.scrollTop = 0;
|
||
|
||
// 模拟加载进度
|
||
const loader = document.getElementById('loader');
|
||
const progressBar = loader.querySelector('.progress-bar');
|
||
const loaderText = loader.querySelector('.loader-text h3');
|
||
|
||
// 动态加载文字
|
||
const loadingTexts = ['欢迎登机', '装载行李', '准备起飞', '即将抵达', '安全着陆'];
|
||
let textIndex = 0;
|
||
|
||
const textInterval = setInterval(() => {
|
||
textIndex = (textIndex + 1) % loadingTexts.length;
|
||
loaderText.textContent = loadingTexts[textIndex];
|
||
}, 500);
|
||
|
||
// 设置最小加载时间
|
||
const minLoadTime = 2000;
|
||
const startTime = Date.now();
|
||
|
||
// 加载完成处理
|
||
const hideLoader = () => {
|
||
const elapsedTime = Date.now() - startTime;
|
||
const remainingTime = Math.max(0, minLoadTime - elapsedTime);
|
||
|
||
setTimeout(() => {
|
||
clearInterval(textInterval);
|
||
loaderText.textContent = '安全着陆';
|
||
loader.classList.add('fade-out');
|
||
setTimeout(() => {
|
||
loader.style.display = 'none';
|
||
// 恢复页面滚动
|
||
document.documentElement.classList.remove('loading');
|
||
}, 800);
|
||
}, remainingTime);
|
||
};
|
||
|
||
// 如果页面已经加载完成，执行隐藏动画
|
||
if (document.readyState === 'complete') {
|
||
hideLoader();
|
||
} else {
|
||
// 否则等待页面完全加载
|
||
window.addEventListener('load', hideLoader);
|
||
}
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
window.addEventListener('scroll', () => {
|
||
const nav = document.querySelector('.travel-nav');
|
||
if (window.scrollY > 50) {
|
||
nav.classList.add('scrolled');
|
||
} else {
|
||
nav.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// 移动端菜单切换
|
||
const navToggle = document.getElementById('navToggle');
|
||
const navMenu = document.getElementById('navMenu');
|
||
|
||
navToggle.addEventListener('click', () => {
|
||
navToggle.classList.toggle('active');
|
||
navMenu.classList.toggle('active');
|
||
});
|
||
|
||
// 导航链接点击关闭菜单
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
navToggle.classList.remove('active');
|
||
navMenu.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
const offset = 70;
|
||
const targetPosition = target.offsetTop - offset;
|
||
window.scrollTo({
|
||
top: targetPosition,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 激活当前导航
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop - 100;
|
||
if (scrollY >= sectionTop) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href').slice(1) === current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 动画观察器
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.animationPlayState = 'running';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.journey-stop').forEach(el => {
|
||
el.style.animationPlayState = 'paused';
|
||
observer.observe(el);
|
||
});
|
||
|
||
// 社交图标悬停效果
|
||
document.querySelectorAll('a[style*="font-size: 28px"]').forEach(icon => {
|
||
icon.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-5px) scale(1.2)';
|
||
});
|
||
icon.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0) scale(1)';
|
||
});
|
||
});
|
||
|
||
// 技能手风琴交互
|
||
document.querySelectorAll('.skill-accordion-header').forEach(header => {
|
||
header.addEventListener('click', function() {
|
||
const content = this.nextElementSibling;
|
||
const isActive = this.classList.contains('active');
|
||
|
||
// 关闭所有其他手风琴
|
||
document.querySelectorAll('.skill-accordion-header').forEach(h => {
|
||
h.classList.remove('active');
|
||
h.nextElementSibling.style.display = 'none';
|
||
});
|
||
|
||
// 切换当前手风琴
|
||
if (!isActive) {
|
||
this.classList.add('active');
|
||
content.style.display = 'block';
|
||
}
|
||
});
|
||
});
|
||
|
||
// 数字统计动画
|
||
const animateNumbers = () => {
|
||
const numbers = document.querySelectorAll('.stat-number[data-count]');
|
||
|
||
numbers.forEach(number => {
|
||
const target = parseInt(number.getAttribute('data-count'));
|
||
const duration = 2000;
|
||
const step = target / (duration / 16);
|
||
let current = 0;
|
||
|
||
const updateNumber = () => {
|
||
current += step;
|
||
if (current < target) {
|
||
number.textContent = Math.floor(current).toLocaleString();
|
||
requestAnimationFrame(updateNumber);
|
||
} else {
|
||
// 格式化最终数字
|
||
if (target >= 1000000) {
|
||
number.textContent = (target / 1000000).toFixed(1) + 'M+';
|
||
} else if (target >= 1000) {
|
||
number.textContent = (target / 1000).toFixed(0) + 'K+';
|
||
} else {
|
||
number.textContent = target.toLocaleString();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 当元素进入视口时开始动画
|
||
const observer = new IntersectionObserver((entries) => {
|
||
if (entries[0].isIntersecting) {
|
||
updateNumber();
|
||
observer.disconnect();
|
||
}
|
||
});
|
||
|
||
observer.observe(number);
|
||
});
|
||
};
|
||
|
||
animateNumbers();
|
||
</script>
|
||
|
||
<!-- 项目详情模态框 -->
|
||
<div id="projectModal" class="project-modal" style="display: none;">
|
||
<div class="modal-overlay" onclick="closeProjectModal()"></div>
|
||
<div class="modal-content">
|
||
<button class="modal-close" onclick="closeProjectModal()">
|
||
<i class="bi bi-x-lg"></i>
|
||
</button>
|
||
<div id="modalBody"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* 关于我板块现代化设计 */
|
||
.about-card-modern {
|
||
background: linear-gradient(135deg, rgba(38, 70, 83, 0.95), rgba(38, 70, 83, 0.85));
|
||
backdrop-filter: blur(20px);
|
||
border-radius: 30px;
|
||
padding: 40px;
|
||
box-shadow:
|
||
0 20px 60px rgba(0, 0, 0, 0.3),
|
||
0 0 100px rgba(0, 180, 216, 0.1),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.about-card-modern::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(0, 180, 216, 0.1) 0%, transparent 70%);
|
||
animation: rotate 20s linear infinite;
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 顶部装饰 */
|
||
.about-header-decoration {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.decoration-line {
|
||
flex: 1;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, transparent, #00b4d8, transparent);
|
||
}
|
||
|
||
.decoration-text {
|
||
color: #00b4d8;
|
||
font-weight: 600;
|
||
letter-spacing: 3px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 内容布局 */
|
||
.about-content-wrapper {
|
||
display: flex;
|
||
gap: 40px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.about-info-section {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
/* 个人信息统一卡片 */
|
||
.personal-info-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 25px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.personal-info-card:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 15px 40px rgba(0, 180, 216, 0.3);
|
||
}
|
||
|
||
.info-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid rgba(0, 180, 216, 0.3);
|
||
}
|
||
|
||
.info-card-header i {
|
||
font-size: 1.5rem;
|
||
color: #00b4d8;
|
||
}
|
||
|
||
.info-card-header span {
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.info-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.info-item:hover {
|
||
padding-left: 10px;
|
||
background: linear-gradient(90deg, rgba(0, 180, 216, 0.1) 0%, transparent 100%);
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 0.95rem;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 1rem;
|
||
color: rgba(255, 255, 255, 0.95);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-divider {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||
margin: 0;
|
||
}
|
||
|
||
/* 技能标签 */
|
||
.skills-section {
|
||
background: rgba(0, 180, 216, 0.05);
|
||
border-radius: 20px;
|
||
padding: 25px;
|
||
border: 1px solid rgba(0, 180, 216, 0.2);
|
||
}
|
||
|
||
.section-title {
|
||
color: #00b4d8;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.skill-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.skill-tag {
|
||
padding: 8px 16px;
|
||
background: linear-gradient(135deg, rgba(0, 180, 216, 0.2), rgba(144, 224, 239, 0.1));
|
||
border: 1px solid rgba(0, 180, 216, 0.3);
|
||
border-radius: 20px;
|
||
color: #90e0ef;
|
||
font-size: 0.9rem;
|
||
transition: all 0.3s ease;
|
||
cursor: default;
|
||
}
|
||
|
||
.skill-tag:hover {
|
||
background: linear-gradient(135deg, rgba(0, 180, 216, 0.3), rgba(144, 224, 239, 0.2));
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 180, 216, 0.2);
|
||
}
|
||
|
||
|
||
/* 右侧头像区域 */
|
||
.profile-photo-section {
|
||
width: 380px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 25px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.photo-frame-modern {
|
||
position: relative;
|
||
width: 280px;
|
||
height: 280px;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #00b4d8, #0090a8);
|
||
padding: 3px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.photo-frame-modern .profile-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: center 20%;
|
||
border-radius: 27px;
|
||
image-rendering: -webkit-optimize-contrast;
|
||
image-rendering: optimizeQuality;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
will-change: transform;
|
||
}
|
||
|
||
.photo-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, transparent 60%, rgba(0, 180, 216, 0.2));
|
||
pointer-events: none;
|
||
}
|
||
|
||
.photo-info {
|
||
text-align: center;
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 1.8rem;
|
||
color: #fff;
|
||
margin: 0 0 5px 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.profile-title {
|
||
color: #00b4d8;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
|
||
.motto-card {
|
||
background: linear-gradient(135deg, rgba(144, 224, 239, 0.1), rgba(0, 180, 216, 0.1));
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
border: 1px solid rgba(0, 180, 216, 0.2);
|
||
}
|
||
|
||
.motto-quotes {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.motto-quotes .quote-left {
|
||
position: absolute;
|
||
left: 0;
|
||
top: -5px;
|
||
color: #00b4d8;
|
||
font-size: 1.2rem;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.motto-quotes .quote-right {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: -5px;
|
||
color: #00b4d8;
|
||
font-size: 1.2rem;
|
||
opacity: 0.6;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.motto-card p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
margin: 0 30px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1024px) {
|
||
.about-content-wrapper {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.profile-photo-section {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.about-card-modern {
|
||
padding: 25px;
|
||
}
|
||
|
||
.personal-info-card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.info-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
|
||
.photo-frame-modern {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
}
|
||
|
||
/* 原有的头像框样式（已被替换） */
|
||
.profile-photo-container {
|
||
width: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.photo-frame {
|
||
position: relative;
|
||
width: 250px;
|
||
height: 250px;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #00b4d8, #0090a8);
|
||
padding: 4px;
|
||
box-shadow:
|
||
0 20px 40px rgba(0, 180, 216, 0.3),
|
||
0 0 60px rgba(0, 180, 216, 0.1),
|
||
inset 0 0 20px rgba(255, 255, 255, 0.1);
|
||
animation: floatPhoto 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes floatPhoto {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
25% { transform: translateY(-10px) rotate(1deg); }
|
||
75% { transform: translateY(-5px) rotate(-1deg); }
|
||
}
|
||
|
||
.profile-photo {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 26px;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
|
||
.photo-frame:hover .profile-photo {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.photo-border {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 30px;
|
||
background: linear-gradient(135deg,
|
||
transparent 30%,
|
||
rgba(255, 255, 255, 0.1) 50%,
|
||
transparent 70%);
|
||
animation: shimmerBorder 3s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes shimmerBorder {
|
||
0% { transform: translateX(-100%) translateY(-100%); }
|
||
100% { transform: translateX(100%) translateY(100%); }
|
||
}
|
||
|
||
.photo-decoration {
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.decoration-tag {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
background: linear-gradient(135deg, rgba(0, 180, 216, 0.2), rgba(255, 107, 53, 0.2));
|
||
border: 1px solid rgba(0, 180, 216, 0.5);
|
||
border-radius: 20px;
|
||
color: #00b4d8;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 1px;
|
||
backdrop-filter: blur(10px);
|
||
animation: pulse 2s ease infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 0.8;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
.decoration-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.decoration-dots span {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #00b4d8, #90e0ef);
|
||
animation: dotPulse 1.5s ease infinite;
|
||
}
|
||
|
||
.decoration-dots span:nth-child(1) { animation-delay: 0s; }
|
||
.decoration-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||
.decoration-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||
|
||
@keyframes dotPulse {
|
||
0%, 80%, 100% {
|
||
transform: scale(0.8);
|
||
opacity: 0.5;
|
||
}
|
||
40% {
|
||
transform: scale(1.2);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 968px) {
|
||
.about-content-wrapper {
|
||
flex-direction: column !important;
|
||
align-items: center;
|
||
}
|
||
|
||
.profile-photo-container {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.photo-frame {
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
|
||
/* 项目分类导航栏样式 */
|
||
.project-category-nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
padding: 15px;
|
||
background: rgba(38, 70, 83, 0.3);
|
||
border-radius: 50px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.category-tab {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 25px;
|
||
background: transparent;
|
||
border: 2px solid transparent;
|
||
border-radius: 25px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.category-tab i {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.category-tab:hover {
|
||
color: #00b4d8;
|
||
background: rgba(0, 180, 216, 0.1);
|
||
}
|
||
|
||
.category-tab.active {
|
||
color: #fff;
|
||
background: linear-gradient(135deg, #00b4d8, #0090a8);
|
||
border-color: transparent;
|
||
box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
|
||
}
|
||
|
||
.category-tab.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 项目隐藏/显示动画 */
|
||
.travel-project {
|
||
transition: all 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
.travel-project.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.travel-project.fade-out {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.travel-project.fade-in {
|
||
animation: fadeIn 0.5s ease forwards;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px) scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.project-category-nav {
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.category-tab {
|
||
padding: 10px 20px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.category-tab span {
|
||
display: none;
|
||
}
|
||
|
||
.category-tab i {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
|
||
/* 项目卡片元信息样式 */
|
||
.project-meta {
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.project-meta .meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.project-meta .meta-item i {
|
||
color: #00b4d8;
|
||
font-size: 0.9rem;
|
||
width: 16px;
|
||
}
|
||
|
||
.project-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
.modal-content {
|
||
position: relative;
|
||
background: linear-gradient(135deg, rgba(10, 14, 39, 0.98) 0%, rgba(38, 70, 83, 0.98) 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 20px;
|
||
max-width: 1200px;
|
||
width: 95%;
|
||
max-height: 85vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
background: rgba(255, 67, 54, 0.8);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.project-detail {
|
||
padding: 40px;
|
||
}
|
||
|
||
.project-detail h2 {
|
||
color: #00b4d8;
|
||
font-size: 2rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.project-detail .meta-info {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.project-detail .meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.project-detail .meta-item i {
|
||
color: #52b788;
|
||
}
|
||
|
||
.project-detail .description {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.8;
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.process-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.process-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.process-card:hover {
|
||
transform: translateY(-5px);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-color: #00b4d8;
|
||
}
|
||
|
||
.process-card h4 {
|
||
color: #00b4d8;
|
||
margin-bottom: 10px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.process-card p {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.process-image {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.modal-content {
|
||
margin: 20px;
|
||
max-height: 90vh;
|
||
}
|
||
|
||
.project-detail {
|
||
padding: 20px;
|
||
}
|
||
|
||
.process-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* 新的弹窗样式 */
|
||
.modal-header {
|
||
padding: 25px 30px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.modal-header h2 {
|
||
color: #fff;
|
||
font-size: 1.8rem;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 横向导航栏样式 */
|
||
.process-nav {
|
||
display: flex;
|
||
gap: 0;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
overflow-x: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||
}
|
||
|
||
.process-nav::-webkit-scrollbar {
|
||
height: 6px;
|
||
}
|
||
|
||
.process-nav::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.process-nav::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.process-nav-item {
|
||
padding: 15px 25px;
|
||
background: none;
|
||
border: none;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 0.95rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
min-width: 150px;
|
||
text-align: center;
|
||
}
|
||
|
||
.process-nav-item:hover {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.process-nav-item.active {
|
||
color: #00b4d8;
|
||
background: rgba(0, 180, 216, 0.1);
|
||
}
|
||
|
||
.process-nav-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, transparent, #00b4d8, transparent);
|
||
}
|
||
|
||
/* 流程内容区域 */
|
||
.process-content-area {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 30px;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.process-content-area::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.process-content {
|
||
display: none;
|
||
}
|
||
|
||
.process-content.active {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30px;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.process-image-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.process-image-section img {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
height: 350px;
|
||
object-fit: contain;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
background: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
/* 特殊处理森林湿地项目的流程四、五图片 */
|
||
.process-image-section img[src*="流程四：用户数据监测与运营"],
|
||
.process-image-section img[src*="流程五：制定预算计划与阶段目标"] {
|
||
height: auto;
|
||
max-height: 350px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.process-detail-section {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.process-detail-section h3 {
|
||
color: #00b4d8;
|
||
font-size: 1.4rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.process-overview {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-left: 3px solid #00b4d8;
|
||
padding: 15px 20px;
|
||
margin-bottom: 25px;
|
||
border-radius: 0 10px 10px 0;
|
||
}
|
||
|
||
.process-overview h4 {
|
||
color: #fff;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.process-overview p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.work-content {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.work-content h4 {
|
||
color: #fff;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.work-content ol {
|
||
padding-left: 20px;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.work-content li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.work-content li strong {
|
||
color: #00b4d8;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 968px) {
|
||
.projects-grid {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.process-content.active {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.process-image-section {
|
||
max-height: 300px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-content {
|
||
max-width: 100%;
|
||
width: 100%;
|
||
border-radius: 0;
|
||
height: 100vh;
|
||
max-height: 100vh;
|
||
}
|
||
|
||
.process-nav-item {
|
||
min-width: 120px;
|
||
padding: 12px 15px;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 项目数据
|
||
const projectData = {
|
||
minsu: {
|
||
title: '舟山某民宿180天提升入住率项目',
|
||
time: '2023.5~2024.9',
|
||
role: '民宿运营助理',
|
||
company: 'xxx文旅管理有限公司',
|
||
description: '随着舟山旅游业的发展，区域内民宿市场竞争日益激烈，入住率和复购率成为衡量运营成效的关键指标。本项目以舟山某老城区小型民宿为试点，目标是在180天内提升整体入住率40%，并通过优化客房体验、OTA运营、社群直播营销、会员体系建设与数据复盘，打造出可复制的提升模式。',
|
||
processes: [
|
||
{
|
||
title: '优化客房入住体验',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理_流程一：优化客房入住体验.jpg',
|
||
overview: '围绕"入住前—入住中—入住后"的全链路体验，参与用户需求调研、房间环境优化与使用引导上线；通过问题房型巡检与反馈闭环，提升舒适度与好评度。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>用户需求调研与资料上传执行：</strong>在预订前通过短信/企微推送问卷，入住后张贴二维码引导上传照片/视频；负责汇总功能与服务偏好清单，反馈至改造与软装方案。</li>
|
||
<li><strong>噪音与遮光优化落地：</strong>协助更换高遮光窗帘与门缝密封条，使用分贝计记录改造前后数据（平均下降约8dB）；更新"问题房型定位表"，跟进整改直至复测达标。</li>
|
||
<li><strong>入住引导资料制作与上线：</strong>配合制作含动图的电子操作卡片（Wi-Fi、门锁等），完成多机型扫码与跳转测试；上线后一周统计扫码率与常见问题，形成优化清单。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '内容营销与平台流量获取策略',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理流程二：内容营销与平台流量获取策略.jpg',
|
||
overview: '围绕"种草—引流—成交"闭环，协助短视频与图文内容生产、KOC对接与发布节奏管理；将优质内容反哺OTA详情页，提升曝光与转化效率。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>抖音短视频发布执行：</strong>按周计划协助完成脚本、拍摄与剪辑，上线"本地隐藏民宿"系列每周3条；跟踪完播率/评论等指标，累计播放量突破42万+。</li>
|
||
<li><strong>小红书博主合作落地：</strong>对接5位本地生活类博主，提供拍摄清单与素材包，跟进审稿与发布时间；整理笔记数据，带来约310单团购转化。</li>
|
||
<li><strong>UGC共创与素材管理：</strong>在前台与房内张贴投稿指引，征集访谈/Vlog并完成授权；建立素材库打标签，用于二次剪辑与多平台分发与投放。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: 'OTA渠道运营与价格调整',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理流程三：OTA渠道运营与价格调整.jpg',
|
||
overview: '在OTA平台运营环节，主要参与价格监控、库存检查和促销活动排期，确保房源在各大平台的数据一致，并提升房源曝光率与销售转化。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>智能调价系统跟进：</strong>协助查看并记录自动调价结果，检查房价是否符合市场与节假日预期，发现异常及时反馈。</li>
|
||
<li><strong>房态与价格复核：</strong>每天早晚两次对OTA平台与自营小程序的房态、价格进行比对，确认无错价与超售问题。</li>
|
||
<li><strong>节假日促销执行：</strong>配合完成节假日促销日历的整理，协助设置三阶段折扣，确保房源在高峰期的优惠信息正常上线。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '会员体系建设',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理流程四：会员体系建设.jpg',
|
||
overview: '在会员体系搭建环节，协助设计会员权益、推送消息和整理合作资源，帮助形成用户注册、活跃和复购的完整路径。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>会员权益梳理：</strong>协助设计三级会员权益，包括礼券、延迟退房和专属客服等，整理成对比表方便后续使用。</li>
|
||
<li><strong>自动化消息测试：</strong>协助完成入住提醒、生日祝福和积分提醒的推送测试，确认消息格式和触达效果。</li>
|
||
<li><strong>周边商家合作：</strong>参与整理本地咖啡馆、餐厅的合作优惠方案，协助上线到会员专属活动中。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '社群运营与直播转化',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理流程五：社群运营与直播转化.png',
|
||
overview: '通过企业微信和直播工具，参与社群活跃度维护、固定直播执行和抢购活动设置，帮助提升用户互动和下单转化率。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>建群与日常维护：</strong>协助在用户入住后邀请进群，并记录社群活跃度，整理日历推送节奏。</li>
|
||
<li><strong>固定直播执行：</strong>配合完成每周二的直播准备，包括脚本整理、房源展示安排和互动引导。</li>
|
||
<li><strong>限时抢购活动：</strong>参与直播间抢购活动设置，核对库存数量，确保房源限时秒杀环节顺利进行。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '复盘和品牌联动',
|
||
image: 'public/舟山某民宿180天提升入住率项目/项目经营管理流程六：复盘和品牌联动.png',
|
||
overview: '在项目收尾阶段，参与运营数据复盘、房型表现分析和品牌活动执行，帮助团队总结经验并扩大民宿品牌影响力。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>数据看板更新：</strong>协助收集每日入住率、房型销售等数据，并整理成可视化表格，定时推送至团队群。</li>
|
||
<li><strong>房型表现评估：</strong>参与低动销房型清单的整理，对比订单与评价，提出需要优化的房型类别。</li>
|
||
<li><strong>品牌活动支持：</strong>配合完成插画师联名明信片和本地摄影协会活动的执行，收集用户反馈和曝光数据。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
},
|
||
guzi: {
|
||
title: '谷子店开店与经营管理',
|
||
time: '2023.5~2024.9',
|
||
role: '二次元周边选品专员',
|
||
company: 'xxx文旅管理有限公司',
|
||
description: '随着二次元产业的快速发展，Z世代用户对正版IP周边的消费需求持续增长。本项目以郑州热门商圈为试点，目标是在开业后6个月内实现月均坪效突破7,000元/㎡，通过正版授权核验、SKU结构优化、盲盒合规经营、小程序私域运营与主题活动策划，构建一体化经营模式。',
|
||
processes: [
|
||
{
|
||
title: '战略定位与合规框架',
|
||
image: 'public/谷子店开店与经营管理/二次元店流程一：战略定位与合规框架搭建.jpg',
|
||
overview: '在项目初期协助进行合规资料收集与整理，熟悉正版授权与盲盒规范要求，参与搭建店铺经营的合规基础，为后续商品上架与选品流程提供保障。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>授权资料整理：</strong>参与收集正版IP授权书与合同条款，建立授权证据包，辅助检查品类与授权范围的合规性。</li>
|
||
<li><strong>盲盒规范执行：</strong>整理盲盒概率、公示规则与金额上限的合规材料，协助检查展示与后台记录，减少合规风险。</li>
|
||
<li><strong>未保适配支持：</strong>协助完成会员注册分级、家长监护入口等未成年人保护措施，熟悉线上小程序相关规范。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '选址评估与空间设计',
|
||
image: 'public/谷子店开店与经营管理/二次元流程二：选址评估与空间动线设计.png',
|
||
overview: '在门店落地过程中，协助收集商圈人流与客群数据，参与动线演练与陈列模拟，帮助团队优化用户进店体验。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>商圈信息收集：</strong>协助整理商圈人流量、目标客群画像及租金对比数据，为选址决策提供基础资料。</li>
|
||
<li><strong>动线与陈列演练：</strong>参与导购动线模拟及货架AB测试，协助检查盲盒区与收银区的布局合理性。</li>
|
||
<li><strong>体验优化支持：</strong>在开业前协助完成店内拥挤模拟和安全检查，配合完成问题清单与整改。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '选品结构与定价毛利',
|
||
image: 'public/谷子店开店与经营管理/二次元流程三：选品结构与定价毛利.png',
|
||
overview: '在商品筹备环节中，参与收集热门IP的市场反馈与价格区间，协助整理SKU结构和毛利数据，支持团队优化商品组合。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>SKU结构整理：</strong>协助建立低/中/高价位商品清单，按IP热度与工艺材质分类，提升结构合理性。</li>
|
||
<li><strong>定价与毛利辅助：</strong>参与整理同类商品市场价格，配合计算门店毛利率区间，支持定价与促销决策。</li>
|
||
<li><strong>滞销清单跟进：</strong>整理滞销商品及库存周转数据，参与清退与组合折扣的执行方案。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '小程序与社群私域运营',
|
||
image: 'public/谷子店开店与经营管理/二次元流程四：小程序与社群私域运营.jpg',
|
||
overview: '在私域运营环节中，协助维护小程序功能测试，参与社群内容发布与用户互动，支持会员活跃度和复购率提升。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>小程序功能测试：</strong>配合测试补款订阅、抽签登记、换卡匹配等功能，整理用户反馈并提交问题清单。</li>
|
||
<li><strong>社群运营支持：</strong>协助发布上新预告、活动信息与签到任务，整理UGC内容并输出社群周报。</li>
|
||
<li><strong>用户数据整理：</strong>参与记录进群率、复购率等指标，初步完成数据报表，为运营复盘提供支持。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '活动IP化与社交场景建设',
|
||
image: 'public/谷子店开店与经营管理/二次元流程五：活动IP化与社交场景建设.webp',
|
||
overview: '在活动执行阶段，参与主题活动的落地支持，负责活动资料整理、现场秩序引导及用户反馈收集，增强用户互动体验。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>活动筹备协助：</strong>整理节日与热门IP档期的活动计划，配合执行签到、抽签及交换会流程。</li>
|
||
<li><strong>现场执行支持：</strong>在Coser互动与快闪活动中负责签到引导、资料发放及用户互动引导。</li>
|
||
<li><strong>数据与复盘：</strong>整理活动参与数据与UGC数量，辅助输出复盘报告，为后续活动改进提供参考。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '供应链与质量控制',
|
||
image: 'public/谷子店开店与经营管理/二次元流程六：供应链与质量控制.jpg',
|
||
overview: '在供应链环节中，协助跟进到货检验与抽检记录，参与问题商品的整理与反馈，支持供应链质量管理。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>到货抽检辅助：</strong>参与执行新品首批抽检流程，整理检验记录与异常批次数据。</li>
|
||
<li><strong>标准样与留样：</strong>协助更新材质与工艺的标准样库，参与留样记录与变更文档的整理。</li>
|
||
<li><strong>售后问题反馈：</strong>配合收集顾客退换货与召回问题，整理售后数据并提交至供应商复盘环节。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
},
|
||
chunfeng: {
|
||
title: '春风450MT新品上市营销活动策划',
|
||
time: '2024.1~2024.3',
|
||
role: '活动策划助理',
|
||
company: 'xxx文旅管理有限公司',
|
||
description: '全程参与春风450MT摩托车新品上市营销活动，从前期市场调研、传播定位到方案拆解与传播矩阵设计。通过线下活动策划、线上内容传播、视觉物料输出等多维度营销策略，累计触达用户超50万+，有效提升品牌曝光度和产品转化率。',
|
||
processes: [
|
||
{
|
||
title: '制定营销总纲',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程一：制定营销总纲与传播方式.bmp',
|
||
overview: '参与前期市场调研与竞品分析，协助制定整体营销策略与传播方式，为活动执行提供方向指引。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>市场调研执行：</strong>协助收集摩托车市场数据，整理竞品车型配置与价格对比表，形成调研报告支撑产品定位决策。</li>
|
||
<li><strong>目标用户画像：</strong>参与用户访谈与问卷设计，分析骑行爱好者的年龄、收入、骑行习惯等维度，输出精准用户画像。</li>
|
||
<li><strong>营销策略制定：</strong>配合完成活动主题创意、传播节奏规划与预算分配方案，确保策略的创新性与可执行性。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '策划线下活动',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程二：策划线下活动内容.png',
|
||
overview: '协助设计新品发布会流程、试驾体验环节，参与活动现场执行，确保活动顺利进行。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>发布会流程设计：</strong>参与制定发布会议程，包括开场视频、产品讲解、骑行表演等环节，协助完成流程彩排与时间把控。</li>
|
||
<li><strong>试驾体验执行：</strong>协助规划试驾路线与安全措施，参与现场报名登记、装备发放与骑行引导，收集用户反馈数据。</li>
|
||
<li><strong>现场物料管理：</strong>负责活动物料清单整理、到场验收与摆放指导，确保品牌露出规范统一。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '搭建线上传播矩阵',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程三：搭建线上内容传播矩阵.jpg',
|
||
overview: '参与短视频脚本撰写、KOL对接与内容发布，协助搭建全渠道传播矩阵，提升线上曝光度。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>内容脚本撰写：</strong>协助完成产品测评、骑行体验等短视频脚本，确保内容符合平台调性与用户喜好。</li>
|
||
<li><strong>KOL资源对接：</strong>参与筛选摩托车领域KOL，整理合作方案与素材包，跟进内容审核与发布排期。</li>
|
||
<li><strong>数据监测分析：</strong>协助收集各平台播放量、互动率等数据，形成传播效果报告，为后续优化提供依据。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '统一视觉输出',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程四：统一视觉物料输出与传播脚本撰.jpg',
|
||
overview: '协助整理品牌VI规范，参与物料设计审核与输出管理，确保视觉形象的统一性。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>VI规范整理：</strong>协助收集品牌标准色、字体、版式等VI元素，制作使用规范手册，确保物料设计的一致性。</li>
|
||
<li><strong>物料审核把关：</strong>参与海报、展架、易拉宝等物料的设计审核，检查品牌露出是否符合规范要求。</li>
|
||
<li><strong>输出管理执行：</strong>负责物料文件归档与版本管理，协调印刷供应商，跟进制作进度与质量验收。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '预算分解与资源整合',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程五：预算分解与资源整合.jpg',
|
||
overview: '参与预算方案编制与分解，协助供应商对接与成本控制，确保资源的高效利用。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>预算方案编制：</strong>协助细化各环节预算明细，包括场地、物料、人员等费用，形成可执行的预算分配表。</li>
|
||
<li><strong>供应商对接：</strong>参与供应商询价与比价，整理合作协议与付款流程，确保服务质量与成本控制平衡。</li>
|
||
<li><strong>资源协调整合：</strong>协助协调场地方、执行团队、媒体资源等各方关系，推动项目按计划推进。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '监督执行一致性',
|
||
image: 'public/春风 450MT新品上市营销活动策划项目/商业活动策划流程六：监督执行一致性.jpeg',
|
||
overview: '跟进各环节执行进度，收集效果数据，参与复盘总结，确保活动效果达到预期目标。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>执行进度跟进：</strong>制定活动执行进度表，每日更新各环节完成情况，及时发现风险点并协调解决。</li>
|
||
<li><strong>效果数据收集：</strong>协助收集到场人数、试驾转化率、媒体曝光量等核心指标，建立数据台账供决策参考。</li>
|
||
<li><strong>复盘总结输出：</strong>参与项目复盘会议，整理活动亮点与不足，形成经验总结文档，为后续活动提供借鉴。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
},
|
||
seo: {
|
||
title: '某自驾游平台SEO/SEM全流程优化项目',
|
||
time: '2023.8~2024.2',
|
||
role: '数字营销助理',
|
||
company: 'xxx文旅管理有限公司',
|
||
description: '参与自驾游平台的SEO/SEM优化项目，通过关键词研究、网站结构优化、内容营销、社交媒体推广等策略，帮助平台自然流量提升120%，转化率提升35%。项目涵盖技术优化、内容创作、数据分析等多个维度。',
|
||
processes: [
|
||
{
|
||
title: '制定流量配合方案',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程一：制定自然流量与投放的配合方案.png',
|
||
overview: '参与SEO与SEM策略制定，协调自然流量与付费流量的配合，实现流量获取成本最优化。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>流量渠道分析：</strong>协助分析各渠道流量质量与成本，制定SEO与SEM协同策略，确定预算分配比例。</li>
|
||
<li><strong>关键词分工规划：</strong>参与制定关键词投放策略，高竞争词用SEM快速获量，长尾词通过SEO降低成本。</li>
|
||
<li><strong>着陆页优化：</strong>协助设计不同流量来源的着陆页，提升页面相关性与转化率，降低跳出率。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '整理关键词库',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程二：整理旅游行业关键词库.jpg',
|
||
overview: '收集旅游行业高频词汇，建立分类关键词库，优化长尾词策略，提升搜索覆盖面。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>行业词汇收集：</strong>通过工具收集自驾游相关搜索词，整理目的地、路线、攻略等分类词库，月均新增500+关键词。</li>
|
||
<li><strong>竞品词汇分析：</strong>分析竞品网站关键词布局，挖掘高价值空白词汇，形成差异化关键词策略。</li>
|
||
<li><strong>长尾词挖掘：</strong>利用搜索下拉框、相关搜索等渠道，挖掘用户真实搜索意图，布局低竞争高转化长尾词。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '优化网站结构',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程三：优化网站结构和加载速度.jpeg',
|
||
overview: '参与网站架构调整，优化页面加载速度，提升用户体验和搜索引擎友好度。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>站点结构优化：</strong>协助调整URL结构与导航层级，建立清晰的站点地图，提升爬虫抓取效率。</li>
|
||
<li><strong>页面速度优化：</strong>参与图片压缩、代码精简、CDN部署等优化工作，页面加载时间降低40%。</li>
|
||
<li><strong>移动端适配：</strong>协助完成响应式设计改造，优化移动端用户体验，移动端跳出率下降25%。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '丰富网站内容',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程四：丰富网站内容并鼓励用户发帖.jpeg',
|
||
overview: '协助创作SEO友好内容，建立UGC激励机制，提升内容质量与更新频率。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>内容创作执行：</strong>每周产出3-5篇自驾游攻略文章，融入目标关键词，保持内容原创性与实用性。</li>
|
||
<li><strong>UGC激励设计：</strong>参与设计用户发帖积分体系，举办游记征文活动，月均新增UGC内容200+篇。</li>
|
||
<li><strong>内容优化更新：</strong>定期更新热门内容，添加最新信息与内链，提升页面权重与用户停留时长。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '社交媒体推广',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程五：社交媒体推广.jpg',
|
||
overview: '参与社交媒体运营，建立外链体系，提升品牌曝光度与网站权重。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>社媒账号运营：</strong>管理微博、小红书、抖音等平台账号，发布自驾游内容，引流至官网，月均引流1万+。</li>
|
||
<li><strong>KOL合作推广：</strong>对接旅游类KOL进行内容合作，获取高质量外链，提升域名权重。</li>
|
||
<li><strong>社群营销执行：</strong>建立自驾游爱好者社群，定期分享优质内容，培养种子用户，提升品牌忠诚度。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '数据监测与运营',
|
||
image: 'public/某自驾游平台SEO:SEM全流程优化项目/seo流程六：数据监测与运营.jpeg',
|
||
overview: '建立数据监测体系，定期分析流量来源，持续优化SEO/SEM策略。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>数据监测搭建：</strong>配置Google Analytics、百度统计等工具，建立流量、排名、转化等核心指标监测体系。</li>
|
||
<li><strong>效果分析报告：</strong>每周输出SEO/SEM效果报告，分析流量来源、用户行为、转化路径，发现优化机会。</li>
|
||
<li><strong>策略迭代优化：</strong>根据数据反馈调整关键词策略、内容方向、投放预算，实现ROI持续提升。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
},
|
||
wetland: {
|
||
title: '某地森林湿地自然景区多平台新媒体运营方案',
|
||
time: '2024.3~2024.12',
|
||
role: '新媒体运营专员',
|
||
company: 'xxx文旅管理有限公司',
|
||
description: '随着人们对于自然生态旅游的向往与追求不断增加，某地森林湿地自然景区迎来了新的发展机遇，但同时也面临着周边众多景区的竞争挑战。本项目以该森林湿地自然景区为运营主体，目标是在120天内，通过构建全方位、多平台的新媒体运营体系，提升景区的线上曝光度50%，增加游客数量30%，并打造良好的景区品牌形象。利用新媒体平台的互动功能，开展线上活动、话题挑战等，增强游客与景区之间的互动性，提升游客的参与感与忠诚度。建立数据监测与分析机制，实时跟踪各平台的运营数据，根据数据反馈及时调整运营策略，实现精准营销与高效传播，最终形成一套可复制、可持续的森林湿地自然景区新媒体运营模式。',
|
||
processes: [
|
||
{
|
||
title: '搭建新媒体平台矩阵',
|
||
image: 'public/某地森林湿地自然景区多平台新媒体运营方案/流程一：搭建新媒体平台矩阵.jpeg',
|
||
overview: '在项目初期参与多平台账号的搭建与基础运营，协助完成平台定位与功能配置，确保各平台在视觉风格与运营机制上的一致性，为后续内容与数据分析奠定基础。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>多平台账号搭建与管理：</strong>协助完成微信公众号、抖音、小红书及微博的账号注册与基础信息完善，参与设计统一生态调性的视觉风格，确保品牌调性一致。</li>
|
||
<li><strong>功能配置与测试：</strong>参与微信小程序内门票预订、活动预约等功能上线前测试，收集体验问题并反馈给开发团队，保证功能稳定运行。</li>
|
||
<li><strong>平台运营机制协助：</strong>配合制定内容发布流程及问题响应机制，熟悉新媒体后台基础操作，为后续日常运营积累经验。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '新媒体内容策划与制作',
|
||
image: 'public/某地森林湿地自然景区多平台新媒体运营方案/流程二：新媒体策划与制作.jpeg',
|
||
overview: '在内容创作阶段参与策划与素材整理，围绕生态科普、节庆活动与游客体验，协助建设多元化内容体系，并支持团队完成短视频与图文内容的制作。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>内容日历制定：</strong>协助整理节庆、动植物主题等素材，参与制定月度内容推送计划，确保不同平台内容更新有节奏。</li>
|
||
<li><strong>专题内容辅助制作：</strong>协助完成"湿地小精灵""摄影挑战"等专题短视频及图文内容的素材收集与初步排版，提升内容吸引力。</li>
|
||
<li><strong>UGC内容整理：</strong>参与整理游客投稿与精选评论，为"游客之声"等栏目提供素材，增强粉丝互动氛围。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '互动活动运营与用户参与提升',
|
||
image: 'public/某地森林湿地自然景区多平台新媒体运营方案/流程三：互动活动运营与用户参与提升.jpeg',
|
||
overview: '在活动运营环节中，协助团队策划和执行线上线下互动活动，负责具体执行、素材收集与数据跟踪，推动用户活跃度和参与感的提升。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>线上活动执行：</strong>协助组织答题互动、投票抽奖等活动，负责收集用户反馈与参与数据，支持活动后期复盘。</li>
|
||
<li><strong>达人及合作资源对接：</strong>参与联络小红书、抖音达人探店拍摄，协助安排脚本与现场拍摄需求，提升活动传播度。</li>
|
||
<li><strong>线下活动协助：</strong>配合执行摄影体验营与亲子活动的现场支持，负责签到、资料分发及用户互动引导。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '用户数据监测与运营',
|
||
image: 'public/某地森林湿地自然景区多平台新媒体运营方案/流程四：用户数据监测与运营.jpeg',
|
||
overview: '在项目的运营阶段，配合完成多平台数据采集与分析，参与用户画像与兴趣点整理，支持团队优化内容策略并提升整体运营效果。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>数据采集与整理：</strong>协助每日汇总微信公众号阅读量、抖音完播率等核心指标，初步整理成报表。</li>
|
||
<li><strong>用户兴趣分析辅助：</strong>参与分组统计粉丝地域、互动习惯等标签，为团队精准内容推送提供数据参考。</li>
|
||
<li><strong>内容优化复盘：</strong>整理高互动内容案例，参与讨论优化发布时间与传播形式，总结经验供后续使用。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '制定预算计划与阶段目标',
|
||
image: 'public/某地森林湿地自然景区多平台新媒体运营方案/流程五：制定预算计划与阶段目标.jpeg',
|
||
overview: '在推广资源整合与目标制定阶段，协助执行与KOL、旅行社及周边商家的合作推广，跟进数据反馈，支持团队完成阶段性目标评估。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>合作推广辅助：</strong>协助执行与旅行社、商家联合推出的套餐及活动，负责整理宣传素材并跟进上线效果。</li>
|
||
<li><strong>KOL合作执行支持：</strong>参与知名旅游博主探访行程安排，整理素材用于二次传播，提高景区曝光率。</li>
|
||
<li><strong>阶段性目标跟进：</strong>协助统计季度增长数据，与团队共同对比实际与目标差距，参与提出改进建议。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
},
|
||
exhibition: {
|
||
title: '2024 合肥国际 3C 电子产业博览会策划项目',
|
||
time: '2024.03~2024.12',
|
||
role: '商业会展执行专员',
|
||
company: '荣益诚文化发展（上海）有限公司',
|
||
description: '本项目立足合肥电子信息产业与长三角消费市场，聚焦3C终端全生态链展示，打造覆盖"家庭影音、移动影像、智能办公、游戏外设、健康穿戴、户外电子"六大场景的沉浸式体验。项目核心在于B端商务撮合与C端体验运营的双线并行，通过主题统一、招商筛选、票务管控、展馆动线和数据复盘形成标准化执行路径。本人以会展执行专员身份参与布场落地、供应商协调、票务入场管理及展后数据支持，确保展会运营高效、安全、可追溯，为展会的顺利举办提供了有力支撑。',
|
||
processes: [
|
||
{
|
||
title: '展区主题布置',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程一：展区主题布置.jpg',
|
||
overview: '在展会主题确立后，重点执行层面是将策展主线转化为现场布展与观众可感知的内容。我主要参与展区分区标识张贴、导视物料摆放、主视觉落地检查，确保六大场景分区与统一风格得到完整还原。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>主视觉检查：</strong>协助设计组在场馆完成主KV延展物料（门票、导视牌、展刊等）的张贴与安装，对比设计稿确认色彩、比例与关键信息无偏差。</li>
|
||
<li><strong>分区标识安装：</strong>按照"影音—移动—办公—健康—游戏—户外"六大场景顺序，完成区域标识悬挂与场景导览板布设，确保观众能直观感知分区。</li>
|
||
<li><strong>导视系统排查：</strong>逐一检查入口、主舞台、展区转角的导视牌和地贴箭头，确保方向统一、位置明显，避免观众迷路或逆行。</li>
|
||
<li><strong>氛围营造执行：</strong>协助布置入场口与舞台背景的灯箱与屏显，保证主题语、时间、地点等信息统一曝光。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '参展资料整理',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程二：参展资料整理.jpg',
|
||
overview: '本流程聚焦参展商与采购商的匹配准备，我在执行层主要负责资料收集、白名单落实和对接资料整理。通过协助建立买家需求表、制作配对桌卡与洽谈指南，帮助招商团队提高现场撮合效率。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>参展范围确认：</strong>整理参展商提交的品类清单，核查其是否符合手机、平板、PC、XR、可穿戴等白名单范围，并提交异常情况给招商经理复核。</li>
|
||
<li><strong>买家需求表收集：</strong>协助向目标买家群体（电商平台、连锁渠道、区域代理）发放采购需求模板，汇总品牌偏好、价位带和交期需求，为前期配对提供数据基础。</li>
|
||
<li><strong>洽谈桌卡制作：</strong>根据排程表打印桌卡、洽谈时间指引与位置编号，并在现场摆放，确保买卖双方能按时找到对应位置。</li>
|
||
<li><strong>资料发放与记录：</strong>在现场发放标准化合同模板与服务承诺清单，协助记录意向单关键信息并完成电子化整理，便于后续团队复盘。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '观众入场',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程三：观众入场.jpg',
|
||
overview: '在票务与入场环节，我主要承担观众分流引导与入场秩序维护。通过实名登记核验、票务通道管理与安检提示张贴，确保B端买家与C端观众快速、安全、有序入场。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>实名验证执行：</strong>在入口区域协助核验观众身份，检查B端观众工商信息与职位名片，确保胸卡发放与入场权限匹配。</li>
|
||
<li><strong>票务分流引导：</strong>管理预登记、现场购票和问题处理三列队伍，维持排队秩序，并及时引导观众进入安检、闸机通道。</li>
|
||
<li><strong>安检提示布置：</strong>张贴并反复确认安检物品清单、道具限制说明在各入口显眼位置，避免因规则不清造成观众争议。</li>
|
||
<li><strong>数据采集支持：</strong>协助票务系统团队记录高峰时段的入场人数与弃票比例，并实时反馈给现场调度，帮助及时增开或合并通道。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '展馆动线布设与秩序管理',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程四：展馆动线布设与秩序管理.jpg',
|
||
overview: '在展馆空间搭建与运行阶段，我主要协助完成动线导视布设与现场秩序巡查，确保观众行进方向统一、热门展位不拥堵。重点任务是减少交叉点混乱、缩短排队时间，并对潜在安全隐患进行现场上报。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>导视物料布设：</strong>协助张贴动线箭头、导视牌、区域编号，逐段检查标识是否清晰可见，保证观众在转角与分流点能快速辨识方向。</li>
|
||
<li><strong>排队区域布控：</strong>在热门展位前协助布置蛇形通道与缓冲带，并及时调整排队栏杆位置，防止人群聚集堵塞主通道。</li>
|
||
<li><strong>安全巡查支援：</strong>定时巡查通道净空、消防出口和临时施工区域，发现堆物或遮挡立即报告工程负责人处理。</li>
|
||
<li><strong>观众引导执行：</strong>在主舞台、互动体验区等高峰点位，协助现场工作人员进行分批放行和方向指引，减少局部拥挤。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '新品活动发布',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程五：新品活动发布.jpg',
|
||
overview: '在品牌新品发布与论坛活动中，我主要参与议程物料准备、现场秩序维护与观众引导。通过协助布置舞台、准备座签与资料，保障发布现场有序；同时在嘉宾入场、观众换场环节执行秩序引导。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>议程物料准备：</strong>协助放置座签、议程单、嘉宾资料包，检查投影屏幕、麦克风等基础设施是否到位。</li>
|
||
<li><strong>嘉宾通道管理：</strong>在嘉宾入场时维护专用通道秩序，防止无关观众跟随进入，确保发布活动的流畅性。</li>
|
||
<li><strong>观众换场引导：</strong>在论坛与发布活动交替环节，引导观众有序离场与入场，避免不同人流在门口交叉拥堵。</li>
|
||
<li><strong>现场秩序巡查：</strong>对舞台前排、媒体区、走动观众进行观察，及时发现站立过多或聚集情况，并反馈给现场主管处理。</li>
|
||
</ol>
|
||
`
|
||
},
|
||
{
|
||
title: '展后数据复盘',
|
||
image: 'public/2024 合肥国际 3C 电子产业博览会策划项目/流程六：展后数据复盘.jpg',
|
||
overview: '展会结束后，我主要参与展后数据整理与复盘报告的资料收集。通过汇总采购意向单、票务系统数据与观众行为反馈，协助形成结构化文档，为团队后续迭代提供依据。',
|
||
content: `
|
||
<ol>
|
||
<li><strong>意向单整理：</strong>收集现场配对会与展商洽谈的意向单，核对企业名称、联系人和需求要点，并录入统一表格。</li>
|
||
<li><strong>票务数据归档：</strong>协助导出票务系统中的进场人数、弃票率和高峰时段数据，形成标准化Excel报表。</li>
|
||
<li><strong>观众反馈汇总：</strong>收集线上问卷与现场问询表，按"体验、动线、安检、服务"四个维度分类整理，形成基础反馈数据。</li>
|
||
<li><strong>复盘文档支持：</strong>参与撰写复盘会议纪要，将问题清单、责任部门和改进建议按版本归档，确保团队内部共享透明。</li>
|
||
</ol>
|
||
`
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
// 项目分类切换功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const categoryTabs = document.querySelectorAll('.category-tab');
|
||
const projects = document.querySelectorAll('.travel-project');
|
||
|
||
categoryTabs.forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
// 移除所有标签的激活状态
|
||
categoryTabs.forEach(t => t.classList.remove('active'));
|
||
// 添加当前标签的激活状态
|
||
this.classList.add('active');
|
||
|
||
const selectedCategory = this.getAttribute('data-category');
|
||
|
||
// 筛选显示项目
|
||
projects.forEach(project => {
|
||
const projectCategory = project.getAttribute('data-category');
|
||
|
||
if (selectedCategory === 'all') {
|
||
// 显示所有项目
|
||
project.classList.remove('hidden', 'fade-out');
|
||
project.classList.add('fade-in');
|
||
} else if (projectCategory === selectedCategory) {
|
||
// 显示匹配分类的项目
|
||
project.classList.remove('hidden', 'fade-out');
|
||
project.classList.add('fade-in');
|
||
} else {
|
||
// 隐藏不匹配的项目
|
||
project.classList.add('fade-out');
|
||
setTimeout(() => {
|
||
project.classList.add('hidden');
|
||
}, 300);
|
||
}
|
||
});
|
||
|
||
// 清除动画类
|
||
setTimeout(() => {
|
||
projects.forEach(project => {
|
||
project.classList.remove('fade-in');
|
||
});
|
||
}, 500);
|
||
});
|
||
});
|
||
});
|
||
|
||
// 打开项目详情弹窗
|
||
function openProjectModal(projectId) {
|
||
const project = projectData[projectId];
|
||
if (!project) return;
|
||
|
||
const modalBody = document.getElementById('modalBody');
|
||
|
||
// 创建导航栏HTML
|
||
let navHTML = '<div class="process-nav">';
|
||
project.processes.forEach((process, index) => {
|
||
navHTML += `
|
||
<button class="process-nav-item ${index === 0 ? 'active' : ''}"
|
||
onclick="switchProcess('${projectId}', ${index})">
|
||
${process.title}
|
||
</button>
|
||
`;
|
||
});
|
||
navHTML += '</div>';
|
||
|
||
// 创建内容区域HTML
|
||
let contentHTML = '<div class="process-content-area">';
|
||
project.processes.forEach((process, index) => {
|
||
const workContent = typeof process.desc === 'string'
|
||
? `<p>${process.desc}</p>`
|
||
: (process.content || `<p>${process.desc || '详细流程内容'}</p>`);
|
||
|
||
contentHTML += `
|
||
<div class="process-content ${index === 0 ? 'active' : ''}" id="process-${index}">
|
||
<div class="process-image-section">
|
||
<img src="${process.image}" alt="${process.title}">
|
||
</div>
|
||
<div class="process-detail-section">
|
||
<h3>${process.title}</h3>
|
||
${process.overview ? `
|
||
<div class="process-overview">
|
||
<h4>流程概述</h4>
|
||
<p>${process.overview}</p>
|
||
</div>
|
||
` : ''}
|
||
<div class="work-content">
|
||
<h4>工作内容</h4>
|
||
${workContent}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
contentHTML += '</div>';
|
||
|
||
modalBody.innerHTML = `
|
||
<div class="modal-header">
|
||
<h2>${project.title}</h2>
|
||
</div>
|
||
${navHTML}
|
||
${contentHTML}
|
||
`;
|
||
|
||
document.getElementById('projectModal').style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
// 切换流程内容
|
||
function switchProcess(projectId, processIndex) {
|
||
// 更新导航栏状态
|
||
const navItems = document.querySelectorAll('.process-nav-item');
|
||
navItems.forEach((item, index) => {
|
||
if (index === processIndex) {
|
||
item.classList.add('active');
|
||
} else {
|
||
item.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新内容显示
|
||
const contents = document.querySelectorAll('.process-content');
|
||
contents.forEach((content, index) => {
|
||
if (index === processIndex) {
|
||
content.classList.add('active');
|
||
} else {
|
||
content.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 关闭项目详情弹窗
|
||
function closeProjectModal() {
|
||
document.getElementById('projectModal').style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
// ESC键关闭弹窗
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeProjectModal();
|
||
}
|
||
});
|
||
|
||
// 绘制技能雷达图
|
||
function drawSkillRadar() {
|
||
const canvas = document.getElementById('skillRadar');
|
||
if (!canvas) return;
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
const centerX = canvas.width / 2;
|
||
const centerY = canvas.height / 2;
|
||
const radius = Math.min(canvas.width, canvas.height) * 0.35; // 动态调整半径，留出更多空间给标签
|
||
|
||
// 技能数据
|
||
const skills = [
|
||
{ name: '活动策划', value: 85 },
|
||
{ name: '内容创作', value: 75 },
|
||
{ name: '数据分析', value: 70 },
|
||
{ name: '新媒体运营', value: 80 },
|
||
{ name: '视觉设计', value: 65 },
|
||
{ name: 'AIGC工具', value: 75 }
|
||
];
|
||
|
||
const angleStep = (Math.PI * 2) / skills.length;
|
||
|
||
// 清空画布
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// 绘制背景网格
|
||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||
ctx.lineWidth = 1;
|
||
|
||
// 绘制同心圆
|
||
for (let i = 1; i <= 5; i++) {
|
||
ctx.beginPath();
|
||
const r = (radius / 5) * i;
|
||
for (let j = 0; j < skills.length; j++) {
|
||
const angle = j * angleStep - Math.PI / 2;
|
||
const x = centerX + r * Math.cos(angle);
|
||
const y = centerY + r * Math.sin(angle);
|
||
if (j === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
}
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
}
|
||
|
||
// 绘制轴线
|
||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
|
||
for (let i = 0; i < skills.length; i++) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(centerX, centerY);
|
||
const angle = i * angleStep - Math.PI / 2;
|
||
const x = centerX + radius * Math.cos(angle);
|
||
const y = centerY + radius * Math.sin(angle);
|
||
ctx.lineTo(x, y);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// 绘制数据区域
|
||
ctx.fillStyle = 'rgba(0, 180, 216, 0.3)';
|
||
ctx.strokeStyle = '#00b4d8';
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
|
||
for (let i = 0; i < skills.length; i++) {
|
||
const angle = i * angleStep - Math.PI / 2;
|
||
const value = skills[i].value;
|
||
const r = (radius * value) / 100;
|
||
const x = centerX + r * Math.cos(angle);
|
||
const y = centerY + r * Math.sin(angle);
|
||
|
||
if (i === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
}
|
||
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
|
||
// 绘制数据点
|
||
ctx.fillStyle = '#00b4d8';
|
||
for (let i = 0; i < skills.length; i++) {
|
||
const angle = i * angleStep - Math.PI / 2;
|
||
const value = skills[i].value;
|
||
const r = (radius * value) / 100;
|
||
const x = centerX + r * Math.cos(angle);
|
||
const y = centerY + r * Math.sin(angle);
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
|
||
// 绘制标签和数值
|
||
for (let i = 0; i < skills.length; i++) {
|
||
const angle = i * angleStep - Math.PI / 2;
|
||
const labelRadius = radius + 50; // 增加标签距离
|
||
const x = centerX + labelRadius * Math.cos(angle);
|
||
const y = centerY + labelRadius * Math.sin(angle);
|
||
|
||
// 根据位置调整文本对齐
|
||
ctx.save();
|
||
ctx.translate(x, y);
|
||
|
||
// 计算文本角度，使文本始终水平
|
||
if (angle > Math.PI / 2 || angle < -Math.PI / 2) {
|
||
ctx.textAlign = 'right';
|
||
} else {
|
||
ctx.textAlign = 'left';
|
||
}
|
||
|
||
if (Math.abs(angle) < 0.1) {
|
||
// 顶部
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'bottom';
|
||
} else if (Math.abs(angle - Math.PI) < 0.1 || Math.abs(angle + Math.PI) < 0.1) {
|
||
// 底部
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'top';
|
||
} else {
|
||
ctx.textBaseline = 'middle';
|
||
}
|
||
|
||
// 只绘制标签，不显示百分比
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
|
||
ctx.font = '14px Arial';
|
||
ctx.fillText(skills[i].name, 0, 0);
|
||
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后绘制雷达图
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
drawSkillRadar();
|
||
});
|
||
|
||
// 窗口大小改变时重绘
|
||
window.addEventListener('resize', function() {
|
||
drawSkillRadar();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |