Initial commit: 12个专业个人简历作品集项目
41
个人简历_文旅/.claude/settings.local.json
Normal 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": []
|
||||
}
|
||||
}
|
||||
39
个人简历_文旅/.github/workflows/deploy.yml
vendored
Normal 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
@@ -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
|
||||
0
个人简历_文旅/.nojekyll
Normal file
1
个人简历_文旅/.serena/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/cache
|
||||
71
个人简历_文旅/.serena/project.yml
Normal 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: "个人简历_文旅"
|
||||
BIN
个人简历_文旅/20250907-160125.jpg
Normal file
|
After Width: | Height: | Size: 7.1 MiB |
93
个人简历_文旅/DEPLOYMENT.md
Normal 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
|
||||
**状态**: 🟢 已配置,等待启用
|
||||
121
个人简历_文旅/README.md
Normal 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!
|
||||
5
个人简历_文旅/_config.yml
Normal file
@@ -0,0 +1,5 @@
|
||||
# GitHub Pages 配置
|
||||
title: 万圆的文旅简历
|
||||
description: 一个现代化的文旅行业个人简历展示网站
|
||||
theme: none
|
||||
encoding: UTF-8
|
||||
612
个人简历_文旅/echarts-background-map.js
Normal 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);
|
||||
});
|
||||
13
个人简历_文旅/echarts-world-map-jeojson/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# echarts-world-map-jeojson
|
||||
|
||||
可供 Echarts 使用的世界地图 JeoJSON 文件,包括普通版本(worldEN.json)和中国居中版本(worldZH.json)。
|
||||
|
||||
其中普通版本国家名称为英文,额外提供一个国家名称中英文映射文件(country-name-map-zh.json),可以直接用于 Echarts 的`series[map].nameMap`配置;中国居中版本国家名称为中文。
|
||||
|
||||
## 示例
|
||||
|
||||
普通版本:
|
||||

|
||||
|
||||
中国居中版本:
|
||||

|
||||
BIN
个人简历_文旅/echarts-world-map-jeojson/assets/en.png
Normal file
|
After Width: | Height: | Size: 714 KiB |
BIN
个人简历_文旅/echarts-world-map-jeojson/assets/zh.png
Normal file
|
After Width: | Height: | Size: 685 KiB |
223
个人简历_文旅/echarts-world-map-jeojson/country-name-map-zh.json
Normal 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": "津巴布韦"
|
||||
}
|
||||
1
个人简历_文旅/echarts-world-map-jeojson/worldEN.json
Normal file
111599
个人简历_文旅/echarts-world-map-jeojson/worldZH.json
Normal file
303
个人简历_文旅/education-style.css
Normal 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;
|
||||
}
|
||||
}
|
||||
230
个人简历_文旅/hero-map-style.css
Normal 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;
|
||||
}
|
||||
2743
个人简历_文旅/index.html
Normal file
2743
个人简历_文旅/index.html.backup_20251027_204718
Normal file
329
个人简历_文旅/loader-animation.css
Normal 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;
|
||||
}
|
||||
58
个人简历_文旅/maintenance.html
Normal 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>
|
||||
16
个人简历_文旅/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
298
个人简历_文旅/personal-summary-style.css
Normal 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;
|
||||
}
|
||||
|
After Width: | Height: | Size: 873 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程一:展区主题布置.jpg
Normal file
|
After Width: | Height: | Size: 155 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程三:观众入场.jpg
Normal file
|
After Width: | Height: | Size: 246 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程二:参展资料整理.jpg
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程五:新品活动发布.jpg
Normal file
|
After Width: | Height: | Size: 491 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程六:展后数据复盘.jpg
Normal file
|
After Width: | Height: | Size: 219 KiB |
BIN
个人简历_文旅/public/2024 合肥国际 3C 电子产业博览会策划项目/流程四:展馆动线布设与秩序管理.jpg
Normal file
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 321 KiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程一:制定营销总纲与传播方式.bmp
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程三:搭建线上内容传播矩阵.jpg
Normal file
|
After Width: | Height: | Size: 271 KiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程二:策划线下活动内容.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程五:预算分解与资源整合.jpg
Normal file
|
After Width: | Height: | Size: 299 KiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程六:监督执行一致性.jpeg
Normal file
|
After Width: | Height: | Size: 259 KiB |
BIN
个人简历_文旅/public/春风 450MT新品上市营销活动策划项目/商业活动策划流程四:统一视觉物料输出与传播脚本撰.jpg
Normal file
|
After Width: | Height: | Size: 523 KiB |
15
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/README.md
Normal file
@@ -0,0 +1,15 @@
|
||||
# 森林湿地景区新媒体运营项目图片
|
||||
|
||||
请将以下图片文件放置在此文件夹中:
|
||||
|
||||
1. **森林湿地项目总图.jpg** - 项目封面图片
|
||||
2. **流程一:搭建新媒体平台矩阵.jpg** - 平台矩阵搭建流程图
|
||||
3. **流程二:新媒体内容策划与制作.jpg** - 内容策划制作流程图
|
||||
4. **流程三:互动活动运营与用户参与提升.jpg** - 活动运营流程图
|
||||
5. **流程四:用户数据监测与运营.jpg** - 数据监测流程图
|
||||
6. **流程五:制定预算计划与阶段目标.jpg** - 预算计划流程图
|
||||
|
||||
建议图片规格:
|
||||
- 尺寸:1200x800px 或 16:9 比例
|
||||
- 格式:JPG
|
||||
- 大小:每张不超过500KB
|
||||
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/主图:丽江旅游景区封面.jpeg
Normal file
|
After Width: | Height: | Size: 387 KiB |
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/流程一:搭建新媒体平台矩阵.jpeg
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/流程三:互动活动运营与用户参与提升.jpeg
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/流程二:新媒体策划与制作.jpeg
Normal file
|
After Width: | Height: | Size: 661 KiB |
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/流程五:制定预算计划与阶段目标.jpeg
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
个人简历_文旅/public/某地森林湿地自然景区多平台新媒体运营方案/流程四:用户数据监测与运营.jpeg
Normal file
|
After Width: | Height: | Size: 88 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo主图.jpg
Normal file
|
After Width: | Height: | Size: 242 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程一:制定自然流量与投放的配合方案.png
Normal file
|
After Width: | Height: | Size: 593 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程三:优化网站结构和加载速度.jpeg
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程二:整理旅游行业关键词库.jpg
Normal file
|
After Width: | Height: | Size: 838 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程五:社交媒体推广.jpg
Normal file
|
After Width: | Height: | Size: 185 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程六:数据监测与运营.jpeg
Normal file
|
After Width: | Height: | Size: 401 KiB |
BIN
个人简历_文旅/public/某自驾游平台SEO:SEM全流程优化项目/seo流程四:丰富网站内容并鼓励用户发帖.jpeg
Normal file
|
After Width: | Height: | Size: 217 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/民宿运营项目总图.jpg
Normal file
|
After Width: | Height: | Size: 323 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理_流程一:优化客房入住体验.jpg
Normal file
|
After Width: | Height: | Size: 96 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理流程三:OTA渠道运营与价格调整.jpg
Normal file
|
After Width: | Height: | Size: 182 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理流程二:内容营销与平台流量获取策略.jpg
Normal file
|
After Width: | Height: | Size: 781 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理流程五:社群运营与直播转化.png
Normal file
|
After Width: | Height: | Size: 311 KiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理流程六:复盘和品牌联动.png
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
个人简历_文旅/public/舟山某民宿180天提升入住率项目/项目经营管理流程四:会员体系建设.jpg
Normal file
|
After Width: | Height: | Size: 210 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元店流程一:战略定位与合规框架搭建.jpg
Normal file
|
After Width: | Height: | Size: 879 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元流程三:选品结构与定价毛利.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元流程二:选址评估与空间动线设计.png
Normal file
|
After Width: | Height: | Size: 1007 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元流程五:活动IP化与社交场景建设.webp
Normal file
|
After Width: | Height: | Size: 222 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元流程六:供应链与质量控制.jpg
Normal file
|
After Width: | Height: | Size: 535 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/二次元流程四:小程序与社群私域运营.jpg
Normal file
|
After Width: | Height: | Size: 540 KiB |
BIN
个人简历_文旅/public/谷子店开店与经营管理/谷子店开店与经营管理 主图.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
19
个人简历_文旅/server.js
Normal 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 停止服务器');
|
||||
});
|
||||
280
个人简历_文旅/skills-modern-style.css
Normal 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;
|
||||
}
|
||||
31
个人简历_文旅/start-server.sh
Executable 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
|
||||
111599
个人简历_文旅/worldZH.json
Normal file
732
个人简历_文旅/youth-travel-style.css
Normal 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;
|
||||
}
|
||||
BIN
个人简历_文旅/头像.jpg
Normal file
|
After Width: | Height: | Size: 6.4 MiB |
BIN
个人简历_文旅/头像_optimized.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
174
个人简历_文旅/文旅项目.md
Normal 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.售后问题反馈:配合收集顾客退换货与召回问题,整理售后数据并提交至供应商复盘环节。
|
||||
85
个人简历_文旅/新增文旅项目.md
Normal 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. 复盘文档支持:参与撰写复盘会议纪要,将问题清单、责任部门和改进建议按版本归档,确保团队内部共享透明。
|
||||
75
个人简历_文旅/访问说明.md
Normal 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
|
||||