index.html · 约 27641 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>星辰招商云平台</title>
7<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --bg:#f4f8ff; --card:#fff; --text:#0f2744; --soft:#5c7b9a; --line:#e1ecfb;
12 --primary:#2563eb; --primary-light:#dbeafe; --accent:#0ea5e9; --success:#10b981; --warning:#f59e0b; --purple:#7c3aed;
13 --radius:16px; --shadow:0 4px 16px rgba(37,99,235,.10);
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:var(--bg); color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; box-shadow:0 0 28px rgba(0,0,0,.08); display:flex; flex-direction:column; }
19 .topbar{ padding:12px 18px 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; }
20 .topbar .tt{ font-size:18px; font-weight:800; }
21 .topbar .icr{ display:flex; gap:14px; font-size:20px; }
22 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
23 .main::-webkit-scrollbar{ display:none; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
27
28 /* 首页 */
29 .banner{ background:linear-gradient(135deg,#2563eb,#0ea5e9); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; box-shadow:var(--shadow); }
30 .banner::before{ content:""; position:absolute; top:-30px; right:-30px; width:140px; height:140px; background:rgba(255,255,255,.12); border-radius:50%; }
31 .banner .tag{ font-size:12px; background:rgba(255,255,255,.22); border-radius:999px; padding:4px 10px; display:inline-block; margin-bottom:10px; }
32 .banner .tt2{ font-size:20px; font-weight:900; margin-bottom:6px; }
33 .banner .sub{ font-size:13px; opacity:.9; }
34 .banner .cta{ margin-top:14px; background:#fff; color:var(--primary); border-radius:999px; padding:8px 18px; font-size:13px; font-weight:800; border:none; cursor:pointer; display:inline-block; }
35 .quick-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
36 .quick-stats .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
37 .quick-stats .item .v{ font-size:18px; font-weight:900; color:var(--primary); }
38 .quick-stats .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
39 .section{ margin-bottom:16px; }
40 .section-title{ font-size:16px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
41 .section-title .more{ font-size:12px; color:var(--soft); font-weight:600; }
42 .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
43 .grid4 .cell{ background:var(--card); border-radius:14px; padding:14px 4px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
44 .grid4 .cell .ic{ font-size:26px; margin-bottom:6px; }
45 .grid4 .cell .txt{ font-size:12px; font-weight:700; color:var(--text); }
46 .todo-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
47 .todo-card .row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
48 .todo-card .row:last-child{ border-bottom:none; }
49 .todo-card .dot{ width:8px; height:8px; border-radius:50%; background:var(--warning); flex-shrink:0; }
50 .todo-card .dot.done{ background:var(--success); }
51 .todo-card .info{ flex:1; }
52 .todo-card .info .t{ font-size:14px; font-weight:700; }
53 .todo-card .info .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
54 .todo-card .st{ font-size:12px; color:var(--primary); font-weight:700; flex-shrink:0; }
55
56 /* 数据看板 */
57 .filter-bar{ display:flex; gap:8px; margin:16px 0; overflow-x:auto; }
58 .filter-bar::-webkit-scrollbar{ display:none; }
59 .filter-bar .chip{ background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px; color:var(--soft); white-space:nowrap; cursor:pointer; }
60 .filter-bar .chip.on{ background:var(--primary); color:#fff; border-color:var(--primary); }
61 .kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
62 .kpi-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
63 .kpi-card .t{ font-size:13px; color:var(--soft); font-weight:700; display:flex; align-items:center; gap:6px; }
64 .kpi-card .n{ font-size:26px; font-weight:900; margin-top:8px; color:var(--text); }
65 .kpi-card .delta{ font-size:12px; color:var(--success); margin-top:4px; font-weight:700; }
66 .kpi-card .delta.down{ color:#ef4444; }
67 .chart-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
68 .chart-card .hd{ font-size:15px; font-weight:900; margin-bottom:14px; }
69 .bars{ display:flex; align-items:flex-end; justify-content:space-between; height:120px; padding:0 4px; }
70 .bars .bar{ flex:1; margin:0 4px; background:linear-gradient(180deg,var(--primary),var(--accent)); border-radius:6px 6px 0 0; position:relative; min-height:20px; }
71 .bars .bar span{ position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--soft); }
72 .rank-list .row{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
73 .rank-list .row:last-child{ border-bottom:none; }
74 .rank-list .num{ width:22px; height:22px; border-radius:50%; background:var(--primary-light); color:var(--primary); font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
75 .rank-list .name{ flex:1; font-size:14px; font-weight:700; }
76 .rank-list .val{ font-size:14px; font-weight:900; color:var(--primary); }
77
78 /* 项目库 */
79 .search-box{ background:var(--card); border-radius:999px; padding:10px 16px; margin:16px 0; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); }
80 .search-box input{ flex:1; border:none; background:transparent; font-size:14px; outline:none; color:var(--text); }
81 .search-box .ic{ font-size:18px; color:var(--soft); }
82 .tags{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
83 .tags .tag{ background:var(--primary-light); color:var(--primary); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
84 .tags .tag.on{ background:var(--primary); color:#fff; }
85 .proj-list .card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:12px; cursor:pointer; }
86 .proj-list .card .hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
87 .proj-list .card .logo{ width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; }
88 .proj-list .card .title{ flex:1; }
89 .proj-list .card .title .t{ font-size:15px; font-weight:900; }
90 .proj-list .card .title .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
91 .proj-list .card .badge{ font-size:11px; padding:4px 8px; border-radius:999px; font-weight:700; }
92 .proj-list .card .badge.a{ background:#d1fae5; color:#047857; }
93 .proj-list .card .badge.b{ background:#fef3c7; color:#b45309; }
94 .proj-list .card .info{ display:flex; gap:16px; font-size:12px; color:var(--soft); margin-top:10px; }
95 .proj-list .card .info span{ font-weight:700; color:var(--text); }
96 .proj-list .card .arr{ text-align:right; color:var(--soft); font-size:18px; margin-top:8px; }
97
98 /* 项目详情 */
99 .detail-hero{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; }
100 .detail-hero::before{ content:""; position:absolute; bottom:-40px; right:-40px; width:160px; height:160px; background:rgba(255,255,255,.10); border-radius:50%; }
101 .detail-hero .back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; opacity:.9; margin-bottom:10px; cursor:pointer; }
102 .detail-hero .tt2{ font-size:20px; font-weight:900; margin-bottom:8px; }
103 .detail-hero .tags{ display:flex; gap:8px; margin:0; flex-wrap:wrap; }
104 .detail-hero .tags span{ background:rgba(255,255,255,.20); border-radius:999px; padding:4px 10px; font-size:12px; }
105 .detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
106 .detail-grid .item{ background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
107 .detail-grid .item .l{ font-size:12px; color:var(--soft); margin-bottom:4px; }
108 .detail-grid .item .v{ font-size:16px; font-weight:900; }
109 .progress-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
110 .progress-card .hd{ display:flex; justify-content:space-between; margin-bottom:10px; font-weight:700; }
111 .progress-card .bar{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
112 .progress-card .bar .fill{ height:100%; background:linear-gradient(90deg,var(--success),var(--accent)); border-radius:999px; }
113 .timeline{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
114 .timeline .hd{ font-size:15px; font-weight:900; margin-bottom:14px; }
115 .timeline .item{ display:flex; gap:12px; padding-bottom:16px; position:relative; }
116 .timeline .item:last-child{ padding-bottom:0; }
117 .timeline .item::before{ content:""; position:absolute; left:6px; top:8px; bottom:-8px; width:2px; background:var(--line); }
118 .timeline .item:last-child::before{ display:none; }
119 .timeline .dot{ width:14px; height:14px; border-radius:50%; background:var(--primary); border:3px solid #fff; box-shadow:0 0 0 2px var(--line); flex-shrink:0; z-index:1; }
120 .timeline .dot.done{ background:var(--success); }
121 .timeline .info .t{ font-size:14px; font-weight:900; }
122 .timeline .info .sub{ font-size:12px; color:var(--soft); margin-top:2px; }
123
124 /* 招商动态 */
125 .news-list{ margin-top:16px; }
126 .news-item{ background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:12px; display:flex; gap:12px; cursor:pointer; }
127 .news-item .thumb{ width:70px; height:70px; border-radius:12px; background:linear-gradient(135deg,var(--primary-light),#dbeafe); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
128 .news-item .info{ flex:1; }
129 .news-item .info .t{ font-size:15px; font-weight:900; line-height:1.4; }
130 .news-item .info .sub{ font-size:12px; color:var(--soft); margin-top:6px; }
131 .news-item .info .tag{ display:inline-block; background:var(--primary-light); color:var(--primary); padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; margin-right:6px; }
132
133 /* 个人中心 */
134 .me-card{ background:linear-gradient(135deg,var(--primary),var(--accent)); border-radius:var(--radius); padding:20px; color:#fff; margin:16px 0; position:relative; overflow:hidden; box-shadow:var(--shadow); }
135 .me-card::before{ content:""; position:absolute; top:-30px; right:-30px; width:130px; height:130px; background:rgba(255,255,255,.12); border-radius:50%; }
136 .me-card .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
137 .me-card .avatar{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid rgba(255,255,255,.45); }
138 .me-card .name{ font-size:18px; font-weight:900; }
139 .me-card .id{ font-size:12px; opacity:.85; margin-top:4px; }
140 .me-card .qr{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; }
141 .me-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
142 .me-stats .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
143 .me-stats .item .v{ font-size:18px; font-weight:900; color:var(--primary); }
144 .me-stats .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
145 .menu-card{ background:var(--card); border-radius:var(--radius); padding:8px 16px; box-shadow:var(--shadow); margin-bottom:16px; }
146 .menu-card .row{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
147 .menu-card .row:last-child{ border-bottom:none; }
148 .menu-card .row .ic{ font-size:22px; width:28px; text-align:center; }
149 .menu-card .row .txt{ flex:1; font-size:14px; font-weight:700; }
150 .menu-card .row .arr{ color:var(--soft); font-size:18px; }
151
152 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
153 height:66px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:20; }
154 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--soft); font-weight:700;
155 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
156 .tabbar button .ti{ font-size:22px; }
157 .tabbar button.on{ color:var(--primary); }
158 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
159 background:rgba(15,39,68,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
160 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
161 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
162</style>
163</head>
164<body>
165<div class="app">
166 <header class="topbar" id="topbar">
167 <span></span>
168 <span class="tt" id="topTitle">星辰招商云</span>
169 <span class="icr"><span>🔔</span><span>⚙️</span></span>
170 </header>
171
172 <main class="main" id="main">
173 <!-- 首页 -->
174 <section class="view active" id="view-home">
175 <div class="banner">
176 <span class="tag">平台公告</span>
177 <div class="tt2">星辰招商云平台<br>全新上线</div>
178 <div class="sub">数字化招商管理 · 项目全生命周期追踪</div>
179 <button class="cta" data-go="news">查看动态</button>
180 </div>
181 <div class="quick-stats">
182 <div class="item"><div class="v">28</div><div class="l">在谈项目</div></div>
183 <div class="item"><div class="v">156</div><div class="l">线索总数</div></div>
184 <div class="item"><div class="v">42</div><div class="l">签约项目</div></div>
185 <div class="item"><div class="v">8.6亿</div><div class="l">预计投资</div></div>
186 </div>
187 <div class="section">
188 <div class="section-title">快捷入口</div>
189 <div class="grid4">
190 <div class="cell" data-go="dashboard"><div class="ic">📊</div><div class="txt">数据看板</div></div>
191 <div class="cell" data-go="projects"><div class="ic">📁</div><div class="txt">项目库</div></div>
192 <div class="cell" data-go="news"><div class="ic">📰</div><div class="txt">招商动态</div></div>
193 <div class="cell" data-go="me"><div class="ic">👤</div><div class="txt">个人中心</div></div>
194 <div class="cell"><div class="ic">📝</div><div class="txt">信息登记</div></div>
195 <div class="cell"><div class="ic">🔍</div><div class="txt">商机挖掘</div></div>
196 <div class="cell"><div class="ic">🏢</div><div class="txt">客商考察</div></div>
197 <div class="cell"><div class="ic">📋</div><div class="txt">工作汇报</div></div>
198 </div>
199 </div>
200 <div class="section">
201 <div class="section-title">待办提醒<span class="more">全部 ›</span></div>
202 <div class="todo-card">
203 <div class="row"><div class="dot"></div><div class="info"><div class="t">蓝海科技项目需补充尽调材料</div><div class="sub">截止日期：今天 18:00</div></div><div class="st">去处理</div></div>
204 <div class="row"><div class="dot"></div><div class="info"><div class="t">下周三接待星辰智能制造考察团</div><div class="sub">负责人：张经理</div></div><div class="st">查看</div></div>
205 <div class="row"><div class="dot done"></div><div class="info"><div class="t">绿能环保项目签约流程已归档</div><div class="sub">完成时间：昨天</div></div><div class="st">已完成</div></div>
206 </div>
207 </div>
208 </section>
209
210 <!-- 数据看板 -->
211 <section class="view" id="view-dashboard">
212 <div class="filter-bar">
213 <div class="chip on">星辰市</div>
214 <div class="chip">年统计</div>
215 <div class="chip">2026年</div>
216 </div>
217 <div class="kpi-grid">
218 <div class="kpi-card"><div class="t">📈 走出去</div><div class="n">68</div><div class="delta">+12% 本月累计</div></div>
219 <div class="kpi-card"><div class="t">🚪 请进来</div><div class="n">94</div><div class="delta">+8% 本月累计</div></div>
220 <div class="kpi-card"><div class="t">🤝 签约数</div><div class="n">42</div><div class="delta down">-3% 同比</div></div>
221 <div class="kpi-card"><div class="t">💰 总投资额</div><div class="n">8.6亿</div><div class="delta">+21% 累计</div></div>
222 </div>
223 <div class="chart-card">
224 <div class="hd">月度洽谈趋势</div>
225 <div class="bars">
226 <div class="bar" style="height:35%"><span>1月</span></div>
227 <div class="bar" style="height:50%"><span>2月</span></div>
228 <div class="bar" style="height:45%"><span>3月</span></div>
229 <div class="bar" style="height:70%"><span>4月</span></div>
230 <div class="bar" style="height:60%"><span>5月</span></div>
231 <div class="bar" style="height:85%"><span>6月</span></div>
232 </div>
233 </div>
234 <div class="chart-card">
235 <div class="hd">产业招引排名</div>
236 <div class="rank-list">
237 <div class="row"><div class="num">1</div><div class="name">智能制造</div><div class="val">18</div></div>
238 <div class="row"><div class="num">2</div><div class="name">新能源环保</div><div class="val">14</div></div>
239 <div class="row"><div class="num">3</div><div class="name">生物医药</div><div class="val">9</div></div>
240 <div class="row"><div class="num">4</div><div class="name">现代物流</div><div class="val">7</div></div>
241 </div>
242 </div>
243 </section>
244
245 <!-- 项目库 -->
246 <section class="view" id="view-projects">
247 <div class="search-box"><span class="ic">🔍</span><input type="text" placeholder="搜索项目 / 企业 / 产业"></div>
248 <div class="tags">
249 <span class="tag on">全部</span>
250 <span class="tag">在谈</span>
251 <span class="tag">签约</span>
252 <span class="tag">开工</span>
253 <span class="tag">投产</span>
254 </div>
255 <div class="proj-list">
256 <div class="card" data-go="detail">
257 <div class="hd">
258 <div class="logo">蓝</div>
259 <div class="title"><div class="t">蓝海高端装备智造基地</div><div class="sub">智能制造 · 预计投资 2.4 亿</div></div>
260 <span class="badge a">在谈</span>
261 </div>
262 <div class="info"><div>负责人：<span>李主任</span></div><div>跟进：<span>3 个月</span></div></div>
263 <div class="arr">›</div>
264 </div>
265 <div class="card">
266 <div class="hd">
267 <div class="logo" style="background:linear-gradient(135deg,#10b981,#34d399)">绿</div>
268 <div class="title"><div class="t">绿能环保循环经济产业园</div><div class="sub">新能源环保 · 预计投资 1.8 亿</div></div>
269 <span class="badge b">签约</span>
270 </div>
271 <div class="info"><div>负责人：<span>王科长</span></div><div>跟进：<span>6 个月</span></div></div>
272 <div class="arr">›</div>
273 </div>
274 <div class="card">
275 <div class="hd">
276 <div class="logo" style="background:linear-gradient(135deg,#7c3aed,#a78bfa)">星</div>
277 <div class="title"><div class="t">星辰生物医药研发中心</div><div class="sub">生物医药 · 预计投资 3.2 亿</div></div>
278 <span class="badge a">在谈</span>
279 </div>
280 <div class="info"><div>负责人：<span>赵局长</span></div><div>跟进：<span>2 个月</span></div></div>
281 <div class="arr">›</div>
282 </div>
283 </div>
284 </section>
285
286 <!-- 项目详情 -->
287 <section class="view" id="view-detail">
288 <div class="detail-hero">
289 <div class="back" data-go="projects">‹ 返回项目库</div>
290 <div class="tt2">蓝海高端装备智造基地</div>
291 <div class="tags"><span>智能制造</span><span>在谈</span><span>2.4亿</span></div>
292 </div>
293 <div class="detail-grid">
294 <div class="item"><div class="l">投资方</div><div class="v">蓝海重工集团</div></div>
295 <div class="item"><div class="l">预计投资</div><div class="v">2.4 亿元</div></div>
296 <div class="item"><div class="l">用地需求</div><div class="v">120 亩</div></div>
297 <div class="item"><div class="l">预计产值</div><div class="v">8 亿元/年</div></div>
298 </div>
299 <div class="progress-card">
300 <div class="hd"><span>当前阶段</span><span>深度洽谈</span></div>
301 <div class="bar"><div class="fill" style="width:70%"></div></div>
302 <div style="font-size:12px;color:var(--soft);margin-top:8px">已完成 70% · 剩余 3 个节点</div>
303 </div>
304 <div class="timeline">
305 <div class="hd">项目跟进时间轴</div>
306 <div class="item"><div class="dot done"></div><div class="info"><div class="t">初次对接</div><div class="sub">2026-04-12 · 企业来访考察</div></div></div>
307 <div class="item"><div class="dot done"></div><div class="info"><div class="t">需求确认</div><div class="sub">2026-05-08 · 明确用地与政策需求</div></div></div>
308 <div class="item"><div class="dot done"></div><div class="info"><div class="t">尽职调查</div><div class="sub">2026-06-20 · 完成尽调报告</div></div></div>
309 <div class="item"><div class="dot"></div><div class="info"><div class="t">协议磋商</div><div class="sub">进行中 · 预计 7 月底完成</div></div></div>
310 </div>
311 </section>
312
313 <!-- 招商动态 -->
314 <section class="view" id="view-news">
315 <div class="news-list">
316 <div class="news-item">
317 <div class="thumb">🏭</div>
318 <div class="info">
319 <div class="t">星辰市成功举办智能制造产业对接会</div>
320 <div class="sub"><span class="tag">产业活动</span>2026-07-10</div>
321 </div>
322 </div>
323 <div class="news-item">
324 <div class="thumb">🤝</div>
325 <div class="info">
326 <div class="t">绿能环保循环经济产业园正式签约</div>
327 <div class="sub"><span class="tag">项目签约</span>2026-07-08</div>
328 </div>
329 </div>
330 <div class="news-item">
331 <div class="thumb">📋</div>
332 <div class="info">
333 <div class="t">招商局开展专项服务月活动</div>
334 <div class="sub"><span class="tag">政策服务</span>2026-07-05</div>
335 </div>
336 </div>
337 <div class="news-item">
338 <div class="thumb">🌐</div>
339 <div class="info">
340 <div class="t">长三角招商小分队赴沪开展精准招商</div>
341 <div class="sub"><span class="tag">外出招商</span>2026-07-01</div>
342 </div>
343 </div>
344 </div>
345 </section>
346
347 <!-- 个人中心 -->
348 <section class="view" id="view-me">
349 <div class="me-card">
350 <div class="row">
351 <div class="avatar">👤</div>
352 <div class="info">
353 <div class="name">招商专员 · 张明</div>
354 <div class="id">工号：ZS-2026-0041 · 星辰市招商局</div>
355 </div>
356 <button class="qr">二维码</button>
357 </div>
358 </div>
359 <div class="me-stats">
360 <div class="item"><div class="v">28</div><div class="l">在谈</div></div>
361 <div class="item"><div class="v">14</div><div class="l">本周新增</div></div>
362 <div class="item"><div class="v">9</div><div class="l">已签约</div></div>
363 <div class="item"><div class="v">3</div><div class="l">待审批</div></div>
364 </div>
365 <div class="menu-card">
366 <div class="row"><span class="ic">📊</span><span class="txt">我的看板</span><span class="arr">›</span></div>
367 <div class="row"><span class="ic">📁</span><span class="txt">我的项目</span><span class="arr">›</span></div>
368 <div class="row"><span class="ic">📝</span><span class="txt">工作日报</span><span class="arr">›</span></div>
369 <div class="row"><span class="ic">🔔</span><span class="txt">消息通知</span><span class="arr">›</span></div>
370 </div>
371 <div class="menu-card">
372 <div class="row"><span class="ic">⚙️</span><span class="txt">系统设置</span><span class="arr">›</span></div>
373 <div class="row"><span class="ic">❓</span><span class="txt">帮助中心</span><span class="arr">›</span></div>
374 </div>
375 </section>
376 </main>
377
378 <nav class="tabbar">
379 <button data-go="home" class="on"><span class="ti">🏠</span>首页</button>
380 <button data-go="dashboard"><span class="ti">📊</span>看板</button>
381 <button data-go="projects"><span class="ti">📁</span>项目</button>
382 <button data-go="me"><span class="ti">👤</span>我的</button>
383 </nav>
384</div>
385<div class="toast" id="toast"></div>
386
387<script>
388function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
389function showView(v){
390 $(".view").removeClass("active");
391 $("#view-"+v).addClass("active");
392 var titles={home:"星辰招商云",dashboard:"数据看板",projects:"项目库",detail:"项目详情",news:"招商动态",me:"个人中心"};
393 $("#topTitle").text(titles[v]||"星辰招商云");
394 $(".tabbar button").removeClass("on");
395 $(".tabbar button[data-go='"+v+"']").addClass("on");
396 $(".main").scrollTop(0);
397}
398$(function(){
399 $(document).on("click",".tabbar button[data-go]",function(){ showView($(this).data("go")); });
400 $(document).on("click","[data-go]",function(e){ e.stopPropagation(); showView($(this).data("go")); });
401 $(document).on("click",".grid4 .cell:not([data-go]), .todo-card .row, .filter-bar .chip, .tags .tag, .search-box, .menu-card .row, .icr span",function(){ toast("功能演示中"); });
402});
403window.showInvestView = function(v){ showView(v); };
404</script>
405</body>
406</html>