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