2315 lines
123 KiB
Plaintext
2315 lines
123 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="finance-style.css?v=2.3">
|
||
<!-- 加载动画样式 - 已移除，样式已集成到主CSS中 -->
|
||
<!-- ECharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
|
||
<!-- GSAP动画库 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/TextPlugin.min.js"></script>
|
||
|
||
<!-- Typed.js 打字机效果 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js"></script>
|
||
|
||
<!-- Particles.js 粒子效果 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
|
||
|
||
<!-- CountUp.js 数字动画 - 使用UMD版本避免模块错误 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/countup.js@2.6.2/dist/countUp.umd.js"></script>
|
||
|
||
<!-- 防止滚动位置记忆 -->
|
||
<style>
|
||
html {
|
||
scroll-behavior: auto !important;
|
||
}
|
||
/* 移除加载时的滚动锁定 */
|
||
|
||
/* 技能标签云样式 */
|
||
.skill-bubble {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
margin: 5px;
|
||
background: rgba(37, 99, 235, 0.1);
|
||
border: 1px solid rgba(37, 99, 235, 0.3);
|
||
border-radius: 25px;
|
||
color: #2563eb;
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
animation: float 3s ease-in-out infinite;
|
||
animation-delay: calc(var(--i) * 0.3s);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.skill-bubble:nth-child(1) { --i: 0; animation-duration: 3s; }
|
||
.skill-bubble:nth-child(2) { --i: 1; animation-duration: 3.5s; }
|
||
.skill-bubble:nth-child(3) { --i: 2; animation-duration: 4s; }
|
||
.skill-bubble:nth-child(4) { --i: 3; animation-duration: 3.2s; }
|
||
.skill-bubble:nth-child(5) { --i: 4; animation-duration: 3.8s; }
|
||
.skill-bubble:nth-child(6) { --i: 5; animation-duration: 3.3s; }
|
||
.skill-bubble:nth-child(7) { --i: 6; animation-duration: 3.7s; }
|
||
.skill-bubble:nth-child(8) { --i: 7; animation-duration: 3.1s; }
|
||
.skill-bubble:nth-child(9) { --i: 8; animation-duration: 3.6s; }
|
||
.skill-bubble:nth-child(10) { --i: 9; animation-duration: 3.4s; }
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
.skill-bubble:hover {
|
||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||
color: white;
|
||
transform: scale(1.1) translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
|
||
}
|
||
|
||
.skill-bubble::before {
|
||
content: attr(data-skill);
|
||
position: absolute;
|
||
bottom: 120%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #1e293b;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
font-size: 0.8rem;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.skill-bubble:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 数据统计动画 */
|
||
.hero-stats {
|
||
animation: slideInUp 0.8s ease-out 0.5s both;
|
||
}
|
||
|
||
@keyframes slideInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-stats {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
if (history.scrollRestoration) {
|
||
history.scrollRestoration = 'manual';
|
||
}
|
||
window.scrollTo(0, 0);
|
||
// 不再添加loading类来阻止滚动
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 粒子背景 -->
|
||
<div id="particles-js"></div>
|
||
|
||
<!-- 鼠标跟随效果 -->
|
||
|
||
<!-- 加载动画 -->
|
||
<div class="page-loader" id="loader">
|
||
<div class="loader-content">
|
||
<!-- 金融图表动画 -->
|
||
<div class="finance-chart-loader">
|
||
<div class="chart-bars">
|
||
<div class="bar bar-1"></div>
|
||
<div class="bar bar-2"></div>
|
||
<div class="bar bar-3"></div>
|
||
<div class="bar bar-4"></div>
|
||
<div class="bar bar-5"></div>
|
||
</div>
|
||
<div class="trend-line"></div>
|
||
</div>
|
||
|
||
<!-- 货币符号动画 -->
|
||
<div class="currency-symbols">
|
||
<span class="symbol">$</span>
|
||
<span class="symbol">€</span>
|
||
<span class="symbol">¥</span>
|
||
<span class="symbol">£</span>
|
||
</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="finance-nav" id="navbar">
|
||
<div class="nav-container">
|
||
<a href="#" class="nav-logo">
|
||
<i class="bi bi-graph-up-arrow"></i>
|
||
<span>个人简历</span>
|
||
</a>
|
||
<ul class="nav-menu">
|
||
<li><a href="#home" class="nav-link active">首页</a></li>
|
||
<li><a href="#about" class="nav-link">关于我</a></li>
|
||
<li><a href="#education" class="nav-link">教育背景</a></li>
|
||
<li><a href="#projects" class="nav-link">项目案例</a></li>
|
||
<li><a href="#summary" class="nav-link">个人总结</a></li>
|
||
<li><a href="#contact" class="nav-link">联系方式</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section class="hero-section" id="home" style="position: relative;">
|
||
<div class="hero-background">
|
||
<!-- 股票K线图背景 -->
|
||
<div class="chart-background" id="chartBg"></div>
|
||
<!-- 3D金融正方体 -->
|
||
<div class="finance-cube-container">
|
||
<div class="finance-cube">
|
||
<div class="cube-face cube-front">
|
||
<div class="face-content">
|
||
<i class="bi bi-cart-check"></i>
|
||
<span>Amazon</span>
|
||
</div>
|
||
</div>
|
||
<div class="cube-face cube-back">
|
||
<div class="face-content">
|
||
<i class="bi bi-shop"></i>
|
||
<span>Shopify</span>
|
||
</div>
|
||
</div>
|
||
<div class="cube-face cube-right">
|
||
<div class="face-content">
|
||
<i class="bi bi-camera-video"></i>
|
||
<span>TikTok</span>
|
||
</div>
|
||
</div>
|
||
<div class="cube-face cube-left">
|
||
<div class="face-content">
|
||
<i class="bi bi-box-seam"></i>
|
||
<span>FBA</span>
|
||
</div>
|
||
</div>
|
||
<div class="cube-face cube-top">
|
||
<div class="face-content">
|
||
<i class="bi bi-bar-chart-line"></i>
|
||
<span>数据分析</span>
|
||
</div>
|
||
</div>
|
||
<div class="cube-face cube-bottom">
|
||
<div class="face-content">
|
||
<i class="bi bi-globe2"></i>
|
||
<span>跨境物流</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-content">
|
||
<div class="hero-badge fade-in">
|
||
<i class="bi bi-globe"></i>
|
||
<span>财经商贸</span>
|
||
</div>
|
||
|
||
<h1 class="hero-title">
|
||
<span class="title-line-2" style="animation: fadeInUp 0.6s ease-out 0.3s forwards;">数据驱动 · 全球视野</span>
|
||
</h1>
|
||
|
||
<p class="hero-subtitle fade-in">
|
||
<span id="typed-subtitle"></span>
|
||
<span class="typed-cursor">|</span>
|
||
</p>
|
||
|
||
<p class="hero-description fade-in">
|
||
大专毕业生，具备扩展的跨境电商运营实习经验。<br>
|
||
熟悉Amazon、Shopify、TikTok Shop等平台运营，擅长数据分析与跨部门协作。
|
||
</p>
|
||
|
||
<div class="hero-cta fade-in">
|
||
<a href="#projects" class="btn-primary">
|
||
<i class="bi bi-briefcase-fill"></i>
|
||
查看项目案例
|
||
</a>
|
||
<a href="#contact" class="btn-secondary">
|
||
<i class="bi bi-envelope-fill"></i>
|
||
商务合作
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 互动技能标签云 -->
|
||
<div class="skills-cloud" style="margin-top: 60px; position: relative;">
|
||
<div class="floating-skills" style="display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; max-width: 800px; margin: 0 auto;">
|
||
<span class="skill-bubble" data-skill="Amazon运营">Amazon</span>
|
||
<span class="skill-bubble" data-skill="TikTok Shop运营">TikTok Shop</span>
|
||
<span class="skill-bubble" data-skill="Shopify建站">Shopify</span>
|
||
<span class="skill-bubble" data-skill="数据分析">数据分析</span>
|
||
<span class="skill-bubble" data-skill="选品策略">选品</span>
|
||
<span class="skill-bubble" data-skill="广告投放">PPC广告</span>
|
||
<span class="skill-bubble" data-skill="供应链管理">供应链</span>
|
||
<span class="skill-bubble" data-skill="跨境物流">FBA物流</span>
|
||
<span class="skill-bubble" data-skill="私域运营">私域流量</span>
|
||
<span class="skill-bubble" data-skill="内容营销">内容营销</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于我 -->
|
||
<section class="about-section" id="about">
|
||
<div class="section-container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">关于我</h2>
|
||
<p class="section-subtitle">数据分析与多部门协作</p>
|
||
</div>
|
||
|
||
<div class="about-content" style="display: block;">
|
||
<!-- 横向个人信息卡片 -->
|
||
<div class="profile-card slide-in-left" style="width: 100%; margin-bottom: 40px; padding: 40px; display: flex; align-items: center; gap: 50px; background: var(--bg-card); border-radius: 20px;">
|
||
<div style="width: 200px; height: 200px; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 5px solid #2563eb; box-shadow: 0 15px 50px rgba(37, 99, 235, 0.3);">
|
||
<img src="罗浩宇头像.png" alt="个人照片" style="width: 100%; height: 100%; object-fit: cover; object-position: center top;">
|
||
</div>
|
||
|
||
<div style="flex: 1; padding-left: 20px;">
|
||
<div class="profile-info" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; row-gap: 30px;">
|
||
<div class="info-item" style="display: flex; align-items: center; gap: 10px;">
|
||
<div class="info-icon" style="width: 40px; height: 40px;">
|
||
<i class="bi bi-person-fill"></i>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-label">姓名</div>
|
||
<div class="info-value">罗浩宇</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item" style="display: flex; align-items: center; gap: 10px;">
|
||
<div class="info-icon" style="width: 40px; height: 40px;">
|
||
<i class="bi bi-gender-male"></i>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-label">性别</div>
|
||
<div class="info-value">男</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item" style="display: flex; align-items: center; gap: 10px;">
|
||
<div class="info-icon" style="width: 40px; height: 40px;">
|
||
<i class="bi bi-geo-alt-fill"></i>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-label">现居地址</div>
|
||
<div class="info-value">杭州市萧山区</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-item" style="display: flex; align-items: center; gap: 10px;">
|
||
<div class="info-icon" style="width: 40px; height: 40px;">
|
||
<i class="bi bi-briefcase-fill"></i>
|
||
</div>
|
||
<div class="info-content">
|
||
<div class="info-label">求职意向</div>
|
||
<div class="info-value">跨境电商运营专员</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专业能力部分 - 全宽布局 -->
|
||
<div class="skills-overview slide-in-right" style="width: 100%;">
|
||
<h3 style="font-size: 1.8rem; margin-bottom: 30px;">专业能力</h3>
|
||
|
||
<style>
|
||
@media (max-width: 1024px) {
|
||
.core-skills-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.composite-skills-grid { grid-template-columns: repeat(3, 1fr) !important; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.core-skills-grid, .composite-skills-grid { grid-template-columns: 1fr !important; }
|
||
.profile-card {
|
||
flex-direction: column !important;
|
||
text-align: center;
|
||
}
|
||
.profile-card > div:last-child {
|
||
padding-left: 0 !important;
|
||
margin-top: 20px;
|
||
}
|
||
.profile-info {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 核心能力 -->
|
||
<div style="margin-bottom: 40px;">
|
||
<h4 style="color: var(--finance-gold); margin-bottom: 25px; font-size: 1.3rem;">
|
||
<i class="bi bi-star-fill" style="margin-right: 10px;"></i>核心能力
|
||
</h4>
|
||
<div class="skills-grid core-skills-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
|
||
<!-- 平台运营 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-globe"></i>
|
||
</div>
|
||
<h4 class="skill-title">平台运营</h4>
|
||
<p class="skill-description">
|
||
熟悉Amazon、Shopify、TikTok Shop等平台的运营流程，能协助完成Listing优化、价格调整与库存管理
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">Amazon</span>
|
||
<span class="skill-tag">Shopify</span>
|
||
<span class="skill-tag">TikTok</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据分析 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-graph-up"></i>
|
||
</div>
|
||
<h4 class="skill-title">数据分析</h4>
|
||
<p class="skill-description">
|
||
使用Jungle Scout分析BSR排名，计算广告ACOS，协助形成报告并提出优化策略
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">Jungle Scout</span>
|
||
<span class="skill-tag">ACOS</span>
|
||
<span class="skill-tag">BSR</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 市场研究 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-search"></i>
|
||
</div>
|
||
<h4 class="skill-title">市场研究</h4>
|
||
<p class="skill-description">
|
||
具备竞品研究和关键词策划能力，支持营销策略制定与曝光提升
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">竞品分析</span>
|
||
<span class="skill-tag">关键词研究</span>
|
||
<span class="skill-tag">SEO</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 客户服务 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-headset"></i>
|
||
</div>
|
||
<h4 class="skill-title">客户服务</h4>
|
||
<p class="skill-description">
|
||
熟练处理客户售前售后流程，包括咨询回复、退换货处理及评价管理
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">客户沟通</span>
|
||
<span class="skill-tag">售后处理</span>
|
||
<span class="skill-tag">评价管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 促销策划 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-megaphone"></i>
|
||
</div>
|
||
<h4 class="skill-title">促销策划</h4>
|
||
<p class="skill-description">
|
||
能协助平台促销活动策划与执行，为爆款打造提供支持
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">Prime Day</span>
|
||
<span class="skill-tag">秒杀活动</span>
|
||
<span class="skill-tag">爆款打造</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 物流协作 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-truck"></i>
|
||
</div>
|
||
<h4 class="skill-title">物流协作</h4>
|
||
<p class="skill-description">
|
||
熟悉跨境物流与海外仓协作机制，能协助掌握履约流程与物流时效控制
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">FBA</span>
|
||
<span class="skill-tag">海外仓</span>
|
||
<span class="skill-tag">物流跟踪</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合规管理 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-shield-check"></i>
|
||
</div>
|
||
<h4 class="skill-title">合规管理</h4>
|
||
<p class="skill-description">
|
||
了解跨境资质审核要求和合规政策，能协助完成证书、标签规范及备案资料整理
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">资质审核</span>
|
||
<span class="skill-tag">合规政策</span>
|
||
<span class="skill-tag">认证管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员运营 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-people"></i>
|
||
</div>
|
||
<h4 class="skill-title">会员运营</h4>
|
||
<p class="skill-description">
|
||
能协助构建会员运营及私域机制，通过积分与邮件策略提升用户粘性
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">私域运营</span>
|
||
<span class="skill-tag">邮件营销</span>
|
||
<span class="skill-tag">用户留存</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 团队协作 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-diagram-3"></i>
|
||
</div>
|
||
<h4 class="skill-title">团队协作</h4>
|
||
<p class="skill-description">
|
||
拥有协调跨部门协作的体悟与执行力，能高效配合运营计划推进
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">跨部门协作</span>
|
||
<span class="skill-tag">项目推进</span>
|
||
<span class="skill-tag">执行力</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 复合能力 -->
|
||
<div>
|
||
<h4 style="color: var(--finance-gold); margin-bottom: 25px; font-size: 1.3rem;">
|
||
<i class="bi bi-gem" style="margin-right: 10px;"></i>复合能力
|
||
</h4>
|
||
<div class="skills-grid composite-skills-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;">
|
||
<!-- 电商平台运营 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-shop"></i>
|
||
</div>
|
||
<h4 class="skill-title">电商平台运营</h4>
|
||
<p class="skill-description">
|
||
了解主流平台规则，能参与辅助上架、页面优化、流量推广及客户管理
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">多平台运营</span>
|
||
<span class="skill-tag">流量推广</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 市场洞察 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-lightbulb"></i>
|
||
</div>
|
||
<h4 class="skill-title">市场洞察营销</h4>
|
||
<p class="skill-description">
|
||
具备市场调研和竞品分析能力，能结合客户特点提出营销建议
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">市场调研</span>
|
||
<span class="skill-tag">品牌推广</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 供应链运营 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-box-seam"></i>
|
||
</div>
|
||
<h4 class="skill-title">供应链执行</h4>
|
||
<p class="skill-description">
|
||
了解订单、采购、库存、物流等核心环节流程，具备成本意识
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">SKU管理</span>
|
||
<span class="skill-tag">库存控制</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 国际贸易 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-globe-americas"></i>
|
||
</div>
|
||
<h4 class="skill-title">国际贸易基础</h4>
|
||
<p class="skill-description">
|
||
具备进出口全流程认知，熟悉国际结算方式、单证及贸易术语
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">进出口流程</span>
|
||
<span class="skill-tag">清关事务</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI工具 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-cpu"></i>
|
||
</div>
|
||
<h4 class="skill-title">AI工具应用</h4>
|
||
<p class="skill-description">
|
||
了解AI、RPA、AIGC等新兴工具在电商场景的应用
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">AI工具</span>
|
||
<span class="skill-tag">AIGC</span>
|
||
<span class="skill-tag">RPA</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业系统 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-server"></i>
|
||
</div>
|
||
<h4 class="skill-title">企业系统应用</h4>
|
||
<p class="skill-description">
|
||
能初步操作ERP、CRM、SCM、WMS等管理系统
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">ERP</span>
|
||
<span class="skill-tag">CRM</span>
|
||
<span class="skill-tag">WMS</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 金融结算 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-currency-exchange"></i>
|
||
</div>
|
||
<h4 class="skill-title">金融结算管理</h4>
|
||
<p class="skill-description">
|
||
了解信用证、托收、TT等结算方式，具备基础资金管理认知
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">国际结算</span>
|
||
<span class="skill-tag">资金管理</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务分析 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-calculator"></i>
|
||
</div>
|
||
<h4 class="skill-title">财务数据分析</h4>
|
||
<p class="skill-description">
|
||
具备初步财务数据分析能力，能将财务信息用于业务决策
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">财务分析</span>
|
||
<span class="skill-tag">决策支持</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合同管理 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-file-text"></i>
|
||
</div>
|
||
<h4 class="skill-title">合同法律管理</h4>
|
||
<p class="skill-description">
|
||
了解经济法及合同结构，能参与合同审核，具备风险识别意识
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">合同审核</span>
|
||
<span class="skill-tag">风险识别</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务执行 -->
|
||
<div class="skill-card">
|
||
<div class="skill-icon">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
<h4 class="skill-title">任务执行能力</h4>
|
||
<p class="skill-description">
|
||
对企业组织架构有认知，能配合项目推进，具备良好执行力
|
||
</p>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">项目管理</span>
|
||
<span class="skill-tag">结果导向</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 教育背景 -->
|
||
<section class="education-section" id="education">
|
||
<div class="section-container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">教育背景</h2>
|
||
<p class="section-subtitle">大数据与会计专业</p>
|
||
</div>
|
||
|
||
<div class="education-card fade-in">
|
||
<div style="position: relative; overflow: hidden; border-radius: 20px;">
|
||
<!-- 背景图片层 -->
|
||
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;">
|
||
<img src="20250827-100809.jpg" style="width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) contrast(1.1);" alt="">
|
||
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(26, 26, 46, 0.7), rgba(22, 33, 62, 0.7));"></div>
|
||
</div>
|
||
<!-- 内容层 -->
|
||
<div style="position: relative; z-index: 1; backdrop-filter: blur(2px); padding: 40px;">
|
||
<div class="education-header">
|
||
<div class="education-info">
|
||
<h3 class="university-name">安徽职业技术学院</h3>
|
||
<p class="degree-info">大数据与会计专业</p>
|
||
<p class="education-period">2018年9月 - 2021年6月</p>
|
||
</div>
|
||
<div class="education-logo">
|
||
<i class="bi bi-mortarboard-fill"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="education-details">
|
||
<h4 style="margin-bottom: 20px; color: var(--text-light);">核心课程</h4>
|
||
<div class="courses-grid">
|
||
<div class="course-item">
|
||
<div class="course-name">财务会计</div>
|
||
<div class="course-grade">优秀</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">大数据分析与应用</div>
|
||
<div class="course-grade">优秀</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">成本会计</div>
|
||
<div class="course-grade">良好</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">管理会计</div>
|
||
<div class="course-grade">优秀</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">数据挖掘与商务智能</div>
|
||
<div class="course-grade">良好</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">财务报表分析</div>
|
||
<div class="course-grade">优秀</div>
|
||
</div>
|
||
<div class="course-item">
|
||
<div class="course-name">税务筹划与管理</div>
|
||
<div class="course-grade">优秀</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; padding: 20px; background: rgba(255, 255, 255, 0.02); border-radius: 10px;">
|
||
<p style="color: var(--text-muted); line-height: 1.8;">
|
||
通过系统的大数据与会计专业学习，掌握了财务会计、数据分析、成本管理、财务报表分析等核心技能，
|
||
并在实习项目中将理论知识与大数据技术相结合，为跨境电商财务管理和数据分析工作打下了坚实基础。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目案例 -->
|
||
<section class="projects-section" id="projects">
|
||
<div class="section-container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">项目案例</h2>
|
||
<p class="section-subtitle">成功的商业实践与价值创造</p>
|
||
</div>
|
||
|
||
<!-- 扑克牌容器 -->
|
||
<div class="poker-container">
|
||
<div class="poker-stack">
|
||
<!-- 项目1：十足便利店内容营销推广项目 -->
|
||
<div class="poker-card poker1" data-index="0">
|
||
<div class="project-image">
|
||
<img src="public/十足便利店内容营销推广项目/十足便利店内容营销推广项目-全图.png" alt="十足便利店内容营销推广">
|
||
<span class="project-badge">已完成</span>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">十足便利店内容营销推广</h3>
|
||
<p class="project-description">
|
||
以"门店职人"KOC为核心，结合抖音矩阵运营、精准DOU+投流和直播互动，实现线上种草与线下消费的闭环转化。
|
||
</p>
|
||
<div style="margin: 15px 0; padding: 10px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--finance-gold); border-radius: 5px;">
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-building" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习企业：</strong> 森德品牌管理有限公司
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-person-badge" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习岗位：</strong> 新媒体营销专员
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-calendar3" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习时间：</strong> 2023.5 ~ 2024.9
|
||
</p>
|
||
</div>
|
||
<a href="#" class="project-link" onclick="showProjectDetail(1); return false;">
|
||
查看详情 <i class="bi bi-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目2：夏季凉被产品出海项目 -->
|
||
<div class="poker-card poker2" data-index="1">
|
||
<div class="project-image">
|
||
<img src="public/夏季凉被产品出海项目/夏季凉被产品出海项目-全图.jpg" alt="夏季凉被产品出海">
|
||
<span class="project-badge">已完成</span>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">夏季凉被产品出海</h3>
|
||
<p class="project-description">
|
||
聚焦欧美高温市场，围绕凉感舒眠需求打造跨境床品品牌，实现Amazon首月销量突破10万件。
|
||
</p>
|
||
<div style="margin: 15px 0; padding: 10px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--finance-gold); border-radius: 5px;">
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-building" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习企业：</strong> 成都速达跨境电商有限公司
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-person-badge" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习岗位：</strong> 跨境电商运营助理
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-calendar3" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习时间：</strong> 2023.5 ~ 2024.9
|
||
</p>
|
||
</div>
|
||
<a href="#" class="project-link" onclick="showProjectDetail(2); return false;">
|
||
查看详情 <i class="bi bi-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目3：良品铺子采购方案设计 -->
|
||
<div class="poker-card poker3" data-index="2">
|
||
<div class="project-image">
|
||
<img src="public/良品铺子采购方案设计项目/流程一：制定采购需求计划.jpeg" alt="良品铺子采购方案">
|
||
<span class="project-badge">已完成</span>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">良品铺子采购方案设计</h3>
|
||
<p class="project-description">
|
||
通过建立科学的需求预测机制、严格的供应商准入制度和数字化的合同履约管理，实现采购全过程标准化。
|
||
</p>
|
||
<div style="margin: 15px 0; padding: 10px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--finance-gold); border-radius: 5px;">
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-building" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习企业：</strong> 广州华贸进出口贸易有限公司
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-person-badge" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习岗位：</strong> 采购专员
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-calendar3" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习时间：</strong> 2023.7 ~ 2024.7
|
||
</p>
|
||
</div>
|
||
<a href="#" class="project-link" onclick="showProjectDetail(3); return false;">
|
||
查看详情 <i class="bi bi-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目4：永辉生鲜超市供应链管理 -->
|
||
<div class="poker-card poker4" data-index="3">
|
||
<div class="project-image">
|
||
<img src="public/永辉生鲜超市供应链管理设计项目/永辉生鲜超市供应链管理设计项目-主图.jpeg" alt="永辉生鲜供应链">
|
||
<span class="project-badge">已完成</span>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">永辉生鲜供应链管理设计</h3>
|
||
<p class="project-description">
|
||
通过构建优选供应商体系、完善冷链物流、优化库存周转，显著提升库存流转效率与配送时效。
|
||
</p>
|
||
<div style="margin: 15px 0; padding: 10px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--finance-gold); border-radius: 5px;">
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-building" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习企业：</strong> 苏州优采供应链管理有限公司
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-person-badge" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习岗位：</strong> 供应链管理助理
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-calendar3" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习时间：</strong> 2023.8 ~ 2024.5
|
||
</p>
|
||
</div>
|
||
<a href="#" class="project-link" onclick="showProjectDetail(4); return false;">
|
||
查看详情 <i class="bi bi-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目5：证券公司业务种类核准 -->
|
||
<div class="poker-card poker5" data-index="4">
|
||
<div class="project-image">
|
||
<img src="public/某证券公司申请增加业务种类核准项目/某证券公司申请增加业务种类核准项目-全图.jpg" alt="证券业务核准">
|
||
<span class="project-badge">已完成</span>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">证券公司业务种类核准</h3>
|
||
<p class="project-description">
|
||
围绕新增"融资融券、做市交易、代销金融产品"三项业务，完成从立项到投产的合规落地。
|
||
</p>
|
||
<div style="margin: 15px 0; padding: 10px; background: rgba(255, 215, 0, 0.05); border-left: 3px solid var(--finance-gold); border-radius: 5px;">
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-building" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习企业：</strong> 国信证券股份有限公司
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-person-badge" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习岗位：</strong> 风控与合规实习生
|
||
</p>
|
||
<p style="margin: 5px 0; color: #ccc; font-size: 0.9rem;">
|
||
<i class="bi bi-calendar3" style="color: var(--finance-gold); margin-right: 8px;"></i>
|
||
<strong>实习时间：</strong> 2023.7 ~ 2024.8
|
||
</p>
|
||
</div>
|
||
<a href="#" class="project-link" onclick="showProjectDetail(5); return false;">
|
||
查看详情 <i class="bi bi-arrow-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 个人总结 -->
|
||
<section class="summary-section" id="summary" style="background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); padding: 80px 0;">
|
||
<div class="section-container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">个人总结</h2>
|
||
<p class="section-subtitle">成长路径 · 职业愿景</p>
|
||
</div>
|
||
|
||
<div style="max-width: 900px; margin: 0 auto; padding: 40px; background: rgba(255, 215, 0, 0.03); border-radius: 20px; border: 1px solid rgba(255, 215, 0, 0.2);">
|
||
<div style="position: relative; padding-left: 30px;">
|
||
<i class="bi bi-quote" style="position: absolute; left: 0; top: -10px; font-size: 2rem; color: var(--finance-gold); opacity: 0.5;"></i>
|
||
<p style="color: #ddd; font-size: 1.2rem; line-height: 2; text-align: justify; margin-bottom: 20px;">
|
||
我是一名刚完成实习的大专毕业生，对跨境电商运营专业发展方向抱有浓厚兴趣。
|
||
</p>
|
||
<p style="color: #ddd; font-size: 1.1rem; line-height: 1.9; text-align: justify; margin-bottom: 20px;">
|
||
在"夏季凉被产品出海项目"中，我全流程参与了从用户调研、Listing运营、物流协调到数据分析、合规对接与跨平台内容管理等工作。实习期间我注重数据敏感度与执行效率，擅长跨文化沟通与多部门协作，能及时响应运营策略变化并配合落地行动。
|
||
</p>
|
||
<p style="color: #ddd; font-size: 1.1rem; line-height: 1.9; text-align: justify;">
|
||
未来希望继续在跨境电商运营专员方向积累经验，成为具备策略思维和实操能力的运营践行者。
|
||
</p>
|
||
<i class="bi bi-quote" style="position: absolute; right: 0; bottom: -10px; font-size: 2rem; color: var(--finance-gold); opacity: 0.5; transform: rotate(180deg);"></i>
|
||
</div>
|
||
|
||
<div style="margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255, 215, 0, 0.2);">
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;">
|
||
<div style="text-align: center;">
|
||
<i class="bi bi-lightbulb" style="font-size: 2rem; color: var(--finance-gold); margin-bottom: 10px; display: block;"></i>
|
||
<h4 style="color: var(--finance-gold); margin-bottom: 8px;">学习能力</h4>
|
||
<p style="color: #aaa; font-size: 0.95rem;">快速掌握新平台新工具</p>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<i class="bi bi-people" style="font-size: 2rem; color: var(--finance-gold); margin-bottom: 10px; display: block;"></i>
|
||
<h4 style="color: var(--finance-gold); margin-bottom: 8px;">团队协作</h4>
|
||
<p style="color: #aaa; font-size: 0.95rem;">跨部门沟通协调</p>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<i class="bi bi-graph-up-arrow" style="font-size: 2rem; color: var(--finance-gold); margin-bottom: 10px; display: block;"></i>
|
||
<h4 style="color: var(--finance-gold); margin-bottom: 8px;">数据思维</h4>
|
||
<p style="color: #aaa; font-size: 0.95rem;">用数据驱动决策</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section class="contact-section" id="contact">
|
||
<div class="section-container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">联系我</h2>
|
||
<p class="section-subtitle">期待与您的商务合作</p>
|
||
</div>
|
||
|
||
<div class="contact-content">
|
||
<div class="contact-grid">
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<i class="bi bi-envelope-fill"></i>
|
||
</div>
|
||
<h3 class="contact-title">电子邮件</h3>
|
||
<p class="contact-info">
|
||
<a href="mailto:finance@example.com" class="contact-link">605137271@qq.com</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<i class="bi bi-telephone-fill"></i>
|
||
</div>
|
||
<h3 class="contact-title">商务电话</h3>
|
||
<p class="contact-info">
|
||
<a href="tel:+8613800138000" class="contact-link">+86 138-0013-8000</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<i class="bi bi-wechat"></i>
|
||
</div>
|
||
<h3 class="contact-title">微信</h3>
|
||
<p class="contact-info">
|
||
<span class="contact-link" id="wechat-id" onclick="copyWeChatID()" style="cursor: pointer;">LHY_2025</span>
|
||
</p>
|
||
<div style="margin-top: 10px;">
|
||
<small id="copy-tip" style="color: #aaa;">点击复制微信号</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<i class="bi bi-linkedin"></i>
|
||
</div>
|
||
<h3 class="contact-title">LinkedIn</h3>
|
||
<p class="contact-info">
|
||
<a href="#" class="contact-link">linkedin.com/in/finance</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<div class="social-links">
|
||
<a href="#" class="social-link"><i class="bi bi-linkedin"></i></a>
|
||
<a href="#" class="social-link"><i class="bi bi-github"></i></a>
|
||
<a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
|
||
<a href="#" class="social-link"><i class="bi bi-wechat"></i></a>
|
||
</div>
|
||
<p class="footer-text">
|
||
© 2024 All rights reserved. | 数据驱动 · 全球视野
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 项目详情模态框由 project-modal.js 动态创建 -->
|
||
|
||
<script>
|
||
// 页面加载完成后的动画
|
||
window.addEventListener('load', function() {
|
||
setTimeout(function() {
|
||
document.getElementById('loader').style.opacity = '0';
|
||
setTimeout(function() {
|
||
document.getElementById('loader').style.display = 'none';
|
||
document.documentElement.classList.remove('loading');
|
||
}, 500);
|
||
}, 1500);
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
window.addEventListener('scroll', function() {
|
||
const navbar = document.getElementById('navbar');
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 导航链接激活状态
|
||
const sections = document.querySelectorAll('section');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
if (scrollY >= (sectionTop - 200)) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href').slice(1) === current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 生成K线图背景
|
||
function createChartBackground() {
|
||
const chartBg = document.getElementById('chartBg');
|
||
if (chartBg) {
|
||
for (let i = 0; i < 20; i++) {
|
||
const bar = document.createElement('div');
|
||
bar.className = `chart-line ${Math.random() > 0.5 ? 'red' : ''}`;
|
||
bar.style.left = `${i * 5}%`;
|
||
bar.style.animationDelay = `${i * 0.1}s`;
|
||
chartBg.appendChild(bar);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 生成数字雨效果
|
||
function createMatrix() {
|
||
const matrix = document.getElementById('matrix');
|
||
if (matrix) {
|
||
const symbols = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '€', '¥', '£', '%', '+', '-'];
|
||
|
||
for (let i = 0; i < 15; i++) {
|
||
const column = document.createElement('div');
|
||
column.className = 'matrix-column';
|
||
column.style.left = `${i * 7}%`;
|
||
column.style.animationDelay = `${Math.random() * 10}s`;
|
||
column.style.animationDuration = `${10 + Math.random() * 10}s`;
|
||
|
||
let text = '';
|
||
for (let j = 0; j < 30; j++) {
|
||
text += symbols[Math.floor(Math.random() * symbols.length)] + '<br>';
|
||
}
|
||
column.innerHTML = text;
|
||
matrix.appendChild(column);
|
||
}
|
||
}
|
||
}
|
||
|
||
// showProjectDetail 和 closeModal 函数已在 finance-enhanced.js 中定义
|
||
|
||
// 初始化
|
||
createChartBackground();
|
||
createMatrix();
|
||
|
||
// 滚动动画
|
||
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('.fade-in, .slide-in-left, .slide-in-right').forEach(el => {
|
||
el.style.animationPlayState = 'paused';
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
|
||
|
||
<!-- 增强版JavaScript -->
|
||
<script src="finance-enhanced.js?v=3.2"></script>
|
||
|
||
<!-- 内联项目弹窗功能 -->
|
||
<style>
|
||
/* 确保粒子效果不遮挡其他元素 */
|
||
#particles-js {
|
||
pointer-events: none !important;
|
||
z-index: 1 !important;
|
||
}
|
||
|
||
/* 确保项目卡片和链接可点击 */
|
||
.project-card {
|
||
position: relative !important;
|
||
z-index: 10 !important;
|
||
}
|
||
|
||
.project-link {
|
||
position: relative !important;
|
||
z-index: 100 !important;
|
||
cursor: pointer !important;
|
||
pointer-events: auto !important;
|
||
display: inline-block !important;
|
||
padding: 5px 10px !important;
|
||
}
|
||
|
||
/* 项目弹窗样式 */
|
||
#projectModalNew {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
z-index: 99999;
|
||
}
|
||
|
||
#projectModalNew.show {
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.project-modal-box {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
|
||
border-radius: 20px;
|
||
width: 95%;
|
||
max-width: 1400px;
|
||
height: 90vh;
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
/* 隐藏所有滚动条但保留滚动功能 */
|
||
.project-modal-box::-webkit-scrollbar,
|
||
.project-flow-nav::-webkit-scrollbar,
|
||
.project-flow-content::-webkit-scrollbar,
|
||
.project-flow-text::-webkit-scrollbar,
|
||
.project-flow-overview::-webkit-scrollbar,
|
||
.project-flow-items::-webkit-scrollbar,
|
||
.project-flow-items li::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
display: none;
|
||
}
|
||
|
||
.project-modal-box,
|
||
.project-flow-nav,
|
||
.project-flow-content,
|
||
.project-flow-text,
|
||
.project-flow-overview,
|
||
.project-flow-items {
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
overflow: auto; /* 确保可以滚动 */
|
||
}
|
||
|
||
/* 确保横向导航栏可以滚动 */
|
||
.project-flow-nav {
|
||
overflow-x: auto !important;
|
||
overflow-y: hidden !important;
|
||
white-space: nowrap !important;
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.project-flow-nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* 确保右侧文本内容可以滚动 */
|
||
.project-flow-text {
|
||
overflow-y: auto !important;
|
||
overflow-x: hidden !important;
|
||
max-height: 100%;
|
||
}
|
||
|
||
/* 弹窗打开时禁止背景滚动 */
|
||
body.modal-open {
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
.project-close-btn {
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 25px;
|
||
font-size: 36px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
background: none;
|
||
border: none;
|
||
}
|
||
|
||
.project-close-btn:hover {
|
||
color: #FFD700;
|
||
transform: rotate(90deg);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.project-header {
|
||
padding: 30px 40px 20px;
|
||
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
|
||
}
|
||
|
||
.project-header h2 {
|
||
color: #FFD700;
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.project-header p {
|
||
color: #aaa;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.project-flow-nav {
|
||
background: rgba(255, 215, 0, 0.05);
|
||
padding: 15px 40px;
|
||
border-bottom: 2px solid rgba(255, 215, 0, 0.2);
|
||
display: flex;
|
||
gap: 10px;
|
||
overflow-x: auto !important;
|
||
overflow-y: hidden !important;
|
||
white-space: nowrap;
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.project-flow-nav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.flow-btn {
|
||
display: inline-block;
|
||
padding: 10px 20px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||
border-radius: 25px;
|
||
color: #ccc;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.flow-btn:hover {
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border-color: #FFD700;
|
||
color: #FFD700;
|
||
}
|
||
|
||
.flow-btn.active {
|
||
background: linear-gradient(135deg, #FFD700, #FFA500);
|
||
border-color: #FFD700;
|
||
color: #1a1a2e;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.project-flow-area {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 30px 40px;
|
||
gap: 40px;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
}
|
||
|
||
.flow-img-box {
|
||
flex: 0 0 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.02);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.flow-img-box img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.flow-txt-box {
|
||
flex: 1;
|
||
overflow-y: auto !important;
|
||
overflow-x: hidden !important;
|
||
padding-right: 20px;
|
||
height: 100%;
|
||
-ms-overflow-style: none; /* IE and Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.flow-txt-box::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.flow-txt-box h3 {
|
||
color: #FFD700;
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.flow-summary {
|
||
background: rgba(255, 215, 0, 0.05);
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
margin-bottom: 30px;
|
||
color: #ddd;
|
||
line-height: 1.8;
|
||
border-left: 4px solid #FFD700;
|
||
}
|
||
|
||
.flow-txt-box h4 {
|
||
color: #FFA500;
|
||
font-size: 18px;
|
||
margin: 20px 0 15px;
|
||
}
|
||
|
||
.flow-txt-box ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.flow-txt-box li {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
padding: 15px 20px;
|
||
margin-bottom: 10px;
|
||
border-radius: 8px;
|
||
color: #ccc;
|
||
line-height: 1.6;
|
||
border-left: 3px solid #4A90E2;
|
||
}
|
||
</style>
|
||
|
||
<!-- 弹窗HTML结构 -->
|
||
<div id="projectModalNew">
|
||
<div class="project-modal-box">
|
||
<button class="project-close-btn" onclick="closeProjectModal()">×</button>
|
||
|
||
<div class="project-header">
|
||
<h2 id="pTitle">项目标题</h2>
|
||
<p id="pDesc">项目描述</p>
|
||
</div>
|
||
|
||
<div class="project-flow-nav" id="pFlowNav">
|
||
<!-- 动态生成导航 -->
|
||
</div>
|
||
|
||
<div class="project-flow-area">
|
||
<div class="flow-img-box">
|
||
<img id="pFlowImg" src="" alt="流程图">
|
||
</div>
|
||
<div class="flow-txt-box">
|
||
<h3 id="pFlowTitle">流程标题</h3>
|
||
<div class="flow-summary" id="pFlowSummary">流程概述</div>
|
||
<h4>工作内容</h4>
|
||
<ul id="pFlowList">
|
||
<!-- 动态生成内容 -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 项目数据库 - 完整版本
|
||
const projectDB = {
|
||
1: {
|
||
title: '十足便利店内容营销推广项目',
|
||
desc: '以"门店职人"KOC为核心，结合抖音矩阵运营、精准DOU+投流和直播互动，累计覆盖全国1200+门店。',
|
||
flows: [
|
||
{
|
||
name: '明确平台目标',
|
||
image: 'public/十足便利店内容营销推广项目/流程一：明确平台目标.jpeg',
|
||
overview: '在项目启动阶段，协助完成用户画像分析、内容战略定位与竞品数据对比，明确抖音平台的传播目标与方向。',
|
||
content: [
|
||
'数据回溯整理：协助分析近6个月的用户互动数据，形成用户兴趣点和偏好趋势表。',
|
||
'竞品模式收集：整理"Today便利店""便利蜂"等竞品内容样式与互动量，归纳不足。',
|
||
'目标KPI归纳：协助制定曝光、互动和到店转化的分级目标表，用于团队后续追踪。',
|
||
'客群画像梳理：参与输出18–30岁年轻群体偏好的数据报告，为内容定位提供支持。'
|
||
]
|
||
},
|
||
{
|
||
name: '搭建门店职人内容运营体系',
|
||
image: 'public/十足便利店内容营销推广项目/流程二：搭建门店职人内容运营体系.jpeg',
|
||
overview: '在内容生产阶段，参与建立门店职人梯队、视频模板与发布规范，推动员工成为内容创作者，强化门店的社交化表达。',
|
||
content: [
|
||
'职人候选筛选：协助各门店推荐1–2名员工，统计兴趣与表现，组成内容梯队。',
|
||
'视频模板制定：参与制作"三镜头+字幕+口播"标准模版，降低员工视频制作门槛。',
|
||
'内容排班表协助：根据门店节奏，协助建立每周至少2条视频的内容上传计划表。',
|
||
'职人认证资料：配合设计门店职人抖音ID卡牌，整理资料用于门店线上线下展示。',
|
||
'热榜评选辅助：收集各门店视频数据，整理"爆款内容"评选结果并发布。'
|
||
]
|
||
},
|
||
{
|
||
name: '搭建门店营销账号矩阵',
|
||
image: 'public/十足便利店内容营销推广项目/流程三：搭建门店营销账号矩阵.png',
|
||
overview: '在账号搭建阶段，协助建立主子账号联动机制，统一认证与管理，提升内容协同效率和传播覆盖面。',
|
||
content: [
|
||
'账号资料归档：协助收集并上传各门店账号信息，统一接入企业蓝V后台。',
|
||
'主子账号内容分工：整理主账号品牌事件与子账号本地化互动的内容边界表。',
|
||
'协同转发执行：参与每周主号转发优质门店子号视频，提升曝光率。',
|
||
'账号绩效打分：协助统计粉丝增长、播放量、投产比，生成门店账号表现评分表。',
|
||
'内容审核支持：参与搭建词库过滤机制，帮助降低违规内容风险。'
|
||
]
|
||
},
|
||
{
|
||
name: '执行精准DOU+广告与直播互动活动',
|
||
image: 'public/十足便利店内容营销推广项目/流程四：执行精准 DOU+ 广告与直播互动活动.jpeg',
|
||
overview: '在互动与转化阶段，协助执行直播栏目策划、互动机制设置及直播素材归档，强化用户留存与线上线下互动。',
|
||
content: [
|
||
'直播选题准备：协助制定"午间带货""夜宵推荐"等直播栏目脚本。',
|
||
'节日内容排期：整理高考季、夏日饮品季等热点日历，配合直播与短视频执行。',
|
||
'直播互动支持：参与设置"弹幕秒杀""关注领券"等直播间互动环节。',
|
||
'兑换码整理：协助统计并发放门店线下兑换码，保障直播到店转化。',
|
||
'素材库归档：收集高表现直播片段，剪辑后归档至"职人内容素材库"。'
|
||
]
|
||
},
|
||
{
|
||
name: '实施本地化DOU+定向投流',
|
||
image: 'public/十足便利店内容营销推广项目/流程五：实施本地化 DOU+ 定向投流.png',
|
||
overview: '在广告投放环节，协助执行精准人群定向、AB测试与预算调控，确保内容投流高效并保持ROI稳定。',
|
||
content: [
|
||
'人群标签设定：协助建立"女性/25–40岁/距离<3km"精准客群标签组合。',
|
||
'素材AB测试：整理不同文案与视频组合，执行小范围测试并记录表现。',
|
||
'预算控制支持：参与动态调整每日预算，确保投产比≥3.0。',
|
||
'投流监控数据整理：协助更新广告投流与门店数据联动看板，供团队复盘。',
|
||
'高ROI案例收集：参与整理表现优异视频，推动跨门店复制拍摄与投放。'
|
||
]
|
||
},
|
||
{
|
||
name: '推动线下体验与线上互动的融合',
|
||
image: 'public/十足便利店内容营销推广项目/流程六：推动线下体验与线上互动的融合.jpeg',
|
||
overview: '在项目后期，协助建立线上互动与门店体验结合的机制，推动用户到店转化与复购黏性。',
|
||
content: [
|
||
'点赞兑换执行：协助整理点赞兑换券活动执行情况，统计兑换成功数量。',
|
||
'客服响应支持：监控抖音私信与小程序客服，确保响应时间在30秒内。',
|
||
'互动活动记录：统计累计参与互动兑换的用户规模，并制作数据简报。',
|
||
'会员打卡辅助：协助上线会员打卡功能，记录用户复购与参与数据。',
|
||
'用户反馈收集：整理线上线下用户对互动机制的意见，为后续改进提供参考。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
2: {
|
||
title: '夏季凉被产品出海项目',
|
||
desc: '聚焦欧美高温市场的"Hot Sleeper"用户群体，围绕凉感舒眠需求打造跨境床品品牌，全年营收3200万美元。',
|
||
flows: [
|
||
{
|
||
name: '品牌定位与用户细分',
|
||
image: 'public/夏季凉被产品出海项目/流程一：品牌定位与用户细分.jpeg',
|
||
overview: '在项目初期，协助开展用户调研、竞品分析与定价测试，明确目标人群与品牌定位，为产品研发和渠道策略提供方向。',
|
||
content: [
|
||
'协助问卷与访谈调研，整理用户对夜间盗汗、体温调节等痛点的反馈数据。',
|
||
'参与品牌定位资料整理，提炼"高端智能凉感床品"核心价值。',
|
||
'协助品牌视觉语言输出，支持蓝白冷调的包装与主图风格统一。',
|
||
'配合定价测试，参与建立欧美市场的阶梯定价方案。',
|
||
'协助构建用户旅程地图，整理电商平台用户路径与转化点。'
|
||
]
|
||
},
|
||
{
|
||
name: '出口法规与认证合规',
|
||
image: 'public/夏季凉被产品出海项目/流程二：出口法规与认证合规.jpg',
|
||
overview: '在出口合规阶段，协助认证资料整理、包装环保检测与产品标签核对，保障产品满足欧美市场监管要求。',
|
||
content: [
|
||
'协助整理 CE、RoHS、RED 等认证材料并归档。',
|
||
'参与织物安全检测样本送检与结果收集。',
|
||
'协助核对包装环保比例，确保 ≥80% 再生纸板符合欧盟政策。',
|
||
'参与商品标签检查，确认 EAN-13 条码与原产地标识完整。',
|
||
'协助搭建认证文档归档体系，支持跨境平台资质审核。'
|
||
]
|
||
},
|
||
{
|
||
name: '多平台渠道运营',
|
||
image: 'public/夏季凉被产品出海项目/流程三：多平台渠道运营.jpeg',
|
||
overview: '在渠道运营环节，协助 Amazon、Shopify 与 TikTok 的店铺维护与流量转化，支持公域引流与私域沉淀。',
|
||
content: [
|
||
'协助 Amazon 关键词优化与五图内容更新，支持提升自然排名。',
|
||
'参与 FBA 补货表格建立，跟进库存动态与发货周期。',
|
||
'协助 Shopify 会员管理，录入积分数据并支持自动邮件回访测试。',
|
||
'参与 TikTok KOL合作执行，整理达人投放素材与发布时间表。',
|
||
'协助数据对接，配合 Google Analytics 建立跨平台用户行为追踪表。'
|
||
]
|
||
},
|
||
{
|
||
name: '柔性制造与海外物流体系搭建',
|
||
image: 'public/夏季凉被产品出海项目/流程四：柔性制造与海外物流体系搭建.jpeg',
|
||
overview: '在供应链环节，协助生产进度监控与国际物流方案执行，确保订单交付稳定与跨境履约顺畅。',
|
||
content: [
|
||
'协助 MES 系统数据录入，支持 SKU 切换与返单调度。',
|
||
'参与多路径运输方案整理，记录海运、空运与中欧班列时效数据。',
|
||
'协助海外仓入库数据录入，确认 Prime 标准与 DDP 清关记录。',
|
||
'配合越南冗余产线测试，整理应急产能启用数据。',
|
||
'协助物流追踪表更新，跟进延误订单与异常履约情况。'
|
||
]
|
||
},
|
||
{
|
||
name: '内容营销与品牌曝光',
|
||
image: 'public/夏季凉被产品出海项目/流程五：内容营销与品牌曝光.jpg',
|
||
overview: '在营销推广阶段，协助媒体合作、达人传播与UGC激励执行，支持品牌声量与转化提升。',
|
||
content: [
|
||
'协助整理媒体评测文章与开箱视频素材，归档至内容库。',
|
||
'参与 TikTok 话题数据统计，监测标签播放量与互动效果。',
|
||
'协助 Prime Day 促销执行，整理单日爆单数据并生成日报。',
|
||
'参与用户晒单奖励发放，收集UGC内容并分类归档。',
|
||
'协助 Notion 内容库管理，维护命名规则与版本更新。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
3: {
|
||
title: '良品铺子采购方案设计项目',
|
||
desc: '通过建立科学的需求预测机制、严格的供应商准入制度和数字化的合同履约管理，实现采购全过程的标准化与可视化。',
|
||
flows: [
|
||
{
|
||
name: '制定采购需求计划',
|
||
image: 'public/良品铺子采购方案设计项目/流程一：制定采购需求计划.jpeg',
|
||
overview: '在需求计划环节，协助整理销售与库存数据，参与构建采购计划，确保采购节奏与市场需求匹配，减少断货和库存积压风险。',
|
||
content: [
|
||
'数据整理与分析：负责收集门店POS销售数据与SKU周转天数，协助形成采购预测依据，提升计划精准度。',
|
||
'季节与活动匹配：整理节假日及促销活动商品需求信息，配合团队调整采购锁量计划，保障主推品类供应稳定。',
|
||
'计划建议协助：参与生成SKU采购建议单的初步版本，整理为周度与月度计划，支持审批流程规范执行。'
|
||
]
|
||
},
|
||
{
|
||
name: '供应商准入与评估选择',
|
||
image: 'public/良品铺子采购方案设计项目/流程二：供应商准入与评估选择.jpeg',
|
||
overview: '在供应商管理环节，协助开展资质审核与报价比对，参与试供验收记录，支持团队筛选出合格的长期合作伙伴。',
|
||
content: [
|
||
'资料审核辅助：整理供应商资质、质检报告与产能资料，协助录入SRM系统，确保准入资料齐全合规。',
|
||
'报价比对支持：参与同类产品的多家供应商报价整理与比选记录，支持形成透明的评估结果。',
|
||
'试供跟进：负责统计试供批次的合格率与交期情况，形成验收反馈，支持供应商评价结果更新。'
|
||
]
|
||
},
|
||
{
|
||
name: '采购执行与合同签订',
|
||
image: 'public/良品铺子采购方案设计项目/流程三：采购执行与合同签订.jpeg',
|
||
overview: '在采购执行阶段，协助完成采购订单录入、合同关键条款确认与履约跟进，支持团队实现采购执行的规范化。',
|
||
content: [
|
||
'订单处理协助：在ERP系统中录入与追踪采购订单，核对SKU、数量与交付周期，保证与计划一致。',
|
||
'合同信息整理：协助审核合同模板条款，重点关注交货周期、违约责任等核心内容，确保信息准确。',
|
||
'履约过程跟踪：记录订单执行情况与物流节点，协助整理履约偏差数据，为后续风险评估提供依据。'
|
||
]
|
||
},
|
||
{
|
||
name: '到货验收与质量检查',
|
||
image: 'public/良品铺子采购方案设计项目/流程四：到货验收与质量检查.jpeg',
|
||
overview: '在商品到货环节，协助质检与验收流程，记录抽检与全检结果，确保入库商品符合标准。',
|
||
content: [
|
||
'抽检协助：配合质检员完成抽检记录，核对批次、包装、保质期信息，确保符合验收标准。',
|
||
'异常记录整理：参与将不合格品情况录入系统，整理异常单并跟进退换货处理流程。',
|
||
'质量合规支持：协助收集第三方质检报告，整理季度检测结果，供团队开展食品安全合规分析。'
|
||
]
|
||
},
|
||
{
|
||
name: '物流运输与库存入库',
|
||
image: 'public/良品铺子采购方案设计项目/流程五：物流运输与库存入库.jpeg',
|
||
overview: '在物流入库阶段，配合完成配送信息核对与库存系统录入，确保商品运输安全和入库高效。',
|
||
content: [
|
||
'配送时效跟进：协助统计区域仓至门店的配送时效数据，记录延误情况，反馈团队优化。',
|
||
'入库校验支持：使用PDA设备协助核对SKU与包装箱号，确保到货数据与系统信息一致。',
|
||
'库存记录整理：参与将入库商品录入WMS系统，支持形成完整追溯链条，保障库存准确。'
|
||
]
|
||
},
|
||
{
|
||
name: '供应商绩效管理与持续改进',
|
||
image: 'public/良品铺子采购方案设计项目/流程六：供应商绩效管理与持续改进.jpeg',
|
||
overview: '在供应商绩效管理阶段，协助整理供应商评分与考核数据，参与反馈会准备，支持供应链持续优化。',
|
||
content: [
|
||
'绩效数据汇总：协助整理供应商交货准时率、合格率等数据，参与形成季度绩效通报。',
|
||
'奖惩机制辅助：负责记录供应商评级与激励政策执行情况，整理档案信息更新至SRM系统。',
|
||
'改进建议参与：在供应商共建会议前协助准备数据与问题清单，支持团队提出改进措施。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
4: {
|
||
title: '永辉生鲜超市供应链管理设计项目',
|
||
desc: '通过构建优选供应商体系、完善冷链物流、优化库存周转，显著提升了库存流转效率与配送时效。',
|
||
flows: [
|
||
{
|
||
name: '构建优选供应商体系与合同履约机制',
|
||
image: 'public/永辉生鲜超市供应链管理设计项目/流程一：构建优选供应商体系与合同履约机制.jpeg',
|
||
overview: '在供应商管理环节中，主要参与供应商准入审核、合同条款执行与履约数据收集，协助团队推进供应商全流程数字化管控，确保采购源头合规与合作稳定性。',
|
||
content: [
|
||
'供应商资质核查：协助完成食品安全认证与历史履约记录的资料审核，参与筛选合格供应商名录，保障采购源头合规性。',
|
||
'合同条款落实：配合整理与归档采购合同电子模板，确保交期承诺、赔付机制等标准条款被准确执行。',
|
||
'绩效考核支持：参与整理供应商退货率、交货准时率等数据，辅助形成季度考核报表，提升供应商履约透明度。'
|
||
]
|
||
},
|
||
{
|
||
name: '建设全程冷链物流系统保障产品新鲜',
|
||
image: 'public/永辉生鲜超市供应链管理设计项目/流程二：建设全程冷链物流系统保障产品新鲜.jpeg',
|
||
overview: '在冷链体系建设阶段，协助监控运输温度与配送作业规范，参与数据采集与反馈，支持团队确保商品在仓储、干线与门店配送中的新鲜度与合规性。',
|
||
content: [
|
||
'温控数据采集：负责整理冷链车辆GPS与温度监控数据，发现异常情况及时上报，降低断链风险。',
|
||
'装卸作业监督：参与现场卸货操作，核查卸货时限与暴露时间，保证作业符合标准化要求。',
|
||
'配送路径跟进：协助追踪配送排单执行情况，整理线路优化与成本对比数据，供团队改进调度模型。'
|
||
]
|
||
},
|
||
{
|
||
name: '优化库存周转与信息协同策略',
|
||
image: 'public/永辉生鲜超市供应链管理设计项目/流程三：优化库存周转与信息协同策略.jpg',
|
||
overview: '在库存与信息化环节中，协助团队处理门店销售数据与仓储补货信息，支持动态库存模型的落地与日清机制执行，推动库存管理与补货响应效率提升。',
|
||
content: [
|
||
'数据整理与建模：协助统计门店销售与SKU周转率数据，参与ABC分类建模的执行与修正。',
|
||
'日清机制执行：参与冷鲜品每日盘点任务，确保库存与系统数据保持一致，并支持次日补货计划生成。',
|
||
'信息协同支持：配合测试门店"一键补货"功能，整理运行中遇到的系统问题，推动仓库与门店补货联动优化。'
|
||
]
|
||
},
|
||
{
|
||
name: '分析客户偏好与多渠道订单响应机制',
|
||
image: 'public/永辉生鲜超市供应链管理设计项目/流程四：分析客户偏好与多渠道订单响应机制.jpeg',
|
||
overview: '在订单与客户数据分析阶段，协助团队整合多渠道订单，配合开展顾客画像标签化整理工作，支持线上线下协同履约与精准营销的实施。',
|
||
content: [
|
||
'订单渠道整合：参与汇总APP、小程序、POS订单数据，协助完成订单统一入库与调度归档。',
|
||
'用户画像整理：根据消费记录与品类偏好，协助分类客户群体，形成标签化数据，支持精准营销。',
|
||
'履约效率跟进：协助统计多端订单的配送时长与完单率，发现差异并反馈，供团队优化响应机制。'
|
||
]
|
||
},
|
||
{
|
||
name: '构建反馈优化与供应链持续改进机制',
|
||
image: 'public/永辉生鲜超市供应链管理设计项目/流程五：构建反馈优化与供应链持续改进机制.jpeg',
|
||
overview: '在项目的闭环反馈与持续改进环节，协助整理运营异常与员工反馈，参与形成问题归因与改进措施，推动供应链绩效与制度迭代。',
|
||
content: [
|
||
'异常问题归集：参与收集配送延迟、退货率等异常数据，协助编制周报并提交跨部门会议讨论。',
|
||
'改进建议整理：配合内部平台收集员工反馈，整理采纳意见并对接人资系统，推动经验制度化。',
|
||
'绩效结果跟进：参与监测KPI指标执行情况，协助团队完成季度优化复盘，支持系统逻辑迭代与流程固化。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
5: {
|
||
title: '某证券公司申请增加业务种类核准项目',
|
||
desc: '围绕新增"融资融券、做市交易、代销金融产品"三项业务，在三个月监管时限内实现换证、权限开通与经纪端SOP上线。',
|
||
flows: [
|
||
{
|
||
name: '构建立项论证',
|
||
image: 'public/某证券公司申请增加业务种类核准项目/流程一：构建立项论证.jpg',
|
||
overview: '围绕新增三项业务的可行性与合规边界开展论证，评估制度、技术、资本与人力投入，形成董事会决策依据与项目总纲。',
|
||
content: [
|
||
'法规适配矩阵：汇总《证券法》《融资融券办法》《做市规定》等条款，建立条款—流程—系统字段映射清单。',
|
||
'业务规模测算：依据净资本与分类评级约束，测算三年规模路径与风险资本占用，形成资源投入建议。',
|
||
'客户与系统评估：提取经纪端客户结构与交易预测，核对核心系统兼容点，输出改造需求与优先级。',
|
||
'成本与组织评估：估算系统开发、培训与合规人力成本，提出项目组织与里程碑计划，支撑立项决策。'
|
||
]
|
||
},
|
||
{
|
||
name: '规范公司治理与内部决策程序',
|
||
image: 'public/某证券公司申请增加业务种类核准项目/流程二：规范公司治理与内部决策程序.jpeg',
|
||
overview: '完成董事会／股东大会议案与授权体系建设，明确职责边界、信息披露与合规复核，确保项目法律效力与对外可出示性。',
|
||
content: [
|
||
'决议与授权：起草新增业务议案与授权边界，固化决策链与责任人，完成律师合规性复核与归档。',
|
||
'信息披露底稿：整理三年财务与风控评级、合规记录与系统评估结论，形成披露底稿与证据链。',
|
||
'职责分工表：拉通业务、合规、风控、IT与经纪条线职责，发布RACI图，降低跨部门协作摩擦。',
|
||
'合规复核意见：汇总立项论证与制度草案，出具公司治理合规意见，作为外部审查材料要件之一。'
|
||
]
|
||
},
|
||
{
|
||
name: '实施资本实力与风控指标复核',
|
||
image: 'public/某证券公司申请增加业务种类核准项目/流程三：实施资本实力与风控指标复核.jpeg',
|
||
overview: '对照做市与两融准入硬指标复核净资本与分类评价，校核风险资本提取与分账户核算机制，夯实技术测试与申报门槛。',
|
||
content: [
|
||
'净资本看板：汇总近24个月净资本、流动性与资本充足率，标记异常点并形成成因说明与整改路径。',
|
||
'分类评级佐证：整理近三年分类评级材料与监管反馈，补充持续达标证明，完善佐证与签章流程。',
|
||
'风险资本计提：核对做市账户90%计提规则与分账户核算报表，验证隔离逻辑与系统口径一致性。',
|
||
'指标监控机制：搭建月度／周度阈值预警规则与责任链条，形成长期监控方案。'
|
||
]
|
||
},
|
||
{
|
||
name: '制定制度体系与合规意见',
|
||
image: 'public/某证券公司申请增加业务种类核准项目/流程四：制定制度体系与合规意见.jpeg',
|
||
overview: '编制三项业务SOP、适当性与反洗钱细则，完成系统参数与风控阈值联调，出具制度完备性合规意见并固化执行口径。',
|
||
content: [
|
||
'SOP与流程图：输出两融、做市、代销操作规程与泳道图，明确触发条件、复核节点与留痕要求。',
|
||
'适当性管理：设计风险测评题库与产品匹配规则，联调开单拦截与豁免逻辑，固化客户分级口径。',
|
||
'反洗钱规则：接入可疑交易监测阈值与名单库，定义预警—复核—报送流程，验证接口通畅性。',
|
||
'合规意见签发：完成制度与系统一致性核验清单，提交合规负责人签字，形成对外出具的正式意见。'
|
||
]
|
||
},
|
||
{
|
||
name: '封装报批、线上申报与测试投产',
|
||
image: 'public/某证券公司申请增加业务种类核准项目/流程五：封装报批、线上申报与测试投产.png',
|
||
overview: '按政务平台目录化封装材料并提交，按期完成补正与问询；核准后开通权限并执行灰度测试，直至换证公告与经纪端SOP上线。',
|
||
content: [
|
||
'目录化封装：建立"必送—备查"双清单，统一PDF/A格式与命名规则，实施版本管控与纸电一致。',
|
||
'线上申报与补正：完成平台提交与时限跟踪，触发补正后一次性回应缺项，归档往来函与回执凭证。',
|
||
'权限开通与演练：配置两融交易单元与做市脚本，覆盖熔断、行情中断、灾备切换等测试并留痕。',
|
||
'问询与现场配合：准备开户录像、KYC、合同与日志"回溯包"，在内部红线5日内提交规范答复。',
|
||
'换证与上线：办理许可证换发与官网公告，发布业务数据日报机制，经纪端完成培训与抽测闭环。'
|
||
]
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
let activeProject = null;
|
||
let activeFlowIdx = 0;
|
||
|
||
// 覆盖全局函数
|
||
window.showProjectDetail = function(projectId) {
|
||
console.log('显示项目:', projectId);
|
||
activeProject = projectDB[projectId];
|
||
|
||
if (!activeProject) {
|
||
console.error('项目未找到:', projectId);
|
||
return;
|
||
}
|
||
|
||
// 设置项目信息
|
||
document.getElementById('pTitle').textContent = activeProject.title;
|
||
document.getElementById('pDesc').textContent = activeProject.desc;
|
||
|
||
// 生成流程导航
|
||
const nav = document.getElementById('pFlowNav');
|
||
nav.innerHTML = '';
|
||
activeProject.flows.forEach((flow, idx) => {
|
||
const btn = document.createElement('div');
|
||
btn.className = 'flow-btn';
|
||
btn.textContent = `流程${idx + 1}：${flow.name}`;
|
||
btn.onclick = () => displayFlow(idx);
|
||
nav.appendChild(btn);
|
||
});
|
||
|
||
// 显示第一个流程（第一次加载）
|
||
displayFlow(0, true);
|
||
|
||
// 记录当前滚动位置
|
||
window.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||
// 显示弹窗并禁止背景滚动
|
||
document.getElementById('projectModalNew').classList.add('show');
|
||
document.body.classList.add('modal-open');
|
||
};
|
||
|
||
function displayFlow(idx, isFirstLoad = false) {
|
||
activeFlowIdx = idx;
|
||
const flow = activeProject.flows[idx];
|
||
|
||
// 更新导航激活状态
|
||
document.querySelectorAll('.flow-btn').forEach((btn, i) => {
|
||
btn.classList.toggle('active', i === idx);
|
||
});
|
||
|
||
const imgBox = document.querySelector('.flow-img-box');
|
||
const txtBox = document.querySelector('.flow-txt-box');
|
||
|
||
if (isFirstLoad) {
|
||
// 第一次加载时直接显示内容，不需要动画
|
||
document.getElementById('pFlowImg').src = flow.image;
|
||
document.getElementById('pFlowTitle').textContent = `流程${idx + 1}：${flow.name}`;
|
||
document.getElementById('pFlowSummary').textContent = flow.overview;
|
||
|
||
// 更新工作内容
|
||
const list = document.getElementById('pFlowList');
|
||
list.innerHTML = '';
|
||
flow.content.forEach(item => {
|
||
const li = document.createElement('li');
|
||
li.textContent = item;
|
||
list.appendChild(li);
|
||
});
|
||
|
||
// 确保内容可见
|
||
if (imgBox) {
|
||
imgBox.style.opacity = '1';
|
||
imgBox.style.transform = 'translateY(0)';
|
||
}
|
||
if (txtBox) {
|
||
txtBox.style.opacity = '1';
|
||
txtBox.style.transform = 'translateY(0)';
|
||
}
|
||
} else {
|
||
// 切换流程时有动画
|
||
// 添加过渡样式
|
||
if (imgBox) imgBox.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||
if (txtBox) txtBox.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
||
|
||
// 淡出
|
||
if (imgBox) {
|
||
imgBox.style.opacity = '0';
|
||
imgBox.style.transform = 'translateY(20px)';
|
||
}
|
||
if (txtBox) {
|
||
txtBox.style.opacity = '0';
|
||
txtBox.style.transform = 'translateY(20px)';
|
||
}
|
||
|
||
setTimeout(() => {
|
||
// 更新内容
|
||
document.getElementById('pFlowImg').src = flow.image;
|
||
document.getElementById('pFlowTitle').textContent = `流程${idx + 1}：${flow.name}`;
|
||
document.getElementById('pFlowSummary').textContent = flow.overview;
|
||
|
||
// 更新工作内容
|
||
const list = document.getElementById('pFlowList');
|
||
list.innerHTML = '';
|
||
flow.content.forEach(item => {
|
||
const li = document.createElement('li');
|
||
li.textContent = item;
|
||
list.appendChild(li);
|
||
});
|
||
|
||
// 淡入
|
||
if (imgBox) {
|
||
imgBox.style.opacity = '1';
|
||
imgBox.style.transform = 'translateY(0)';
|
||
}
|
||
if (txtBox) {
|
||
txtBox.style.opacity = '1';
|
||
txtBox.style.transform = 'translateY(0)';
|
||
}
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
function closeProjectModal() {
|
||
document.getElementById('projectModalNew').classList.remove('show');
|
||
document.body.classList.remove('modal-open');
|
||
// 恢复原先的滚动位置
|
||
if (window.scrollPosition !== undefined) {
|
||
window.scrollTo(0, window.scrollPosition);
|
||
window.scrollPosition = undefined;
|
||
}
|
||
}
|
||
|
||
// 点击背景关闭
|
||
document.getElementById('projectModalNew').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeProjectModal();
|
||
}
|
||
});
|
||
|
||
// 确保函数在全局可用
|
||
window.closeModal = closeProjectModal;
|
||
|
||
// 添加全局点击监听器来调试
|
||
document.addEventListener('click', function(e) {
|
||
console.log('点击了:', e.target);
|
||
|
||
// 检查是否点击了项目链接
|
||
if (e.target.classList && e.target.classList.contains('project-link')) {
|
||
console.log('点击了project-link!');
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
// 检查父元素是否是项目链接
|
||
const link = e.target.closest('.project-link');
|
||
if (link) {
|
||
console.log('点击了project-link或其子元素!');
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
// 从onclick属性提取项目ID
|
||
const onclickStr = link.getAttribute('onclick');
|
||
console.log('onclick属性:', onclickStr);
|
||
|
||
if (onclickStr) {
|
||
const match = onclickStr.match(/showProjectDetail\((\d+)\)/);
|
||
if (match) {
|
||
const projectId = parseInt(match[1]);
|
||
console.log('手动调用showProjectDetail:', projectId);
|
||
window.showProjectDetail(projectId);
|
||
}
|
||
}
|
||
}
|
||
}, true); // 使用捕获阶段
|
||
|
||
// 延迟确保我们的函数覆盖其他文件的定义
|
||
setTimeout(function() {
|
||
window.showProjectDetail = function(projectId) {
|
||
console.log('[Final] 显示项目:', projectId);
|
||
activeProject = projectDB[projectId];
|
||
|
||
if (!activeProject) {
|
||
console.error('项目未找到:', projectId);
|
||
alert('项目 ' + projectId + ' 的数据未找到');
|
||
return;
|
||
}
|
||
|
||
// 设置项目信息
|
||
document.getElementById('pTitle').textContent = activeProject.title;
|
||
document.getElementById('pDesc').textContent = activeProject.desc;
|
||
|
||
// 生成流程导航
|
||
const nav = document.getElementById('pFlowNav');
|
||
nav.innerHTML = '';
|
||
activeProject.flows.forEach((flow, idx) => {
|
||
const btn = document.createElement('div');
|
||
btn.className = 'flow-btn';
|
||
btn.textContent = `流程${idx + 1}：${flow.name}`;
|
||
btn.onclick = () => displayFlow(idx);
|
||
nav.appendChild(btn);
|
||
});
|
||
|
||
// 显示第一个流程（第一次加载）
|
||
displayFlow(0, true);
|
||
|
||
// 添加鼠标滚轮横向滚动功能
|
||
const flowNav = document.getElementById('pFlowNav');
|
||
if (flowNav) {
|
||
flowNav.addEventListener('wheel', function(e) {
|
||
e.preventDefault();
|
||
// 将垂直滚动转换为横向滚动
|
||
flowNav.scrollLeft += e.deltaY;
|
||
}, { passive: false });
|
||
}
|
||
|
||
// 记录当前滚动位置
|
||
window.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||
// 显示弹窗并禁止背景滚动
|
||
document.getElementById('projectModalNew').classList.add('show');
|
||
document.body.classList.add('modal-open');
|
||
};
|
||
|
||
window.closeModal = closeProjectModal;
|
||
console.log('项目弹窗功能已最终加载，覆盖其他定义');
|
||
}, 1000);
|
||
|
||
console.log('项目弹窗功能初始化中...');
|
||
|
||
|
||
// 项目卡片GSAP动画效果
|
||
function initProjectCards() {
|
||
const cards = document.querySelectorAll('.project-card');
|
||
if (cards.length === 0) return;
|
||
|
||
const totalCards = cards.length;
|
||
const centerIndex = Math.floor(totalCards / 2);
|
||
let selectedCard = null;
|
||
let currentHoverCard = null;
|
||
|
||
// 确保卡片初始隐藏
|
||
gsap.set(cards, {
|
||
opacity: 0,
|
||
y: 100,
|
||
transformOrigin: "50% 90%",
|
||
});
|
||
|
||
// 设置初始扇形布局并添加入场动画 - 重叠排列
|
||
cards.forEach((card, index) => {
|
||
const offset = index - centerIndex;
|
||
const xOffset = offset * 100; // 调整水平间距，让卡片适度重叠
|
||
const rotation = offset * 5; // 旋转角度
|
||
const zIndex = totalCards - Math.abs(offset); // Z轴层级
|
||
|
||
// 入场动画
|
||
gsap.to(card, {
|
||
x: xOffset,
|
||
rotation: rotation,
|
||
zIndex: zIndex,
|
||
scale: 1,
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: 0.8,
|
||
delay: index * 0.1,
|
||
ease: "back.out(1.2)"
|
||
});
|
||
|
||
// 存储初始状态
|
||
card.dataset.initialX = xOffset;
|
||
card.dataset.initialRotation = rotation;
|
||
card.dataset.initialZ = zIndex;
|
||
|
||
// 鼠标悬停效果
|
||
card.addEventListener('mouseenter', function() {
|
||
if (currentHoverCard && currentHoverCard !== this) return;
|
||
currentHoverCard = this;
|
||
|
||
// 使用GSAP创建流畅的悬停动画
|
||
gsap.to(this, {
|
||
y: -80,
|
||
rotation: 0,
|
||
scale: 1.05,
|
||
zIndex: 20,
|
||
duration: 0.4,
|
||
ease: "power2.out",
|
||
boxShadow: "0 30px 60px rgba(255, 215, 0, 0.4)"
|
||
});
|
||
|
||
// 其他卡片稍微分开，给悬停的卡片腾出空间
|
||
cards.forEach((otherCard, otherIndex) => {
|
||
if (otherCard !== this) {
|
||
const otherOffset = otherIndex - centerIndex;
|
||
const spreadFactor = otherIndex < index ? -20 : 20;
|
||
gsap.to(otherCard, {
|
||
x: parseFloat(otherCard.dataset.initialX) + spreadFactor,
|
||
opacity: 0.85,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 鼠标离开效果
|
||
card.addEventListener('mouseleave', function() {
|
||
if (this.classList.contains('selected')) return;
|
||
currentHoverCard = null;
|
||
|
||
// 恢复到初始状态
|
||
gsap.to(this, {
|
||
x: parseFloat(this.dataset.initialX),
|
||
y: 0,
|
||
rotation: parseFloat(this.dataset.initialRotation),
|
||
scale: 1,
|
||
zIndex: parseInt(this.dataset.initialZ),
|
||
duration: 0.4,
|
||
ease: "power2.inOut",
|
||
boxShadow: "0 10px 30px rgba(0, 0, 0, 0.5)"
|
||
});
|
||
|
||
// 恢复其他卡片
|
||
cards.forEach((otherCard) => {
|
||
if (otherCard !== this && !otherCard.classList.contains('selected')) {
|
||
gsap.to(otherCard, {
|
||
x: parseFloat(otherCard.dataset.initialX),
|
||
opacity: 1,
|
||
duration: 0.3,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 点击选中效果
|
||
card.addEventListener('click', function(e) {
|
||
// 如果点击的是链接，不触发卡片选中
|
||
if (e.target.closest('.project-link')) return;
|
||
|
||
// 移除之前的选中状态
|
||
if (selectedCard && selectedCard !== this) {
|
||
selectedCard.classList.remove('selected');
|
||
|
||
// 恢复之前选中的卡片
|
||
gsap.to(selectedCard, {
|
||
x: parseFloat(selectedCard.dataset.initialX),
|
||
y: 0,
|
||
rotation: parseFloat(selectedCard.dataset.initialRotation),
|
||
scale: 1,
|
||
zIndex: parseInt(selectedCard.dataset.initialZ),
|
||
duration: 0.5,
|
||
ease: "power2.inOut"
|
||
});
|
||
}
|
||
|
||
// 切换当前卡片的选中状态
|
||
this.classList.toggle('selected');
|
||
|
||
if (this.classList.contains('selected')) {
|
||
selectedCard = this;
|
||
|
||
// 选中动画
|
||
gsap.to(this, {
|
||
x: 0,
|
||
y: -100,
|
||
rotation: 0,
|
||
scale: 1.1,
|
||
zIndex: 30,
|
||
duration: 0.5,
|
||
ease: "back.out(1.5)"
|
||
});
|
||
|
||
// 其他卡片散开更多
|
||
cards.forEach((otherCard, otherIndex) => {
|
||
if (otherCard !== this) {
|
||
const offset = otherIndex < index ? -1 : 1;
|
||
gsap.to(otherCard, {
|
||
x: parseFloat(otherCard.dataset.initialX) + (offset * 50),
|
||
scale: 0.95,
|
||
opacity: 0.7,
|
||
duration: 0.4,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
selectedCard = null;
|
||
|
||
// 恢复所有卡片
|
||
cards.forEach((card) => {
|
||
gsap.to(card, {
|
||
x: parseFloat(card.dataset.initialX),
|
||
y: 0,
|
||
rotation: parseFloat(card.dataset.initialRotation),
|
||
scale: 1,
|
||
opacity: 1,
|
||
zIndex: parseInt(card.dataset.initialZ),
|
||
duration: 0.5,
|
||
ease: "power2.inOut"
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// 添加整体容器的视差效果
|
||
const container = document.querySelector('.projects-cards-container');
|
||
if (container) {
|
||
container.addEventListener('mousemove', (e) => {
|
||
if (selectedCard) return; // 如果有选中的卡片，不应用视差
|
||
|
||
const rect = container.getBoundingClientRect();
|
||
const x = e.clientX - rect.left;
|
||
const y = e.clientY - rect.top;
|
||
const centerX = rect.width / 2;
|
||
const centerY = rect.height / 2;
|
||
|
||
const deltaX = (x - centerX) / centerX;
|
||
const deltaY = (y - centerY) / centerY;
|
||
|
||
cards.forEach((card, index) => {
|
||
if (!card.classList.contains('selected') && card !== currentHoverCard) {
|
||
const offset = index - centerIndex;
|
||
gsap.to(card, {
|
||
x: parseFloat(card.dataset.initialX) + (deltaX * 10 * (1 - Math.abs(offset) / totalCards)),
|
||
y: deltaY * 5,
|
||
duration: 0.3,
|
||
ease: "power1.out"
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
container.addEventListener('mouseleave', () => {
|
||
if (selectedCard) return;
|
||
|
||
cards.forEach((card) => {
|
||
if (!card.classList.contains('selected') && card !== currentHoverCard) {
|
||
gsap.to(card, {
|
||
x: parseFloat(card.dataset.initialX),
|
||
y: 0,
|
||
duration: 0.5,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
// 技能标签点击效果
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 不再初始化项目卡片动画，使用原始CSS样式
|
||
// initProjectCards();
|
||
|
||
const skillBubbles = document.querySelectorAll('.skill-bubble');
|
||
skillBubbles.forEach(bubble => {
|
||
bubble.addEventListener('click', function() {
|
||
const skill = this.getAttribute('data-skill');
|
||
// 创建涟漪效果
|
||
const ripple = document.createElement('span');
|
||
ripple.style.position = 'absolute';
|
||
ripple.style.width = '100%';
|
||
ripple.style.height = '100%';
|
||
ripple.style.background = 'rgba(255, 255, 255, 0.5)';
|
||
ripple.style.borderRadius = '25px';
|
||
ripple.style.transform = 'scale(0)';
|
||
ripple.style.animation = 'ripple 0.6s ease-out';
|
||
this.appendChild(ripple);
|
||
|
||
setTimeout(() => {
|
||
ripple.remove();
|
||
}, 600);
|
||
|
||
console.log('点击了技能:', skill);
|
||
});
|
||
});
|
||
});
|
||
|
||
// 微信号复制功能
|
||
function copyWeChatID() {
|
||
const wechatId = document.getElementById('wechat-id').textContent;
|
||
|
||
// 创建临时文本区域
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = wechatId;
|
||
textarea.style.position = 'absolute';
|
||
textarea.style.left = '-9999px';
|
||
document.body.appendChild(textarea);
|
||
|
||
// 选择并复制文本
|
||
textarea.select();
|
||
textarea.setSelectionRange(0, 99999); // 移动端兼容
|
||
|
||
try {
|
||
document.execCommand('copy');
|
||
// 更新提示文本
|
||
const tip = document.getElementById('copy-tip');
|
||
tip.textContent = '✓ 已复制到剪贴板';
|
||
tip.style.color = '#07c160';
|
||
|
||
// 3秒后恢复原始提示
|
||
setTimeout(() => {
|
||
tip.textContent = '点击复制微信号';
|
||
tip.style.color = '#aaa';
|
||
}, 3000);
|
||
} catch (err) {
|
||
console.error('复制失败:', err);
|
||
alert('复制失败，请手动复制微信号：' + wechatId);
|
||
}
|
||
|
||
// 移除临时元素
|
||
document.body.removeChild(textarea);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |