Sherlock1011
/
Tianhe_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!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>