tkmind/memind
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Add MindSpace page live edit, chat skills, and H5 deploy tooling.

Browse Source 
Introduce page edit sessions with draft preview and patch API, chat skill picker, user memory profile, h5ApiBase resolution, voice WAV transport, and scripts for 105/g2 deployment and Plaza local dev.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
John
2026-06-15 22:09:38 -07:00
parent 3cd322ccfe
commit 6ee6fd64dd
94 changed files with 7015 additions and 2136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
temp/john/shanghai-economy/index.html
-490
View File
@@ -1,490 +0,0 @@
<!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>
temp/john/vietnam-guide/index.html
-1049
View File
File diff suppressed because it is too large Load Diff