Sherlock1011
/
Tianhe_UI


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