Initial commit: Memind H5 portal with MindSpace, Plaza, and agent jobs.
Track application source and tests; exclude local env, user workspaces, and runtime data via .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
John
@@ -0,0 +1,48 @@
|
||||
---
|
||||
name: static-page-publish
|
||||
description: 在专属 temp 目录生成可公开访问的静态 HTML 报告与页面（TKMind H5）
|
||||
---
|
||||
|
||||
# 静态页面 / 报告发布（TKMind）
|
||||
|
||||
当用户需要**网页、HTML 报告、可视化页面、可分享链接**时，**必须先加载本技能**并按以下规则执行。
|
||||
|
||||
## 硬性约束（不可违反）
|
||||
|
||||
1. **唯一可写目录**：`/Users/john/PycharmProjects/goose/ui/h5/temp/john`
|
||||
2. **禁止**使用绝对路径（如 `/Users/...`、`../` 跳出目录）
|
||||
3. **允许**在本目录内使用 `write`、`edit`、`shell`、`tree`；**禁止**访问此目录外的路径（含 `../`、其它用户目录、项目根目录）
|
||||
4. **禁止**子 Agent、扩展管理、修改工作区外文件
|
||||
5. 优先使用**相对路径**，例如 `report.html`、`assets/chart.png`
|
||||
6. 生成 HTML 后，向用户提供可访问链接，格式：
|
||||
`https://goo.tkmind.cn/temp/john/<文件名>`
|
||||
|
||||
## 推荐工作流
|
||||
|
||||
1. 确认需求（标题、章节、是否要图表/样式）
|
||||
2. 使用 `write` 创建 `.html`（可含内联 CSS；需要时在同目录建 `assets/`）
|
||||
3. 页面内资源使用**相对路径**（`assets/foo.png`），不要用磁盘绝对路径
|
||||
4. 完成后回复：
|
||||
- 本地相对路径
|
||||
- **公网链接**（示例：`https://goo.tkmind.cn/temp/john/report.html`）
|
||||
- 简要说明如何刷新/再次访问（静态文件，保存即生效，**无需重启服务**）
|
||||
|
||||
## HTML 模板建议
|
||||
|
||||
- 完整 `<!DOCTYPE html>`，`lang="zh-CN"`
|
||||
- 移动端友好：`<meta name="viewport" content="width=device-width, initial-scale=1">`
|
||||
- 深色/浅色任选，保持可读性
|
||||
|
||||
## 禁止事项
|
||||
|
||||
- 不要写入 `ui/h5/temp/` 以外的任何目录
|
||||
- 不要把文件放到 `users/`、项目根目录或 goosed 工作区外
|
||||
- shell 仅用于本目录内整理文件/简单脚本；不要 `rm -rf` 越界路径、不要安装系统级依赖
|
||||
|
||||
## 示例
|
||||
|
||||
用户：「写一份越南旅游指南网页」
|
||||
|
||||
正确做法：
|
||||
- `write` → `vietnam-guide.html`（内容完整）
|
||||
- 回复链接：`https://goo.tkmind.cn/temp/john/vietnam-guide.html`
|
||||
@@ -0,0 +1,3 @@
|
||||
# 会议 杭州
|
||||
2026-06-12 下午 2:00 在杭州开会
|
||||
|
||||
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>上海经济发展报告 · 2025-2026</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background: #0a0e27;
|
||||
color: #e0e0e0;
|
||||
line-height: 1.7;
|
||||
padding-bottom: 40px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #fbbf24); z-index: 9999; width: 0%; transition: width 0.1s; box-shadow: 0 0 12px rgba(251,191,36,0.3); }
|
||||
.nav-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 12px; }
|
||||
.nav-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: all 0.3s; }
|
||||
.nav-dot.active { background: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,0.4); transform: scale(1.3); }
|
||||
.nav-dot:hover { background: #fcd34d; transform: scale(1.2); }
|
||||
.cover { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a0e27 0%, #111638 30%, #0d1b2a 60%, #0a0e27 100%); }
|
||||
.cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(59,130,246,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(139,92,246,0.06) 0%, transparent 50%); }
|
||||
.cover-skyline { position: absolute; bottom: 60px; left: 0; right: 0; height: 180px; z-index: 1; opacity: 0.12; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
|
||||
.cover-skyline .bldg { background: linear-gradient(180deg, transparent, #fbbf24); border-radius: 3px 3px 0 0; width: 24px; }
|
||||
.cover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(10,14,39,0.85) 100%); z-index: 1; }
|
||||
.cover-text { position: relative; z-index: 2; text-align: center; padding: 20px; }
|
||||
.cover-text .city-icon { font-size: 72px; display: block; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(255,200,50,0.2)); }
|
||||
.cover-text h1 { font-size: 44px; font-weight: 800; letter-spacing: 6px; background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; animation: fadeUp 1s ease forwards 0.3s; }
|
||||
.cover-text .sub { font-size: 17px; margin-top: 10px; color: rgba(255,255,255,0.6); letter-spacing: 3px; opacity: 0; animation: fadeUp 1s ease forwards 0.6s; }
|
||||
.cover-text .tagline { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.08); display: inline-block; padding: 8px 24px; border-radius: 20px; backdrop-filter: blur(10px); opacity: 0; animation: fadeUp 1s ease forwards 0.9s; }
|
||||
.cover-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 28px; opacity: 0; animation: fadeUp 1s ease forwards 1.1s; }
|
||||
.cover-stat { text-align: center; }
|
||||
.cover-stat .num { font-size: 26px; font-weight: 800; color: #fbbf24; }
|
||||
.cover-stat .lbl { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
|
||||
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.2); font-size: 12px; letter-spacing: 2px; animation: bounceDown 2s ease-in-out infinite; }
|
||||
@keyframes bounceDown { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
|
||||
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
|
||||
.particle { position: absolute; width: 3px; height: 3px; background: rgba(251,191,36,0.12); border-radius: 50%; animation: float linear infinite; }
|
||||
@keyframes float { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; } }
|
||||
.container { max-width: 800px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
|
||||
.section-title { text-align: center; padding: 50px 0 8px; }
|
||||
.section-title .num { font-size: 11px; color: #fbbf24; letter-spacing: 6px; font-weight: 600; }
|
||||
.section-title h2 { font-size: 26px; font-weight: 700; margin: 6px 0 8px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.section-title .sub { font-size: 13px; color: rgba(255,255,255,0.3); }
|
||||
.section-title .line { width: 50px; height: 2px; background: linear-gradient(90deg, #fbbf24, #d97706); margin: 12px auto 0; }
|
||||
.card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; margin: 20px 0; backdrop-filter: blur(10px); opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
|
||||
.card.visible { opacity: 1; transform: translateY(0); }
|
||||
.card:hover { border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
|
||||
.card-body { padding: 24px 28px; }
|
||||
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
|
||||
.kpi-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; padding: 18px; text-align: center; transition: all 0.3s; }
|
||||
.kpi-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); transform: translateY(-2px); }
|
||||
.kpi-item .icon { font-size: 24px; margin-bottom: 6px; }
|
||||
.kpi-item .number { font-size: 24px; font-weight: 800; }
|
||||
.kpi-item .number.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.kpi-item .number.blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.kpi-item .number.purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||||
.kpi-item .number.cyan { color: #06b6d4; }
|
||||
.kpi-item .number.green { color: #34d399; }
|
||||
.kpi-item .label { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
|
||||
.kpi-item .change { font-size: 12px; margin-top: 4px; }
|
||||
.kpi-item .change.up { color: #34d399; }
|
||||
.bar-group { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; height: 240px; padding: 0 4px; }
|
||||
.bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; }
|
||||
.bar-stack { display: flex; align-items: flex-end; gap: 3px; height: 100%; justify-content: center; }
|
||||
.bar { width: 32px; border-radius: 4px 4px 0 0; transition: height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; }
|
||||
.bar.gold { background: linear-gradient(180deg, #fbbf24, #d97706); }
|
||||
.bar.blue { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
|
||||
.bar-val { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; }
|
||||
.bar-lbl { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.5); text-align: center; }
|
||||
.bar-lbl .yr { font-weight: 600; color: rgba(255,255,255,0.7); }
|
||||
.data-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; }
|
||||
.data-row:last-child { border-bottom: none; }
|
||||
.data-row .label { color: rgba(255,255,255,0.55); }
|
||||
.data-row .value { font-weight: 700; }
|
||||
.data-row .value.gold { color: #fbbf24; }
|
||||
.data-row .value.blue { color: #60a5fa; }
|
||||
.data-row .value.green { color: #34d399; }
|
||||
.data-row .value.cyan { color: #06b6d4; }
|
||||
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
|
||||
.ind-cell { padding: 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; }
|
||||
.ind-cell .ind-lbl { font-size: 11px; color: rgba(255,255,255,0.5); }
|
||||
.ind-cell .ind-val { font-size: 18px; font-weight: 700; margin-top: 2px; }
|
||||
.tag { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; margin: 2px; font-weight: 600; }
|
||||
.tag.gold { background: rgba(251,191,36,0.12); color: #fbbf24; }
|
||||
.tag.blue { background: rgba(59,130,246,0.12); color: #60a5fa; }
|
||||
.tag.purple { background: rgba(139,92,246,0.12); color: #a78bfa; }
|
||||
.tag.cyan { background: rgba(6,182,212,0.12); color: #06b6d4; }
|
||||
.tag.green { background: rgba(16,185,129,0.12); color: #34d399; }
|
||||
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
|
||||
.donut-chart { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
|
||||
.donut-chart svg { transform: rotate(-90deg); }
|
||||
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
|
||||
.donut-center .dv { font-size: 22px; font-weight: 800; color: #fbbf24; }
|
||||
.donut-center .dl { font-size: 11px; color: rgba(255,255,255,0.4); }
|
||||
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
|
||||
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); }
|
||||
.donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.timeline2 { position: relative; padding: 10px 0; }
|
||||
.timeline2::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #3b82f6, #8b5cf6, #fbbf24); }
|
||||
.tl-item { position: relative; padding: 0 0 24px 52px; }
|
||||
.tl-item::before { content: ''; position: absolute; left: 17px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fbbf24; border: 3px solid #0a0e27; }
|
||||
.tl-item:nth-child(2)::before { background: #3b82f6; }
|
||||
.tl-item:nth-child(3)::before { background: #8b5cf6; }
|
||||
.tl-item:nth-child(4)::before { background: #06b6d4; }
|
||||
.tl-item:nth-child(5)::before { background: #10b981; }
|
||||
.tl-item:nth-child(6)::before { background: #fbbf24; }
|
||||
.tl-item .yr { font-size: 14px; font-weight: 700; color: #fbbf24; }
|
||||
.tl-item:nth-child(2) .yr { color: #60a5fa; }
|
||||
.tl-item:nth-child(3) .yr { color: #a78bfa; }
|
||||
.tl-item:nth-child(4) .yr { color: #06b6d4; }
|
||||
.tl-item:nth-child(5) .yr { color: #34d399; }
|
||||
.tl-item .desc { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
|
||||
.rating-item2 { margin-bottom: 16px; }
|
||||
.rating-item2 .hdr { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
||||
.rating-item2 .hdr .nm { font-size: 14px; font-weight: 600; }
|
||||
.rating-item2 .hdr .sc { font-size: 13px; font-weight: 700; color: #fbbf24; }
|
||||
.rating-track { height: 8px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; }
|
||||
.rating-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fbbf24, #f59e0b); width: 0%; transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||||
.footer { text-align: center; padding: 50px 20px 30px; color: rgba(255,255,255,0.15); font-size: 12px; }
|
||||
.footer .big { font-size: 32px; display: block; margin-bottom: 8px; }
|
||||
.back-top { position: fixed; bottom: 24px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #0a0e27; border: none; font-size: 20px; cursor: pointer; box-shadow: 0 4px 16px rgba(251,191,36,0.3); opacity: 0; transform: translateY(20px); transition: all 0.3s; z-index: 99; display: flex; align-items: center; justify-content: center; }
|
||||
.back-top.show { opacity: 1; transform: translateY(0); }
|
||||
.back-top:active { transform: scale(0.88); }
|
||||
@media (max-width: 600px) { .cover-text h1 { font-size: 28px; } .kpi-grid { grid-template-columns: 1fr; } .industry-grid { grid-template-columns: 1fr; } .bar { width: 22px; } .bar-val { font-size: 9px; top: -18px; } .card-body { padding: 18px 16px; } .nav-dots { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
<div class="particles" id="particles"></div>
|
||||
<nav class="nav-dots" id="navDots">
|
||||
<div class="nav-dot active" data-target="cover"></div>
|
||||
<div class="nav-dot" data-target="indicators"></div>
|
||||
<div class="nav-dot" data-target="gdp"></div>
|
||||
<div class="nav-dot" data-target="industry"></div>
|
||||
<div class="nav-dot" data-target="finance"></div>
|
||||
<div class="nav-dot" data-target="tech"></div>
|
||||
<div class="nav-dot" data-target="trade"></div>
|
||||
<div class="nav-dot" data-target="timeline2"></div>
|
||||
<div class="nav-dot" data-target="rating2"></div>
|
||||
</nav>
|
||||
<button class="back-top" id="backTop" onclick="scrollToTop()">↑</button>
|
||||
<div class="cover" id="cover">
|
||||
<div class="cover-skyline">
|
||||
<div class="bldg" style="height:60px;"></div>
|
||||
<div class="bldg" style="height:90px;"></div>
|
||||
<div class="bldg" style="height:50px;"></div>
|
||||
<div class="bldg" style="height:120px;width:30px;"></div>
|
||||
<div class="bldg" style="height:70px;"></div>
|
||||
<div class="bldg" style="height:100px;"></div>
|
||||
<div class="bldg" style="height:55px;"></div>
|
||||
<div class="bldg" style="height:140px;width:30px;"></div>
|
||||
<div class="bldg" style="height:80px;"></div>
|
||||
<div class="bldg" style="height:110px;"></div>
|
||||
<div class="bldg" style="height:45px;"></div>
|
||||
<div class="bldg" style="height:130px;width:28px;"></div>
|
||||
<div class="bldg" style="height:65px;"></div>
|
||||
<div class="bldg" style="height:95px;"></div>
|
||||
<div class="bldg" style="height:50px;"></div>
|
||||
</div>
|
||||
<div class="cover-overlay"></div>
|
||||
<div class="cover-text">
|
||||
<span class="city-icon">🏙️</span>
|
||||
<h1>上海经济发展报告</h1>
|
||||
<div class="sub">Shanghai Economic Development Report · 2025-2026</div>
|
||||
<div class="tagline">📊 浦东开发35周年 · 国际金融中心新起点</div>
|
||||
<div class="cover-stats">
|
||||
<div class="cover-stat"><div class="num">5.16万亿</div><div class="lbl">地区生产总值</div></div>
|
||||
<div class="cover-stat"><div class="num">+5.2%</div><div class="lbl">同比增长</div></div>
|
||||
<div class="cover-stat"><div class="num">76.4%</div><div class="lbl">第三产业占比</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-hint">↓ 向下滚动浏览</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="section-title" id="indicators">
|
||||
<div class="num">01 · 核心指标</div>
|
||||
<h2>宏观经济全景</h2>
|
||||
<div class="sub">2024-2025 年上海市主要经济指标</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-item"><div class="icon">📊</div><div class="number gold">5.16万亿</div><div class="label">地区生产总值 (GDP)</div><div class="change up">↑ +5.2%</div></div>
|
||||
<div class="kpi-item"><div class="icon">🏦</div><div class="number blue">1.24万亿</div><div class="label">金融业增加值</div><div class="change up">↑ +6.8%</div></div>
|
||||
<div class="kpi-item"><div class="icon">🌐</div><div class="number purple">$4,958亿</div><div class="label">货物贸易总额</div><div class="change up">↑ +3.1%</div></div>
|
||||
<div class="kpi-item"><div class="icon">🛍️</div><div class="number cyan">2.10万亿</div><div class="label">社会消费品零售</div><div class="change up">↑ +4.8%</div></div>
|
||||
</div>
|
||||
<div class="kpi-grid" style="margin-top:0;">
|
||||
<div class="kpi-item"><div class="icon">🏭</div><div class="number gold">1.22万亿</div><div class="label">工业总产值</div><div class="change up">↑ +2.3%</div></div>
|
||||
<div class="kpi-item"><div class="icon">💰</div><div class="number green">1.08万亿</div><div class="label">一般公共预算收入</div><div class="change up">↑ +5.8%</div></div>
|
||||
<div class="kpi-item"><div class="icon">🏗️</div><div class="number blue">4,860亿</div><div class="label">固定资产投资</div><div class="change up">↑ +2.8%</div></div>
|
||||
<div class="kpi-item"><div class="icon">📈</div><div class="number purple">74,853元</div><div class="label">人均可支配收入</div><div class="change up">↑ +5.4%</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="gdp">
|
||||
<div class="num">02 · 增长趋势</div>
|
||||
<h2>GDP 增长趋势 (2021-2025)</h2>
|
||||
<div class="sub">五年间 GDP 从 4.32 万亿跃升至 5.16 万亿</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;">
|
||||
<div><div style="font-weight:700;">GDP 走势</div><div style="font-size:12px;color:rgba(255,255,255,0.4);">单位：万亿元</div></div>
|
||||
<div style="display:flex;gap:12px;font-size:11px;color:rgba(255,255,255,0.4);">
|
||||
<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;background:#fbbf24;border-radius:2px;display:inline-block;"></span> 名义GDP</span>
|
||||
<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;background:#3b82f6;border-radius:2px;display:inline-block;"></span> 同比增速</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-group" id="gdpChart">
|
||||
<div class="bar-col">
|
||||
<div class="bar-stack"><div class="bar gold" data-h="75"><span class="bar-val">4.32</span></div><div class="bar blue" data-h="55"><span class="bar-val">+8.1%</span></div></div>
|
||||
<div class="bar-lbl"><div class="yr">2021</div>疫后复苏</div>
|
||||
</div>
|
||||
<div class="bar-col">
|
||||
<div class="bar-stack"><div class="bar gold" data-h="80"><span class="bar-val">4.47</span></div><div class="bar blue" data-h="20"><span class="bar-val">+0.2%</span></div></div>
|
||||
<div class="bar-lbl"><div class="yr">2022</div>疫情影响</div>
|
||||
</div>
|
||||
<div class="bar-col">
|
||||
<div class="bar-stack"><div class="bar gold" data-h="88"><span class="bar-val">4.72</span></div><div class="bar blue" data-h="60"><span class="bar-val">+5.6%</span></div></div>
|
||||
<div class="bar-lbl"><div class="yr">2023</div>恢复增长</div>
|
||||
</div>
|
||||
<div class="bar-col">
|
||||
<div class="bar-stack"><div class="bar gold" data-h="93"><span class="bar-val">4.91</span></div><div class="bar blue" data-h="45"><span class="bar-val">+4.0%</span></div></div>
|
||||
<div class="bar-lbl"><div class="yr">2024</div>稳步提升</div>
|
||||
</div>
|
||||
<div class="bar-col">
|
||||
<div class="bar-stack"><div class="bar gold" data-h="100"><span class="bar-val">5.16</span></div><div class="bar blue" data-h="68"><span class="bar-val">+5.2%</span></div></div>
|
||||
<div class="bar-lbl"><div class="yr">2025</div>高质量发展</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="industry">
|
||||
<div class="num">03 · 产业结构</div>
|
||||
<h2>现代产业体系</h2>
|
||||
<div class="sub">服务业占比 76.4%，"3+6" 新型产业体系加速构建</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="donut-wrap">
|
||||
<div class="donut-chart">
|
||||
<svg width="180" height="180" viewBox="0 0 180 180">
|
||||
<circle cx="90" cy="90" r="75" fill="none" stroke="rgba(255,255,255,0.04)" stroke-width="24"/>
|
||||
<circle cx="90" cy="90" r="75" fill="none" stroke="#fbbf24" stroke-width="24" stroke-dasharray="0 471" stroke-dashoffset="0" stroke-linecap="round" id="arcTertiary"/>
|
||||
<circle cx="90" cy="90" r="75" fill="none" stroke="#3b82f6" stroke-width="24" stroke-dasharray="0 471" stroke-dashoffset="0" stroke-linecap="round" id="arcSecondary"/>
|
||||
<circle cx="90" cy="90" r="75" fill="none" stroke="#10b981" stroke-width="24" stroke-dasharray="0 471" stroke-dashoffset="0" stroke-linecap="round" id="arcPrimary"/>
|
||||
</svg>
|
||||
<div class="donut-center"><div class="dv">5.16万亿</div><div class="dl">GDP总量</div></div>
|
||||
</div>
|
||||
<div class="donut-legend">
|
||||
<div class="donut-legend-item"><div class="donut-legend-dot" style="background:#fbbf24;"></div><strong>第三产业 (服务业)</strong> 76.4% — 3.94万亿</div>
|
||||
<div class="donut-legend-item"><div class="donut-legend-dot" style="background:#3b82f6;"></div><strong>第二产业 (工业/建筑)</strong> 22.8% — 1.18万亿</div>
|
||||
<div class="donut-legend-item"><div class="donut-legend-dot" style="background:#10b981;"></div><strong>第一产业 (农业)</strong> 0.8% — 413亿</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div style="font-weight:700;margin-bottom:12px;">"3+6" 重点产业产值</div>
|
||||
<div class="industry-grid">
|
||||
<div class="ind-cell"><div class="ind-lbl">集成电路</div><div class="ind-val" style="color:#fbbf24;">3,800亿</div><div style="font-size:11px;color:#34d399;">↑ +12.3%</div></div>
|
||||
<div class="ind-cell"><div class="ind-lbl">生物医药</div><div class="ind-val" style="color:#60a5fa;">3,200亿</div><div style="font-size:11px;color:#34d399;">↑ +9.8%</div></div>
|
||||
<div class="ind-cell"><div class="ind-lbl">人工智能</div><div class="ind-val" style="color:#a78bfa;">2,800亿</div><div style="font-size:11px;color:#34d399;">↑ +15.6%</div></div>
|
||||
<div class="ind-cell"><div class="ind-lbl">新能源汽车</div><div class="ind-val" style="color:#06b6d4;">4,200亿</div><div style="font-size:11px;color:#34d399;">↑ +18.2%</div></div>
|
||||
<div class="ind-cell"><div class="ind-lbl">高端装备</div><div class="ind-val" style="color:#fbbf24;">2,600亿</div><div style="font-size:11px;color:rgba(255,255,255,0.3);">稳中有升</div></div>
|
||||
<div class="ind-cell"><div class="ind-lbl">新材料</div><div class="ind-val" style="color:#60a5fa;">1,900亿</div><div style="font-size:11px;color:#34d399;">↑ +8.1%</div></div>
|
||||
</div>
|
||||
<div style="margin-top:12px;text-align:center;">
|
||||
<span class="tag gold">战略性新兴产业</span>
|
||||
<span class="tag blue">数字经济 2.8万亿</span>
|
||||
<span class="tag purple">占GDP 54.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="finance">
|
||||
<div class="num">04 · 国际金融中心</div>
|
||||
<h2>全球金融中心枢纽</h2>
|
||||
<div class="sub">GFCI 全球第 3，金融市场体系全球领先</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="data-row"><span class="label">上海证券交易所总市值</span><span class="value gold">59.8万亿</span></div>
|
||||
<div class="data-row"><span class="label">上市公司数量</span><span class="value blue">2,357家</span></div>
|
||||
<div class="data-row"><span class="label">科创板市值</span><span class="value cyan">8.6万亿</span></div>
|
||||
<div class="data-row"><span class="label">债券托管余额</span><span class="value gold">186.3万亿</span></div>
|
||||
<div class="data-row"><span class="label">境外机构持有债券</span><span class="value green">3.8万亿</span></div>
|
||||
<div class="data-row"><span class="label">全年金融交易总额</span><span class="value gold">359.2万亿</span></div>
|
||||
<div class="data-row"><span class="label">持牌金融机构</span><span class="value blue">1,206家</span></div>
|
||||
<div class="data-row"><span class="label">GFCI 全球排名</span><span class="value gold">第 3 位</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="tech">
|
||||
<div class="num">05 · 科技创新</div>
|
||||
<h2>全球科技创新中心</h2>
|
||||
<div class="sub">R&D 投入强度 4.8%，高新技术企业 2.8 万家</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-item"><div class="icon">🔬</div><div class="number gold">2,200亿</div><div class="label">R&D 经费支出</div></div>
|
||||
<div class="kpi-item"><div class="icon">📐</div><div class="number blue">4.8%</div><div class="label">R&D 占 GDP 比重</div></div>
|
||||
<div class="kpi-item"><div class="icon">🏢</div><div class="number purple">2.8万家</div><div class="label">高新技术企业</div></div>
|
||||
<div class="kpi-item"><div class="icon">📜</div><div class="number cyan">8.6万件</div><div class="label">发明专利授权</div></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:8px;">
|
||||
<span class="tag gold">集成电路</span>
|
||||
<span class="tag blue">人工智能</span>
|
||||
<span class="tag cyan">生物医药</span>
|
||||
<span class="tag green">大模型</span>
|
||||
<span class="tag purple">量子计算</span>
|
||||
</div>
|
||||
<div class="data-row" style="margin-top:8px;"><span class="label">大科学设施</span><span class="value gold">18个</span></div>
|
||||
<div class="data-row"><span class="label">外资研发中心</span><span class="value blue">516家</span></div>
|
||||
<div class="data-row"><span class="label">技术合同成交额</span><span class="value gold">5,600亿</span></div>
|
||||
<div class="data-row"><span class="label">全球科创中心排名</span><span class="value green">第 5 位</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="trade">
|
||||
<div class="num">06 · 对外开放</div>
|
||||
<h2>国际贸易中心</h2>
|
||||
<div class="sub">口岸贸易全球第一，跨国公司总部 986 家</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="kpi-grid">
|
||||
<div class="kpi-item"><div class="icon">🚢</div><div class="number gold">$4,958亿</div><div class="label">进出口总额</div></div>
|
||||
<div class="kpi-item"><div class="icon">💼</div><div class="number blue">$385亿</div><div class="label">实际使用外资</div></div>
|
||||
<div class="kpi-item"><div class="icon">🏢</div><div class="number purple">986家</div><div class="label">跨国公司总部</div><div class="change up">↑ 新增65家</div></div>
|
||||
<div class="kpi-item"><div class="icon">🌏</div><div class="number cyan">5,200万</div><div class="label">集装箱吞吐量</div></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:8px;">
|
||||
<span class="tag gold">上海口岸 10.7万亿</span>
|
||||
<span class="tag blue">临港新片区 +12.6%</span>
|
||||
<span class="tag green">进博会 7,800亿</span>
|
||||
</div>
|
||||
<div class="data-row" style="margin-top:8px;"><span class="label">出口</span><span class="value gold">$2,186亿</span></div>
|
||||
<div class="data-row"><span class="label">进口</span><span class="value blue">$2,772亿</span></div>
|
||||
<div class="data-row"><span class="label">高新技术产品出口占比</span><span class="value cyan">46.3%</span></div>
|
||||
<div class="data-row"><span class="label">跨境电商</span><span class="value green">$580亿</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="timeline2">
|
||||
<div class="num">07 · 发展历程</div>
|
||||
<h2>上海经济里程碑</h2>
|
||||
<div class="sub">从浦东开发到全球科创中心 · 35年腾飞之路</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="timeline2">
|
||||
<div class="tl-item"><div class="yr">1990 · 浦东开发开放</div><div class="desc">国务院宣布浦东开发开放，上海进入大规模城市建设和经济转型阶段，陆家嘴金融贸易区启动。</div></div>
|
||||
<div class="tl-item"><div class="yr">2010 · 上海世博会</div><div class="desc">以"城市，让生活更美好"为主题，吸引7300万人次参观，推动城市基础设施全面升级。</div></div>
|
||||
<div class="tl-item"><div class="yr">2013 · 自贸试验区</div><div class="desc">全国首个自由贸易试验区挂牌，实施负面清单管理，推动金融开放与制度创新。</div></div>
|
||||
<div class="tl-item"><div class="yr">2019 · 科创板 & 临港新片区</div><div class="desc">科创板开板并试点注册制；临港新片区揭牌，打造更具国际竞争力的特殊经济功能区。</div></div>
|
||||
<div class="tl-item"><div class="yr">2021 · 五大新城建设</div><div class="desc">嘉定、青浦、松江、奉贤、南汇五大新城建设全面启动，打造独立综合性节点城市。</div></div>
|
||||
<div class="tl-item"><div class="yr">2025 · 国际科创中心基本建成</div><div class="desc">R&D 强度达4.8%，高新技术企业2.8万家，GDP突破5万亿元大关，全球创新指数前十。</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-title" id="rating2">
|
||||
<div class="num">08 · 综合评估</div>
|
||||
<h2>城市竞争力评级</h2>
|
||||
<div class="sub">五大维度综合评分</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="card" data-animate>
|
||||
<div class="card-body">
|
||||
<div class="rating-item2"><div class="hdr"><span class="nm">💰 经济实力</span><span class="sc">96</span></div>
|
||||
<div class="rating-track"><div class="rating-fill" data-w="96"></div></div>
|
||||
<div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;">GDP 全国城市首位，人均 GDP 超 2.8 万美元</div>
|
||||
</div>
|
||||
<div class="rating-item2"><div class="hdr"><span class="nm">🏦 金融中心</span><span class="sc">92</span></div>
|
||||
<div class="rating-track"><div class="rating-fill" data-w="92"></div></div>
|
||||
<div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;">GFCI 全球第 3，金融交易总额 359.2 万亿</div>
|
||||
</div>
|
||||
<div class="rating-item2"><div class="hdr"><span class="nm">🔬 科技创新</span><span class="sc">88</span></div>
|
||||
<div class="rating-track"><div class="rating-fill" data-w="88"></div></div>
|
||||
<div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;">R&D 强度 4.8%，高新技术企业 2.8 万家</div>
|
||||
</div>
|
||||
<div class="rating-item2"><div class="hdr"><span class="nm">🌐 国际贸易</span><span class="sc">90</span></div>
|
||||
<div class="rating-track"><div class="rating-fill" data-w="90"></div></div>
|
||||
<div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;">口岸贸易全球第一，跨国公司总部 986 家</div>
|
||||
</div>
|
||||
<div class="rating-item2"><div class="hdr"><span class="nm">🏙️ 城市发展</span><span class="sc">85</span></div>
|
||||
<div class="rating-track"><div class="rating-fill" data-w="85"></div></div>
|
||||
<div style="font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;">轨道交通 856 公里，公园 2,600+ 个</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;padding:16px;background:rgba(251,191,36,0.05);border:1px solid rgba(251,191,36,0.1);border-radius:12px;text-align:center;">
|
||||
<div style="font-size:20px;font-weight:800;color:#fbbf24;">综合评分：90.2 / 100</div>
|
||||
<div style="font-size:12px;color:rgba(255,255,255,0.4);margin-top:4px;">全球城市综合排名第 6 · 中国内地城市第 1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;padding:40px 0 20px;">
|
||||
<div style="font-size:48px;margin-bottom:12px;">🇨🇳</div>
|
||||
<p style="font-size:18px;font-weight:700;background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">上海 · 正在成为更好的上海</p>
|
||||
<p style="font-size:13px;color:rgba(255,255,255,0.4);margin-top:8px;line-height:1.8;">从浦东开发到五个中心 · 从制造业基地到全球金融科技枢纽<br>上海正在书写新时代的"上海故事"</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<span class="big">🏙️</span>
|
||||
上海经济发展报告 · 2025-2026<br>
|
||||
数据来源：上海市统计局 · 公开资料整理<br>
|
||||
发布于 <a href="https://goo.tkmind.cn/user/john/shanghai-economy/" style="color:rgba(255,255,255,0.2);">goo.tkmind.cn/user/john/shanghai-economy</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.addEventListener('scroll', function() {
|
||||
const st = window.scrollY;
|
||||
const dh = document.documentElement.scrollHeight - window.innerHeight;
|
||||
document.getElementById('progressBar').style.width = (dh > 0 ? (st/dh)*100 : 0) + '%';
|
||||
document.getElementById('backTop').classList.toggle('show', st > 400);
|
||||
});
|
||||
document.querySelectorAll('.nav-dot').forEach(dot => {
|
||||
dot.addEventListener('click', function() {
|
||||
const id = this.getAttribute('data-target');
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
function updateDots() {
|
||||
const sy = window.scrollY + window.innerHeight/2;
|
||||
const ids = ['cover','indicators','gdp','industry','finance','tech','trade','timeline2','rating2'];
|
||||
let active = 0;
|
||||
ids.forEach((id,i) => { const el = document.getElementById(id); if(el && el.offsetTop <= sy) active = i; });
|
||||
document.querySelectorAll('.nav-dot').forEach((d,i) => d.classList.toggle('active', i === active));
|
||||
}
|
||||
window.addEventListener('scroll', updateDots);
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
entry.target.querySelectorAll('.bar').forEach(bar => {
|
||||
const h = bar.getAttribute('data-h');
|
||||
if (h) setTimeout(() => bar.style.height = h + '%', 200);
|
||||
});
|
||||
entry.target.querySelectorAll('.rating-fill').forEach(fill => {
|
||||
const w = fill.getAttribute('data-w');
|
||||
if (w) setTimeout(() => fill.style.width = w + '%', 300);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
document.querySelectorAll('.card[data-animate]').forEach(el => observer.observe(el));
|
||||
setTimeout(() => {
|
||||
const t = document.getElementById('arcTertiary');
|
||||
const s = document.getElementById('arcSecondary');
|
||||
const p = document.getElementById('arcPrimary');
|
||||
const circ = 2 * Math.PI * 75;
|
||||
if (t) t.style.strokeDasharray = (circ * 0.764) + ' ' + circ;
|
||||
if (s) s.style.strokeDasharray = (circ * 0.228) + ' ' + circ;
|
||||
if (p) p.style.strokeDasharray = (circ * 0.008) + ' ' + circ;
|
||||
}, 600);
|
||||
(function() {
|
||||
const c = document.getElementById('particles');
|
||||
for (let i = 0; i < 25; i++) {
|
||||
const p = document.createElement('div');
|
||||
p.className = 'particle';
|
||||
p.style.left = Math.random() * 100 + '%';
|
||||
p.style.width = p.style.height = (Math.random() * 3 + 1) + 'px';
|
||||
p.style.animationDuration = (Math.random() * 15 + 10) + 's';
|
||||
p.style.animationDelay = (Math.random() * 15) + 's';
|
||||
c.appendChild(p);
|
||||
}
|
||||
})();
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.card[data-animate]').forEach(el => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.top < window.innerHeight) {
|
||||
el.classList.add('visible');
|
||||
el.querySelectorAll('.bar').forEach(bar => { const h = bar.getAttribute('data-h'); if (h) setTimeout(() => bar.style.height = h + '%', 200); });
|
||||
el.querySelectorAll('.rating-fill').forEach(fill => { const w = fill.getAttribute('data-w'); if (w) setTimeout(() => fill.style.width = w + '%', 300); });
|
||||
}
|
||||
});
|
||||
}, 300);
|
||||
function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
|
||||
console.log('🏙️ 上海经济发展报告 · 数据看板已加载');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user