Home Explore Help
Sign In
Sherlock1011
/
Tianhe_UI
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first commit

杨泽宇 2 months ago
commit
cb6c13dffc
7 changed files with 2081 additions and 0 deletions
Unified View Show Diff Stats
  1. 0 0
      README.md
  2. 452 0
      design/01-design-system.html
  3. 376 0
      design/02-page-home.html
  4. 344 0
      design/03-enterprise-service.html
  5. 374 0
      design/04-activities-venues.html
  6. 399 0
      design/05-my-and-admin.html
  7. 136 0
      design/index.html

+ 0 - 0
README.md
View File


+ 452 - 0
design/01-design-system.html
View File 

@@ -0,0 +1,452 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地小程序 · 设计规范</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #f1f5f9; color: #0f172a; }
 
+
 
+.page { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
 
+h1 { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
 
+.page-sub { font-size: 14px; color: #64748b; margin-bottom: 40px; }
 
+
 
+/* Section */
 
+.section { margin-bottom: 48px; }
 
+.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; }
 
+
 
+/* Color swatches */
 
+.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
 
+.swatch { border-radius: 12px; overflow: hidden; width: 140px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
 
+.swatch-color { height: 72px; }
 
+.swatch-info { background: white; padding: 10px 12px; }
 
+.swatch-name { font-size: 12px; font-weight: 600; color: #1e293b; }
 
+.swatch-hex { font-size: 11px; color: #94a3b8; font-family: monospace; margin-top: 2px; }
 
+.swatch-role { font-size: 11px; color: #64748b; margin-top: 2px; }
 
+
 
+/* Typography */
 
+.type-row { background: white; border-radius: 12px; padding: 20px 24px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+.type-label { font-size: 11px; color: #94a3b8; width: 120px; flex-shrink: 0; font-family: monospace; }
 
+.type-sample-zh { color: #0f172a; }
 
+.type-meta { font-size: 11px; color: #cbd5e1; margin-left: auto; }
 
+
 
+/* Components */
 
+.comp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
 
+.comp-card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+
 
+/* Buttons */
 
+.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; cursor: pointer; border: none; }
 
+.btn-primary { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; padding: 12px 24px; font-size: 15px; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
 
+.btn-secondary { background: #eff6ff; color: #3b82f6; padding: 12px 24px; font-size: 15px; }
 
+.btn-ghost { background: transparent; color: #3b82f6; border: 1.5px solid #3b82f6; padding: 11px 24px; font-size: 15px; }
 
+.btn-danger { background: #fef2f2; color: #ef4444; padding: 12px 24px; font-size: 15px; }
 
+.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
 
+.btn-disabled { background: #f1f5f9; color: #94a3b8; padding: 12px 24px; font-size: 15px; cursor: not-allowed; }
 
+
 
+/* Tags */
 
+.tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; }
 
+.tag-blue { background: #eff6ff; color: #3b82f6; }
 
+.tag-indigo { background: #eef2ff; color: #6366f1; }
 
+.tag-green { background: #f0fdf4; color: #16a34a; }
 
+.tag-orange { background: #fff7ed; color: #ea580c; }
 
+.tag-red { background: #fef2f2; color: #ef4444; }
 
+.tag-gray { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
 
+
 
+/* Status tags */
 
+.status-row { display: flex; flex-wrap: wrap; gap: 8px; }
 
+
 
+/* Card */
 
+.demo-card { background: white; border-radius: 16px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); width: 200px; }
 
+.demo-card-img { width: 100%; height: 80px; border-radius: 10px; background: linear-gradient(135deg, #3b82f6, #6366f1); margin-bottom: 12px; }
 
+.demo-card-title { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 4px; }
 
+.demo-card-sub { font-size: 12px; color: #64748b; }
 
+
 
+/* Input */
 
+.demo-input { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #0f172a; width: 240px; outline: none; }
 
+.demo-input:focus { border-color: #3b82f6; background: white; }
 
+.demo-input-active { background: white; border: 1.5px solid #3b82f6; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #0f172a; width: 240px; }
 
+.input-label { font-size: 13px; color: #374151; font-weight: 500; margin-bottom: 6px; }
 
+.input-error { font-size: 11px; color: #ef4444; margin-top: 4px; }
 
+.input-error-state { background: white; border: 1.5px solid #ef4444; border-radius: 10px; padding: 12px 16px; font-size: 14px; color: #0f172a; width: 240px; }
 
+
 
+/* Bottom nav */
 
+.bottom-nav { background: white; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-around; padding: 8px 0 16px; border-radius: 0 0 16px 16px; box-shadow: 0 -4px 16px rgba(0,0,0,0.06); }
 
+.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; cursor: pointer; }
 
+.nav-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
 
+.nav-icon svg { width: 22px; height: 22px; }
 
+.nav-label { font-size: 10px; color: #94a3b8; }
 
+.nav-item.active .nav-label { color: #3b82f6; font-weight: 600; }
 
+.nav-item.active .nav-icon svg { color: #3b82f6; }
 
+
 
+/* Cell list */
 
+.cell-list { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); width: 280px; }
 
+.cell { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f8fafc; gap: 12px; }
 
+.cell:last-child { border-bottom: none; }
 
+.cell-icon { width: 36px; height: 36px; border-radius: 10px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
 
+.cell-content { flex: 1; }
 
+.cell-title { font-size: 14px; color: #0f172a; font-weight: 500; }
 
+.cell-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
 
+.cell-arrow { color: #cbd5e1; font-size: 16px; }
 
+
 
+/* Steps */
 
+.step-row { display: flex; align-items: center; gap: 0; }
 
+.step { display: flex; align-items: center; }
 
+.step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
 
+.step-dot.done { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; }
 
+.step-dot.active { background: white; border: 2px solid #3b82f6; color: #3b82f6; }
 
+.step-dot.pending { background: #f1f5f9; color: #94a3b8; }
 
+.step-label { font-size: 11px; color: #64748b; margin-top: 4px; text-align: center; }
 
+.step-line { height: 2px; flex: 1; min-width: 24px; }
 
+.step-line.done { background: linear-gradient(90deg, #3b82f6, #6366f1); }
 
+.step-line.pending { background: #e2e8f0; }
 
+
 
+/* Spacing scale */
 
+.spacing-row { display: flex; align-items: flex-end; gap: 16px; }
 
+.space-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
 
+.space-visual { background: linear-gradient(135deg, #3b82f6, #6366f1); border-radius: 4px; width: 16px; }
 
+.space-label { font-size: 11px; color: #64748b; font-family: monospace; }
 
+
 
+/* Radius scale */
 
+.radius-row { display: flex; gap: 16px; align-items: flex-end; }
 
+.radius-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
 
+.radius-visual { width: 48px; height: 48px; background: #eff6ff; border: 2px solid #3b82f6; }
 
+.radius-label { font-size: 11px; color: #64748b; font-family: monospace; }
 
+</style>
 
+</head>
 
+<body>
 
+<div class="page">
 
+  <h1>天河基地小程序 · 设计规范</h1>
 
+  <p class="page-sub">Design System v1.0 · 微信原生增强型 · 明亮简约风</p>
 
+
 
+  <!-- COLOR PALETTE -->
 
+  <div class="section">
 
+    <div class="section-title">色彩系统 Color System</div>
 
+    <div class="swatches">
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: linear-gradient(135deg, #3b82f6, #6366f1);"></div>
 
+        <div class="swatch-info"><div class="swatch-name">品牌渐变</div><div class="swatch-hex">#3b82f6 → #6366f1</div><div class="swatch-role">Banner / 主按钮 / 强调</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #3b82f6;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">主色 Primary</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">链接 / 图标 / 选中状态</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #6366f1;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">靛紫 Indigo</div><div class="swatch-hex">#6366f1</div><div class="swatch-role">渐变终点 / 辅助色</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #f8fafc;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">页面背景</div><div class="swatch-hex">#f8fafc</div><div class="swatch-role">页面底色</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #ffffff; border: 1px solid #f1f5f9;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">卡片白</div><div class="swatch-hex">#ffffff</div><div class="swatch-role">卡片 / 输入框</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #0f172a;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">主文字</div><div class="swatch-hex">#0f172a</div><div class="swatch-role">标题 / 正文</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #64748b;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">次文字</div><div class="swatch-hex">#64748b</div><div class="swatch-role">副标题 / 说明</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #94a3b8;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">占位文字</div><div class="swatch-hex">#94a3b8</div><div class="swatch-role">Placeholder / 禁用</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #10b981;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">成功绿</div><div class="swatch-hex">#10b981</div><div class="swatch-role">审批通过 / 成功状态</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #f59e0b;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">警示橙</div><div class="swatch-hex">#f59e0b</div><div class="swatch-role">待处理 / 提醒</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #ef4444;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">错误红</div><div class="swatch-hex">#ef4444</div><div class="swatch-role">审批拒绝 / 错误 / 删除</div></div>
 
+      </div>
 
+      <div class="swatch">
 
+        <div class="swatch-color" style="background: #e2e8f0;"></div>
 
+        <div class="swatch-info"><div class="swatch-name">边框</div><div class="swatch-hex">#e2e8f0</div><div class="swatch-role">分割线 / 边框</div></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- TYPOGRAPHY -->
 
+  <div class="section">
 
+    <div class="section-title">字体规范 Typography</div>
 
+    <p style="font-size:12px; color:#94a3b8; margin-bottom:12px;">小程序内使用系统字体 PingFang SC / 微软雅黑 / sans-serif，无需引入外部字体</p>
 
+    <div>
 
+      <div class="type-row">
 
+        <span class="type-label">页面大标题<br>32px / 700</span>
 
+        <span class="type-sample-zh" style="font-size:32px; font-weight:700; line-height:1.25;">天河基地小程序</span>
 
+        <span class="type-meta">letter-spacing: -0.5px</span>
 
+      </div>
 
+      <div class="type-row">
 
+        <span class="type-label">模块标题<br>20px / 700</span>
 
+        <span class="type-sample-zh" style="font-size:20px; font-weight:700;">企业服务中心</span>
 
+        <span class="type-meta">line-height: 1.4</span>
 
+      </div>
 
+      <div class="type-row">
 
+        <span class="type-label">卡片标题<br>16px / 600</span>
 
+        <span class="type-sample-zh" style="font-size:16px; font-weight:600;">第三届科技创新创业大赛报名开启</span>
 
+        <span class="type-meta">line-height: 1.5</span>
 
+      </div>
 
+      <div class="type-row">
 
+        <span class="type-label">正文<br>14px / 400</span>
 
+        <span class="type-sample-zh" style="font-size:14px; font-weight:400; color:#374151;">本次大赛面向全国在校大学生及应届毕业生，设置...</span>
 
+        <span class="type-meta">line-height: 1.6</span>
 
+      </div>
 
+      <div class="type-row">
 
+        <span class="type-label">辅助说明<br>12px / 400</span>
 
+        <span class="type-sample-zh" style="font-size:12px; color:#64748b;">2026年4月15日 · 天河基地A座报告厅</span>
 
+        <span class="type-meta">line-height: 1.5</span>
 
+      </div>
 
+      <div class="type-row">
 
+        <span class="type-label">标签 / 角标<br>11px / 500</span>
 
+        <span class="type-sample-zh" style="font-size:11px; font-weight:500; letter-spacing:0.3px; color:#3b82f6;">入驻审核中 · 待付款 · 已结束</span>
 
+        <span class="type-meta">letter-spacing: 0.3px</span>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- SPACING & RADIUS -->
 
+  <div class="section">
 
+    <div class="section-title">间距 & 圆角 Spacing & Radius</div>
 
+    <div style="display:flex; gap:48px; flex-wrap:wrap;">
 
+      <div>
 
+        <p style="font-size:12px; color:#94a3b8; margin-bottom:12px;">间距系统（4pt 基准）</p>
 
+        <div class="spacing-row">
 
+          <div class="space-block"><div class="space-visual" style="height:4px;"></div><span class="space-label">4</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:8px;"></div><span class="space-label">8</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:12px;"></div><span class="space-label">12</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:16px;"></div><span class="space-label">16</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:20px;"></div><span class="space-label">20</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:24px;"></div><span class="space-label">24</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:32px;"></div><span class="space-label">32</span></div>
 
+          <div class="space-block"><div class="space-visual" style="height:48px;"></div><span class="space-label">48</span></div>
 
+        </div>
 
+      </div>
 
+      <div>
 
+        <p style="font-size:12px; color:#94a3b8; margin-bottom:12px;">圆角规范</p>
 
+        <div class="radius-row">
 
+          <div class="radius-block"><div class="radius-visual" style="border-radius:4px;"></div><span class="radius-label">4px 标签</span></div>
 
+          <div class="radius-block"><div class="radius-visual" style="border-radius:8px;"></div><span class="radius-label">8px 按钮</span></div>
 
+          <div class="radius-block"><div class="radius-visual" style="border-radius:12px;"></div><span class="radius-label">12px 输入框</span></div>
 
+          <div class="radius-block"><div class="radius-visual" style="border-radius:16px;"></div><span class="radius-label">16px 卡片</span></div>
 
+          <div class="radius-block"><div class="radius-visual" style="border-radius:24px;"></div><span class="radius-label">24px 胶囊</span></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- BUTTONS -->
 
+  <div class="section">
 
+    <div class="section-title">按钮组件 Buttons</div>
 
+    <div class="comp-card" style="width:100%;">
 
+      <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px;">
 
+        <button class="btn btn-primary">立即申请</button>
 
+        <button class="btn btn-secondary">查看详情</button>
 
+        <button class="btn btn-ghost">取消</button>
 
+        <button class="btn btn-danger">删除</button>
 
+        <button class="btn btn-disabled">不可用</button>
 
+      </div>
 
+      <div style="display:flex; flex-wrap:wrap; gap:12px; align-items:center;">
 
+        <button class="btn btn-primary btn-sm">提交</button>
 
+        <button class="btn btn-secondary btn-sm">筛选</button>
 
+        <button class="btn btn-ghost btn-sm">取消报名</button>
 
+        <button class="btn btn-danger btn-sm">撤回申请</button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- STATUS TAGS -->
 
+  <div class="section">
 
+    <div class="section-title">状态标签 Status Tags</div>
 
+    <div class="comp-card" style="width:100%;">
 
+      <div class="status-row">
 
+        <span class="tag tag-gray">草稿</span>
 
+        <span class="tag tag-orange">审核中</span>
 
+        <span class="tag tag-blue">已提交</span>
 
+        <span class="tag tag-green">已通过 ✓</span>
 
+        <span class="tag tag-red">已拒绝</span>
 
+        <span class="tag tag-indigo">进行中</span>
 
+        <span class="tag tag-gray">已结束</span>
 
+        <span class="tag tag-green">已发布</span>
 
+        <span class="tag tag-orange">待处理</span>
 
+        <span class="tag tag-blue">处理中</span>
 
+        <span class="tag tag-green">已解决 ✓</span>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- FORM INPUTS -->
 
+  <div class="section">
 
+    <div class="section-title">表单组件 Form Inputs</div>
 
+    <div class="comp-card" style="width:100%;">
 
+      <div style="display:flex; flex-wrap:wrap; gap:24px;">
 
+        <div>
 
+          <div class="input-label">默认状态</div>
 
+          <input class="demo-input" placeholder="请输入企业名称">
 
+        </div>
 
+        <div>
 
+          <div class="input-label">聚焦状态</div>
 
+          <input class="demo-input-active" value="天河科技有限公司" readonly>
 
+        </div>
 
+        <div>
 
+          <div class="input-label">错误状态 <span style="color:#ef4444;">*必填</span></div>
 
+          <input class="input-error-state" placeholder="请输入手机号">
 
+          <div class="input-error">⚠ 手机号格式不正确</div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- CARDS -->
 
+  <div class="section">
 
+    <div class="section-title">内容卡片 Content Cards</div>
 
+    <div style="display:flex; flex-wrap:wrap; gap:16px;">
 
+      <!-- 活动卡片 -->
 
+      <div style="background:white; border-radius:16px; padding:0; box-shadow:0 2px 12px rgba(0,0,0,0.06); width:220px; overflow:hidden;">
 
+        <div style="height:96px; background:linear-gradient(135deg,#3b82f6,#6366f1); position:relative;">
 
+          <span class="tag tag-green" style="position:absolute; top:10px; right:10px; font-size:11px; background:rgba(255,255,255,0.95);">报名中</span>
 
+        </div>
 
+        <div style="padding:14px;">
 
+          <div style="font-size:14px; font-weight:600; color:#0f172a; margin-bottom:6px;">第三届科技创新大赛</div>
 
+          <div style="font-size:12px; color:#64748b;">📅 4月15日 14:00</div>
 
+          <div style="font-size:12px; color:#64748b; margin-top:2px;">📍 A座报告厅</div>
 
+          <div style="margin-top:12px; display:flex; justify-content:space-between; align-items:center;">
 
+            <span style="font-size:12px; color:#94a3b8;">已报名 128/200</span>
 
+            <button class="btn btn-primary btn-sm">立即报名</button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 场地卡片 -->
 
+      <div style="background:white; border-radius:16px; padding:0; box-shadow:0 2px 12px rgba(0,0,0,0.06); width:220px; overflow:hidden;">
 
+        <div style="height:96px; background:linear-gradient(135deg,#0ea5e9,#3b82f6);"></div>
 
+        <div style="padding:14px;">
 
+          <div style="font-size:14px; font-weight:600; color:#0f172a; margin-bottom:6px;">A-301 多功能会议室</div>
 
+          <div style="font-size:12px; color:#64748b;">👥 20人 · 3F · 60㎡</div>
 
+          <div style="font-size:12px; color:#3b82f6; font-weight:600; margin-top:4px;">¥200 / 小时</div>
 
+          <div style="margin-top:12px; display:flex; justify-content:space-between; align-items:center;">
 
+            <span class="tag tag-green" style="font-size:11px;">可预约</span>
 
+            <button class="btn btn-secondary btn-sm">预约</button>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 需求卡片 -->
 
+      <div style="background:white; border-radius:16px; padding:16px; box-shadow:0 2px 12px rgba(0,0,0,0.06); width:220px;">
 
+        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;">
 
+          <span class="tag tag-indigo">找人才</span>
 
+          <span style="font-size:12px; color:#94a3b8;">2天前</span>
 
+        </div>
 
+        <div style="font-size:14px; font-weight:600; color:#0f172a; margin-bottom:6px;">急招 AI 算法工程师 3名</div>
 
+        <div style="font-size:12px; color:#64748b; line-height:1.5;">要求3年以上深度学习经验，熟悉 PyTorch...</div>
 
+        <div style="margin-top:12px; font-size:12px; color:#3b82f6;">天河科技有限公司 →</div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- CELL LIST + STEP -->
 
+  <div class="section">
 
+    <div class="section-title">列表单元格 & 步骤条</div>
 
+    <div style="display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;">
 
+      <div class="cell-list">
 
+        <div class="cell">
 
+          <div class="cell-icon">🏢</div>
 
+          <div class="cell-content"><div class="cell-title">我的入驻申请</div><div class="cell-sub">审核中 · 3个工作日内反馈</div></div>
 
+          <span class="cell-arrow">›</span>
 
+        </div>
 
+        <div class="cell">
 
+          <div class="cell-icon">📅</div>
 
+          <div class="cell-content"><div class="cell-title">我的报名记录</div><div class="cell-sub">已报名 2 项活动</div></div>
 
+          <span class="cell-arrow">›</span>
 
+        </div>
 
+        <div class="cell">
 
+          <div class="cell-icon">🏛</div>
 
+          <div class="cell-content"><div class="cell-title">我的会场预约</div><div class="cell-sub">本周有 1 项待使用</div></div>
 
+          <span class="cell-arrow">›</span>
 
+        </div>
 
+        <div class="cell">
 
+          <div class="cell-icon">💬</div>
 
+          <div class="cell-content"><div class="cell-title">我的反馈工单</div><div class="cell-sub">1 项处理中</div></div>
 
+          <span class="cell-arrow">›</span>
 
+        </div>
 
+      </div>
 
+
 
+      <div>
 
+        <p style="font-size:12px; color:#94a3b8; margin-bottom:16px;">多步骤流程进度条（入驻申请 / 会场预约）</p>
 
+        <div class="step-row">
 
+          <div class="step" style="flex-direction:column; align-items:center;">
 
+            <div class="step-dot done">✓</div>
 
+            <div class="step-label">填写资料</div>
 
+          </div>
 
+          <div class="step-line done" style="margin-bottom:18px;"></div>
 
+          <div class="step" style="flex-direction:column; align-items:center;">
 
+            <div class="step-dot done">✓</div>
 
+            <div class="step-label">上传材料</div>
 
+          </div>
 
+          <div class="step-line done" style="margin-bottom:18px;"></div>
 
+          <div class="step" style="flex-direction:column; align-items:center;">
 
+            <div class="step-dot active">3</div>
 
+            <div class="step-label" style="color:#3b82f6; font-weight:600;">审核中</div>
 
+          </div>
 
+          <div class="step-line pending" style="margin-bottom:18px;"></div>
 
+          <div class="step" style="flex-direction:column; align-items:center;">
 
+            <div class="step-dot pending">4</div>
 
+            <div class="step-label">结果通知</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- BOTTOM NAV -->
 
+  <div class="section">
 
+    <div class="section-title">底部导航 Bottom Tab Bar</div>
 
+    <div style="width:375px; background:#f8fafc; border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.1);">
 
+      <div style="height:120px; background:linear-gradient(135deg,#3b82f6,#6366f1); display:flex; align-items:center; justify-content:center;">
 
+        <span style="color:white; font-size:14px; opacity:0.7;">页面内容区域</span>
 
+      </div>
 
+      <div class="bottom-nav">
 
+        <div class="nav-item active">
 
+          <div class="nav-icon">
 
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#3b82f6;"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 
+          </div>
 
+          <span class="nav-label" style="color:#3b82f6; font-weight:600;">首页</span>
 
+        </div>
 
+        <div class="nav-item">
 
+          <div class="nav-icon">
 
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#94a3b8;"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
 
+          </div>
 
+          <span class="nav-label">企业服务</span>
 
+        </div>
 
+        <div class="nav-item">
 
+          <div class="nav-icon">
 
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#94a3b8;"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
 
+          </div>
 
+          <span class="nav-label">活动</span>
 
+        </div>
 
+        <div class="nav-item">
 
+          <div class="nav-icon">
 
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#94a3b8;"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 
+          </div>
 
+          <span class="nav-label">会场</span>
 
+        </div>
 
+        <div class="nav-item">
 
+          <div class="nav-icon">
 
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#94a3b8;"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
 
+          </div>
 
+          <span class="nav-label">我的</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+</div>
 
+</body>
 
+</html>

+ 376 - 0
design/02-page-home.html
View File 

@@ -0,0 +1,376 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地 · 首页设计</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #e8edf5; color: #0f172a; padding: 32px 24px; }
 
+
 
+h1 { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
 
+.page-sub { font-size: 13px; color: #64748b; margin-bottom: 32px; }
 
+
 
+.layout { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
 
+
 
+/* Phone frame */
 
+.phone { width: 375px; background: #f8fafc; border-radius: 36px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 8px #1e293b, 0 0 0 10px #334155; flex-shrink: 0; }
 
+.phone-status { background: white; padding: 12px 20px 6px; display: flex; justify-content: space-between; align-items: center; }
 
+.status-time { font-size: 15px; font-weight: 700; color: #0f172a; }
 
+.status-icons { font-size: 12px; color: #0f172a; display: flex; gap: 6px; align-items: center; }
 
+.phone-nav { background: white; padding: 8px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f1f5f9; }
 
+.nav-title { font-size: 17px; font-weight: 600; color: #0f172a; }
 
+.nav-icons { display: flex; gap: 16px; }
 
+.nav-icon-btn { width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; }
 
+
 
+.phone-body { height: 620px; overflow-y: auto; background: #f8fafc; }
 
+.phone-body::-webkit-scrollbar { display: none; }
 
+
 
+/* Banner */
 
+.banner { height: 160px; background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); position: relative; overflow: hidden; padding: 24px 20px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
 
+.banner-bg-circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.08); top: -60px; right: -40px; }
 
+.banner-bg-circle2 { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.06); top: 20px; right: 60px; }
 
+.banner-tag { display: inline-flex; background: rgba(255,255,255,0.2); color: white; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; width: fit-content; }
 
+.banner-title { font-size: 20px; font-weight: 700; color: white; line-height: 1.3; }
 
+.banner-sub { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 4px; }
 
+.banner-dots { display: flex; gap: 5px; position: absolute; bottom: 14px; right: 16px; }
 
+.dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.4); }
 
+.dot.active { width: 16px; border-radius: 3px; background: white; }
 
+
 
+/* Quick entries */
 
+.entries-section { background: white; padding: 16px; margin-bottom: 8px; }
 
+.entries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
 
+.entry-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; cursor: pointer; border-radius: 12px; }
 
+.entry-item:active { background: #f8fafc; }
 
+.entry-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
 
+.entry-label { font-size: 12px; color: #374151; font-weight: 500; text-align: center; line-height: 1.3; }
 
+
 
+/* Section header */
 
+.sec-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 10px; }
 
+.sec-title { font-size: 16px; font-weight: 700; color: #0f172a; }
 
+.sec-more { font-size: 13px; color: #3b82f6; }
 
+
 
+/* Activity cards horizontal scroll */
 
+.h-scroll { display: flex; gap: 12px; padding: 0 16px 16px; overflow-x: auto; }
 
+.h-scroll::-webkit-scrollbar { display: none; }
 
+.activity-card { flex-shrink: 0; width: 180px; background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
 
+.activity-img { height: 80px; position: relative; }
 
+.activity-img-tag { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,0.92); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
 
+.activity-img-tag.green { color: #16a34a; }
 
+.activity-img-tag.orange { color: #ea580c; }
 
+.activity-info { padding: 10px 10px 12px; }
 
+.activity-name { font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.4; margin-bottom: 5px; }
 
+.activity-meta { font-size: 11px; color: #64748b; }
 
+.activity-meta + .activity-meta { margin-top: 2px; }
 
+
 
+/* Space cards */
 
+.spaces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
 
+.space-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
 
+.space-img { height: 72px; }
 
+.space-info { padding: 10px; }
 
+.space-name { font-size: 13px; font-weight: 600; color: #0f172a; }
 
+.space-meta { font-size: 11px; color: #64748b; margin-top: 3px; }
 
+.space-price { font-size: 12px; color: #3b82f6; font-weight: 600; margin-top: 4px; }
 
+
 
+/* Achievement section */
 
+.achievement-item { display: flex; gap: 12px; padding: 12px 16px; background: white; border-bottom: 1px solid #f8fafc; align-items: center; }
 
+.achievement-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #eff6ff, #eef2ff); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
 
+.achievement-info { flex: 1; }
 
+.achievement-name { font-size: 13px; font-weight: 600; color: #0f172a; }
 
+.achievement-org { font-size: 11px; color: #64748b; margin-top: 2px; }
 
+.achievement-arrow { color: #cbd5e1; font-size: 18px; }
 
+
 
+/* Partner banner */
 
+.partner-banner { margin: 8px 16px 16px; background: linear-gradient(135deg, #eff6ff, #eef2ff); border-radius: 16px; padding: 16px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #dbeafe; }
 
+.partner-text { }
 
+.partner-title { font-size: 14px; font-weight: 700; color: #1e40af; }
 
+.partner-sub { font-size: 12px; color: #6366f1; margin-top: 3px; }
 
+.partner-btn { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 20px; border: none; white-space: nowrap; flex-shrink: 0; }
 
+
 
+/* Bottom Nav */
 
+.bottom-nav { background: white; border-top: 1px solid #f1f5f9; display: flex; padding: 8px 0 20px; box-shadow: 0 -4px 16px rgba(0,0,0,0.05); }
 
+.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
 
+.nav-dot { width: 20px; height: 20px; }
 
+.nav-label-text { font-size: 10px; color: #94a3b8; }
 
+.nav-item.active .nav-label-text { color: #3b82f6; font-weight: 600; }
 
+
 
+/* Annotations panel */
 
+.annotations { flex: 1; min-width: 280px; }
 
+.anno-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
 
+.anno-block { background: white; border-radius: 14px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+.anno-block-title { font-size: 13px; font-weight: 700; color: #3b82f6; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
 
+.anno-num { width: 20px; height: 20px; background: #3b82f6; color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
 
+.anno-text { font-size: 13px; color: #374151; line-height: 1.6; }
 
+.anno-tag { display: inline-block; background: #eff6ff; color: #3b82f6; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-right: 4px; margin-top: 4px; }
 
+.anno-tag.p0 { background: #fef2f2; color: #dc2626; }
 
+.anno-tag.p1 { background: #fff7ed; color: #ea580c; }
 
+.anno-tag.p2 { background: #f0fdf4; color: #16a34a; }
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<h1>天河基地小程序 · 首页设计</h1>
 
+<p class="page-sub">Page 1 of 8 · 首页 (Home)</p>
 
+
 
+<div class="layout">
 
+
 
+  <!-- PHONE MOCKUP -->
 
+  <div class="phone">
 
+    <!-- Status Bar -->
 
+    <div class="phone-status" style="background:white;">
 
+      <span class="status-time">9:41</span>
 
+      <div class="status-icons">
 
+        <span>●●●</span><span>WiFi</span><span>🔋</span>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Nav Bar -->
 
+    <div class="phone-nav">
 
+      <div style="width:32px;"></div>
 
+      <span class="nav-title">天河基地</span>
 
+      <div class="nav-icons">
 
+        <div class="nav-icon-btn">🔍</div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Scrollable Body -->
 
+    <div class="phone-body">
 
+
 
+      <!-- ① Banner -->
 
+      <div class="banner">
 
+        <div class="banner-bg-circle"></div>
 
+        <div class="banner-bg-circle2"></div>
 
+        <span class="banner-tag">🎉 最新公告</span>
 
+        <div class="banner-title">2026年天河基地<br>招商入驻开放申请</div>
 
+        <div class="banner-sub">优质办公空间 · 全程政策支持</div>
 
+        <div class="banner-dots">
 
+          <div class="dot active"></div>
 
+          <div class="dot"></div>
 
+          <div class="dot"></div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- ② Quick Entries -->
 
+      <div class="entries-section">
 
+        <div class="entries-grid">
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#eff6ff,#dbeafe);">🏢</div>
 
+            <span class="entry-label">入驻申请</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#fff7ed,#ffedd5);">📅</div>
 
+            <span class="entry-label">活动报名</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#f0fdf4,#dcfce7);">🏛</div>
 
+            <span class="entry-label">会场预约</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#eef2ff,#e0e7ff);">💼</div>
 
+            <span class="entry-label">需求发布</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#fdf4ff,#fae8ff);">🔬</div>
 
+            <span class="entry-label">科技成果</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#fff1f2,#ffe4e6);">👔</div>
 
+            <span class="entry-label">技术经理人</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#f0fdfa,#ccfbf1);">📍</div>
 
+            <span class="entry-label">关于基地</span>
 
+          </div>
 
+          <div class="entry-item">
 
+            <div class="entry-icon" style="background: linear-gradient(135deg,#fffbeb,#fef3c7);">💬</div>
 
+            <span class="entry-label">问题反馈</span>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- ③ Recent Activities -->
 
+      <div style="background:#f8fafc;">
 
+        <div class="sec-header">
 
+          <span class="sec-title">近期活动</span>
 
+          <span class="sec-more">全部 ›</span>
 
+        </div>
 
+        <div class="h-scroll">
 
+          <div class="activity-card">
 
+            <div class="activity-img" style="background: linear-gradient(135deg,#3b82f6,#6366f1);">
 
+              <span class="activity-img-tag green">报名中</span>
 
+            </div>
 
+            <div class="activity-info">
 
+              <div class="activity-name">第三届科技创新创业大赛</div>
 
+              <div class="activity-meta">📅 4月15日 14:00</div>
 
+              <div class="activity-meta">📍 A座报告厅</div>
 
+            </div>
 
+          </div>
 
+          <div class="activity-card">
 
+            <div class="activity-img" style="background: linear-gradient(135deg,#0ea5e9,#3b82f6);">
 
+              <span class="activity-img-tag orange">即将开始</span>
 
+            </div>
 
+            <div class="activity-info">
 
+              <div class="activity-name">AI 赋能企业运营专题讲座</div>
 
+              <div class="activity-meta">📅 4月18日 10:00</div>
 
+              <div class="activity-meta">📍 B座多功能厅</div>
 
+            </div>
 
+          </div>
 
+          <div class="activity-card">
 
+            <div class="activity-img" style="background: linear-gradient(135deg,#8b5cf6,#6366f1);">
 
+              <span class="activity-img-tag green">报名中</span>
 
+            </div>
 
+            <div class="activity-info">
 
+              <div class="activity-name">政策解读沙龙·高新技术</div>
 
+              <div class="activity-meta">📅 4月22日 15:00</div>
 
+              <div class="activity-meta">📍 C座会议室</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- ④ Space Showcase -->
 
+      <div style="background:#f8fafc; margin-top:4px;">
 
+        <div class="sec-header">
 
+          <span class="sec-title">园区空间</span>
 
+          <span class="sec-more">更多空间 ›</span>
 
+        </div>
 
+        <div class="spaces-grid">
 
+          <div class="space-card">
 
+            <div class="space-img" style="background: linear-gradient(135deg,#0ea5e9,#3b82f6);"></div>
 
+            <div class="space-info">
 
+              <div class="space-name">A栋精装办公室</div>
 
+              <div class="space-meta">60㎡ · 3F · 可租</div>
 
+              <div class="space-price">¥3,500 / 月</div>
 
+            </div>
 
+          </div>
 
+          <div class="space-card">
 
+            <div class="space-img" style="background: linear-gradient(135deg,#8b5cf6,#6366f1);"></div>
 
+            <div class="space-info">
 
+              <div class="space-name">B栋商业旺铺</div>
 
+              <div class="space-meta">120㎡ · 1F · 可租</div>
 
+              <div class="space-price">¥8,800 / 月</div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- ⑤ Tech Achievements -->
 
+      <div style="background:#f8fafc; margin-top:4px;">
 
+        <div class="sec-header">
 
+          <span class="sec-title">科技成果对接</span>
 
+          <span class="sec-more">查看全部 ›</span>
 
+        </div>
 
+        <div style="background:white; margin: 0 0 4px;">
 
+          <div class="achievement-item">
 
+            <div class="achievement-icon">🔬</div>
 
+            <div class="achievement-info">
 
+              <div class="achievement-name">新型纳米材料制备技术</div>
 
+              <div class="achievement-org">华南理工大学 · 材料学院</div>
 
+            </div>
 
+            <span class="achievement-arrow">›</span>
 
+          </div>
 
+          <div class="achievement-item">
 
+            <div class="achievement-icon">💡</div>
 
+            <div class="achievement-info">
 
+              <div class="achievement-name">智能电网优化调度算法</div>
 
+              <div class="achievement-org">中山大学 · 信息学院</div>
 
+            </div>
 
+            <span class="achievement-arrow">›</span>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- ⑥ Partner CTA -->
 
+      <div class="partner-banner">
 
+        <div class="partner-text">
 
+          <div class="partner-title">🤝 申请成为社区合伙人</div>
 
+          <div class="partner-sub">享受园区资源 · 参与社区共建</div>
 
+        </div>
 
+        <button class="partner-btn">立即申请</button>
 
+      </div>
 
+
 
+      <div style="height: 8px; background: #f8fafc;"></div>
 
+
 
+    </div><!-- end phone-body -->
 
+
 
+    <!-- Bottom Nav -->
 
+    <div class="bottom-nav">
 
+      <div class="nav-item active">
 
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
 
+        <span class="nav-label-text" style="color:#3b82f6; font-weight:600;">首页</span>
 
+      </div>
 
+      <div class="nav-item">
 
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
 
+        <span class="nav-label-text">企业服务</span>
 
+      </div>
 
+      <div class="nav-item">
 
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
 
+        <span class="nav-label-text">活动</span>
 
+      </div>
 
+      <div class="nav-item">
 
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
 
+        <span class="nav-label-text">会场</span>
 
+      </div>
 
+      <div class="nav-item">
 
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
 
+        <span class="nav-label-text">我的</span>
 
+      </div>
 
+    </div>
 
+
 
+  </div><!-- end phone -->
 
+
 
+  <!-- ANNOTATIONS -->
 
+  <div class="annotations">
 
+    <div class="anno-title">首页设计说明</div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">①</span> Banner 轮播区</div>
 
+      <div class="anno-text">渐变背景 + 几何装饰圆，支持后台配置跳转类型（页面/URL/无）。底部小圆点指示当前第几张。自动轮播间隔 4 秒，支持手动滑动。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p0">P0</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">②</span> 快捷入口 8 格</div>
 
+      <div class="anno-text">2 行 × 4 列宫格。每个入口有独立彩色渐变背景图标，视觉上形成色彩区分，无需文字颜色标注功能类别。点击分别跳转各功能模块。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p0">P0</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">③</span> 近期活动横滑</div>
 
+      <div class="anno-text">最多展示近 2 周活动，横向滚动卡片。封面图区域支持纯色渐变占位（后台未上传图片时）。状态标签（报名中/即将开始/已结束）自动根据时间计算。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p0">P0</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">④</span> 园区空间展示</div>
 
+      <div class="anno-text">2 列卡片展示代表性空间，点击进入场地详情。仅展示 is_available=true 的场地，最多 4 条，余量展示"更多空间"入口。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p0">P0</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">⑤</span> 科技成果对接</div>
 
+      <div class="anno-text">列表展示最新 2 条 status=published 的成果，点击右箭头进入详情（含联系人电话）。「查看全部」跳转企业服务 → 科技成果子页。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p0">P0</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block">
 
+      <div class="anno-block-title"><span class="anno-num">⑥</span> 社区合伙人 Banner</div>
 
+      <div class="anno-text">浅蓝渐变背景，区别于内容区域。用户已是合伙人时此区块隐藏。申请按钮跳转合伙人申请表单（P1 功能）。</div>
 
+      <div style="margin-top:6px;"><span class="anno-tag p1">P1</span></div>
 
+    </div>
 
+
 
+    <div class="anno-block" style="border: 1.5px solid #e2e8f0;">
 
+      <div class="anno-block-title" style="color:#64748b;">页面数据接口</div>
 
+      <div class="anno-text" style="font-size:12px; font-family:monospace; color:#475569; line-height:1.8;">
 
+        GET /api/v1/banners<br>
 
+        GET /api/v1/home/activities<br>
 
+        GET /api/v1/home/spaces/summary<br>
 
+        GET /api/v1/home/achievements
 
+      </div>
 
+    </div>
 
+
 
+  </div>
 
+
 
+</div>
 
+</body>
 
+</html>

+ 344 - 0
design/03-enterprise-service.html
View File 

@@ -0,0 +1,344 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地 · 企业服务中心</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #e8edf5; color: #0f172a; padding: 32px 24px; }
 
+h1 { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
 
+.page-sub { font-size: 13px; color: #64748b; margin-bottom: 28px; }
 
+.screens-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
 
+.screen-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
 
+.screen-label { font-size: 12px; font-weight: 600; color: #64748b; text-align: center; background: white; padding: 4px 12px; border-radius: 20px; }
 
+
 
+/* Phone */
 
+.phone { width: 340px; background: #f8fafc; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 56px rgba(0,0,0,0.16), 0 0 0 7px #1e293b; flex-shrink: 0; }
 
+.phone-sm { width: 300px; border-radius: 28px; box-shadow: 0 16px 40px rgba(0,0,0,0.14), 0 0 0 6px #1e293b; }
 
+.status { background: white; padding: 10px 18px 5px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
 
+.nav-bar { background: white; padding: 6px 14px 8px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f1f5f9; }
 
+.back-btn { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
 
+.nav-t { font-size: 16px; font-weight: 600; color: #0f172a; flex: 1; text-align: center; }
 
+.body { max-height: 580px; overflow-y: auto; background: #f8fafc; }
 
+.body::-webkit-scrollbar { display: none; }
 
+
 
+/* Common */
 
+.sec-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 8px; }
 
+.sec-t { font-size: 15px; font-weight: 700; color: #0f172a; }
 
+.sec-more { font-size: 12px; color: #3b82f6; }
 
+.tag { display: inline-flex; align-items: center; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 500; }
 
+.t-blue { background:#eff6ff; color:#3b82f6; }
 
+.t-green { background:#f0fdf4; color:#16a34a; }
 
+.t-orange { background:#fff7ed; color:#ea580c; }
 
+.t-red { background:#fef2f2; color:#ef4444; }
 
+.t-gray { background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; }
 
+.t-indigo { background:#eef2ff; color:#6366f1; }
 
+.t-purple { background:#fdf4ff; color:#a21caf; }
 
+
 
+/* Enterprise service hub */
 
+.hub-banner { height: 100px; background: linear-gradient(135deg, #1e40af, #3b82f6, #6366f1); padding: 16px 14px; display: flex; flex-direction: column; justify-content: flex-end; }
 
+.hub-title { font-size: 18px; font-weight: 700; color: white; }
 
+.hub-sub { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 3px; }
 
+
 
+.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
 
+.service-card { background: white; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; }
 
+.service-card-icon { font-size: 28px; margin-bottom: 8px; }
 
+.service-card-name { font-size: 14px; font-weight: 700; color: #0f172a; }
 
+.service-card-desc { font-size: 11px; color: #64748b; margin-top: 4px; line-height: 1.4; }
 
+.service-card-arrow { font-size: 12px; color: #3b82f6; margin-top: 6px; }
 
+
 
+/* Settlement form */
 
+.form-block { background: white; border-radius: 14px; margin: 10px 12px; padding: 14px; }
 
+.form-title { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
 
+.form-row { margin-bottom: 12px; }
 
+.form-label { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }
 
+.form-label .req { color: #ef4444; }
 
+.form-input { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #0f172a; width: 100%; }
 
+.form-input-active { background: white; border: 1.5px solid #3b82f6; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #0f172a; width: 100%; }
 
+.form-select { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #64748b; width: 100%; display: flex; justify-content: space-between; align-items: center; }
 
+.ocr-btn { display: flex; align-items: center; gap: 6px; background: #eff6ff; color: #3b82f6; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
 
+.upload-area { border: 2px dashed #dbeafe; border-radius: 12px; padding: 16px; text-align: center; background: #f8faff; }
 
+.upload-icon { font-size: 24px; color: #93c5fd; }
 
+.upload-text { font-size: 12px; color: #64748b; margin-top: 6px; }
 
+.step-bar { display: flex; align-items: center; padding: 12px 14px; background: white; margin-bottom: 1px; }
 
+.s-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
 
+.s-done { background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; }
 
+.s-active { background: white; border: 2px solid #3b82f6; color: #3b82f6; }
 
+.s-pending { background: #f1f5f9; color: #94a3b8; }
 
+.s-line { height: 2px; flex: 1; }
 
+.s-line-done { background: linear-gradient(90deg,#3b82f6,#6366f1); }
 
+.s-line-gray { background: #e2e8f0; }
 
+.s-label { font-size: 10px; text-align: center; margin-top: 4px; color: #64748b; }
 
+.s-label-active { color: #3b82f6; font-weight: 600; }
 
+
 
+/* Requirements */
 
+.req-filter { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; }
 
+.req-filter::-webkit-scrollbar { display: none; }
 
+.filter-btn { flex-shrink: 0; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1.5px solid #e2e8f0; color: #64748b; background: white; }
 
+.filter-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
 
+.req-card { background: white; margin: 0 12px 8px; border-radius: 14px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
 
+.req-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
 
+.req-card-name { font-size: 14px; font-weight: 600; color: #0f172a; flex: 1; margin-right: 8px; line-height: 1.4; }
 
+.req-card-desc { font-size: 12px; color: #64748b; line-height: 1.5; margin-bottom: 8px; }
 
+.req-card-footer { display: flex; justify-content: space-between; align-items: center; }
 
+.req-card-company { font-size: 12px; color: #3b82f6; }
 
+.req-card-time { font-size: 11px; color: #94a3b8; }
 
+
 
+/* Bottom nav */
 
+.bot-nav { background: white; border-top: 1px solid #f1f5f9; display: flex; padding: 7px 0 18px; }
 
+.n-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
 
+.n-lbl { font-size: 10px; color: #94a3b8; }
 
+.n-lbl.active { color: #3b82f6; font-weight: 600; }
 
+
 
+/* Submit bar */
 
+.submit-bar { background: white; padding: 12px 14px 24px; border-top: 1px solid #f1f5f9; }
 
+.submit-btn { width: 100%; background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-size: 16px; font-weight: 700; padding: 14px; border-radius: 12px; border: none; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
 
+
 
+/* Annotations */
 
+.annos { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
 
+.anno { background: white; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+.anno-t { font-size: 13px; font-weight: 700; color: #3b82f6; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
 
+.anno-num { width: 20px; height: 20px; background: #3b82f6; color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
 
+.anno-p { font-size: 13px; color: #374151; line-height: 1.6; }
 
+.p-tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-top: 5px; }
 
+.p0 { background:#fef2f2; color:#dc2626; }
 
+.p1 { background:#fff7ed; color:#ea580c; }
 
+.p2 { background:#f0fdf4; color:#16a34a; }
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<h1>企业服务中心 · 入驻申请 · 成果供需</h1>
 
+<p class="page-sub">Page 2–4 · 企业服务模块核心页面</p>
 
+
 
+<div class="screens-row">
 
+
 
+  <!-- Screen 1: Enterprise Hub -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">企业服务中心（Tab 2 首页）</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="hub-banner">
 
+        <div class="hub-title">企业服务中心</div>
 
+        <div class="hub-sub">入驻 · 场地 · 需求 · 成果 · 经理人</div>
 
+      </div>
 
+      <div class="body">
 
+        <div class="service-grid">
 
+          <div class="service-card">
 
+            <div class="service-card-icon">🏢</div>
 
+            <div class="service-card-name">入驻申请</div>
 
+            <div class="service-card-desc">在线提交，飞书审批流程驱动</div>
 
+            <div class="service-card-arrow">立即申请 →</div>
 
+          </div>
 
+          <div class="service-card">
 
+            <div class="service-card-icon">🏗</div>
 
+            <div class="service-card-name">场地展示</div>
 
+            <div class="service-card-desc">办公室 · 商业空间 浏览选租</div>
 
+            <div class="service-card-arrow">浏览空间 →</div>
 
+          </div>
 
+          <div class="service-card">
 
+            <div class="service-card-icon">🔬</div>
 
+            <div class="service-card-name">科技成果</div>
 
+            <div class="service-card-desc">高校院所成果对接转化</div>
 
+            <div class="service-card-arrow">查看成果 →</div>
 
+          </div>
 
+          <div class="service-card">
 
+            <div class="service-card-icon">📢</div>
 
+            <div class="service-card-name">成果供需</div>
 
+            <div class="service-card-desc">发布/浏览人才·资金·政策需求</div>
 
+            <div class="service-card-arrow">发布需求 →</div>
 
+          </div>
 
+          <div class="service-card">
 
+            <div class="service-card-icon">👔</div>
 
+            <div class="service-card-name">技术经理人</div>
 
+            <div class="service-card-desc">专业经理人团队资源对接</div>
 
+            <div class="service-card-arrow">了解更多 →</div>
 
+          </div>
 
+          <div class="service-card">
 
+            <div class="service-card-icon">💬</div>
 
+            <div class="service-card-name">问题反馈</div>
 
+            <div class="service-card-desc">场地·设施·服务 工单追踪</div>
 
+            <div class="service-card-arrow">提交反馈 →</div>
 
+          </div>
 
+        </div>
 
+        <!-- My Applications quick view -->
 
+        <div style="background:white; margin:0 0 8px;">
 
+          <div class="sec-h"><span class="sec-t">我的申请</span><span class="sec-more">全部 ›</span></div>
 
+          <div style="padding:0 14px 14px; display:flex; flex-direction:column; gap:8px;">
 
+            <div style="background:#f8fafc; border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
 
+              <div>
 
+                <div style="font-size:13px; font-weight:600; color:#0f172a;">A栋302室入驻申请</div>
 
+                <div style="font-size:11px; color:#64748b; margin-top:2px;">提交于 2026-04-01</div>
 
+              </div>
 
+              <span class="tag t-orange">审核中</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="bot-nav">
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">首页</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg><span class="n-lbl active">企业服务</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/></svg><span class="n-lbl">活动</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">会场</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg><span class="n-lbl">我的</span></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- Screen 2: Settlement Application Form -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">入驻申请表单（多步骤）</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div class="back-btn">‹</div><span class="nav-t">入驻申请</span><div style="width:28px;"></div></div>
 
+      <!-- Step bar -->
 
+      <div style="background:white; padding:12px 16px 8px;">
 
+        <div style="display:flex; align-items:center;">
 
+          <div style="display:flex;flex-direction:column;align-items:center;"><div class="s-dot s-done">✓</div><div class="s-label">企业信息</div></div>
 
+          <div class="s-line s-line-done" style="flex:1; margin-bottom:14px;"></div>
 
+          <div style="display:flex;flex-direction:column;align-items:center;"><div class="s-dot s-active">2</div><div class="s-label s-label-active">空间需求</div></div>
 
+          <div class="s-line s-line-gray" style="flex:1; margin-bottom:14px;"></div>
 
+          <div style="display:flex;flex-direction:column;align-items:center;"><div class="s-dot s-pending">3</div><div class="s-label">上传材料</div></div>
 
+          <div class="s-line s-line-gray" style="flex:1; margin-bottom:14px;"></div>
 
+          <div style="display:flex;flex-direction:column;align-items:center;"><div class="s-dot s-pending">4</div><div class="s-label">确认提交</div></div>
 
+        </div>
 
+      </div>
 
+      <div class="body" style="max-height:490px;">
 
+        <!-- OCR hint -->
 
+        <div style="margin:10px 12px 0;">
 
+          <div class="ocr-btn">
 
+            <span>📷</span>
 
+            <span>拍照/上传营业执照，AI 自动识别填充企业信息</span>
 
+          </div>
 
+        </div>
 
+        <!-- Form step 2: Space requirement -->
 
+        <div class="form-block">
 
+          <div class="form-title">第 2 步：空间需求</div>
 
+          <div class="form-row">
 
+            <div class="form-label">项目名称 <span class="req">*</span></div>
 
+            <div class="form-input-active">天河人工智能研究院</div>
 
+          </div>
 
+          <div class="form-row">
 
+            <div class="form-label">空间类型 <span class="req">*</span></div>
 
+            <div class="form-select"><span>办公室</span><span style="color:#3b82f6;">›</span></div>
 
+          </div>
 
+          <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
 
+            <div class="form-row">
 
+              <div class="form-label">需求面积 (㎡)</div>
 
+              <div class="form-input">80</div>
 
+            </div>
 
+            <div class="form-row">
 
+              <div class="form-label">预算 (元/月)</div>
 
+              <div class="form-input">5000</div>
 
+            </div>
 
+          </div>
 
+          <div class="form-row">
 
+            <div class="form-label">项目简介</div>
 
+            <div style="background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px; padding:10px 12px; font-size:12px; color:#374151; line-height:1.5; min-height:64px;">专注于计算机视觉方向的应用研究，团队共15人...</div>
 
+          </div>
 
+        </div>
 
+        <div style="height:8px;"></div>
 
+      </div>
 
+      <div class="submit-bar">
 
+        <button class="submit-btn">下一步：上传材料</button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- Screen 3: Requirements List -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">成果供需列表 + 发布</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div class="back-btn">‹</div><span class="nav-t">成果供需</span>
 
+        <div style="background:linear-gradient(135deg,#3b82f6,#6366f1); color:white; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px;">+ 发布</div>
 
+      </div>
 
+      <div class="body" style="max-height:540px;">
 
+        <!-- Filter tabs -->
 
+        <div class="req-filter">
 
+          <div class="filter-btn active">全部</div>
 
+          <div class="filter-btn">找人才</div>
 
+          <div class="filter-btn">找资金</div>
 
+          <div class="filter-btn">找政策</div>
 
+          <div class="filter-btn">找技术</div>
 
+          <div class="filter-btn">其他需求</div>
 
+        </div>
 
+        <div style="height:8px;"></div>
 
+        <!-- Cards -->
 
+        <div class="req-card">
 
+          <div class="req-card-top">
 
+            <div class="req-card-name">急招 AI 算法工程师 3 名，要求深度学习经验</div>
 
+            <span class="tag t-blue">找人才</span>
 
+          </div>
 
+          <div class="req-card-desc">要求3年以上CV方向经验，熟悉PyTorch，有大模型部署经验优先...</div>
 
+          <div class="req-card-footer">
 
+            <span class="req-card-company">天河科技有限公司</span>
 
+            <span class="req-card-time">1天前</span>
 
+          </div>
 
+        </div>
 
+        <div class="req-card">
 
+          <div class="req-card-top">
 
+            <div class="req-card-name">寻求 Pre-A 轮融资，新能源电池储能方向</div>
 
+            <span class="tag t-green">找资金</span>
 
+          </div>
 
+          <div class="req-card-desc">目前营收 500 万，已获天使轮，寻求2000万 Pre-A 轮...</div>
 
+          <div class="req-card-footer">
 
+            <span class="req-card-company">绿能储能科技</span>
 
+            <span class="req-card-time">3天前</span>
 
+          </div>
 
+        </div>
 
+        <div class="req-card">
 
+          <div class="req-card-top">
 
+            <div class="req-card-name">寻求高新技术企业认定政策咨询</div>
 
+            <span class="tag t-indigo">找政策</span>
 
+          </div>
 
+          <div class="req-card-desc">首次申请高新，不清楚具体材料要求和时间节点...</div>
 
+          <div class="req-card-footer">
 
+            <span class="req-card-company">普通注册用户</span>
 
+            <span class="req-card-time">5天前</span>
 
+          </div>
 
+        </div>
 
+        <div class="req-card">
 
+          <div class="req-card-top">
 
+            <div class="req-card-name">寻求图像识别算法技术合作方</div>
 
+            <span class="tag t-purple">找技术</span>
 
+          </div>
 
+          <div class="req-card-desc">工业质检场景，需要缺陷检测算法，精度要求99.5%以上...</div>
 
+          <div class="req-card-footer">
 
+            <span class="req-card-company">智造装备有限公司</span>
 
+            <span class="req-card-time">1周前</span>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+</div>
 
+
 
+<!-- ANNOTATIONS -->
 
+<div class="annos">
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">A</span> 企业服务中心 Hub</div>
 
+    <div class="anno-p">6 宫格服务卡片 + 「我的申请」快速预览。底部状态标签实时反映审批进度。未认证企业用户点击「入驻申请」直接进入表单；点击「成果供需·发布」先做角色判断（人才/资金需企业认证，其他需求注册即可）。</div>
 
+    <span class="p-tag p0">P0</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">B</span> 入驻申请多步骤表单</div>
 
+    <div class="anno-p">4 步骤：企业信息 → 空间需求 → 上传材料 → 确认提交。步骤 1 顶部有 OCR 一键识别营业执照入口，识别成功后自动填充企业名称、统一社会信用代码等字段。表单有自动草稿保存，关闭后可继续编辑。提交后触发飞书审批流程。</div>
 
+    <span class="p-tag p0">P0</span><span class="p-tag p1" style="margin-left:4px;">OCR P1</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">C</span> 成果供需列表</div>
 
+    <div class="anno-p">顶部筛选标签横滑，按需求类型过滤。右上角「+ 发布」按钮。「找人才/资金/技术」需企业认证才可发布，「找政策/其他」注册用户即可。发布时支持 AI 辅助生成标题和描述（P2 功能，输入关键词后点击「AI 生成」）。</div>
 
+    <span class="p-tag p0">P0</span><span class="p-tag p2" style="margin-left:4px;">AI 生成 P2</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">D</span> 问题反馈工单（未展示屏）</div>
 
+    <div class="anno-p">用户提交反馈（场地/设施/服务/其他），后台 AI 自动分类（P2）。提交后进入工单列表，可查看处理进度（待处理→处理中→已解决）。解决后出现满意度评分（1-5星），评分后工单关闭。</div>
 
+    <span class="p-tag p0">P0</span><span class="p-tag p2" style="margin-left:4px;">AI 分类 P2</span>
 
+  </div>
 
+</div>
 
+
 
+</body>
 
+</html>

+ 374 - 0
design/04-activities-venues.html
View File 

@@ -0,0 +1,374 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地 · 活动 & 会场</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #e8edf5; color: #0f172a; padding: 32px 24px; }
 
+h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
 
+.page-sub { font-size: 13px; color: #64748b; margin-bottom: 28px; }
 
+.screens-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
 
+.screen-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
 
+.screen-label { font-size: 12px; font-weight: 600; color: #64748b; background: white; padding: 4px 12px; border-radius: 20px; }
 
+.phone { width: 320px; background: #f8fafc; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.15), 0 0 0 7px #1e293b; flex-shrink: 0; }
 
+.status { background: white; padding: 10px 16px 4px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
 
+.nav-bar { background: white; padding: 6px 14px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; }
 
+.back { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 13px; }
 
+.nav-t { font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
 
+.body { max-height: 560px; overflow-y: auto; background: #f8fafc; }
 
+.body::-webkit-scrollbar { display: none; }
 
+.tag { display: inline-flex; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 500; }
 
+.t-green { background:#f0fdf4; color:#16a34a; }
 
+.t-orange { background:#fff7ed; color:#ea580c; }
 
+.t-gray { background:#f1f5f9; color:#64748b; }
 
+.t-blue { background:#eff6ff; color:#3b82f6; }
 
+.t-red { background:#fef2f2; color:#ef4444; }
 
+
 
+/* Activity list */
 
+.seg { display: flex; gap: 0; background: white; padding: 8px 12px; margin-bottom: 1px; }
 
+.seg-btn { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; font-weight: 500; color: #94a3b8; border-radius: 8px; }
 
+.seg-btn.active { background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-weight: 600; }
 
+.act-card { background: white; margin: 0 12px 10px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
 
+.act-img { height: 100px; position: relative; display: flex; align-items: flex-end; padding: 10px; }
 
+.act-img-tag { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.92); border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 600; }
 
+.act-info { padding: 12px; }
 
+.act-name { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 6px; line-height: 1.4; }
 
+.act-meta-row { display: flex; gap: 12px; flex-wrap: wrap; }
 
+.act-meta { font-size: 12px; color: #64748b; }
 
+.act-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
 
+.act-count { font-size: 12px; color: #94a3b8; }
 
+.btn-reg { background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: none; }
 
+.btn-reg-ghost { background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: none; }
 
+
 
+/* Activity detail */
 
+.act-detail-hero { height: 160px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
 
+.act-detail-title { font-size: 18px; font-weight: 700; color: white; line-height: 1.3; }
 
+.act-detail-body { padding: 0 12px 12px; }
 
+.info-card { background: white; border-radius: 14px; padding: 14px; margin-top: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
 
+.info-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f8fafc; }
 
+.info-row:last-child { border-bottom: none; }
 
+.info-icon { font-size: 16px; flex-shrink: 0; width: 20px; }
 
+.info-text { font-size: 13px; color: #374151; line-height: 1.5; }
 
+.info-label { font-size: 11px; color: #94a3b8; margin-bottom: 1px; }
 
+.map-placeholder { height: 80px; background: linear-gradient(135deg,#e0f2fe,#dbeafe); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-top: 10px; font-size: 13px; color: #3b82f6; font-weight: 600; }
 
+.register-bar { background: white; border-top: 1px solid #f1f5f9; padding: 10px 12px 22px; display: flex; gap: 10px; }
 
+.count-chip { background: #f8fafc; border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #64748b; display: flex; flex-direction: column; align-items: center; }
 
+.count-num { font-size: 16px; font-weight: 700; color: #0f172a; }
 
+.reg-btn-full { flex: 1; background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-size: 15px; font-weight: 700; border-radius: 12px; border: none; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
 
+
 
+/* Venue list */
 
+.venue-filter { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; }
 
+.venue-filter::-webkit-scrollbar { display: none; }
 
+.f-btn { flex-shrink: 0; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; border: 1.5px solid #e2e8f0; color: #64748b; background: white; }
 
+.f-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
 
+.venue-card { background: white; margin: 0 12px 10px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; }
 
+.venue-img { width: 90px; flex-shrink: 0; }
 
+.venue-info { padding: 12px; flex: 1; }
 
+.venue-name { font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 4px; }
 
+.venue-meta { font-size: 11px; color: #64748b; line-height: 1.6; }
 
+.venue-price { font-size: 13px; font-weight: 700; color: #3b82f6; margin-top: 4px; }
 
+.venue-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
 
+.btn-book { background: #eff6ff; color: #3b82f6; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: none; }
 
+
 
+/* Venue booking */
 
+.time-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 12px; }
 
+.slot { background: white; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 12px; color: #374151; }
 
+.slot.booked { background: #f1f5f9; color: #94a3b8; border-color: #f1f5f9; text-decoration: line-through; }
 
+.slot.selected { background: #eff6ff; border-color: #3b82f6; color: #3b82f6; font-weight: 600; }
 
+.slot-time { font-size: 11px; margin-top: 3px; color: #94a3b8; }
 
+.slot.selected .slot-time { color: #93c5fd; }
 
+
 
+/* Bottom nav */
 
+.bot-nav { background: white; border-top: 1px solid #f1f5f9; display: flex; padding: 7px 0 18px; }
 
+.n-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
 
+.n-lbl { font-size: 10px; color: #94a3b8; }
 
+.n-lbl.active { color: #3b82f6; font-weight: 600; }
 
+
 
+/* Annos */
 
+.annos { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; }
 
+.anno { background: white; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+.anno-t { font-size: 13px; font-weight: 700; color: #3b82f6; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
 
+.anno-num { width: 20px; height: 20px; background: #3b82f6; color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
 
+.anno-p { font-size: 13px; color: #374151; line-height: 1.6; }
 
+.p-tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-top: 5px; }
 
+.p0 { background:#fef2f2; color:#dc2626; }
 
+.p1 { background:#fff7ed; color:#ea580c; }
 
+.p2 { background:#f0fdf4; color:#16a34a; }
 
+.submit-bar { background: white; padding: 10px 12px 22px; border-top: 1px solid #f1f5f9; }
 
+.submit-btn { width: 100%; background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-size: 15px; font-weight: 700; padding: 13px; border-radius: 12px; border: none; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<h1>活动列表 · 活动详情 · 会场列表 · 会场预约</h1>
 
+<p class="page-sub">Page 5–8 · 活动 Tab & 会场 Tab</p>
 
+
 
+<div class="screens-row">
 
+
 
+  <!-- Screen 1: Activity List -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">活动列表（Tab 3）</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div style="width:28px;"></div><span class="nav-t">活动</span><div style="font-size:18px; color:#3b82f6;">⊞</div></div>
 
+      <div class="body">
 
+        <div class="seg">
 
+          <div class="seg-btn active">进行中</div>
 
+          <div class="seg-btn">即将开始</div>
 
+          <div class="seg-btn">已结束</div>
 
+        </div>
 
+        <div style="height:8px;"></div>
 
+        <div class="act-card">
 
+          <div class="act-img" style="background:linear-gradient(135deg,#3b82f6,#6366f1);">
 
+            <span class="act-img-tag t-green">报名中</span>
 
+          </div>
 
+          <div class="act-info">
 
+            <div class="act-name">第三届科技创新创业大赛</div>
 
+            <div class="act-meta-row">
 
+              <div class="act-meta">📅 4月15日 14:00</div>
 
+              <div class="act-meta">📍 A座报告厅</div>
 
+            </div>
 
+            <div class="act-footer">
 
+              <span class="act-count">已报名 128 / 200 人</span>
 
+              <button class="btn-reg">立即报名</button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="act-card">
 
+          <div class="act-img" style="background:linear-gradient(135deg,#0ea5e9,#3b82f6);">
 
+            <span class="act-img-tag t-orange">即将开始</span>
 
+          </div>
 
+          <div class="act-info">
 
+            <div class="act-name">AI 赋能企业运营专题讲座</div>
 
+            <div class="act-meta-row">
 
+              <div class="act-meta">📅 4月18日 10:00</div>
 
+              <div class="act-meta">📍 B座多功能厅</div>
 
+            </div>
 
+            <div class="act-footer">
 
+              <span class="act-count">已报名 56 / 100 人</span>
 
+              <button class="btn-reg">立即报名</button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="act-card">
 
+          <div class="act-img" style="background:linear-gradient(135deg,#8b5cf6,#6366f1);">
 
+            <span class="act-img-tag t-gray">已结束</span>
 
+          </div>
 
+          <div class="act-info">
 
+            <div class="act-name">政策解读沙龙·高新技术认定</div>
 
+            <div class="act-meta-row">
 
+              <div class="act-meta">📅 3月28日 15:00</div>
 
+              <div class="act-meta">📍 C座会议室</div>
 
+            </div>
 
+            <div class="act-footer">
 
+              <span class="act-count">已报名 89 / 不限</span>
 
+              <button class="btn-reg-ghost">已结束</button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="bot-nav">
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">首页</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/></svg><span class="n-lbl">企业服务</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><span class="n-lbl active">活动</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">会场</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg><span class="n-lbl">我的</span></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- Screen 2: Activity Detail -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">活动详情 + 报名</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div class="back">‹</div><span class="nav-t">活动详情</span><div style="font-size:18px; color:#94a3b8;">⋯</div></div>
 
+      <div class="body" style="max-height:510px;">
 
+        <div class="act-detail-hero" style="background:linear-gradient(135deg,#3b82f6,#6366f1);">
 
+          <span class="tag t-green" style="background:rgba(255,255,255,0.9); margin-bottom:8px; width:fit-content;">报名中</span>
 
+          <div class="act-detail-title">第三届科技创新<br>创业大赛</div>
 
+        </div>
 
+        <div class="act-detail-body">
 
+          <div class="info-card">
 
+            <div class="info-row">
 
+              <div class="info-icon">📅</div>
 
+              <div><div class="info-label">活动时间</div><div class="info-text">2026年4月15日 14:00 – 18:00</div></div>
 
+            </div>
 
+            <div class="info-row">
 
+              <div class="info-icon">📍</div>
 
+              <div><div class="info-label">活动地点</div><div class="info-text">天河基地A座报告厅（广州市天河区）</div></div>
 
+            </div>
 
+            <div class="info-row">
 
+              <div class="info-icon">👥</div>
 
+              <div><div class="info-label">报名情况</div><div class="info-text">已报名 128 人 / 限额 200 人</div></div>
 
+            </div>
 
+          </div>
 
+          <div class="map-placeholder">🗺 点击查看地图导航</div>
 
+          <div class="info-card" style="margin-top:10px;">
 
+            <div style="font-size:13px; color:#374151; line-height:1.7;">本次大赛面向全国在校大学生及应届毕业生，聚焦人工智能、新能源、生物医药三大赛道。设一等奖3名、二等奖6名，奖金总计50万元。<br><br>参赛队伍须提交商业计划书，现场路演评审...</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="register-bar">
 
+        <div class="count-chip"><span class="count-num">128</span><span style="font-size:10px; color:#94a3b8;">已报名</span></div>
 
+        <button class="reg-btn-full">立即报名</button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- Screen 3: Venue List -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">会场列表（Tab 4）</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div style="width:28px;"></div><span class="nav-t">会场预约</span><div style="width:28px;"></div></div>
 
+      <div class="body">
 
+        <div class="venue-filter">
 
+          <div class="f-btn active">全部</div>
 
+          <div class="f-btn">会议室</div>
 
+          <div class="f-btn">报告厅</div>
 
+          <div class="f-btn">大型会场</div>
 
+        </div>
 
+        <div style="height:6px;"></div>
 
+        <div class="venue-card">
 
+          <div class="venue-img" style="background:linear-gradient(135deg,#3b82f6,#6366f1);"></div>
 
+          <div class="venue-info">
 
+            <div class="venue-name">A-301 多功能会议室</div>
 
+            <div class="venue-meta">👥 20人 · 60㎡ · 3楼<br>📺 投影 白板 空调</div>
 
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:6px;">
 
+              <div class="venue-price">¥200 / 时</div>
 
+              <div style="display:flex; gap:6px; align-items:center;">
 
+                <span class="tag t-green" style="font-size:10px;">可预约</span>
 
+                <button class="btn-book">预约</button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="venue-card">
 
+          <div class="venue-img" style="background:linear-gradient(135deg,#0ea5e9,#3b82f6);"></div>
 
+          <div class="venue-info">
 
+            <div class="venue-name">B座报告厅</div>
 
+            <div class="venue-meta">👥 200人 · 400㎡ · 1楼<br>🎤 音响 大屏 舞台</div>
 
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:6px;">
 
+              <div class="venue-price">¥2,000 / 时</div>
 
+              <div style="display:flex; gap:6px; align-items:center;">
 
+                <span class="tag t-blue" style="font-size:10px;">需审批</span>
 
+                <button class="btn-book">申请</button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="venue-card">
 
+          <div class="venue-img" style="background:linear-gradient(135deg,#8b5cf6,#6366f1);"></div>
 
+          <div class="venue-info">
 
+            <div class="venue-name">C-102 小型会议室</div>
 
+            <div class="venue-meta">👥 8人 · 30㎡ · 1楼<br>💻 电视 白板</div>
 
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-top:6px;">
 
+              <div class="venue-price">¥100 / 时</div>
 
+              <div style="display:flex; gap:6px; align-items:center;">
 
+                <span class="tag t-green" style="font-size:10px;">可预约</span>
 
+                <button class="btn-book">预约</button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div style="height:8px;"></div>
 
+      </div>
 
+      <div class="bot-nav">
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">首页</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/></svg><span class="n-lbl">企业服务</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/></svg><span class="n-lbl">活动</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl active">会场</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg><span class="n-lbl">我的</span></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- Screen 4: Venue Booking -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">会场预约（共享会议室）</span>
 
+    <div class="phone">
 
+      <div class="status"><span>9:41</span><span>●●● 🔋</span></div>
 
+      <div class="nav-bar"><div class="back">‹</div><span class="nav-t">选择时间段</span><div style="width:28px;"></div></div>
 
+      <div class="body" style="max-height:510px;">
 
+        <!-- Venue header -->
 
+        <div style="background:white; padding:14px 14px 10px; margin-bottom:8px; display:flex; gap:12px; align-items:center;">
 
+          <div style="width:60px; height:60px; border-radius:12px; background:linear-gradient(135deg,#3b82f6,#6366f1); flex-shrink:0;"></div>
 
+          <div>
 
+            <div style="font-size:15px; font-weight:700; color:#0f172a;">A-301 多功能会议室</div>
 
+            <div style="font-size:12px; color:#64748b; margin-top:3px;">20人 · 60㎡ · 投影 白板 空调</div>
 
+            <div style="font-size:14px; font-weight:700; color:#3b82f6; margin-top:4px;">¥200 / 小时</div>
 
+          </div>
 
+        </div>
 
+        <!-- Date selector -->
 
+        <div style="background:white; padding:10px 14px; margin-bottom:8px;">
 
+          <div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">选择日期</div>
 
+          <div style="display:flex; gap:8px; overflow-x:auto;">
 
+            <div style="flex-shrink:0; display:flex;flex-direction:column;align-items:center; width:44px; background:#f8fafc; border-radius:10px; padding:8px 0; font-size:11px; color:#94a3b8;"><span>周一</span><span style="font-size:15px; font-weight:600; color:#374151; margin-top:2px;">14</span></div>
 
+            <div style="flex-shrink:0; display:flex;flex-direction:column;align-items:center; width:44px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:10px; padding:8px 0; font-size:11px; color:rgba(255,255,255,0.8);"><span>周二</span><span style="font-size:15px; font-weight:700; color:white; margin-top:2px;">15</span></div>
 
+            <div style="flex-shrink:0; display:flex;flex-direction:column;align-items:center; width:44px; background:#f8fafc; border-radius:10px; padding:8px 0; font-size:11px; color:#94a3b8;"><span>周三</span><span style="font-size:15px; font-weight:600; color:#374151; margin-top:2px;">16</span></div>
 
+            <div style="flex-shrink:0; display:flex;flex-direction:column;align-items:center; width:44px; background:#f8fafc; border-radius:10px; padding:8px 0; font-size:11px; color:#94a3b8;"><span>周四</span><span style="font-size:15px; font-weight:600; color:#374151; margin-top:2px;">17</span></div>
 
+            <div style="flex-shrink:0; display:flex;flex-direction:column;align-items:center; width:44px; background:#f8fafc; border-radius:10px; padding:8px 0; font-size:11px; color:#94a3b8;"><span>周五</span><span style="font-size:15px; font-weight:600; color:#374151; margin-top:2px;">18</span></div>
 
+          </div>
 
+        </div>
 
+        <!-- Time slots -->
 
+        <div style="background:white; padding:10px 14px;">
 
+          <div style="font-size:13px; font-weight:600; color:#374151; margin-bottom:8px;">选择时间段 <span style="font-size:11px; color:#94a3b8; font-weight:400;">（可选多个连续时段）</span></div>
 
+          <div style="display:flex; gap:8px; margin-bottom:8px; font-size:11px; color:#94a3b8;">
 
+            <span style="display:flex; align-items:center; gap:3px;"><span style="width:10px;height:10px;border-radius:3px;background:#f1f5f9;display:inline-block;"></span>已被预约</span>
 
+            <span style="display:flex; align-items:center; gap:3px;"><span style="width:10px;height:10px;border-radius:3px;background:#eff6ff;border:1.5px solid #3b82f6;display:inline-block;"></span>已选中</span>
 
+            <span style="display:flex; align-items:center; gap:3px;"><span style="width:10px;height:10px;border-radius:3px;background:white;border:1.5px solid #e2e8f0;display:inline-block;"></span>可预约</span>
 
+          </div>
 
+          <div class="time-slots">
 
+            <div class="slot booked">08:00<div class="slot-time">已预约</div></div>
 
+            <div class="slot booked">09:00<div class="slot-time">已预约</div></div>
 
+            <div class="slot">10:00<div class="slot-time">可预约</div></div>
 
+            <div class="slot selected">11:00<div class="slot-time">已选 ✓</div></div>
 
+            <div class="slot selected">12:00<div class="slot-time">已选 ✓</div></div>
 
+            <div class="slot">13:00<div class="slot-time">可预约</div></div>
 
+            <div class="slot">14:00<div class="slot-time">可预约</div></div>
 
+            <div class="slot booked">15:00<div class="slot-time">已预约</div></div>
 
+            <div class="slot">16:00<div class="slot-time">可预约</div></div>
 
+          </div>
 
+          <div style="background:#eff6ff; border-radius:10px; padding:10px 12px; margin-top:10px; display:flex; justify-content:space-between; align-items:center;">
 
+            <div style="font-size:13px; color:#374151;">已选 11:00 – 13:00（2小时）</div>
 
+            <div style="font-size:15px; font-weight:700; color:#3b82f6;">¥400</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="submit-bar">
 
+        <button class="submit-btn">确认预约</button>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+</div>
 
+
 
+<!-- ANNOTATIONS -->
 
+<div class="annos">
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">A</span> 活动列表</div>
 
+    <div class="anno-p">顶部三段式切换（进行中/即将开始/已结束），报名截止时间到自动切换状态。封面图未上传时用渐变色占位。已登录用户报名时弹出信息确认表单（姓名/手机/单位），无需重复登录。</div>
 
+    <span class="p-tag p0">P0</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">B</span> 活动详情</div>
 
+    <div class="anno-p">地图区域调用微信内置地图 API，点击可直接导航。底部固定注册栏，报名人数满员时按钮置灰并显示「已满员」。已报名用户显示「取消报名」。报名成功后触发微信订阅消息通知。</div>
 
+    <span class="p-tag p0">P0</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">C</span> 会场列表</div>
 
+    <div class="anno-p">共享会议室（is_shared=true）直接进入时间选择；大型会场（is_shared=false）进入申请表单，需上传活动方案附件，审批后管理员发送门禁密码。可按类型和容量筛选。</div>
 
+    <span class="p-tag p0">P0</span>
 
+  </div>
 
+  <div class="anno">
 
+    <div class="anno-t"><span class="anno-num">D</span> 时间段预约</div>
 
+    <div class="anno-p">日期选择横滑，仅展示未来14天。时间格显示实时可用状态，已被预约的格子置灰。可选多个连续时段，底部汇总显示总时长和费用。确认后触发微信订阅消息推送确认通知。</div>
 
+    <span class="p-tag p0">P0</span>
 
+  </div>
 
+</div>
 
+
 
+</body>
 
+</html>

+ 399 - 0
design/05-my-and-admin.html
View File 

@@ -0,0 +1,399 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地 · 我的 & 管理后台</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #e8edf5; color: #0f172a; padding: 32px 24px; }
 
+h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
 
+.page-sub { font-size: 13px; color: #64748b; margin-bottom: 28px; }
 
+.screens-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
 
+.screen-col { display: flex; flex-direction: column; gap: 10px; align-items: center; }
 
+.screen-label { font-size: 12px; font-weight: 600; color: #64748b; background: white; padding: 4px 12px; border-radius: 20px; }
 
+
 
+/* Phone */
 
+.phone { width: 320px; background: #f8fafc; border-radius: 30px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.15), 0 0 0 7px #1e293b; flex-shrink:0; }
 
+.status { background: white; padding: 10px 16px 4px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
 
+.nav-bar { background: white; padding: 6px 14px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; }
 
+.back { width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 13px; }
 
+.nav-t { font-size: 16px; font-weight: 600; flex: 1; text-align: center; }
 
+.body { max-height: 560px; overflow-y: auto; background: #f8fafc; }
 
+.body::-webkit-scrollbar { display: none; }
 
+.tag { display: inline-flex; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 500; }
 
+.t-green { background:#f0fdf4; color:#16a34a; }
 
+.t-orange { background:#fff7ed; color:#ea580c; }
 
+.t-blue { background:#eff6ff; color:#3b82f6; }
 
+
 
+/* Profile header */
 
+.profile-header { background: linear-gradient(135deg,#1e40af,#3b82f6,#6366f1); padding: 24px 16px 28px; display: flex; gap: 14px; align-items: center; }
 
+.avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink:0; }
 
+.profile-info { flex: 1; }
 
+.profile-name { font-size: 18px; font-weight: 700; color: white; }
 
+.profile-role { display: inline-flex; background: rgba(255,255,255,0.2); color: white; font-size: 11px; padding: 3px 8px; border-radius: 4px; margin-top: 5px; }
 
+.profile-enterprise { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 4px; }
 
+
 
+/* Stats row */
 
+.stats-row { background: white; display: flex; padding: 14px 0; margin-bottom: 8px; }
 
+.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border-right: 1px solid #f1f5f9; }
 
+.stat-item:last-child { border-right: none; }
 
+.stat-num { font-size: 20px; font-weight: 700; color: #0f172a; }
 
+.stat-label { font-size: 11px; color: #94a3b8; }
 
+
 
+/* Cell list */
 
+.cell-group { background: white; border-radius: 0; margin-bottom: 8px; }
 
+.cell-group-title { font-size: 12px; color: #94a3b8; padding: 12px 14px 6px; font-weight: 600; letter-spacing: 0.5px; }
 
+.cell { display: flex; align-items: center; padding: 13px 14px; border-bottom: 1px solid #f8fafc; gap: 12px; cursor: pointer; }
 
+.cell:last-child { border-bottom: none; }
 
+.cell-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
 
+.cell-content { flex: 1; }
 
+.cell-title { font-size: 14px; color: #0f172a; font-weight: 500; }
 
+.cell-sub { font-size: 12px; color: #94a3b8; margin-top: 1px; }
 
+.cell-right { display: flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 16px; }
 
+.badge { background: #ef4444; color: white; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
 
+
 
+/* Bot nav */
 
+.bot-nav { background: white; border-top: 1px solid #f1f5f9; display: flex; padding: 7px 0 18px; }
 
+.n-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
 
+.n-lbl { font-size: 10px; color: #94a3b8; }
 
+.n-lbl.active { color: #3b82f6; font-weight: 600; }
 
+
 
+/* ======================== ADMIN WEB ======================== */
 
+.admin-wrap { flex: 1; min-width: 600px; }
 
+.admin-shell { background: #f1f5f9; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: 1px solid #e2e8f0; }
 
+.admin-topbar { background: white; padding: 0 20px; display: flex; align-items: center; gap: 16px; height: 52px; border-bottom: 1px solid #e2e8f0; }
 
+.admin-logo { display: flex; align-items: center; gap: 8px; }
 
+.admin-logo-mark { width: 28px; height: 28px; background: linear-gradient(135deg,#3b82f6,#6366f1); border-radius: 7px; }
 
+.admin-logo-text { font-size: 14px; font-weight: 700; color: #0f172a; }
 
+.admin-logo-badge { font-size: 10px; background: #fef9c3; color: #854d0e; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
 
+.admin-nav-items { display: flex; gap: 4px; margin-left: auto; }
 
+.admin-nav-item { font-size: 13px; color: #64748b; padding: 6px 12px; border-radius: 7px; font-weight: 500; }
 
+.admin-nav-item.active { background: #eff6ff; color: #3b82f6; font-weight: 600; }
 
+.admin-body { display: flex; height: 520px; }
 
+.admin-sidebar { width: 180px; background: white; border-right: 1px solid #e2e8f0; padding: 12px 0; flex-shrink: 0; overflow-y: auto; }
 
+.sidebar-section { padding: 8px 12px 4px; font-size: 10px; color: #94a3b8; font-weight: 700; letter-spacing: 1px; }
 
+.sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; color: #64748b; cursor: pointer; border-radius: 0; }
 
+.sidebar-item.active { background: #eff6ff; color: #3b82f6; font-weight: 600; border-left: 3px solid #3b82f6; }
 
+.sidebar-item .s-icon { font-size: 15px; }
 
+.sidebar-badge { background: #ef4444; color: white; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: auto; }
 
+
 
+.admin-content { flex: 1; overflow-y: auto; padding: 16px; }
 
+.admin-content::-webkit-scrollbar { width: 4px; }
 
+.admin-content::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
 
+
 
+/* Stats cards */
 
+.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
 
+.stat-card { background: white; border-radius: 12px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
 
+.stat-card-label { font-size: 11px; color: #64748b; margin-bottom: 6px; }
 
+.stat-card-num { font-size: 24px; font-weight: 700; color: #0f172a; }
 
+.stat-card-change { font-size: 11px; margin-top: 4px; }
 
+.stat-card-change.up { color: #16a34a; }
 
+.stat-card-change.down { color: #ef4444; }
 
+
 
+/* Table */
 
+.admin-table-wrap { background: white; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 12px; }
 
+.table-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
 
+.table-title { font-size: 14px; font-weight: 700; color: #0f172a; }
 
+.table-actions { display: flex; gap: 8px; }
 
+.t-btn { font-size: 12px; padding: 5px 10px; border-radius: 7px; border: 1.5px solid #e2e8f0; color: #374151; background: white; cursor: pointer; font-weight: 500; }
 
+.t-btn-primary { background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; border: none; }
 
+table { width: 100%; border-collapse: collapse; }
 
+th { text-align: left; font-size: 11px; color: #94a3b8; font-weight: 600; padding: 8px 12px; background: #f8fafc; letter-spacing: 0.3px; }
 
+td { font-size: 12px; color: #374151; padding: 10px 12px; border-top: 1px solid #f8fafc; vertical-align: middle; }
 
+tr:hover td { background: #fafcff; }
 
+.td-actions { display: flex; gap: 6px; }
 
+.action-btn { font-size: 11px; padding: 4px 8px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
 
+.action-approve { background: #f0fdf4; color: #16a34a; }
 
+.action-reject { background: #fef2f2; color: #ef4444; }
 
+.action-view { background: #eff6ff; color: #3b82f6; }
 
+.action-edit { background: #f8fafc; color: #64748b; }
 
+
 
+/* Tag inline */
 
+.tg { display: inline-flex; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 500; }
 
+.tg-g { background:#f0fdf4; color:#16a34a; }
 
+.tg-o { background:#fff7ed; color:#ea580c; }
 
+.tg-b { background:#eff6ff; color:#3b82f6; }
 
+.tg-r { background:#fef2f2; color:#ef4444; }
 
+.tg-gray { background:#f1f5f9; color:#64748b; }
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<h1>「我的」页面 & Web 管理后台</h1>
 
+<p class="page-sub">Page 9–10 · 用户中心 + 后台管理系统</p>
 
+
 
+<div class="screens-row">
 
+
 
+  <!-- PHONE: My Profile -->
 
+  <div class="screen-col">
 
+    <span class="screen-label">「我的」页面（Tab 5）</span>
 
+    <div class="phone">
 
+      <div class="status" style="background:linear-gradient(135deg,#1e40af,#3b82f6);"><span style="color:white;">9:41</span><span style="color:white;">●●● 🔋</span></div>
 
+      <div class="profile-header">
 
+        <div class="avatar">👤</div>
 
+        <div class="profile-info">
 
+          <div class="profile-name">张三</div>
 
+          <span class="profile-role">企业用户</span>
 
+          <div class="profile-enterprise">天河人工智能研究院</div>
 
+        </div>
 
+        <div style="color:rgba(255,255,255,0.7); font-size:13px;">编辑 ›</div>
 
+      </div>
 
+      <div class="body" style="max-height:490px;">
 
+        <!-- Stats -->
 
+        <div class="stats-row">
 
+          <div class="stat-item"><div class="stat-num">2</div><div class="stat-label">报名活动</div></div>
 
+          <div class="stat-item"><div class="stat-num">1</div><div class="stat-label">会场预约</div></div>
 
+          <div class="stat-item"><div class="stat-num">3</div><div class="stat-label">发布需求</div></div>
 
+          <div class="stat-item"><div class="stat-num">5</div><div class="stat-label">收藏内容</div></div>
 
+        </div>
 
+
 
+        <!-- My stuff -->
 
+        <div class="cell-group">
 
+          <div class="cell-group-title">我的申请</div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#eff6ff;">🏢</div>
 
+            <div class="cell-content"><div class="cell-title">入驻申请</div><div class="cell-sub">审核中 · 预计3个工作日</div></div>
 
+            <div class="cell-right"><span class="tag t-orange" style="font-size:10px;">审核中</span><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#f0fdf4;">🏛</div>
 
+            <div class="cell-content"><div class="cell-title">会场预约</div><div class="cell-sub">A-301 · 4月15日 11:00–13:00</div></div>
 
+            <div class="cell-right"><span class="tag t-green" style="font-size:10px;">已通过</span><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#fff7ed;">📅</div>
 
+            <div class="cell-content"><div class="cell-title">活动报名</div><div class="cell-sub">已报名 2 项活动</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="cell-group">
 
+          <div class="cell-group-title">我发布的</div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#eef2ff;">📢</div>
 
+            <div class="cell-content"><div class="cell-title">需求发布</div><div class="cell-sub">3 条已发布</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#fdf4ff;">⭐</div>
 
+            <div class="cell-content"><div class="cell-title">我的收藏</div><div class="cell-sub">5 条收藏记录</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#fff1f2;">💬</div>
 
+            <div class="cell-content"><div class="cell-title">反馈工单</div><div class="cell-sub">1 条处理中</div></div>
 
+            <div class="cell-right"><div class="badge">1</div><span>›</span></div>
 
+          </div>
 
+        </div>
 
+
 
+        <div class="cell-group">
 
+          <div class="cell-group-title">其他</div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#f0fdf4;">📜</div>
 
+            <div class="cell-content"><div class="cell-title">关于天河基地</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#f8fafc;">⚙️</div>
 
+            <div class="cell-content"><div class="cell-title">设置</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+          <div class="cell">
 
+            <div class="cell-icon" style="background:#fef2f2;">🚪</div>
 
+            <div class="cell-content"><div class="cell-title" style="color:#ef4444;">退出登录</div></div>
 
+            <div class="cell-right"><span>›</span></div>
 
+          </div>
 
+        </div>
 
+        <div style="height:8px;"></div>
 
+      </div>
 
+      <div class="bot-nav">
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">首页</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/></svg><span class="n-lbl">企业服务</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/></svg><span class="n-lbl">活动</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span class="n-lbl">会场</span></div>
 
+        <div class="n-item"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/></svg><span class="n-lbl active">我的</span></div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- ADMIN WEB -->
 
+  <div class="admin-wrap">
 
+    <span class="screen-label" style="margin-bottom:10px; display:inline-block;">Web 管理后台（入驻申请审核页）</span>
 
+    <div class="admin-shell">
 
+      <!-- Top bar -->
 
+      <div class="admin-topbar">
 
+        <div class="admin-logo">
 
+          <div class="admin-logo-mark"></div>
 
+          <div class="admin-logo-text">天河基地管理后台</div>
 
+          <div class="admin-logo-badge">ADMIN</div>
 
+        </div>
 
+        <div class="admin-nav-items">
 
+          <div class="admin-nav-item active">概览</div>
 
+          <div class="admin-nav-item">内容管理</div>
 
+          <div class="admin-nav-item">数据统计</div>
 
+          <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;color:white;font-size:13px;font-weight:700;margin-left:8px;">管</div>
 
+        </div>
 
+      </div>
 
+      <div class="admin-body">
 
+        <!-- Sidebar -->
 
+        <div class="admin-sidebar">
 
+          <div class="sidebar-section">概览</div>
 
+          <div class="sidebar-item active"><span class="s-icon">📊</span>数据看板</div>
 
+          <div class="sidebar-section">内容审核</div>
 
+          <div class="sidebar-item"><span class="s-icon">🏢</span>入驻申请<span class="sidebar-badge">3</span></div>
 
+          <div class="sidebar-item"><span class="s-icon">📢</span>需求审核<span class="sidebar-badge">7</span></div>
 
+          <div class="sidebar-item"><span class="s-icon">🔬</span>科技成果</div>
 
+          <div class="sidebar-item"><span class="s-icon">🤝</span>合伙人申请<span class="sidebar-badge">2</span></div>
 
+          <div class="sidebar-section">预约管理</div>
 
+          <div class="sidebar-item"><span class="s-icon">🏛</span>会场预约</div>
 
+          <div class="sidebar-item"><span class="s-icon">💬</span>反馈工单<span class="sidebar-badge">5</span></div>
 
+          <div class="sidebar-section">内容配置</div>
 
+          <div class="sidebar-item"><span class="s-icon">🖼</span>Banner 管理</div>
 
+          <div class="sidebar-item"><span class="s-icon">📅</span>活动管理</div>
 
+          <div class="sidebar-item"><span class="s-icon">🏗</span>场地管理</div>
 
+          <div class="sidebar-item"><span class="s-icon">👔</span>技术经理人</div>
 
+          <div class="sidebar-section">系统</div>
 
+          <div class="sidebar-item"><span class="s-icon">👥</span>用户管理</div>
 
+          <div class="sidebar-item"><span class="s-icon">⭐</span>企业评分</div>
 
+          <div class="sidebar-item"><span class="s-icon">🤖</span>AI 洞察</div>
 
+        </div>
 
+
 
+        <!-- Main content: Dashboard -->
 
+        <div class="admin-content">
 
+          <!-- Stats overview -->
 
+          <div class="stats-grid">
 
+            <div class="stat-card">
 
+              <div class="stat-card-label">本月新增用户</div>
 
+              <div class="stat-card-num">128</div>
 
+              <div class="stat-card-change up">↑ 23% 较上月</div>
 
+            </div>
 
+            <div class="stat-card">
 
+              <div class="stat-card-label">待审批入驻申请</div>
 
+              <div class="stat-card-num" style="color:#ea580c;">3</div>
 
+              <div class="stat-card-change" style="color:#94a3b8;">最久 2 天未处理</div>
 
+            </div>
 
+            <div class="stat-card">
 
+              <div class="stat-card-label">本月活动报名</div>
 
+              <div class="stat-card-num">312</div>
 
+              <div class="stat-card-change up">↑ 15% 较上月</div>
 
+            </div>
 
+            <div class="stat-card">
 
+              <div class="stat-card-label">会场使用率</div>
 
+              <div class="stat-card-num">68%</div>
 
+              <div class="stat-card-change down">↓ 5% 较上周</div>
 
+            </div>
 
+          </div>
 
+
 
+          <!-- Pending applications table -->
 
+          <div class="admin-table-wrap">
 
+            <div class="table-header">
 
+              <div class="table-title">待审核入驻申请</div>
 
+              <div class="table-actions">
 
+                <button class="t-btn">筛选</button>
 
+                <button class="t-btn">导出</button>
 
+              </div>
 
+            </div>
 
+            <table>
 
+              <thead>
 
+                <tr>
 
+                  <th>企业名称</th>
 
+                  <th>空间需求</th>
 
+                  <th>提交时间</th>
 
+                  <th>飞书审批</th>
 
+                  <th>状态</th>
 
+                  <th>操作</th>
 
+                </tr>
 
+              </thead>
 
+              <tbody>
 
+                <tr>
 
+                  <td><div style="font-weight:600;color:#0f172a;">天河人工智能研究院</div><div style="font-size:11px;color:#94a3b8;">张三 · 138****8888</div></td>
 
+                  <td>办公室 · 80㎡ · ¥5,000/月</td>
 
+                  <td><div>2026-04-07</div><div style="font-size:11px;color:#94a3b8;">2天前</div></td>
 
+                  <td><span class="tg tg-o">审批中</span></td>
 
+                  <td><span class="tg tg-o">审核中</span></td>
 
+                  <td><div class="td-actions"><button class="action-btn action-view">查看</button><button class="action-btn action-approve">通过</button><button class="action-btn action-reject">拒绝</button></div></td>
 
+                </tr>
 
+                <tr>
 
+                  <td><div style="font-weight:600;color:#0f172a;">绿能储能科技有限公司</div><div style="font-size:11px;color:#94a3b8;">李四 · 139****6666</div></td>
 
+                  <td>商业空间 · 150㎡ · ¥12,000/月</td>
 
+                  <td><div>2026-04-06</div><div style="font-size:11px;color:#94a3b8;">3天前</div></td>
 
+                  <td><span class="tg tg-b">已发起</span></td>
 
+                  <td><span class="tg tg-o">审核中</span></td>
 
+                  <td><div class="td-actions"><button class="action-btn action-view">查看</button><button class="action-btn action-approve">通过</button><button class="action-btn action-reject">拒绝</button></div></td>
 
+                </tr>
 
+                <tr>
 
+                  <td><div style="font-weight:600;color:#0f172a;">智造装备有限公司</div><div style="font-size:11px;color:#94a3b8;">王五 · 137****4444</div></td>
 
+                  <td>办公室 · 60㎡ · ¥3,500/月</td>
 
+                  <td><div>2026-04-05</div><div style="font-size:11px;color:#94a3b8;">4天前</div></td>
 
+                  <td><span class="tg tg-gray">未发起</span></td>
 
+                  <td><span class="tg tg-b">已提交</span></td>
 
+                  <td><div class="td-actions"><button class="action-btn action-view">查看</button><button class="action-btn action-approve">通过</button><button class="action-btn action-reject">拒绝</button></div></td>
 
+                </tr>
 
+              </tbody>
 
+            </table>
 
+          </div>
 
+
 
+          <!-- Recent feedback tickets -->
 
+          <div class="admin-table-wrap">
 
+            <div class="table-header">
 
+              <div class="table-title">待处理反馈工单</div>
 
+              <div class="table-actions"><button class="t-btn">全部工单</button></div>
 
+            </div>
 
+            <table>
 
+              <thead>
 
+                <tr><th>工单编号</th><th>类别</th><th>问题描述</th><th>提交人</th><th>状态</th><th>操作</th></tr>
 
+              </thead>
 
+              <tbody>
 
+                <tr>
 
+                  <td style="font-family:monospace; font-size:11px; color:#64748b;">#TK-2024</td>
 
+                  <td><span class="tg tg-b">设施</span></td>
 
+                  <td>A栋301室空调故障，无法制冷</td>
 
+                  <td>张三</td>
 
+                  <td><span class="tg tg-o">处理中</span></td>
 
+                  <td><div class="td-actions"><button class="action-btn action-view">详情</button><button class="action-btn action-approve">解决</button></div></td>
 
+                </tr>
 
+                <tr>
 
+                  <td style="font-family:monospace; font-size:11px; color:#64748b;">#TK-2023</td>
 
+                  <td><span class="tg" style="background:#fff7ed;color:#ea580c;">场地</span></td>
 
+                  <td>B座会议室投影仪无法连接笔记本</td>
 
+                  <td>李四</td>
 
+                  <td><span class="tg tg-gray">待处理</span></td>
 
+                  <td><div class="td-actions"><button class="action-btn action-view">详情</button><button class="action-btn action-edit">分配</button></div></td>
 
+                </tr>
 
+              </tbody>
 
+            </table>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+</div>
 
+
 
+<!-- Annos -->
 
+<div style="margin-top:28px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;">
 
+  <div style="background:white;border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
 
+    <div style="font-size:13px;font-weight:700;color:#3b82f6;margin-bottom:6px;">「我的」页面</div>
 
+    <div style="font-size:13px;color:#374151;line-height:1.6;">顶部渐变 Header 延续品牌色，头像/昵称/角色标签一目了然。4 项统计数字展示用户活跃度。Cell 列表按业务分组，退出登录用红色强调，视觉上和普通操作区分。角标 badge 提示未读/待处理。</div>
 
+    <span style="display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;margin-top:5px;background:#fef2f2;color:#dc2626;">P0</span>
 
+  </div>
 
+  <div style="background:white;border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
 
+    <div style="font-size:13px;font-weight:700;color:#3b82f6;margin-bottom:6px;">Web 后台 · 布局结构</div>
 
+    <div style="font-size:13px;color:#374151;line-height:1.6;">左侧固定侧边栏（含分组标题、角标提醒），右侧内容区。Sidebar 宽 180px，各功能模块独立路由。顶部 Topbar 含 Logo、主导航切换、管理员头像。整体配色与小程序保持一致（蓝紫渐变品牌色）。</div>
 
+    <span style="display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;margin-top:5px;background:#fef2f2;color:#dc2626;">P0</span>
 
+  </div>
 
+  <div style="background:white;border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
 
+    <div style="font-size:13px;font-weight:700;color:#3b82f6;margin-bottom:6px;">Web 后台 · 审批工作流</div>
 
+    <div style="font-size:13px;color:#374151;line-height:1.6;">入驻申请表格展示飞书审批状态（未发起/审批中/已完成），管理员可在后台直接「通过/拒绝」触发飞书回调。拒绝时弹出理由输入框。操作后自动触发微信订阅消息通知申请人结果。</div>
 
+    <span style="display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;margin-top:5px;background:#fff7ed;color:#ea580c;">P1</span>
 
+  </div>
 
+  <div style="background:white;border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
 
+    <div style="font-size:13px;font-weight:700;color:#3b82f6;margin-bottom:6px;">Web 后台 · 数据看板</div>
 
+    <div style="font-size:13px;color:#374151;line-height:1.6;">4 张 KPI 卡片（用户增长、待审批、活动报名、会场使用率），下方展示待处理任务列表。后续 P2 阶段可增加趋势折线图、AI 洞察报告生成按钮。</div>
 
+    <span style="display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;margin-top:5px;background:#fff7ed;color:#ea580c;">P1</span><span style="display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;margin-top:5px;margin-left:4px;background:#f0fdf4;color:#16a34a;">AI洞察 P2</span>
 
+  </div>
 
+</div>
 
+
 
+</body>
 
+</html>

+ 136 - 0
design/index.html
View File 

@@ -0,0 +1,136 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+<head>
 
+<meta charset="UTF-8">
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+<title>天河基地小程序 · 设计文档索引</title>
 
+<style>
 
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
+body { font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif; background: #f1f5f9; color: #0f172a; padding: 48px 32px; max-width: 900px; margin: 0 auto; }
 
+.header { margin-bottom: 40px; }
 
+.header-badge { display: inline-flex; background: linear-gradient(135deg,#3b82f6,#6366f1); color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.5px; margin-bottom: 12px; }
 
+h1 { font-size: 28px; font-weight: 800; color: #0f172a; line-height: 1.2; margin-bottom: 8px; }
 
+.sub { font-size: 15px; color: #64748b; line-height: 1.6; }
 
+.meta { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; color: #94a3b8; }
 
+
 
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; margin-bottom: 40px; }
 
+.card { background: white; border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-decoration: none; color: inherit; display: block; transition: box-shadow 0.15s, transform 0.15s; border: 1.5px solid transparent; }
 
+.card:hover { box-shadow: 0 8px 24px rgba(59,130,246,0.15); transform: translateY(-2px); border-color: #bfdbfe; }
 
+.card-num { font-size: 11px; font-weight: 700; color: #3b82f6; letter-spacing: 1px; margin-bottom: 8px; }
 
+.card-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
 
+.card-desc { font-size: 13px; color: #64748b; line-height: 1.6; }
 
+.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
 
+.ctag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
 
+.ctag-blue { background: #eff6ff; color: #3b82f6; }
 
+.ctag-green { background: #f0fdf4; color: #16a34a; }
 
+.ctag-purple { background: #eef2ff; color: #6366f1; }
 
+.ctag-orange { background: #fff7ed; color: #ea580c; }
 
+
 
+.section-title { font-size: 13px; font-weight: 700; color: #94a3b8; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
 
+
 
+.design-system-card { background: linear-gradient(135deg, #1e3a6b, #3b82f6, #6366f1); border-radius: 16px; padding: 24px; color: white; margin-bottom: 16px; text-decoration: none; display: block; }
 
+.design-system-card:hover { opacity: 0.92; }
 
+.ds-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
 
+.ds-sub { font-size: 13px; opacity: 0.85; }
 
+.ds-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
 
+.ds-tag { background: rgba(255,255,255,0.15); color: white; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
 
+
 
+.decisions { background: white; border-radius: 16px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-top: 8px; }
 
+.decisions h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 14px; }
 
+.decision-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f8fafc; align-items: flex-start; }
 
+.decision-row:last-child { border-bottom: none; }
 
+.decision-key { font-size: 12px; font-weight: 600; color: #64748b; width: 100px; flex-shrink: 0; padding-top: 1px; }
 
+.decision-val { font-size: 13px; color: #0f172a; flex: 1; }
 
+</style>
 
+</head>
 
+<body>
 
+
 
+<div class="header">
 
+  <div class="header-badge">DESIGN SYSTEM v1.0</div>
 
+  <h1>天河基地小程序<br>UI 设计文档</h1>
 
+  <div class="sub">微信原生增强型 · 明亮简约风 · 蓝紫渐变品牌色<br>包含小程序全量页面设计 + Web 管理后台</div>
 
+  <div class="meta">
 
+    <span>📅 2026-04-09</span>
 
+    <span>📐 5 个设计文件</span>
 
+    <span>📱 10+ 核心页面</span>
 
+    <span>🖥 Web 管理后台</span>
 
+  </div>
 
+</div>
 
+
 
+<!-- Design System -->
 
+<div class="section-title">设计规范</div>
 
+<a href="01-design-system.html" class="design-system-card">
 
+  <div class="ds-title">01 · 设计规范（Design System）</div>
 
+  <div class="ds-sub">色彩系统 · 字体规范 · 间距圆角 · 按钮 · 状态标签 · 表单组件 · 内容卡片 · 底部导航</div>
 
+  <div class="ds-tags">
 
+    <span class="ds-tag">12色语义色板</span>
 
+    <span class="ds-tag">6级字阶</span>
 
+    <span class="ds-tag">4pt间距系统</span>
 
+    <span class="ds-tag">5级圆角</span>
 
+    <span class="ds-tag">全组件库</span>
 
+  </div>
 
+</a>
 
+
 
+<!-- Pages -->
 
+<div class="section-title" style="margin-top: 24px;">页面设计</div>
 
+<div class="grid">
 
+  <a href="02-page-home.html" class="card">
 
+    <div class="card-num">02 · HOME</div>
 
+    <div class="card-title">首页</div>
 
+    <div class="card-desc">Banner轮播 · 8格快捷入口 · 近期活动横滑 · 园区空间 · 科技成果预览 · 社区合伙人CTA</div>
 
+    <div class="card-tags">
 
+      <span class="ctag ctag-blue">P0全覆盖</span>
 
+      <span class="ctag ctag-green">6个区块</span>
 
+    </div>
 
+  </a>
 
+
 
+  <a href="03-enterprise-service.html" class="card">
 
+    <div class="card-num">03 · ENTERPRISE</div>
 
+    <div class="card-title">企业服务中心 · 入驻申请 · 成果供需</div>
 
+    <div class="card-desc">6宫格服务Hub · 4步骤入驻申请表单（含OCR识别） · 成果供需列表+发布 · 问题反馈工单</div>
 
+    <div class="card-tags">
 
+      <span class="ctag ctag-blue">P0核心流程</span>
 
+      <span class="ctag ctag-orange">飞书审批集成</span>
 
+      <span class="ctag ctag-purple">OCR P1</span>
 
+    </div>
 
+  </a>
 
+
 
+  <a href="04-activities-venues.html" class="card">
 
+    <div class="card-num">04 · ACTIVITIES & VENUES</div>
 
+    <div class="card-title">活动列表 · 活动详情 · 会场列表 · 会场预约</div>
 
+    <div class="card-desc">分段筛选活动列表 · 活动详情+地图导航 · 会场卡片列表 · 日期+时间段选择预约器</div>
 
+    <div class="card-tags">
 
+      <span class="ctag ctag-blue">P0核心流程</span>
 
+      <span class="ctag ctag-green">实时时间格</span>
 
+    </div>
 
+  </a>
 
+
 
+  <a href="05-my-and-admin.html" class="card">
 
+    <div class="card-num">05 · MY + ADMIN</div>
 
+    <div class="card-title">「我的」页面 · Web 管理后台</div>
 
+    <div class="card-desc">用户中心（申请/预约/收藏/工单） · 后台看板（KPI卡片）· 入驻申请审核表格 · ��馈工单管理</div>
 
+    <div class="card-tags">
 
+      <span class="ctag ctag-blue">P0用户中心</span>
 
+      <span class="ctag ctag-orange">P1后台审批</span>
 
+      <span class="ctag ctag-purple">P2 AI洞察</span>
 
+    </div>
 
+  </a>
 
+</div>
 
+
 
+<!-- Key decisions -->
 
+<div class="section-title">核心设计决策</div>
 
+<div class="decisions">
 
+  <div class="decision-row"><div class="decision-key">视觉风格</div><div class="decision-val">明亮简约风 · 白底 + 蓝紫渐变点缀 · 微信原生增强型</div></div>
 
+  <div class="decision-row"><div class="decision-key">主色</div><div class="decision-val">#3b82f6（蓝） + #6366f1（靛紫） 渐变，背景 #f8fafc</div></div>
 
+  <div class="decision-row"><div class="decision-key">导航结构</div><div class="decision-val">5 个底部 Tab：首页 · 企业服务 · 活动 · 会场 · 我的</div></div>
 
+  <div class="decision-row"><div class="decision-key">管理后台</div><div class="decision-val">独立 Web 系统（非小程序内），左侧 Sidebar + 右侧内容区</div></div>
 
+  <div class="decision-row"><div class="decision-key">品牌资产</div><div class="decision-val">全新设计，无现有 Logo，以蓝紫渐变为核心品牌识别</div></div>
 
+  <div class="decision-row"><div class="decision-key">图标系统</div><div class="decision-val">SVG 矢量图标（Lucide 风格），禁止使用 Emoji 作为功能图标</div></div>
 
+  <div class="decision-row"><div class="decision-key">字体</div><div class="decision-val">PingFang SC / 微信系统字体，6 级字阶（32/20/16/14/12/11px）</div></div>
 
+  <div class="decision-row"><div class="decision-key">间距系统</div><div class="decision-key-val" style="font-size:13px;color:#0f172a;flex:1;">4pt 基准：4 / 8 / 12 / 16 / 20 / 24 / 32 / 48px</div></div>
 
+  <div class="decision-row"><div class="decision-key">触控目标</div><div class="decision-val">最小 44×44pt，输入框高度 ≥ 44px，底部 Tab 项宽度均等</div></div>
 
+  <div class="decision-row"><div class="decision-key">AI 功能</div><div class="decision-val">P2 优先级，含降级方案（用户自行填写 / 默认分类），不阻塞 P0 流程</div></div>
 
+</div>
 
+
 
+</body>
 
+</html>