Initial commit: 12个专业个人简历作品集项目

This commit is contained in:
KQL
2025-11-15 18:32:08 +08:00
commit b690b4663c
896 changed files with 726841 additions and 0 deletions

View File

@@ -0,0 +1,41 @@
{
"permissions": {
"allow": [
"Bash(git init:*)",
"Bash(git add:*)",
"Bash(git rm:*)",
"Bash(rm:*)",
"Bash(git commit:*)",
"Bash(git remote add:*)",
"Bash(git branch:*)",
"Bash(git push:*)",
"Bash(mv:*)",
"Bash(python3:*)",
"Bash(cp:*)",
"Bash(lsof:*)",
"Bash(git clone:*)",
"Bash(kill:*)",
"Bash(curl:*)",
"Bash(chmod:*)",
"Bash(pkill:*)",
"Bash(echo:*)",
"Bash(grep:*)",
"Bash(git remote remove:*)",
"Bash(git ls-tree:*)",
"Bash([ -f \"index.html\" ])",
"Bash([ -f \"youth-travel-style.css\" ])",
"Bash([ -f \"echarts-background-map.js\" ])",
"Bash([ -f \"worldZH.json\" ])",
"Bash([ -d \"public\" ])",
"Bash(mkdir:*)",
"Bash(identify:*)",
"Bash(convert:*)",
"Bash(git revert:*)",
"Bash(gh repo view:*)",
"mcp__serena__list_dir",
"mcp__serena__find_file",
"mcp__serena__activate_project"
],
"deny": []
}
}

View File

@@ -0,0 +1,39 @@
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

32
个人简历_文旅/.gitignore vendored Normal file
View File

@@ -0,0 +1,32 @@
# 依赖目录
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# 环境变量
.env
.env.local
.env.production.local
.env.development.local
.env.test.local
# 编辑器目录
.vscode/
.idea/
*.swp
*.swo
*~
.DS_Store
# Vercel
.vercel
# 日志文件
logs
*.log
# 临时文件
.temp
.tmp
.cache

View File

View File

@@ -0,0 +1 @@
/cache

View File

@@ -0,0 +1,71 @@
# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
# * For C, use cpp
# * For JavaScript, use typescript
# Special requirements:
# * csharp: Requires the presence of a .sln file in the project folder.
language: typescript
# the encoding used by text files in the project
# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
encoding: "utf-8"
# whether to use the project's gitignore file to ignore files
# Added on 2025-04-07
ignore_all_files_in_gitignore: true
# list of additional paths to ignore
# same syntax as gitignore, so you can use * and **
# Was previously called `ignored_dirs`, please update your config if you are using that.
# Added (renamed) on 2025-04-07
ignored_paths: []
# whether the project is in read-only mode
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
# Added on 2025-04-18
read_only: false
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
# Below is the complete list of tools for convenience.
# To make sure you have the latest list of tools, and to view their descriptions,
# execute `uv run scripts/print_tool_overview.py`.
#
# * `activate_project`: Activates a project by name.
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
# * `create_text_file`: Creates/overwrites a file in the project directory.
# * `delete_lines`: Deletes a range of lines within a file.
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
# * `execute_shell_command`: Executes a shell command.
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
# * `initial_instructions`: Gets the initial instructions for the current project.
# Should only be used in settings where the system prompt cannot be set,
# e.g. in clients you have no control over, like Claude Desktop.
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
# * `insert_at_line`: Inserts content at a given line in a file.
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
# * `list_memories`: Lists memories in Serena's project-specific memory store.
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
# * `read_file`: Reads a file within the project directory.
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
# * `remove_project`: Removes a project from the Serena configuration.
# * `replace_lines`: Replaces a range of lines within a file with new content.
# * `replace_symbol_body`: Replaces the full definition of a symbol.
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
# * `search_for_pattern`: Performs a search for a pattern in the project.
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
# * `switch_modes`: Activates modes by providing a list of their names
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
excluded_tools: []
# initial prompt for the project. It will always be given to the LLM upon activating the project
# (contrary to the memories, which are loaded on demand).
initial_prompt: ""
project_name: "个人简历_文旅"

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 MiB

View File

@@ -0,0 +1,93 @@
# 📦 部署指南
## ✅ 部署状态
项目已成功配置GitHub Pages自动部署
## 🚀 快速访问
**在线地址**: https://du9uay.github.io/personal-resume-wenlv/
> ⏰ 首次部署需要等待3-5分钟生效
## 📋 部署步骤
### 1. 启用 GitHub Pages必须
1. 访问: https://github.com/Du9uay/personal-resume-wenlv/settings/pages
2.**Source** 部分选择 **GitHub Actions**
3. 点击 **Save** 保存设置
4. 等待部署完成约3-5分钟
### 2. 检查部署状态
访问: https://github.com/Du9uay/personal-resume-wenlv/actions
查看工作流运行状态:
- ✅ 绿色勾号 = 部署成功
- 🟡 黄色圆圈 = 正在部署
- ❌ 红色叉号 = 部署失败
### 3. 访问网站
部署成功后,访问: https://du9uay.github.io/personal-resume-wenlv/
## 🔧 故障排除
### 问题1: 404错误
- **解决**: 确保GitHub Pages已启用Source选择"GitHub Actions"
### 问题2: 样式或图片不显示
- **解决**: 清除浏览器缓存使用Ctrl+F5强制刷新
### 问题3: 地图不显示
- **解决**: 等待所有资源加载完成worldZH.json文件较大(4MB)
### 问题4: Actions失败
- **解决**: 检查 https://github.com/Du9uay/personal-resume-wenlv/actions 查看错误信息
## 📝 更新部署
每次推送代码到main分支网站会自动更新
```bash
git add .
git commit -m "更新内容"
git push
```
## 🌍 其他部署选项
### Vercel推荐备用
1. 访问 https://vercel.com
2. 点击 "Import Git Repository"
3. 选择 personal-resume-wenlv
4. 点击 Deploy
### Netlify
1. 访问 https://app.netlify.com
2. 拖拽项目文件夹到页面
3. 自动部署
### Cloudflare Pages
1. 访问 https://pages.cloudflare.com
2. 连接GitHub账号
3. 选择项目部署
## 📊 性能优化建议
1. **图片优化**: 考虑压缩图片大小
2. **CDN加速**: 使用CDN加载ECharts库
3. **缓存策略**: 配置浏览器缓存
## 💡 提示
- GitHub Pages完全免费
- 支持自定义域名
- 自动HTTPS证书
- 全球CDN加速
---
**最后更新**: 2024-08-22
**状态**: 🟢 已配置,等待启用

View File

@@ -0,0 +1,121 @@
# 文旅个人简历网站
一个现代化的文旅行业个人简历展示网站,采用青春活力的设计风格。
🔗 **在线访问**: https://du9uay.github.io/personal-resume-wenlv/
## 🌟 特性
- 🎨 青春活力的视觉设计
- 🗺️ 世界地图背景动画
- 📊 技能雷达图展示
- 💼 精选文旅项目展示
- 📱 完全响应式设计
- ⚡ 流畅的交互体验
## 🚀 本地运行
### 方式一Python HTTP Server推荐
```bash
# Python 3
python3 -m http.server 8888
# Python 2
python -m SimpleHTTPServer 8888
```
### 方式二:使用启动脚本
```bash
chmod +x start-server.sh
./start-server.sh
```
然后在浏览器中访问:`http://localhost:8888`
## 📂 项目结构
```
├── index.html # 主页面
├── youth-travel-style.css # 主样式文件
├── skills-modern-style.css # 技能模块样式
├── hero-map-style.css # 地图背景样式
├── echarts-background-map.js # 世界地图配置
├── worldZH.json # 世界地图数据
└── public/ # 项目图片资源
├── 舟山某民宿180天提升入住率项目/
├── 谷子店开店与经营管理/
├── 春风450MT新品上市营销活动策划项目/
└── 某自驾游平台SEO:SEM全流程优化项目/
```
## 🎯 功能模块
### 1. 英雄区域
- 动态世界地图背景
- 个人信息展示
- 打字机效果标语
### 2. 个人概况
- 教育背景
- 专业技能
- 个人优势
### 3. 精选项目
- 4个文旅项目展示
- 详细流程弹窗
- 项目成果展示
### 4. 技能护照
- 技能雷达图
- 专业技能说明
### 5. 联系方式
- 多渠道联系方式
- 社交媒体链接
## 🛠️ 技术栈
- HTML5
- CSS3 (Flexbox, Grid, Animations)
- JavaScript (ES6+)
- ECharts (地图可视化)
- Canvas API (雷达图)
## 📝 许可
MIT License
## 👤 作者
万圆 (Wan Yuan)
## 🌐 部署说明
### GitHub Pages 部署(已配置)
项目已配置GitHub Actions自动部署。每次推送到main分支时会自动部署到GitHub Pages。
**访问地址**: https://du9uay.github.io/personal-resume-wenlv/
### 手动开启GitHub Pages
1. 进入仓库 Settings
2. 找到 Pages 选项
3. Source 选择 "GitHub Actions"
4. 等待几分钟后即可访问
### 其他部署方式
#### Vercel 部署
1. 访问 https://vercel.com
2. 导入GitHub项目
3. 一键部署
#### Netlify 部署
1. 访问 https://netlify.com
2. 拖拽项目文件夹上传
3. 自动部署
## 🤝 贡献
欢迎提交 Issues 和 Pull Requests

View File

@@ -0,0 +1,5 @@
# GitHub Pages 配置
title: 万圆的文旅简历
description: 一个现代化的文旅行业个人简历展示网站
theme: none
encoding: UTF-8

View File

@@ -0,0 +1,612 @@
// ECharts世界地图背景版 - 无飞行路线
class BackgroundWorldMap {
constructor() {
this.chart = null;
this.mapData = null;
this.visitedCountries = [
'中国', '日本', '韩国', '泰国', '新加坡', '马来西亚', '印度尼西亚',
'菲律宾', '越南', '印度', '阿联酋', '土耳其', '埃及', '南非',
'美国', '加拿大', '墨西哥', '巴西', '阿根廷', '英国', '法国',
'德国', '意大利', '西班牙', '荷兰', '比利时', '瑞士', '奥地利',
'捷克', '波兰', '俄罗斯', '澳大利亚', '新西兰', '冰岛', '挪威',
'瑞典', '芬兰', '丹麦', '葡萄牙', '希腊', '摩洛哥', '肯尼亚'
];
this.initializeMap();
}
async initializeMap() {
const container = document.getElementById('hero-map-background');
if (!container) {
console.error('地图容器不存在');
return;
}
if (typeof echarts === 'undefined') {
console.error('ECharts库未加载');
return;
}
try {
// 加载地图数据
const response = await fetch('worldZH.json');
if (!response.ok) {
throw new Error('地图数据加载失败');
}
this.mapData = await response.json();
// 修改地图数据,确保所有区域都有统一的样式
if (this.mapData.features) {
this.mapData.features.forEach(feature => {
if (!feature.properties) {
feature.properties = {};
}
// 给所有地区设置统一的属性值
feature.properties.value = 50; // 统一的值配合visualMap使用
});
}
echarts.registerMap('world', this.mapData);
// 初始化图表
this.initChart(container);
} catch (error) {
console.error('地图初始化失败:', error);
}
}
initChart(container) {
// 检查容器是否已经有图表实例
const existingInstance = echarts.getInstanceByDom(container);
if (existingInstance) {
console.log('容器已有图表实例,先销毁');
existingInstance.dispose();
}
// 确保容器有正确的尺寸
const rect = container.getBoundingClientRect();
// 创建ECharts实例明确指定尺寸
this.chart = echarts.init(container, null, {
renderer: 'canvas',
width: rect.width || window.innerWidth,
height: rect.height || window.innerHeight
});
// 立即调整大小以适应容器
setTimeout(() => {
this.chart.resize();
// 重新设置中心点以确保居中
this.adjustMapCenter();
}, 100);
// 所有国家现在都使用统一的绿色样式
// 主要城市点 - 简化版本
const cityPoints = [
{ name: '北京', value: [116.4074, 39.9042, 100] },
{ name: '东京', value: [139.6917, 35.6895, 95] },
{ name: '巴黎', value: [2.3522, 48.8566, 92] },
{ name: '纽约', value: [-74.0060, 40.7128, 95] },
{ name: '伦敦', value: [-0.1276, 51.5074, 90] },
{ name: '悉尼', value: [151.2093, -33.8688, 90] },
{ name: '迪拜', value: [55.2708, 25.2048, 85] },
{ name: '新加坡', value: [103.8198, 1.3521, 88] },
{ name: '巴厘岛', value: [115.1889, -8.4095, 100] }, // 当前位置
{ name: '罗马', value: [12.4964, 41.9028, 94] },
{ name: '马德里', value: [-3.7038, 40.4168, 86] },
{ name: '柏林', value: [13.4050, 52.5200, 88] },
{ name: '莫斯科', value: [37.6173, 55.7558, 76] },
{ name: '开罗', value: [31.2357, 30.0444, 72] },
{ name: '里约热内卢', value: [-43.1729, -22.9068, 82] }
];
// 配置项 - 简洁的背景风格
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(10, 14, 39, 0.95)',
borderColor: 'rgba(0, 180, 216, 0.5)',
borderWidth: 1,
textStyle: {
color: '#90e0ef',
fontSize: 12
},
formatter: function(params) {
if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
return `<div style="padding: 5px;">
<strong style="color: #00b4d8;">${params.name}</strong><br/>
<span style="color: #ff6b35;">访问指数:${params.value[2] || 100}%</span>
</div>`;
} else if (params.componentType === 'geo') {
return `<div style="padding: 5px;">
<strong style="color: #52b788;">${params.name}</strong><br/>
<span style="color: #90e0ef;">点击查看详情</span>
</div>`;
}
return params.name;
}
},
geo: {
map: 'world',
roam: false, // 禁用缩放和拖拽
center: [0, 0], // 世界地图标准中心
zoom: 1.2, // 适度放大
silent: false, // 允许交互
left: 'center', // 水平居中
top: 'center', // 垂直居中
aspectScale: 0.75, // 调整宽高比以补偿投影变形
itemStyle: {
normal: {
areaColor: 'rgba(82, 183, 136, 0.35)', // 统一绿色高亮
borderColor: 'rgba(82, 183, 136, 0.3)',
borderWidth: 0.8
}
},
emphasis: {
disabled: false,
itemStyle: {
areaColor: 'rgba(82, 183, 136, 0.5)',
borderColor: 'rgba(82, 183, 136, 0.8)',
borderWidth: 2,
shadowBlur: 10,
shadowColor: 'rgba(82, 183, 136, 0.5)'
},
label: {
show: true,
color: '#52b788',
fontSize: 14,
fontWeight: 'bold'
}
},
regions: [] // 清空所有特殊区域配置
},
series: [
// 城市散点 - 更简洁
{
name: '城市',
type: 'scatter',
coordinateSystem: 'geo',
data: cityPoints,
symbolSize: function(val) {
return Math.max(val[2] / 12, 4); // 更小的点
},
itemStyle: {
color: function(params) {
const value = params.value[2];
// 使用更柔和的颜色
if (value >= 90) return 'rgba(255, 107, 53, 0.6)';
if (value >= 80) return 'rgba(244, 162, 97, 0.6)';
return 'rgba(0, 180, 216, 0.6)';
},
shadowBlur: 5,
shadowColor: 'rgba(0, 180, 216, 0.3)'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(255, 107, 53, 0.5)'
},
label: {
show: true,
formatter: '{b}',
position: 'top',
color: '#fff',
fontSize: 12
}
},
silent: false // 允许交互
},
// 当前位置脉冲效果
{
name: '当前位置',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [{
name: '巴厘岛',
value: [115.1889, -8.4095]
}],
symbolSize: 15,
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'fill'
},
itemStyle: {
color: 'rgba(255, 107, 53, 0.7)',
shadowBlur: 10,
shadowColor: 'rgba(255, 107, 53, 0.5)'
},
silent: true // 不响应鼠标事件
}
]
};
// 应用配置
this.chart.setOption(option);
// 响应式
window.addEventListener('resize', () => {
if (this.chart) {
this.chart.resize();
}
});
// 美化的点击交互
this.chart.on('click', 'series.scatter', (params) => {
this.showCityInfo(params);
});
// 点击地图区域显示国家信息
this.chart.on('click', 'geo', (params) => {
if (params.name) {
this.showCountryInfo(params);
}
});
}
showCityInfo(params) {
// 移除已存在的弹窗
const existingModal = document.querySelector('.map-info-modal');
if (existingModal) {
existingModal.remove();
}
const modal = document.createElement('div');
modal.className = 'map-info-modal';
modal.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, rgba(10, 14, 39, 0.98) 0%, rgba(38, 70, 83, 0.95) 100%);
border: 2px solid rgba(0, 180, 216, 0.5);
border-radius: 20px;
padding: 30px;
z-index: 10000;
color: white;
min-width: 320px;
max-width: 400px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 100px rgba(0, 180, 216, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
animation: modalFadeIn 0.3s ease;
`;
const value = params.value[2] || 0;
const cityData = this.getCityData(params.name);
modal.innerHTML = `
<style>
@keyframes modalFadeIn {
from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 18px;
}
.modal-close:hover {
background: rgba(255, 107, 53, 0.8);
border-color: #ff6b35;
transform: rotate(90deg);
}
</style>
<button class="modal-close" onclick="this.parentElement.remove()">×</button>
<div style="text-align: center;">
<h3 style="
font-size: 28px;
margin-bottom: 15px;
background: linear-gradient(135deg, #00b4d8, #90e0ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
">${params.name}</h3>
<div style="
font-size: 60px;
margin: 20px 0;
filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.5));
">${cityData.emoji}</div>
<p style="
color: #90e0ef;
font-size: 14px;
margin-bottom: 20px;
letter-spacing: 1px;
">${cityData.country}</p>
<div style="
background: rgba(0, 180, 216, 0.1);
border: 1px solid rgba(0, 180, 216, 0.3);
border-radius: 15px;
padding: 15px;
margin: 20px 0;
">
<p style="color: #52b788; font-size: 16px; margin-bottom: 10px;">🌟 访问指数</p>
<div style="
font-size: 36px;
font-weight: bold;
background: linear-gradient(135deg, #ff6b35, #f4a261);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
">${value}%</div>
</div>
<p style="
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.6;
margin-top: 15px;
">${cityData.description}</p>
</div>
`;
document.body.appendChild(modal);
// 点击背景关闭
setTimeout(() => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
}, 100);
}
showCountryInfo(params) {
// 移除已存在的弹窗
const existingModal = document.querySelector('.map-info-modal');
if (existingModal) {
existingModal.remove();
}
const modal = document.createElement('div');
modal.className = 'map-info-modal';
modal.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, rgba(10, 14, 39, 0.98) 0%, rgba(38, 70, 83, 0.95) 100%);
border: 2px solid rgba(82, 183, 136, 0.5);
border-radius: 20px;
padding: 30px;
z-index: 10000;
color: white;
min-width: 320px;
max-width: 400px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 100px rgba(82, 183, 136, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
animation: modalFadeIn 0.3s ease;
`;
const countryData = this.getCountryData(params.name);
const isVisited = this.visitedCountries.includes(params.name);
modal.innerHTML = `
<style>
@keyframes modalFadeIn {
from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 18px;
}
.modal-close:hover {
background: rgba(82, 183, 136, 0.8);
border-color: #52b788;
transform: rotate(90deg);
}
</style>
<button class="modal-close" onclick="this.parentElement.remove()">×</button>
<div style="text-align: center;">
<h3 style="
font-size: 28px;
margin-bottom: 15px;
background: linear-gradient(135deg, #52b788, #90e0ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
">${params.name}</h3>
<div style="
font-size: 60px;
margin: 20px 0;
filter: drop-shadow(0 0 20px rgba(82, 183, 136, 0.5));
">${countryData.flag}</div>
<div style="
display: inline-block;
padding: 8px 20px;
background: ${isVisited ? 'rgba(82, 183, 136, 0.2)' : 'rgba(255, 255, 255, 0.1)'};
border: 1px solid ${isVisited ? '#52b788' : 'rgba(255, 255, 255, 0.3)'};
border-radius: 20px;
margin: 15px 0;
font-size: 14px;
color: ${isVisited ? '#52b788' : 'rgba(255, 255, 255, 0.6)'};
">
${isVisited ? '✓ 已访问' : '◯ 未访问'}
</div>
${isVisited ? `
<div style="
background: rgba(0, 180, 216, 0.1);
border: 1px solid rgba(0, 180, 216, 0.3);
border-radius: 15px;
padding: 15px;
margin: 20px 0;
">
<p style="color: #90e0ef; font-size: 14px; margin-bottom: 8px;">访问记录</p>
<p style="color: white; font-size: 16px;">${countryData.visitInfo}</p>
</div>
` : ''}
<p style="
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.6;
margin-top: 15px;
">${countryData.description}</p>
</div>
`;
document.body.appendChild(modal);
// 点击背景关闭
setTimeout(() => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
}, 100);
}
getCityData(cityName) {
const cityDatabase = {
'北京': { emoji: '🏛️', country: '中国', description: '千年古都,现代化国际大都市' },
'东京': { emoji: '🗼', country: '日本', description: '繁华都市,传统与现代的完美融合' },
'巴黎': { emoji: '🗼', country: '法国', description: '浪漫之都,艺术与时尚的天堂' },
'纽约': { emoji: '🗽', country: '美国', description: '世界之都,梦想开始的地方' },
'伦敦': { emoji: '🎡', country: '英国', description: '雾都传奇,历史与现代交织' },
'悉尼': { emoji: '🌉', country: '澳大利亚', description: '海港城市,阳光与海滩的乐园' },
'迪拜': { emoji: '🏙️', country: '阿联酋', description: '沙漠奇迹,奢华与创新的象征' },
'新加坡': { emoji: '🦁', country: '新加坡', description: '花园城市,多元文化的交汇点' },
'巴厘岛': { emoji: '🏝️', country: '印度尼西亚', description: '诸神之岛,心灵净化的圣地' },
'罗马': { emoji: '🏛️', country: '意大利', description: '永恒之城,历史在每个角落' },
'马德里': { emoji: '🎭', country: '西班牙', description: '热情之都,弗拉明戈的故乡' },
'柏林': { emoji: '🏰', country: '德国', description: '历史见证,艺术与创意的中心' },
'莫斯科': { emoji: '🏰', country: '俄罗斯', description: '红场传说,东西方文化的桥梁' },
'开罗': { emoji: '🔺', country: '埃及', description: '金字塔之城,古文明的守护者' },
'里约热内卢': { emoji: '🏖️', country: '巴西', description: '狂欢之都,桑巴与海滩的天堂' }
};
return cityDatabase[cityName] || { emoji: '📍', country: '未知', description: '等待探索的神秘之地' };
}
getCountryData(countryName) {
const countryDatabase = {
'中国': { flag: '🇨🇳', visitInfo: '2次访问 · 30天', description: '五千年文明,山河壮丽,美食天堂' },
'日本': { flag: '🇯🇵', visitInfo: '3次访问 · 21天', description: '樱花之国,匠人精神,科技与传统并存' },
'美国': { flag: '🇺🇸', visitInfo: '2次访问 · 15天', description: '自由之地,多元文化,创新的摇篮' },
'法国': { flag: '🇫🇷', visitInfo: '1次访问 · 10天', description: '浪漫国度,美食美酒,艺术殿堂' },
'英国': { flag: '🇬🇧', visitInfo: '1次访问 · 7天', description: '绅士之国,皇家传统,现代金融中心' },
'澳大利亚': { flag: '🇦🇺', visitInfo: '1次访问 · 14天', description: '袋鼠之国,自然奇观,冲浪天堂' },
'新加坡': { flag: '🇸🇬', visitInfo: '2次访问 · 5天', description: '狮城,花园城市,美食汇聚' },
'印度尼西亚': { flag: '🇮🇩', visitInfo: '1次访问 · 10天', description: '千岛之国,热带风情,文化多样' },
'意大利': { flag: '🇮🇹', visitInfo: '1次访问 · 12天', description: '艺术之国,美食故乡,历史瑰宝' },
'西班牙': { flag: '🇪🇸', visitInfo: '1次访问 · 8天', description: '热情国度,弗拉明戈,阳光海岸' },
'德国': { flag: '🇩🇪', visitInfo: '1次访问 · 6天', description: '严谨之国,啤酒文化,工业强国' },
'俄罗斯': { flag: '🇷🇺', visitInfo: '1次访问 · 9天', description: '战斗民族,文学艺术,广袤国土' },
'埃及': { flag: '🇪🇬', visitInfo: '1次访问 · 7天', description: '法老之国,金字塔,尼罗河文明' },
'巴西': { flag: '🇧🇷', visitInfo: '1次访问 · 10天', description: '桑巴王国,亚马逊雨林,足球圣地' }
};
return countryDatabase[countryName] || {
flag: '🏳️',
visitInfo: '',
description: '尚未探索的神秘土地,等待下一次冒险'
};
}
adjustMapCenter() {
// 动态调整地图中心以适应容器
const containerWidth = this.chart.getWidth();
const containerHeight = this.chart.getHeight();
const aspectRatio = containerWidth / containerHeight;
// 根据容器宽高比调整中心点
let centerX = -100;
let centerY = 20;
// 如果容器更宽,稍微向左偏移
if (aspectRatio > 1.5) {
centerX = 160;
}
// 更新地图中心,保持原有的颜色配置
this.chart.setOption({
geo: {
center: [centerX, centerY],
itemStyle: {
normal: {
areaColor: 'rgba(82, 183, 136, 0.35)', // 保持统一绿色
borderColor: 'rgba(82, 183, 136, 0.3)',
borderWidth: 0.8
}
}
}
});
}
destroy() {
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
}
}
// 初始化背景地图 - 确保只创建一次
let mapInitialized = false;
function initializeMap() {
// 防止重复初始化
if (mapInitialized || window.backgroundMap) {
console.log('地图已经初始化,跳过');
return;
}
const container = document.getElementById('hero-map-background');
if (!container) {
console.warn('地图容器不存在');
return;
}
// 清空容器内容
container.innerHTML = '';
// 标记为已初始化
mapInitialized = true;
// 创建地图实例
try {
window.backgroundMap = new BackgroundWorldMap();
console.log('地图初始化成功');
} catch (error) {
console.error('地图初始化失败:', error);
mapInitialized = false;
}
}
// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
// 延迟执行以确保所有资源加载完成
setTimeout(initializeMap, 200);
});

View File

@@ -0,0 +1,13 @@
# echarts-world-map-jeojson
可供 Echarts 使用的世界地图 JeoJSON 文件,包括普通版本(worldEN.json)和中国居中版本(worldZH.json)。
其中普通版本国家名称为英文,额外提供一个国家名称中英文映射文件(country-name-map-zh.json),可以直接用于 Echarts 的`series[map].nameMap`配置;中国居中版本国家名称为中文。
## 示例
普通版本:
![worldEN.json](./assets/en.png)
中国居中版本:
![worldZH.json](./assets/zh.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 714 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 KiB

View File

@@ -0,0 +1,223 @@
{
"Afghanistan": "阿富汗",
"Albania": "阿尔巴尼亚",
"Algeria": "阿尔及利亚",
"Angola": "安哥拉",
"Argentina": "阿根廷",
"Armenia": "亚美尼亚",
"Australia": "澳大利亚",
"Austria": "奥地利",
"Azerbaijan": "阿塞拜疆",
"Antigua and Barb.": "安提瓜和巴布达",
"American Samoa": "美属萨摩亚",
"Andorra": "安道尔",
"Bahamas": "巴哈马",
"Bahrain": "巴林",
"Bangladesh": "孟加拉国",
"Belarus": "白俄罗斯",
"Belgium": "比利时",
"Belize": "伯利兹",
"Benin": "贝宁",
"Bhutan": "不丹",
"Bolivia": "玻利维亚",
"Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
"Botswana": "博茨瓦纳",
"Brazil": "巴西",
"British Virgin Islands": "英属维京群岛",
"Brunei": "文莱",
"Bulgaria": "保加利亚",
"Burkina Faso": "布基纳法索",
"Burundi": "布隆迪",
"Br. Indian Ocean Ter.": "英属印度洋领地",
"Barbados": "巴巴多斯",
"Bermuda": "百慕大",
"Cambodia": "柬埔寨",
"Cameroon": "喀麦隆",
"Canada": "加拿大",
"Cape Verde": "佛得角",
"Cayman Islands": "开曼群岛",
"Central African Rep.": "中非共和国",
"Chad": "乍得",
"Chile": "智利",
"China": "中国",
"Colombia": "哥伦比亚",
"Comoros": "科摩罗",
"Congo": "刚果(布)",
"Costa Rica": "哥斯达黎加",
"Croatia": "克罗地亚",
"Cuba": "古巴",
"Cyprus": "塞浦路斯",
"Czech Rep.": "捷克共和国",
"Côte d'Ivoire": "科特迪瓦",
"Cayman Is.": "开曼群岛",
"Curaçao": "库拉索",
"Dem. Rep. Congo": "刚果(金)",
"Dem. Rep. Korea": "朝鲜",
"Denmark": "丹麦",
"Djibouti": "吉布提",
"Dominican Rep.": "多米尼加共和国",
"Dominica": "多米尼克",
"Ecuador": "厄瓜多尔",
"Egypt": "埃及",
"El Salvador": "萨尔瓦多",
"Equatorial Guinea": "赤道几内亚",
"Eritrea": "厄立特里亚",
"Estonia": "爱沙尼亚",
"Ethiopia": "埃塞俄比亚",
"Eq. Guinea": "赤道几内亚",
"Falkland Is.": "福克兰群岛",
"Fiji": "斐济",
"Finland": "芬兰",
"Fr. S. Antarctic Lands": "所罗门群岛",
"France": "法国",
"Fr. Polynesia": "法属玻利尼西亚",
"Gabon": "加蓬",
"Gambia": "冈比亚",
"Georgia": "格鲁吉亚",
"Germany": "德国",
"Ghana": "加纳",
"Greece": "希腊",
"Greenland": "格陵兰",
"Guatemala": "危地马拉",
"Guinea": "几内亚",
"Guinea-Bissau": "几内亚比绍",
"Guyana": "圭亚那",
"Guam": "关岛",
"Grenada": "格林纳达",
"Haiti": "海地",
"Honduras": "洪都拉斯",
"Hungary": "匈牙利",
"Heard I. and McDonald Is.": "赫德岛和麦克唐纳群岛",
"Iceland": "冰岛",
"India": "印度",
"Indonesia": "印度尼西亚",
"Iran": "伊朗",
"Iraq": "伊拉克",
"Ireland": "爱尔兰",
"Isle of Man": "马恩岛",
"Israel": "以色列",
"Italy": "意大利",
"Jamaica": "牙买加",
"Japan": "日本",
"Jordan": "约旦",
"Jersey": "泽西",
"Kazakhstan": "哈萨克斯坦",
"Kenya": "肯尼亚",
"Korea": "韩国",
"Kuwait": "科威特",
"Kyrgyzstan": "吉尔吉斯斯坦",
"Kiribati": "基里巴斯",
"Lao PDR": "老挝",
"Latvia": "拉脱维亚",
"Lebanon": "黎巴嫩",
"Lesotho": "莱索托",
"Liberia": "利比里亚",
"Libya": "利比亚",
"Lithuania": "立陶宛",
"Luxembourg": "卢森堡",
"Liechtenstein": "列支敦士登",
"Macedonia": "马其顿",
"Madagascar": "马达加斯加",
"Malawi": "马拉维",
"Malaysia": "马来西亚",
"Maldives": "马尔代夫",
"Mali": "马里",
"Malta": "马耳他",
"Mauritania": "毛里塔尼亚",
"Mauritius": "毛里求斯",
"Mexico": "墨西哥",
"Moldova": "摩尔多瓦",
"Monaco": "摩纳哥",
"Mongolia": "蒙古",
"Montenegro": "黑山共和国",
"Morocco": "摩洛哥",
"Mozambique": "莫桑比克",
"Myanmar": "缅甸",
"Montserrat": "蒙特塞拉特",
"Micronesia": "密克罗尼西亚",
"Namibia": "纳米比亚",
"Nepal": "尼泊尔",
"Netherlands": "荷兰",
"New Caledonia": "新喀里多尼亚",
"New Zealand": "新西兰",
"Nicaragua": "尼加拉瓜",
"Niger": "尼日尔",
"Nigeria": "尼日利亚",
"Norway": "挪威",
"Niue": "纽埃",
"N. Mariana Is.": "北马里亚纳群岛",
"Oman": "阿曼",
"Pakistan": "巴基斯坦",
"Panama": "巴拿马",
"Papua New Guinea": "巴布亚新几内亚",
"Paraguay": "巴拉圭",
"Peru": "秘鲁",
"Philippines": "菲律宾",
"Poland": "波兰",
"Portugal": "葡萄牙",
"Puerto Rico": "波多黎各",
"Palestine": "巴勒斯坦",
"Palau": "帕劳",
"Qatar": "卡塔尔",
"Reunion": "留尼旺",
"Romania": "罗马尼亚",
"Russia": "俄罗斯",
"Rwanda": "卢旺达",
"S. Geo. and S. Sandw. Is.": "南乔治亚和南桑威奇群岛",
"S. Sudan": "南苏丹",
"St. Vin. and Gren.": "圣文森特和格林纳丁斯",
"Samoa": "萨摩亚",
"San Marino": "圣马力诺",
"Saudi Arabia": "沙特阿拉伯",
"Senegal": "塞内加尔",
"Serbia": "塞尔维亚",
"Sierra Leone": "塞拉利昂",
"Singapore": "新加坡",
"Slovakia": "斯洛伐克",
"Slovenia": "斯洛文尼亚",
"Solomon Is.": "所罗门群岛",
"Somalia": "索马里",
"South Africa": "南非",
"Spain": "西班牙",
"Sri Lanka": "斯里兰卡",
"Sudan": "苏丹",
"Suriname": "苏里南",
"Swaziland": "斯威士兰",
"Sweden": "瑞典",
"Switzerland": "瑞士",
"Syria": "叙利亚",
"Seychelles": "塞舌尔",
"São Tomé and Principe": "圣多美和普林西比",
"St. Pierre and Miquelon": "圣皮埃尔和密克隆",
"Saint Helena": "圣赫勒拿岛、阿森松岛和特里斯坦达库尼亚群岛",
"Saint Lucia": "圣卢西亚",
"Tajikistan": "塔吉克斯坦",
"Tanzania": "坦桑尼亚",
"Thailand": "泰国",
"Togo": "多哥",
"Tonga": "汤加",
"Trinidad and Tobago": "特立尼达和多巴哥",
"Tunisia": "突尼斯",
"Turkey": "土耳其",
"Turkmenistan": "土库曼斯坦",
"Timor-Leste": "东蒂汶",
"Turks and Caicos Is.": "特克斯和凯科斯群岛",
"U.S. Virgin Is.": "美属维尔京群岛",
"Uganda": "乌干达",
"Ukraine": "乌克兰",
"United Arab Emirates": "阿拉伯联合酋长国",
"United Kingdom": "英国",
"United States": "美国",
"Uruguay": "乌拉圭",
"Uzbekistan": "乌兹别克斯坦",
"Vanuatu": "瓦努阿图",
"Vatican City": "梵蒂冈城",
"Venezuela": "委内瑞拉",
"Vietnam": "越南",
"W. Sahara": "西撒哈拉",
"Yemen": "也门",
"Yugoslavia": "南斯拉夫",
"Zaire": "扎伊尔",
"Zambia": "赞比亚",
"Zimbabwe": "津巴布韦"
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,303 @@
/* 教育背景样式 */
/* 时间线容器 */
.education-timeline {
position: relative;
padding-left: 40px;
}
.education-timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
#00b4d8 0%,
#52b788 50%,
#ffd700 100%);
opacity: 0.6;
}
/* 时间线项目 */
.timeline-item {
position: relative;
margin-bottom: 40px;
animation: slideInLeft 0.8s ease;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 时间线节点 */
.timeline-item::before {
content: '';
position: absolute;
left: -32px;
top: 20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #00b4d8;
border: 3px solid rgba(0, 180, 216, 0.3);
box-shadow: 0 0 20px rgba(0, 180, 216, 0.5);
z-index: 2;
}
/* 日期徽章 */
.timeline-date {
margin-bottom: 20px;
}
.date-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #00b4d8, #0077b6);
color: white;
border-radius: 25px;
font-weight: 600;
font-size: 0.95rem;
box-shadow: 0 5px 15px rgba(0, 180, 216, 0.3);
}
/* 教育卡片 */
.edu-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 25px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.edu-card:hover {
transform: translateY(-5px);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(0, 180, 216, 0.3);
}
/* 教育头部 */
.edu-header {
display: flex;
align-items: center;
gap: 20px;
padding: 30px;
background: rgba(0, 180, 216, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.edu-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #00b4d8, #0077b6);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.edu-icon i {
color: white;
font-size: 2rem;
}
.edu-title h3 {
color: #fff;
font-size: 1.5rem;
margin-bottom: 5px;
font-weight: 600;
}
.edu-degree {
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
margin: 0;
}
/* 教育主体 */
.edu-body {
padding: 30px;
}
.course-title {
color: #52b788;
font-size: 1.2rem;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.course-title i {
color: #52b788;
}
/* 课程网格 */
.course-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.course-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
transition: all 0.3s ease;
}
.course-item:hover {
background: rgba(82, 183, 136, 0.1);
border-color: rgba(82, 183, 136, 0.3);
transform: translateX(5px);
}
.course-item i {
color: #ffd700;
font-size: 1.1rem;
}
.course-item span {
color: rgba(255, 255, 255, 0.85);
font-size: 0.95rem;
}
/* 教育亮点 */
.edu-highlights {
padding: 20px;
background: linear-gradient(135deg,
rgba(82, 183, 136, 0.1) 0%,
rgba(82, 183, 136, 0.05) 100%);
border-radius: 15px;
border: 1px solid rgba(82, 183, 136, 0.2);
}
.edu-highlights .highlight-text {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
line-height: 1.8;
margin: 0;
display: flex;
align-items: flex-start;
gap: 10px;
}
.edu-highlights i {
flex-shrink: 0;
margin-top: 3px;
}
/* 动画效果 */
.edu-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.05) 50%,
transparent 100%
);
transition: left 0.8s ease;
}
.edu-card:hover::before {
left: 100%;
}
/* 响应式设计 */
@media (max-width: 768px) {
.education-timeline {
padding-left: 30px;
}
.education-timeline::before {
left: 10px;
}
.timeline-item::before {
left: -27px;
width: 14px;
height: 14px;
}
.edu-header {
padding: 20px;
}
.edu-icon {
width: 50px;
height: 50px;
}
.edu-icon i {
font-size: 1.5rem;
}
.edu-title h3 {
font-size: 1.3rem;
}
.edu-degree {
font-size: 1rem;
}
.edu-body {
padding: 20px;
}
.course-grid {
grid-template-columns: 1fr;
}
.course-item {
padding: 10px 15px;
}
}
@media (max-width: 480px) {
.education-timeline {
padding-left: 20px;
}
.timeline-item::before {
display: none;
}
.education-timeline::before {
display: none;
}
.edu-header {
flex-direction: column;
text-align: center;
}
.date-badge {
font-size: 0.85rem;
padding: 6px 15px;
}
}

View File

@@ -0,0 +1,230 @@
/* 英雄页地图背景样式 */
.hero-travel {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #0a0e27; /* 深色背景作为基底 */
pointer-events: none; /* 让点击事件穿透到地图 */
}
.hero-travel > * {
pointer-events: auto; /* 子元素恢复点击事件 */
}
/* 地图背景容器 */
#hero-map-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
filter: brightness(0.9) contrast(1.1);
animation: mapFadeIn 2s ease;
pointer-events: auto;
}
@keyframes mapFadeIn {
from {
opacity: 0;
transform: scale(1.05);
}
to {
opacity: 0.5;
transform: scale(1);
}
}
/* 英雄内容优化 */
.hero-content {
position: relative;
z-index: 10;
background: linear-gradient(135deg,
rgba(10, 14, 39, 0.4) 0%,
rgba(38, 70, 83, 0.3) 100%);
backdrop-filter: blur(25px) saturate(150%);
-webkit-backdrop-filter: blur(25px) saturate(150%);
border-radius: 30px;
padding: 50px 40px;
max-width: 800px;
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.3),
0 0 100px rgba(0, 180, 216, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: contentSlideUp 1s ease 0.5s both;
pointer-events: auto;
}
@keyframes contentSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 护照戳记效果优化 */
.passport-stamp {
display: inline-block;
padding: 12px 35px;
border: 3px solid rgba(240, 113, 103, 0.8);
border-radius: 12px;
transform: rotate(-3deg);
margin-bottom: 25px;
font-weight: bold;
color: rgba(240, 113, 103, 0.9);
text-transform: uppercase;
letter-spacing: 3px;
background: rgba(240, 113, 103, 0.1);
animation: stampEffect 0.5s ease;
box-shadow: 0 4px 15px rgba(240, 113, 103, 0.2);
}
/* 标题优化 */
.hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 900;
margin-bottom: 25px;
background: linear-gradient(135deg,
#00b4d8 0%,
#90e0ef 50%,
#ff6b35 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
text-shadow: 0 0 40px rgba(0, 180, 216, 0.3);
}
/* 位置标签美化 */
.location-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 25px;
background: linear-gradient(135deg,
rgba(0, 180, 216, 0.2),
rgba(144, 224, 239, 0.1));
border: 1px solid rgba(0, 180, 216, 0.5);
border-radius: 25px;
font-size: 1rem;
animation: pulse 2s infinite;
box-shadow: 0 4px 20px rgba(0, 180, 216, 0.2);
}
/* 按钮组优化 */
.hero-content .btn-travel {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
.hero-content .btn-travel::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.3) 0%,
transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.hero-content .btn-travel:hover::before {
width: 300px;
height: 300px;
}
.hero-content .btn-travel:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}
/* 描述文字优化 */
.hero-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
line-height: 1.8;
margin: 30px auto;
max-width: 600px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* 静态光效边框 */
.hero-content::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
rgba(0, 180, 216, 0.1),
transparent 30%,
transparent 70%,
rgba(255, 107, 53, 0.1));
border-radius: 30px;
z-index: -1;
opacity: 0.6;
}
/* 响应式优化 */
@media (max-width: 768px) {
.hero-content {
padding: 35px 25px;
margin: 20px;
border-radius: 20px;
}
.hero-title {
font-size: 2rem;
}
#hero-map-background {
opacity: 0.4; /* 移动端降低透明度 */
}
.location-tag {
font-size: 0.9rem;
padding: 8px 20px;
}
}
/* 地图交互提示 */
.map-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
animation: fadeInOut 3s infinite;
z-index: 5;
}
@keyframes fadeInOut {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
/* 添加微妙的动画效果 */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.hero-content {
animation: contentSlideUp 1s ease 0.5s both;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,329 @@
/* 文旅主题加载动画样式 */
/* 加载器容器 */
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0a0e27 0%, #1a2947 50%, #0a0e27 100%);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.page-loader.fade-out {
opacity: 0;
visibility: hidden;
}
/* 加载内容容器 */
.loader-content {
position: relative;
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 飞机路径动画 */
.plane-container {
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.plane-path {
width: 100%;
height: 100%;
}
.flight-path {
animation: drawPath 2s ease infinite;
}
@keyframes drawPath {
0% {
stroke-dashoffset: 400;
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
/* 飞机动画 */
.plane {
position: absolute;
font-size: 24px;
color: #00b4d8;
animation: fly 2s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(0, 180, 216, 0.3));
}
.plane i {
display: block;
transform: rotate(-45deg);
}
@keyframes fly {
0% {
left: 10%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
}
50% {
left: 50%;
top: 25%;
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
100% {
left: 90%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
}
}
/* 世界地图点动画 */
.map-outline {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
}
.map-outline circle {
animation: pulse 2s ease-in-out infinite;
}
.map-outline circle:nth-child(1) { animation-delay: 0s; }
.map-outline circle:nth-child(2) { animation-delay: 0.2s; }
.map-outline circle:nth-child(3) { animation-delay: 0.4s; }
.map-outline circle:nth-child(4) { animation-delay: 0.6s; }
.map-outline circle:nth-child(5) { animation-delay: 0.8s; }
@keyframes pulse {
0%, 100% {
r: 3;
opacity: 0.3;
}
50% {
r: 8;
opacity: 0.8;
}
}
/* 护照戳动画 */
.passport-stamps {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.stamp {
position: absolute;
padding: 8px 20px;
border: 3px solid;
border-radius: 8px;
font-weight: bold;
text-transform: uppercase;
opacity: 0;
transform: rotate(-15deg) scale(1.5);
animation: stampIn 0.6s ease forwards;
}
.stamp-1 {
top: 20%;
left: 15%;
color: #ff6b35;
border-color: #ff6b35;
animation-delay: 0.3s;
}
.stamp-2 {
top: 25%;
right: 20%;
color: #00b4d8;
border-color: #00b4d8;
transform: rotate(10deg) scale(1.5);
animation-delay: 0.6s;
}
.stamp-3 {
bottom: 25%;
left: 50%;
transform: translateX(-50%) rotate(-5deg) scale(1.5);
color: #90e0ef;
border-color: #90e0ef;
animation-delay: 0.9s;
}
@keyframes stampIn {
0% {
opacity: 0;
transform: rotate(-15deg) scale(2) translateY(-20px);
}
50% {
opacity: 1;
transform: rotate(-15deg) scale(0.9) translateY(0);
}
70% {
transform: rotate(-15deg) scale(1.1) translateY(0);
}
100% {
opacity: 0.2;
transform: rotate(-15deg) scale(1) translateY(0);
}
}
/* 加载文字 */
.loader-text {
position: relative;
z-index: 10;
text-align: center;
margin-top: 50px;
}
.loader-text h3 {
color: #fff;
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
letter-spacing: 2px;
background: linear-gradient(135deg, #00b4d8, #90e0ef, #ff6b35);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 2s ease infinite;
}
@keyframes shimmer {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* 加载点动画 */
.loading-dots {
display: flex;
gap: 8px;
justify-content: center;
}
.loading-dots span {
width: 10px;
height: 10px;
background: #00b4d8;
border-radius: 50%;
animation: dotPulse 1.5s ease infinite;
}
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-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;
}
}
/* 进度条 */
.loader-progress {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #00b4d8, #90e0ef, #ff6b35);
border-radius: 2px;
animation: progress 2s ease forwards;
}
@keyframes progress {
0% {
width: 0;
}
100% {
width: 100%;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.loader-content {
width: 300px;
height: 300px;
}
.plane-container {
width: 250px;
height: 150px;
}
.map-outline {
width: 300px;
height: 150px;
}
.loader-text h3 {
font-size: 24px;
}
.stamp {
font-size: 12px;
padding: 6px 15px;
}
.loader-progress {
width: 150px;
bottom: 60px;
}
}
/* 快速加载模式 */
.page-loader.quick-load .progress-bar {
animation-duration: 0.8s;
}
.page-loader.quick-load .plane {
animation-duration: 1s;
}
.page-loader.quick-load .stamp {
animation-duration: 0.3s;
}

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站维护中</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: white;
}
.maintenance-container {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
max-width: 500px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.btn-back {
display: inline-block;
padding: 12px 30px;
background: white;
color: #333;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="maintenance-container">
<h1>🛠️ 网站升级中</h1>
<p>我们正在优化您的浏览体验</p>
<a href="youth-travel.html" class="btn-back">返回主页</a>
</div>
</body>
</html>

View File

@@ -0,0 +1,16 @@
{
"name": "文旅个人简历",
"version": "1.0.0",
"description": "文旅项目作品集展示",
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
},
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"nodemon": "^3.0.1"
}
}

View File

@@ -0,0 +1,298 @@
/* 个人总结板块样式 */
/* 总结卡片 */
.summary-card {
position: relative;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 30px;
padding: 60px 50px;
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.2);
overflow: hidden;
animation: summaryFadeIn 1s ease;
}
@keyframes summaryFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 引号装饰 */
.summary-quote-mark {
position: absolute;
top: 20px;
left: 30px;
font-size: 6rem;
color: rgba(0, 180, 216, 0.2);
font-family: Georgia, serif;
font-weight: bold;
line-height: 1;
}
.summary-quote-end {
top: auto;
bottom: 40px;
right: 30px;
left: auto;
}
/* 内容区域 */
.summary-content {
position: relative;
z-index: 2;
padding: 0 30px;
}
/* 段落文字 */
.summary-text {
color: rgba(255, 255, 255, 0.85);
font-size: 1.15rem;
line-height: 1.9;
margin-bottom: 25px;
text-align: justify;
letter-spacing: 0.3px;
}
.summary-text:last-child {
margin-bottom: 0;
}
/* 高亮文字 */
.highlight-text {
color: #00b4d8;
font-weight: 600;
background: linear-gradient(135deg, #00b4d8, #90e0ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
/* 技能标签 */
.skill-tag {
display: inline-block;
padding: 2px 12px;
background: linear-gradient(135deg,
rgba(82, 183, 136, 0.2),
rgba(82, 183, 136, 0.1));
border: 1px solid rgba(82, 183, 136, 0.3);
border-radius: 15px;
color: #52b788;
font-weight: 500;
margin: 0 4px;
transition: all 0.3s ease;
}
.skill-tag:hover {
background: linear-gradient(135deg,
rgba(82, 183, 136, 0.3),
rgba(82, 183, 136, 0.15));
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(82, 183, 136, 0.2);
}
/* 底部标签 */
.summary-tags {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tag-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 25px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
transition: all 0.3s ease;
}
.tag-item i {
color: #00b4d8;
font-size: 1.1rem;
}
.tag-item:hover {
background: linear-gradient(135deg,
rgba(0, 180, 216, 0.15) 0%,
rgba(0, 180, 216, 0.05) 100%);
border-color: rgba(0, 180, 216, 0.3);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 180, 216, 0.2);
}
/* 装饰元素 */
.summary-decoration {
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle,
rgba(0, 180, 216, 0.1) 0%,
transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: decorationFloat 20s ease-in-out infinite;
}
@keyframes decorationFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-30px, 20px) rotate(90deg);
}
50% {
transform: translate(20px, -30px) rotate(180deg);
}
75% {
transform: translate(-20px, -20px) rotate(270deg);
}
}
/* 光效动画 */
.summary-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.05) 50%,
transparent 100%
);
transition: left 0.8s ease;
}
.summary-card:hover::before {
left: 100%;
}
/* 渐变边框效果 */
.summary-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg,
#00b4d8 0%,
transparent 30%,
transparent 70%,
#52b788 100%);
border-radius: 30px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.summary-card:hover::after {
opacity: 0.5;
}
/* 响应式设计 */
@media (max-width: 768px) {
.summary-card {
padding: 40px 30px;
border-radius: 20px;
}
.summary-quote-mark {
font-size: 4rem;
top: 15px;
left: 20px;
}
.summary-quote-end {
bottom: 30px;
right: 20px;
}
.summary-content {
padding: 0 15px;
}
.summary-text {
font-size: 1rem;
line-height: 1.8;
margin-bottom: 20px;
}
.summary-tags {
gap: 10px;
margin-top: 30px;
padding-top: 25px;
}
.tag-item {
padding: 8px 15px;
font-size: 0.9rem;
}
.summary-decoration {
width: 400px;
height: 400px;
right: -30%;
}
}
@media (max-width: 480px) {
.summary-card {
padding: 30px 20px;
}
.summary-quote-mark {
font-size: 3rem;
}
.summary-text {
font-size: 0.95rem;
text-align: left;
}
.tag-item {
padding: 6px 12px;
font-size: 0.85rem;
}
}
/* 文字呼吸动画 */
@keyframes textGlow {
0%, 100% {
text-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
}
50% {
text-shadow: 0 0 30px rgba(0, 180, 216, 0.5);
}
}
.highlight-text {
animation: textGlow 3s ease-in-out infinite;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

View File

@@ -0,0 +1,15 @@
# 森林湿地景区新媒体运营项目图片
请将以下图片文件放置在此文件夹中:
1. **森林湿地项目总图.jpg** - 项目封面图片
2. **流程一:搭建新媒体平台矩阵.jpg** - 平台矩阵搭建流程图
3. **流程二:新媒体内容策划与制作.jpg** - 内容策划制作流程图
4. **流程三:互动活动运营与用户参与提升.jpg** - 活动运营流程图
5. **流程四:用户数据监测与运营.jpg** - 数据监测流程图
6. **流程五:制定预算计划与阶段目标.jpg** - 预算计划流程图
建议图片规格:
- 尺寸1200x800px 或 16:9 比例
- 格式JPG
- 大小每张不超过500KB

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 323 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -0,0 +1,19 @@
const express = require('express');
const path = require('path');
const app = express();
const PORT = 4002;
// 设置静态文件目录
app.use(express.static('.'));
// 主路由
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
// 启动服务器
app.listen(PORT, '127.0.0.1', () => {
console.log(`文旅项目服务器运行在 http://127.0.0.1:${PORT}/`);
console.log('按 Ctrl+C 停止服务器');
});

View File

@@ -0,0 +1,280 @@
/* 现代化技能展示样式 */
/* 技能卡片样式 */
.skill-card-modern {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.skill-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
transparent 0%,
rgba(255, 255, 255, 0.05) 50%,
transparent 100%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.skill-card-modern:hover::before {
transform: translateX(100%);
}
.skill-card-modern:hover {
transform: translateY(-5px);
box-shadow:
0 10px 30px rgba(0, 180, 216, 0.2),
0 0 0 1px rgba(0, 180, 216, 0.3);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%);
}
/* 技能图标包装器 */
.skill-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
position: relative;
overflow: hidden;
}
.skill-icon-wrapper i {
color: white;
font-size: 1.5rem;
z-index: 1;
position: relative;
}
.skill-icon-wrapper::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.2) 0%,
transparent 70%);
transform: translate(-50%, -50%) scale(0);
transition: transform 0.3s ease;
}
.skill-card-modern:hover .skill-icon-wrapper::after {
transform: translate(-50%, -50%) scale(2);
}
/* 技能卡片标题 */
.skill-card-modern h4 {
color: #fff;
font-size: 1.2rem;
margin-bottom: 10px;
font-weight: 600;
}
/* 技能卡片描述 */
.skill-card-modern p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* 手风琴容器 */
.skills-accordion {
display: flex;
flex-direction: column;
gap: 15px;
}
/* 手风琴项目 */
.skill-accordion-item {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
}
.skill-accordion-item:hover {
border-color: rgba(0, 180, 216, 0.3);
box-shadow: 0 5px 20px rgba(0, 180, 216, 0.1);
}
/* 手风琴头部 */
.skill-accordion-header {
padding: 20px 25px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: rgba(255, 255, 255, 0.02);
}
.skill-accordion-header:hover {
background: rgba(255, 255, 255, 0.05);
}
.skill-accordion-header.active {
background: linear-gradient(135deg,
rgba(0, 180, 216, 0.1) 0%,
rgba(0, 180, 216, 0.05) 100%);
border-bottom: 1px solid rgba(0, 180, 216, 0.2);
}
.skill-accordion-header i:first-child {
font-size: 1.3rem;
color: #00b4d8;
width: 30px;
}
.skill-accordion-header span {
flex: 1;
color: rgba(255, 255, 255, 0.9);
font-size: 1.05rem;
font-weight: 500;
}
/* 手风琴箭头 */
.accordion-arrow {
color: rgba(255, 255, 255, 0.5);
transition: transform 0.3s ease;
margin-left: auto;
}
.skill-accordion-header.active .accordion-arrow {
transform: rotate(180deg);
color: #00b4d8;
}
/* 手风琴内容 */
.skill-accordion-content {
padding: 0 25px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
color: rgba(255, 255, 255, 0.75);
line-height: 1.7;
font-size: 0.95rem;
}
.skill-accordion-header.active + .skill-accordion-content,
.skill-accordion-content[style*="display: block"] {
max-height: 200px;
padding: 20px 25px;
}
/* 技能顶部区域响应式 */
@media (max-width: 968px) {
.skills-top-section {
grid-template-columns: 1fr !important;
}
}
/* 核心能力和复合能力并排布局响应式 */
@media (max-width: 1024px) {
.skills-abilities-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.skill-card-modern {
padding: 20px;
}
.skill-card-modern h4 {
font-size: 1.1rem;
}
.skill-card-modern p {
font-size: 0.85rem;
}
.skill-accordion-header {
padding: 15px 20px;
}
.skill-accordion-header span {
font-size: 0.95rem;
}
.skill-accordion-content {
font-size: 0.9rem;
}
}
/* 动画效果 */
@keyframes skillCardEnter {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.skill-card-modern {
animation: skillCardEnter 0.5s ease forwards;
opacity: 0;
}
.skill-card-modern:nth-child(1) { animation-delay: 0.1s; }
.skill-card-modern:nth-child(2) { animation-delay: 0.15s; }
.skill-card-modern:nth-child(3) { animation-delay: 0.2s; }
.skill-card-modern:nth-child(4) { animation-delay: 0.25s; }
.skill-card-modern:nth-child(5) { animation-delay: 0.3s; }
.skill-card-modern:nth-child(6) { animation-delay: 0.35s; }
.skill-card-modern:nth-child(7) { animation-delay: 0.4s; }
/* 光效动画 */
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skill-card-modern::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.03) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: shimmer 3s infinite;
pointer-events: none;
}

View File

@@ -0,0 +1,31 @@
#!/bin/bash
# 启动局域网HTTP服务器脚本
echo "========================================="
echo " 启动文旅简历网站局域网服务器"
echo "========================================="
echo ""
# 获取本机IP地址
IP=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | head -1 | awk '{print $2}')
PORT=8888
echo "📡 正在启动服务器..."
echo ""
echo "✅ 服务器启动成功!"
echo ""
echo "🌐 访问地址:"
echo " 本机访问: http://localhost:$PORT/"
echo " 局域网访问: http://$IP:$PORT/"
echo ""
echo "📱 手机访问:"
echo " 1. 确保手机与电脑在同一WiFi网络"
echo " 2. 在手机浏览器输入: http://$IP:$PORT/"
echo ""
echo "🛑 按 Ctrl+C 停止服务器"
echo "========================================="
echo ""
# 启动服务器
python3 -m http.server $PORT --bind 0.0.0.0

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,732 @@
/* 年轻化文旅主题样式 - 完全文旅主题 */
:root {
/* 旅行主题色彩系统 */
--travel-ocean: #00b4d8;
--travel-sunset: #ff6b35;
--travel-forest: #52b788;
--travel-sand: #f4a261;
--travel-sky: #90e0ef;
--travel-mountain: #264653;
--travel-coral: #f07167;
/* 渐变色 */
--sunrise-gradient: linear-gradient(135deg, #ff6b35 0%, #f4a261 50%, #e9c46a 100%);
--ocean-gradient: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
--forest-gradient: linear-gradient(135deg, #2d6a4f 0%, #52b788 50%, #95d5b2 100%);
--adventure-gradient: linear-gradient(135deg, #264653 0%, #2a9d8f 50%, #e76f51 100%);
/* 基础色 */
--primary: #00b4d8;
--secondary: #ff6b35;
--accent: #52b788;
--dark: #264653;
--light: #ffffff;
--bg-dark: #0a0e27;
--text-light: rgba(255, 255, 255, 0.9);
--text-muted: rgba(255, 255, 255, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'PingFang SC', -apple-system, sans-serif;
background: var(--bg-dark);
color: var(--text-light);
overflow-x: hidden;
}
/* 修复导航栏 */
.travel-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 15px 0;
background: rgba(38, 70, 83, 0.95);
backdrop-filter: blur(20px);
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
.travel-nav.scrolled {
padding: 10px 0;
background: rgba(38, 70, 83, 0.98);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.5rem;
font-weight: bold;
background: var(--sunrise-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
border: none;
outline: none;
}
.nav-menu {
display: flex;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-link {
color: var(--text-light);
text-decoration: none;
padding: 10px 20px;
border-radius: 25px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
font-size: 0.95rem;
}
.nav-link:hover {
background: rgba(255, 107, 53, 0.2);
color: var(--travel-sunset);
transform: translateY(-2px);
}
.nav-link.active {
background: var(--sunrise-gradient);
color: white;
}
/* 汉堡菜单 - 移动端 */
.nav-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: var(--text-light);
border-radius: 3px;
transition: all 0.3s ease;
}
/* 旅行地图背景 */
.world-map-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background:
radial-gradient(circle at 20% 50%, rgba(0, 180, 216, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(255, 107, 53, 0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 20%, rgba(82, 183, 136, 0.2) 0%, transparent 50%),
var(--bg-dark);
overflow: hidden;
}
/* 飞机航线动画 */
.flight-paths {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
.flight-path {
position: absolute;
width: 2px;
background: linear-gradient(to right, transparent, var(--travel-sky), transparent);
transform-origin: left center;
animation: drawPath 10s infinite ease-in-out;
}
.plane-icon {
position: absolute;
right: -20px;
top: -10px;
width: 20px;
height: 20px;
animation: fly 10s infinite ease-in-out;
}
@keyframes drawPath {
0% { transform: scaleX(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: scaleX(1); opacity: 0; }
}
@keyframes fly {
0% { transform: translateX(-100vw) rotate(45deg); }
100% { transform: translateX(0) rotate(45deg); }
}
/* 英雄区域 - 旅行主题 */
.hero-travel {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 100px 20px 60px;
}
.hero-content {
max-width: 900px;
text-align: center;
z-index: 10;
}
.passport-stamp {
display: inline-block;
padding: 10px 30px;
border: 3px solid var(--travel-coral);
border-radius: 10px;
transform: rotate(-5deg);
margin-bottom: 20px;
font-weight: bold;
color: var(--travel-coral);
text-transform: uppercase;
letter-spacing: 2px;
animation: stamp 0.5s ease;
}
@keyframes stamp {
0% { transform: rotate(-5deg) scale(1.5); opacity: 0; }
100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}
.hero-title {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-weight: 900;
margin-bottom: 20px;
background: var(--adventure-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.3rem;
color: var(--travel-sky);
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.location-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 20px;
background: rgba(0, 180, 216, 0.1);
border: 1px solid var(--travel-ocean);
border-radius: 20px;
font-size: 0.9rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* 目的地卡片 */
.destination-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 30px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.destination-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--sunrise-gradient);
}
.destination-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
}
.destination-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 20px;
}
.destination-title {
font-size: 1.8rem;
font-weight: bold;
color: white;
}
.destination-country {
display: inline-block;
padding: 5px 15px;
background: var(--ocean-gradient);
border-radius: 15px;
font-size: 0.8rem;
color: white;
font-weight: 600;
}
.destination-stats {
display: flex;
gap: 30px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
color: var(--travel-sunset);
}
.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* 旅行统计仪表盘 */
.travel-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 40px 0;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.05);
}
.stat-icon {
font-size: 2.5rem;
margin-bottom: 15px;
display: block;
}
.stat-number {
font-size: 2rem;
font-weight: bold;
background: var(--sunrise-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-desc {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 5px;
}
/* 旅行项目展示 */
.travel-project {
position: relative;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(135deg, rgba(38, 70, 83, 0.8), rgba(38, 70, 83, 0.4));
transition: all 0.3s ease;
cursor: pointer;
}
.travel-project:hover {
transform: scale(1.03);
box-shadow: 0 20px 40px rgba(0, 180, 216, 0.3);
}
.travel-project::after {
content: '\f138';
font-family: 'bootstrap-icons';
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(0, 180, 216, 0.9);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.travel-project:hover::after {
opacity: 1;
transform: scale(1);
}
.project-image {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
}
.travel-project:hover .project-image {
transform: scale(1.1);
}
.project-content {
padding: 25px;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.tag {
padding: 5px 12px;
background: rgba(255, 107, 53, 0.2);
border: 1px solid var(--travel-sunset);
border-radius: 15px;
font-size: 0.8rem;
color: var(--travel-sunset);
}
.project-title {
font-size: 1.5rem;
margin-bottom: 10px;
color: white;
}
.project-description {
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 20px;
}
.project-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--travel-ocean);
text-decoration: none;
font-weight: 600;
transition: gap 0.3s ease;
}
.project-link:hover {
gap: 10px;
}
/* 旅行路线时间轴 */
.journey-map {
position: relative;
padding: 60px 0;
}
.journey-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: var(--ocean-gradient);
transform: translateX(-50%);
}
.journey-stop {
position: relative;
margin: 40px 0;
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
.journey-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: var(--travel-sunset);
border: 4px solid var(--bg-dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.journey-content {
width: 45%;
padding: 25px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.journey-stop:nth-child(odd) .journey-content {
margin-right: auto;
}
.journey-stop:nth-child(even) .journey-content {
margin-left: auto;
text-align: right;
}
.journey-date {
color: var(--travel-ocean);
font-weight: bold;
margin-bottom: 10px;
}
.journey-title {
font-size: 1.3rem;
margin-bottom: 10px;
}
.journey-description {
color: var(--text-muted);
line-height: 1.6;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 技能护照样式 */
.skill-passport {
background: linear-gradient(135deg, #8b4513, #a0522d);
border-radius: 15px;
padding: 30px;
position: relative;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.passport-header {
text-align: center;
margin-bottom: 30px;
color: #ffd700;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 3px;
}
.visa-stamps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.visa-stamp {
padding: 15px;
border: 2px solid #ffd700;
border-radius: 10px;
text-align: center;
transform: rotate(-2deg);
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.1);
}
.visa-stamp:nth-child(even) {
transform: rotate(2deg);
}
.visa-stamp:hover {
transform: rotate(0) scale(1.1);
background: rgba(255, 255, 255, 0.2);
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 60px;
left: -100%;
width: 100%;
height: calc(100vh - 60px);
background: rgba(38, 70, 83, 0.98);
flex-direction: column;
padding: 20px;
transition: left 0.3s ease;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.journey-line {
left: 30px;
}
.journey-marker {
left: 30px;
}
.journey-content {
width: calc(100% - 80px);
margin-left: 60px !important;
text-align: left !important;
}
.hero-title {
font-size: 2rem;
}
.travel-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* 加载动画 */
.travel-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-dark);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
.airplane-loader {
width: 60px;
height: 60px;
animation: fly-loader 2s infinite ease-in-out;
}
@keyframes fly-loader {
0%, 100% { transform: translateX(-30px) rotate(-10deg); }
50% { transform: translateX(30px) rotate(10deg); }
}
/* 实用类 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding: 80px 0;
}
.text-gradient {
background: var(--sunrise-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn-travel {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 30px;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-primary {
background: var(--sunrise-gradient);
color: white;
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}
.btn-outline {
background: transparent;
color: var(--travel-ocean);
border: 2px solid var(--travel-ocean);
}
.btn-outline:hover {
background: var(--travel-ocean);
color: white;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -0,0 +1,174 @@
(一)项目一
项目名称舟山某民宿180天提升入住率项目
项目描述:随着舟山旅游业的发展,区域内民宿市场竞争日益激烈,入住率和复购率成为衡量运营成效的关键指标。本项目以舟山某老城区小型民宿为试点,目标是在 180 天内提升整体入住率 40%并通过优化客房体验、OTA 运营、社群直播营销、会员体系建设与数据复盘,打造出可复制的提升模式。通过在运营环节引入数据驱动策略和内容传播机制,项目致力于提升民宿在年轻游客与家庭客群中的吸引力,形成可持续增长的入住率提升方案。
实习时间2023.5~2024.9
实习岗位:民宿运营助理
实习企业xxx文旅管理有限公司
流程一:优化客房入住体验
流程概述:围绕“入住前—入住中—入住后”的全链路体验,参与用户需求调研、房间环境优化与使用引导上线;通过问题房型巡检与反馈闭环,提升舒适度与好评度。
工作内容:
1. 用户需求调研与资料上传执行:在预订前通过短信/企微推送问卷,入住后张贴二维码引导上传照片/视频;负责汇总功能与服务偏好清单,反馈至改造与软装方案。
2. 噪音与遮光优化落地协助更换高遮光窗帘与门缝密封条使用分贝计记录改造前后数据平均下降约8dB更新“问题房型定位表”跟进整改直至复测达标。
3. 入住引导资料制作与上线配合制作含动图的电子操作卡片Wi-Fi、门锁等完成多机型扫码与跳转测试上线后一周统计扫码率与常见问题形成优化清单。
流程二:内容营销与平台流量获取策略
流程概述围绕“种草—引流—成交”闭环协助短视频与图文内容生产、KOC对接与发布节奏管理将优质内容反哺OTA详情页提升曝光与转化效率。
工作内容:
1. 抖音短视频发布执行按周计划协助完成脚本、拍摄与剪辑上线“本地隐藏民宿”系列每周3条跟踪完播率/评论等指标累计播放量突破42万+。
2. 小红书博主合作落地对接5位本地生活类博主提供拍摄清单与素材包跟进审稿与发布时间整理笔记数据带来约310单团购转化。
3. UGC共创与素材管理在前台与房内张贴投稿指引征集访谈/Vlog并完成授权建立素材库打标签用于二次剪辑与多平台分发与投放。
流程三OTA渠道运营与价格调整
流程概述在OTA平台运营环节主要参与价格监控、库存检查和促销活动排期确保房源在各大平台的数据一致并提升房源曝光率与销售转化。
工作内容:
1. 智能调价系统跟进:协助查看并记录自动调价结果,检查房价是否符合市场与节假日预期,发现异常及时反馈。
2. 房态与价格复核每天早晚两次对OTA平台与自营小程序的房态、价格进行比对确认无错价与超售问题。
3. 节假日促销执行:配合完成节假日促销日历的整理,协助设置三阶段折扣,确保房源在高峰期的优惠信息正常上线。
流程四:会员体系建设
流程概述:在会员体系搭建环节,协助设计会员权益、推送消息和整理合作资源,帮助形成用户注册、活跃和复购的完整路径。
工作内容:
1. 会员权益梳理:协助设计三级会员权益,包括礼券、延迟退房和专属客服等,整理成对比表方便后续使用。
2. 自动化消息测试:协助完成入住提醒、生日祝福和积分提醒的推送测试,确认消息格式和触达效果。
3. 周边商家合作:参与整理本地咖啡馆、餐厅的合作优惠方案,协助上线到会员专属活动中。
流程五:社群运营与直播转化
流程概述:通过企业微信和直播工具,参与社群活跃度维护、固定直播执行和抢购活动设置,帮助提升用户互动和下单转化率。
工作内容:
1. 建群与日常维护:协助在用户入住后邀请进群,并记录社群活跃度,整理日历推送节奏。
2. 固定直播执行:配合完成每周二的直播准备,包括脚本整理、房源展示安排和互动引导。
3. 限时抢购活动:参与直播间抢购活动设置,核对库存数量,确保房源限时秒杀环节顺利进行。
流程六:复盘和品牌联动
流程概述:在项目收尾阶段,参与运营数据复盘、房型表现分析和品牌活动执行,帮助团队总结经验并扩大民宿品牌影响力。
工作内容:
1. 数据看板更新:协助收集每日入住率、房型销售等数据,并整理成可视化表格,定时推送至团队群。
2. 房型表现评估:参与低动销房型清单的整理,对比订单与评价,提出需要优化的房型类别。
3. 品牌活动支持:配合完成插画师联名明信片和本地摄影协会活动的执行,收集用户反馈和曝光数据。
(二)项目二
项目名称:谷子店开店与经营管理
项目描述随着二次元产业的快速发展Z世代用户对正版IP周边的消费需求持续增长线下“谷子店”逐渐成为社交与消费的重要场景。本项目以郑州热门商圈为试点目标是在开业后 6 个月内实现月均坪效突破 7,000 元/㎡并通过正版授权核验、SKU 结构优化、盲盒合规经营、小程序私域运营与主题活动策划,构建出“门店体验+数字化私域+社交场景”的一体化经营模式。项目在运营中引入精细化数据指标和风险管控机制,确保高毛利与稳定现金流,并通过供应链标准化与活动复盘体系,为后续多店复制与可持续扩张提供可行路径。
实习时间2023.5~2024.9
实习岗位:二次元周边选品专员
实习企业xxx文旅管理有限公司
个人经历
流程一:战略定位与合规框架搭建
流程描述:在项目初期协助进行合规资料收集与整理,熟悉正版授权与盲盒规范要求,参与搭建店铺经营的合规基础,为后续商品上架与选品流程提供保障。
1.授权资料整理参与收集正版IP授权书与合同条款建立授权证据包辅助检查品类与授权范围的合规性。
2.盲盒规范执行:整理盲盒概率、公示规则与金额上限的合规材料,协助检查展示与后台记录,减少合规风险。
3.未保适配支持:协助完成会员注册分级、家长监护入口等未成年人保护措施,熟悉线上小程序相关规范。
流程二:选址评估与空间动线设计
流程描述:在门店落地过程中,协助收集商圈人流与客群数据,参与动线演练与陈列模拟,帮助团队优化用户进店体验。
1.商圈信息收集:协助整理商圈人流量、目标客群画像及租金对比数据,为选址决策提供基础资料。
2.动线与陈列演练参与导购动线模拟及货架AB测试协助检查盲盒区与收银区的布局合理性。
3.体验优化支持:在开业前协助完成店内拥挤模拟和安全检查,配合完成问题清单与整改。
流程三:选品结构与定价毛利
流程描述在商品筹备环节中参与收集热门IP的市场反馈与价格区间协助整理SKU结构和毛利数据支持团队优化商品组合。
1.SKU结构整理协助建立低/中/高价位商品清单按IP热度与工艺材质分类提升结构合理性。
2.定价与毛利辅助:参与整理同类商品市场价格,配合计算门店毛利率区间,支持定价与促销决策。
3.滞销清单跟进:整理滞销商品及库存周转数据,参与清退与组合折扣的执行方案。
流程四:小程序与社群私域运营
流程描述:在私域运营环节中,协助维护小程序功能测试,参与社群内容发布与用户互动,支持会员活跃度和复购率提升。
1.小程序功能测试:配合测试补款订阅、抽签登记、换卡匹配等功能,整理用户反馈并提交问题清单。
2.社群运营支持协助发布上新预告、活动信息与签到任务整理UGC内容并输出社群周报。
3.用户数据整理:参与记录进群率、复购率等指标,初步完成数据报表,为运营复盘提供支持。
流程五活动IP化与社交场景建设
流程描述:在活动执行阶段,参与主题活动的落地支持,负责活动资料整理、现场秩序引导及用户反馈收集,增强用户互动体验。
1.活动筹备协助整理节日与热门IP档期的活动计划配合执行签到、抽签及交换会流程。
2.现场执行支持在Coser互动与快闪活动中负责签到引导、资料发放及用户互动引导。
3.数据与复盘整理活动参与数据与UGC数量辅助输出复盘报告为后续活动改进提供参考。
流程六:供应链与质量控制
流程描述:在供应链环节中,协助跟进到货检验与抽检记录,参与问题商品的整理与反馈,支持供应链质量管理。
1.到货抽检辅助:参与执行新品首批抽检流程,整理检验记录与异常批次数据。
2.标准样与留样:协助更新材质与工艺的标准样库,参与留样记录与变更文档的整理。
3.售后问题反馈:配合收集顾客退换货与召回问题,整理售后数据并提交至供应商复盘环节。
(三)项目三
项目名称舟山某民宿180天提升入住率项目
项目描述:随着舟山旅游业的发展,区域内民宿市场竞争日益激烈,入住率和复购率成为衡量运营成效的关键指标。本项目以舟山某老城区小型民宿为试点,目标是在 180 天内提升整体入住率 40%并通过优化客房体验、OTA 运营、社群直播营销、会员体系建设与数据复盘,打造出可复制的提升模式。通过在运营环节引入数据驱动策略和内容传播机制,项目致力于提升民宿在年轻游客与家庭客群中的吸引力,形成可持续增长的入住率提升方案。
实习时间2023.5~2024.9
实习岗位:民宿运营助理
实习企业xxx文旅管理有限公司
流程一:优化客房入住体验
流程概述:围绕“入住前—入住中—入住后”的全链路体验,参与用户需求调研、房间环境优化与使用引导上线;通过问题房型巡检与反馈闭环,提升舒适度与好评度。
工作内容:
1. 用户需求调研与资料上传执行:在预订前通过短信/企微推送问卷,入住后张贴二维码引导上传照片/视频;负责汇总功能与服务偏好清单,反馈至改造与软装方案。
2. 噪音与遮光优化落地协助更换高遮光窗帘与门缝密封条使用分贝计记录改造前后数据平均下降约8dB更新“问题房型定位表”跟进整改直至复测达标。
3. 入住引导资料制作与上线配合制作含动图的电子操作卡片Wi-Fi、门锁等完成多机型扫码与跳转测试上线后一周统计扫码率与常见问题形成优化清单。
流程二:内容营销与平台流量获取策略
流程概述围绕“种草—引流—成交”闭环协助短视频与图文内容生产、KOC对接与发布节奏管理将优质内容反哺OTA详情页提升曝光与转化效率。
工作内容:
1. 抖音短视频发布执行按周计划协助完成脚本、拍摄与剪辑上线“本地隐藏民宿”系列每周3条跟踪完播率/评论等指标累计播放量突破42万+。
2. 小红书博主合作落地对接5位本地生活类博主提供拍摄清单与素材包跟进审稿与发布时间整理笔记数据带来约310单团购转化。
3. UGC共创与素材管理在前台与房内张贴投稿指引征集访谈/Vlog并完成授权建立素材库打标签用于二次剪辑与多平台分发与投放。
流程三OTA渠道运营与价格调整
流程概述在OTA平台运营环节主要参与价格监控、库存检查和促销活动排期确保房源在各大平台的数据一致并提升房源曝光率与销售转化。
工作内容:
1. 智能调价系统跟进:协助查看并记录自动调价结果,检查房价是否符合市场与节假日预期,发现异常及时反馈。
2. 房态与价格复核每天早晚两次对OTA平台与自营小程序的房态、价格进行比对确认无错价与超售问题。
3. 节假日促销执行:配合完成节假日促销日历的整理,协助设置三阶段折扣,确保房源在高峰期的优惠信息正常上线。
流程四:会员体系建设
流程概述:在会员体系搭建环节,协助设计会员权益、推送消息和整理合作资源,帮助形成用户注册、活跃和复购的完整路径。
工作内容:
1. 会员权益梳理:协助设计三级会员权益,包括礼券、延迟退房和专属客服等,整理成对比表方便后续使用。
2. 自动化消息测试:协助完成入住提醒、生日祝福和积分提醒的推送测试,确认消息格式和触达效果。
3. 周边商家合作:参与整理本地咖啡馆、餐厅的合作优惠方案,协助上线到会员专属活动中。
流程五:社群运营与直播转化
流程概述:通过企业微信和直播工具,参与社群活跃度维护、固定直播执行和抢购活动设置,帮助提升用户互动和下单转化率。
工作内容:
1. 建群与日常维护:协助在用户入住后邀请进群,并记录社群活跃度,整理日历推送节奏。
2. 固定直播执行:配合完成每周二的直播准备,包括脚本整理、房源展示安排和互动引导。
3. 限时抢购活动:参与直播间抢购活动设置,核对库存数量,确保房源限时秒杀环节顺利进行。
流程六:复盘和品牌联动
流程概述:在项目收尾阶段,参与运营数据复盘、房型表现分析和品牌活动执行,帮助团队总结经验并扩大民宿品牌影响力。
工作内容:
1. 数据看板更新:协助收集每日入住率、房型销售等数据,并整理成可视化表格,定时推送至团队群。
2. 房型表现评估:参与低动销房型清单的整理,对比订单与评价,提出需要优化的房型类别。
3. 品牌活动支持:配合完成插画师联名明信片和本地摄影协会活动的执行,收集用户反馈和曝光数据。
(四)项目四
项目名称:谷子店开店与经营管理
项目描述随着二次元产业的快速发展Z世代用户对正版IP周边的消费需求持续增长线下“谷子店”逐渐成为社交与消费的重要场景。本项目以郑州热门商圈为试点目标是在开业后 6 个月内实现月均坪效突破 7,000 元/㎡并通过正版授权核验、SKU 结构优化、盲盒合规经营、小程序私域运营与主题活动策划,构建出“门店体验+数字化私域+社交场景”的一体化经营模式。项目在运营中引入精细化数据指标和风险管控机制,确保高毛利与稳定现金流,并通过供应链标准化与活动复盘体系,为后续多店复制与可持续扩张提供可行路径。
实习时间2023.5~2024.9
实习岗位:二次元周边选品专员
实习企业xxx文旅管理有限公司
个人经历
流程一:战略定位与合规框架搭建
流程描述:在项目初期协助进行合规资料收集与整理,熟悉正版授权与盲盒规范要求,参与搭建店铺经营的合规基础,为后续商品上架与选品流程提供保障。
1.授权资料整理参与收集正版IP授权书与合同条款建立授权证据包辅助检查品类与授权范围的合规性。
2.盲盒规范执行:整理盲盒概率、公示规则与金额上限的合规材料,协助检查展示与后台记录,减少合规风险。
3.未保适配支持:协助完成会员注册分级、家长监护入口等未成年人保护措施,熟悉线上小程序相关规范。
流程二:选址评估与空间动线设计
流程描述:在门店落地过程中,协助收集商圈人流与客群数据,参与动线演练与陈列模拟,帮助团队优化用户进店体验。
1.商圈信息收集:协助整理商圈人流量、目标客群画像及租金对比数据,为选址决策提供基础资料。
2.动线与陈列演练参与导购动线模拟及货架AB测试协助检查盲盒区与收银区的布局合理性。
3.体验优化支持:在开业前协助完成店内拥挤模拟和安全检查,配合完成问题清单与整改。
流程三:选品结构与定价毛利
流程描述在商品筹备环节中参与收集热门IP的市场反馈与价格区间协助整理SKU结构和毛利数据支持团队优化商品组合。
1.SKU结构整理协助建立低/中/高价位商品清单按IP热度与工艺材质分类提升结构合理性。
2.定价与毛利辅助:参与整理同类商品市场价格,配合计算门店毛利率区间,支持定价与促销决策。
3.滞销清单跟进:整理滞销商品及库存周转数据,参与清退与组合折扣的执行方案。
流程四:小程序与社群私域运营
流程描述:在私域运营环节中,协助维护小程序功能测试,参与社群内容发布与用户互动,支持会员活跃度和复购率提升。
1.小程序功能测试:配合测试补款订阅、抽签登记、换卡匹配等功能,整理用户反馈并提交问题清单。
2.社群运营支持协助发布上新预告、活动信息与签到任务整理UGC内容并输出社群周报。
3.用户数据整理:参与记录进群率、复购率等指标,初步完成数据报表,为运营复盘提供支持。
流程五活动IP化与社交场景建设
流程描述:在活动执行阶段,参与主题活动的落地支持,负责活动资料整理、现场秩序引导及用户反馈收集,增强用户互动体验。
1.活动筹备协助整理节日与热门IP档期的活动计划配合执行签到、抽签及交换会流程。
2.现场执行支持在Coser互动与快闪活动中负责签到引导、资料发放及用户互动引导。
3.数据与复盘整理活动参与数据与UGC数量辅助输出复盘报告为后续活动改进提供参考。
流程六:供应链与质量控制
流程描述:在供应链环节中,协助跟进到货检验与抽检记录,参与问题商品的整理与反馈,支持供应链质量管理。
1.到货抽检辅助:参与执行新品首批抽检流程,整理检验记录与异常批次数据。
2.标准样与留样:协助更新材质与工艺的标准样库,参与留样记录与变更文档的整理。
3.售后问题反馈:配合收集顾客退换货与召回问题,整理售后数据并提交至供应商复盘环节。

View File

@@ -0,0 +1,85 @@
项目名称2024 合肥国际 3C 电子产业博览会策划项目
项目描述本项目立足合肥电子信息产业与长三角消费市场聚焦3C终端全生态链展示打造覆盖“家庭影音、移动影像、智能办公、游戏外设、健康穿戴、户外电子”六大场景的沉浸式体验。项目核心在于B端商务撮合与C端体验运营的双线并行通过主题统一、招商筛选、票务管控、展馆动线和数据复盘形成标准化执行路径。本人以会展执行专员身份参与布场落地、供应商协调、票务入场管理及展后数据支持确保展会运营高效、安全、可追溯为展会的顺利举办提供了有力支撑。
实习时间2024.03~2024.12
实习岗位:商业会展执行专员
实习企业:荣益诚文化发展(上海)有限公司
岗位职责:
1. 参与布场规划与布局执行,根据主题划分专区(家庭影音、移动影像等)并协助完成动线引导布署;
2. 跟进物资采购、供应商协调与现场搭建,确保布展在活动前完成并通过整体彩排;
3. 支持观众入场流程管理,包括实名预登记、现场购票与分流机制的实施与优化;
4. 协助开展展览区域安全巡视、流线控制与应急处置(如紧急疏散、突发事件响应);
5. 引导客户使用拍照打卡机制与社交传播互动提高展览传播效率与UGC参与度
6. 协助展后数据反馈与复盘报告编制,包括采购意向汇总、访客行为数据分析与流程优化建议;
7. 整理文档资料(会议纪要、物资版本、供应商记录等),支持项目团队文案存档与透明共享。
### 流程一:展区主题布置
流程描述:在展会主题确立后,重点执行层面是将策展主线转化为现场布展与观众可感知的内容。我主要参与展区分区标识张贴、导视物料摆放、主视觉落地检查,确保六大场景分区与统一风格得到完整还原。执行工作涵盖物料验收、场馆巡查与入口氛围布置,保证主题从方案到现场的一致性。
工作内容:
1. 主视觉检查协助设计组在场馆完成主KV延展物料门票、导视牌、展刊等的张贴与安装对比设计稿确认色彩、比例与关键信息无偏差。
2. 分区标识安装:按照“影音—移动—办公—健康—游戏—户外”六大场景顺序,完成区域标识悬挂与场景导览板布设,确保观众能直观感知分区。
3. 导视系统排查:逐一检查入口、主舞台、展区转角的导视牌和地贴箭头,确保方向统一、位置明显,避免观众迷路或逆行。
4. 氛围营造执行:协助布置入场口与舞台背景的灯箱与屏显,保证主题语、时间、地点等信息统一曝光。
### 流程二:参展资料整理
流程描述:本流程聚焦参展商与采购商的匹配准备,我在执行层主要负责资料收集、白名单落实和对接资料整理。通过协助建立买家需求表、制作配对桌卡与洽谈指南,帮助招商团队提高现场撮合效率,避免参展内容偏离主题。
工作内容:
1. 参展范围确认整理参展商提交的品类清单核查其是否符合手机、平板、PC、XR、可穿戴等白名单范围并提交异常情况给招商经理复核。
2. 买家需求表收集:协助向目标买家群体(电商平台、连锁渠道、区域代理)发放采购需求模板,汇总品牌偏好、价位带和交期需求,为前期配对提供数据基础。
3. 洽谈桌卡制作:根据排程表打印桌卡、洽谈时间指引与位置编号,并在现场摆放,确保买卖双方能按时找到对应位置。
4. 资料发放与记录:在现场发放标准化合同模板与服务承诺清单,协助记录意向单关键信息并完成电子化整理,便于后续团队复盘。
### 流程三:观众入场
流程描述在票务与入场环节我主要承担观众分流引导与入场秩序维护。通过实名登记核验、票务通道管理与安检提示张贴确保B端买家与C端观众快速、安全、有序入场。同时协助数据团队记录入场流速与峰值支撑后续复盘与人流调度。
工作内容:
1. 实名验证执行在入口区域协助核验观众身份检查B端观众工商信息与职位名片确保胸卡发放与入场权限匹配。
2. 票务分流引导:管理预登记、现场购票和问题处理三列队伍,维持排队秩序,并及时引导观众进入安检、闸机通道。
3. 安检提示布置:张贴并反复确认安检物品清单、道具限制说明在各入口显眼位置,避免因规则不清造成观众争议。
4. 数据采集支持:协助票务系统团队记录高峰时段的入场人数与弃票比例,并实时反馈给现场调度,帮助及时增开或合并通道。
### 流程四:展馆动线布设与秩序管理
流程描述:在展馆空间搭建与运行阶段,我主要协助完成动线导视布设与现场秩序巡查,确保观众行进方向统一、热门展位不拥堵。通过检查地贴箭头、导视牌、围挡和临时通道,支持场馆内人流的顺畅流动。重点任务是减少交叉点混乱、缩短排队时间,并对潜在安全隐患进行现场上报。
工作内容:
1. 导视物料布设:协助张贴动线箭头、导视牌、区域编号,逐段检查标识是否清晰可见,保证观众在转角与分流点能快速辨识方向。
2. 排队区域布控:在热门展位前协助布置蛇形通道与缓冲带,并及时调整排队栏杆位置,防止人群聚集堵塞主通道。
3. 安全巡查支援:定时巡查通道净空、消防出口和临时施工区域,发现堆物或遮挡立即报告工程负责人处理。
4. 观众引导执行:在主舞台、互动体验区等高峰点位,协助现场工作人员进行分批放行和方向指引,减少局部拥挤。
### 流程五:新品活动发布
流程描述:在品牌新品发布与论坛活动中,我主要参与议程物料准备、现场秩序维护与观众引导。通过协助布置舞台、准备座签与资料,保障发布现场有序;同时在嘉宾入场、观众换场环节执行秩序引导,避免因排队或占位造成混乱。此阶段强调对流程的执行把控与现场问题的快速响应。
工作内容:
1. 议程物料准备:协助放置座签、议程单、嘉宾资料包,检查投影屏幕、麦克风等基础设施是否到位。
2. 嘉宾通道管理:在嘉宾入场时维护专用通道秩序,防止无关观众跟随进入,确保发布活动的流畅性。
3. 观众换场引导:在论坛与发布活动交替环节,引导观众有序离场与入场,避免不同人流在门口交叉拥堵。
4. 现场秩序巡查:对舞台前排、媒体区、走动观众进行观察,及时发现站立过多或聚集情况,并反馈给现场主管处理。
### 流程六:展后数据复盘
流程描述:展会结束后,我主要参与展后数据整理与复盘报告的资料收集。通过汇总采购意向单、票务系统数据与观众行为反馈,协助形成结构化文档,为团队后续迭代提供依据。执行专员的工作重点是确保数据准确归档、资料版本清晰,并支持复盘会议的纪要撰写。
工作内容:
1. 意向单整理:收集现场配对会与展商洽谈的意向单,核对企业名称、联系人和需求要点,并录入统一表格。
2. 票务数据归档协助导出票务系统中的进场人数、弃票率和高峰时段数据形成标准化Excel报表。
3. 观众反馈汇总:收集线上问卷与现场问询表,按“体验、动线、安检、服务”四个维度分类整理,形成基础反馈数据。
4. 复盘文档支持:参与撰写复盘会议纪要,将问题清单、责任部门和改进建议按版本归档,确保团队内部共享透明。

View File

@@ -0,0 +1,75 @@
# 🌐 文旅简历网站 - 局域网访问说明
## ✅ 当前服务器状态
服务器已成功部署在局域网上!
## 📍 访问地址
### 本机访问
- http://localhost:8888/
### 局域网内其他设备访问
- http://192.168.2.21:8888/
## 📱 手机/平板访问步骤
1. **确保在同一网络**
- 手机/平板必须连接到与电脑相同的WiFi网络
2. **打开浏览器**
- 在手机浏览器地址栏输入: `http://192.168.2.21:8888/`
3. **扫码访问(可选)**
- 可以使用二维码生成器生成上述链接的二维码
- 用手机扫码直接访问
## 🚀 启动/停止服务器
### 启动服务器
```bash
# 方法1使用启动脚本
./start-server.sh
# 方法2直接命令
python3 -m http.server 8888 --bind 0.0.0.0
```
### 停止服务器
`Ctrl + C` 即可停止
## 🔒 安全提示
- 这是一个简单的HTTP服务器仅适用于本地开发和演示
- 不要在生产环境使用
- 确保只在可信的局域网内使用
- 服务器运行时,局域网内的所有设备都可以访问
## 📄 网站页面列表
- **主页**: index.html
- **维护页**: maintenance.html
## ⚠️ 常见问题
### 无法访问?
1. 检查防火墙设置确保8888端口未被阻止
2. 确认IP地址是否正确可能会因网络变化而改变
3. 确保服务器正在运行
### 更换端口?
如需更换端口修改命令中的8888为其他端口号即可
### 查看当前IP
```bash
ifconfig | grep "inet " | grep -v 127.0.0.1
```
## 📊 浏览器兼容性
- ✅ Chrome/Edge (推荐)
- ✅ Safari
- ✅ Firefox
- ✅ 手机浏览器
---
最后更新: 2025-08-21