@@ -0,0 +1,367 @@
# # STP 智慧招标平台首页详细设计说明书
| 文档名称 | STP 首页详细设计 |
| :------- | :----------------------------------- |
| **文档版本 ** | V1.0 |
| **修订说明 ** | 移除“帮助中心”菜单项（由 AI 助手承担）、移除统计数字区，优化布局。 |
| **编制日期 ** | 2026-07-01 |
| **关联文档 ** | 《[[需求分析说明书.md]]》《[[登录模块.md]]》 |
## 目录
1. [概述 ](#1-概述 )
2. [页面布局总览 ](#2-页面布局总览svg-线框图 )
3. [各模块详细说明 ](#3-各模块详细说明 )
4. [交互与动态效果详细说明 ](#4-交互与动态效果详细说明 )
5. [登录前后差异化展示 ](#5-登录前后差异化展示 )
6. [技术实现建议 ](#6-技术实现建议 )
7. [性能与可访问性 ](#7-性能与可访问性 )
8. [后续迭代方向 ](#8-后续迭代方向 )
## 1. 概述
### 1.1 设计目标
STP 首页作为平台的门户，需同时满足**公开访问**和**登录后个性化**两种场景。核心目标包括：
- **信息聚合**：集中展示招标公告、定标公告、企业新闻等动态信息。
- **角色引导**：快速引导供应商、专家、内部员工进入对应操作路径。
- **品牌信任**：通过声明、合规提示建立公信力。
- **智能体验**：AI 助手作为统一帮助入口，提供主动式智能服务，替代传统帮助中心。
### 1.2 设计原则
| 原则 | 说明 |
| :--- | :--- |
| **清晰的信息层级 ** | 视觉重心依次为：导航 → 核心公告 → 快捷入口 → 声明。 |
| **响应式适配 ** | 自适应 PC 端（≥1280px）和平板端（≥768px）。 |
| **动效适度 ** | 运用滚动动画、轮播切换、微交互提升体验，不喧宾夺主。 |
| **角色感知 ** | 登录前后内容差异化展示（如未登录显示注册入口，已登录显示待办提醒）。 |
| **AI 优先 ** | AI 助手作为帮助入口，所有操作引导类需求通过对话完成。 |
## 2. 页面布局总览
``` svg
<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "0 0 1200 960" font-family= "'Microsoft YaHei', sans-serif" >
<defs >
<filter id= "shadow" x= "-2%" y= "-2%" width= "104%" height= "104%" >
<feDropShadow dx= "0" dy= "4" stdDeviation= "8" flood-color= "#000" flood-opacity= "0.06" />
</filter>
<filter id= "shadowDeep" x= "-2%" y= "-2%" width= "104%" height= "104%" >
<feDropShadow dx= "0" dy= "6" stdDeviation= "12" flood-color= "#000" flood-opacity= "0.10" />
</filter>
<linearGradient id= "headerBg" x1= "0" y1= "0" x2= "1" y2= "0" >
<stop offset= "0%" stop-color= "#c2185b" />
<stop offset= "100%" stop-color= "#e91e63" />
</linearGradient>
<linearGradient id= "bannerBg" x1= "0" y1= "0" x2= "1" y2= "1" >
<stop offset= "0%" stop-color= "#fce4ec" />
<stop offset= "100%" stop-color= "#f3e5f5" />
</linearGradient>
<linearGradient id= "brandGrad" x1= "0%" y1= "0%" x2= "100%" y2= "100%" >
<stop offset= "0%" stop-color= "#c2185b" /> <stop offset= "100%" stop-color= "#e91e63" />
</linearGradient>
</defs>
<!-- 背景 -->
<rect width= "1200" height= "960" fill= "#f5f7fa" />
<!-- ========== 顶部导航栏 ========== -->
<rect width= "1200" height= "72" fill= "url(#headerBg)" />
<text x= "40" y= "46" font-size= "24" font-weight= "bold" fill= "#fff" > 智慧招标平台</text>
<text x= "200" y= "46" font-size= "14" fill= "rgba(255,255,255,0.8)" > Smart Tendering Platform</text>
<!-- 导航菜单（移除“帮助中心”） -->
<text x= "480" y= "46" font-size= "15" fill= "#fff" font-weight= "bold" > 首页</text>
<text x= "560" y= "46" font-size= "15" fill= "rgba(255,255,255,0.8)" > 招标公告</text>
<text x= "660" y= "46" font-size= "15" fill= "rgba(255,255,255,0.8)" > 定标公告</text>
<text x= "760" y= "46" font-size= "15" fill= "rgba(255,255,255,0.8)" > 企业新闻</text>
<!-- 登录/注册入口 -->
<rect x= "980" y= "20" width= "80" height= "32" rx= "6" fill= "rgba(255,255,255,0.2)" stroke= "#fff" />
<text x= "1020" y= "42" text-anchor= "middle" font-size= "14" fill= "#fff" > 登录</text>
<rect x= "1070" y= "20" width= "90" height= "32" rx= "6" fill= "#fff" />
<text x= "1115" y= "42" text-anchor= "middle" font-size= "14" fill= "#c2185b" font-weight= "bold" > 注册</text>
<!-- ========== Banner 轮播区 ========== -->
<rect x= "40" y= "100" width= "1120" height= "280" rx= "12" fill= "#fff" filter= "url(#shadowDeep)" />
<rect x= "40" y= "100" width= "1120" height= "280" rx= "12" fill= "url(#bannerBg)" />
<!-- Banner 内容 -->
<text x= "160" y= "210" font-size= "32" font-weight= "bold" fill= "#c2185b" > AI 赋能的智慧招标</text>
<text x= "160" y= "250" font-size= "18" fill= "#4a5568" > 全流程线上闭环，主动智能寻源，自动风险评估</text>
<text x= "160" y= "290" font-size= "14" fill= "#8895aa" > • 智能招标委托 • 供应商 AI 寻源 • 自动化评标辅助</text>
<rect x= "160" y= "320" width= "140" height= "40" rx= "8" fill= "#c2185b" filter= "url(#shadow)" />
<text x= "230" y= "346" text-anchor= "middle" font-size= "15" fill= "#fff" font-weight= "bold" > 了解更多 →</text>
<!-- 轮播指示器（带高亮动画） -->
<circle cx= "900" cy= "340" r= "7" fill= "#c2185b" />
<circle cx= "925" cy= "340" r= "6" fill= "#d1d5db" />
<circle cx= "950" cy= "340" r= "6" fill= "#d1d5db" />
<circle cx= "975" cy= "340" r= "6" fill= "#d1d5db" />
<!-- ========== 公告区（三列，上移填补统计区空缺） ========== -->
<text x= "60" y= "430" font-size= "20" font-weight= "bold" fill= "#1a2332" > 📢 最新公告</text>
<!-- 左：招标公告 -->
<rect x= "40" y= "455" width= "360" height= "330" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "40" y= "455" width= "360" height= "42" rx= "12" fill= "#c2185b" />
<text x= "220" y= "483" text-anchor= "middle" font-size= "16" font-weight= "bold" fill= "#fff" > 招标公告</text>
<text x= "220" y= "505" text-anchor= "middle" font-size= "11" fill= "rgba(255,255,255,0.8)" > 最新发布</text>
<rect x= "60" y= "520" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "75" y= "540" font-size= "14" fill= "#1a2332" > 年产5万吨聚丙烯项目设备采购</text>
<text x= "75" y= "555" font-size= "12" fill= "#8895aa" > 2026-07-01 ｜ ｜ </text>
<rect x= "60" y= "570" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "75" y= "590" font-size= "14" fill= "#1a2332" > 数字化交付平台开发服务</text>
<text x= "75" y= "605" font-size= "12" fill= "#8895aa" > 2026-06-29 ｜ ｜ </text>
<rect x= "60" y= "620" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "75" y= "640" font-size= "14" fill= "#1a2332" > 2026年度防腐保温工程框架</text>
<text x= "75" y= "655" font-size= "12" fill= "#8895aa" > 2026-06-28 ｜ ｜ </text>
<!-- 招标公告更多按钮 -->
<rect x= "280" y= "760" width= "100" height= "28" rx= "14" fill= "#fce4ec" />
<text x= "330" y= "780" text-anchor= "middle" font-size= "13" fill= "#c2185b" font-weight= "bold" > 查看全部 →</text>
<!-- 中：定标公告 -->
<rect x= "420" y= "455" width= "360" height= "330" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "420" y= "455" width= "360" height= "42" rx= "12" fill= "#1565c0" />
<text x= "600" y= "483" text-anchor= "middle" font-size= "16" font-weight= "bold" fill= "#fff" > 定标公告</text>
<text x= "600" y= "505" text-anchor= "middle" font-size= "11" fill= "rgba(255,255,255,0.8)" > 最新定标</text>
<rect x= "440" y= "520" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "455" y= "540" font-size= "14" fill= "#1a2332" > 催化剂采购项目（包1） </text>
<text x= "455" y= "555" font-size= "12" fill= "#8895aa" > 2026-07-01 ｜ 中标方：滨化催化剂有限公司</text>
<rect x= "440" y= "570" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "455" y= "590" font-size= "14" fill= "#1a2332" > 厂区安防监控升级项目</text>
<text x= "455" y= "605" font-size= "12" fill= "#8895aa" > 2026-06-30 ｜ </text>
<rect x= "440" y= "620" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "455" y= "640" font-size= "14" fill= "#1a2332" > 办公楼装修工程</text>
<text x= "455" y= "655" font-size= "12" fill= "#8895aa" > 2026-06-28 ｜ 中标方：滨州建工集团</text>
<!-- 定标公告更多按钮 -->
<rect x= "660" y= "760" width= "100" height= "28" rx= "14" fill= "#e3f2fd" />
<text x= "710" y= "780" text-anchor= "middle" font-size= "13" fill= "#1565c0" font-weight= "bold" > 查看全部 →</text>
<!-- 右：企业新闻 -->
<rect x= "800" y= "455" width= "360" height= "330" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<rect x= "800" y= "455" width= "360" height= "42" rx= "12" fill= "#e65100" />
<text x= "980" y= "483" text-anchor= "middle" font-size= "16" font-weight= "bold" fill= "#fff" > 企业新闻</text>
<text x= "980" y= "505" text-anchor= "middle" font-size= "11" fill= "rgba(255,255,255,0.8)" > 集团动态</text>
<rect x= "820" y= "520" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "835" y= "540" font-size= "14" fill= "#1a2332" > 滨化集团获评“省级智能工厂”</text>
<text x= "835" y= "555" font-size= "12" fill= "#8895aa" > 2026-07-01 ｜ </text>
<rect x= "820" y= "570" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "835" y= "590" font-size= "14" fill= "#1a2332" > 2026年供应商大会圆满举办</text>
<text x= "835" y= "605" font-size= "12" fill= "#8895aa" > 2026-06-25 ｜ </text>
<rect x= "820" y= "620" width= "320" height= "40" rx= "6" fill= "#fafafa" />
<text x= "835" y= "640" font-size= "14" fill= "#1a2332" > 智慧招标平台正式上线运营</text>
<text x= "835" y= "655" font-size= "12" fill= "#8895aa" > 2026-06-01 ｜ </text>
<!-- 企业新闻更多按钮 -->
<rect x= "1040" y= "760" width= "100" height= "28" rx= "14" fill= "#fff3e0" />
<text x= "1090" y= "780" text-anchor= "middle" font-size= "13" fill= "#e65100" font-weight= "bold" > 查看全部 →</text>
<!-- ========== 底部声明区 ========== -->
<rect x= "40" y= "815" width= "1120" height= "110" rx= "12" fill= "#fff" filter= "url(#shadow)" />
<text x= "80" y= "850" font-size= "14" font-weight= "bold" fill= "#4a5568" > 免责声明</text>
<text x= "80" y= "875" font-size= "12" fill= "#8895aa" > 本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。</text>
<text x= "80" y= "900" font-size= "12" fill= "#8895aa" > 隐私政策 ｜ 服务协议 ｜ 法律声明 ｜ © 2026 滨化集团 ｜ </text>
<!-- ========== AI 助手浮动入口 ========== -->
<circle cx= "1110" cy= "890" r= "42" fill= "url(#brandGrad)" filter= "url(#shadowDeep)" />
<text x= "1110" y= "885" text-anchor= "middle" font-size= "16" fill= "#fff" font-weight= "bold" > 小滨</text>
<text x= "1110" y= "905" text-anchor= "middle" font-size= "10" fill= "rgba(255,255,255,0.9)" > AI 助手</text>
<!-- AI 助手呼吸光环动画示意 -->
<circle cx= "1110" cy= "890" r= "50" fill= "none" stroke= "#e91e63" stroke-width= "2" opacity= "0.3" >
<animate attributeName= "r" from= "42" to= "55" dur= "2s" repeatCount= "indefinite" />
<animate attributeName= "opacity" from= "0.6" to= "0" dur= "2s" repeatCount= "indefinite" />
</circle>
</svg>
```
## 3. 各模块详细说明
### 3.1 顶部导航栏
| 元素 | 说明 |
| :-------- | :-------------------------------------------------------------------------- |
| **品牌区 ** | 平台 Logo + 名称（“智慧招标平台”），点击返回首页。右侧显示英文副标题。 |
| **主导航 ** | 首页、招标公告、定标公告、企业新闻。高亮当前所在页面。 |
| **用户操作区 ** | **未登录 ** ：显示“登录”和“注册”按钮。**已登录**：显示用户头像/名称，下拉菜单包含“个人中心”、“我的投标/评审”、“安全设置”、“退出”。 |
| **动态效果 ** | 导航项 hover 时下划线滑出动画（0.3s）；登录/注册按钮 hover 时微变色/上浮。 |
> **设计决策**：移除“帮助中心”菜单项。所有操作引导、常见问题解答、流程咨询等功能由右下角 **AI 助手“小滨”** 统一承担，降低用户学习成本，提供更智能、更个性化的帮助体验。
### 3.2 Banner 轮播区
| 属性 | 说明 |
| :--- | :--- |
| **尺寸 ** | 1120 ×
| **功能 ** | 展示平台核心价值、最新活动、重要通知等，支持自动轮播和手动切换 |
| **轮播数量 ** | 3~5 张 Banner |
| **每张内容 ** | 主标题（32px）、副标题（18px）、特性标签列表、CTA 按钮 |
| **切换方式 ** | 自动轮播（每 5 秒切换）+ 底部指示器手动切换 |
| **动效 ** | 淡入淡出过渡（0.8s 缓动），指示器高亮同步变化 |
| **CTA 按钮 ** | “了解更多”跳转至平台介绍页，“立即参与”跳转至公告列表 |
### 3.3 公告区
#### 3.3.1 招标公告（左列）
| 属性 | 说明 |
| :--- | :--- |
| **标题区 ** | 红色渐变背景（#c2185b ），显示“招标公告”+“最新发布”标签 |
| **列表项 ** | 展示 3 条最新招标信息 |
| **每条信息 ** | 标题（14px，加粗）+ 发布时间、品类、状态标签 |
| **状态标签 ** | 报名中（绿色）、即将截止（橙色）、已截止（灰色） |
| **更多按钮 ** | “查看全部 →”，跳转至招标公告列表页（支持分页、搜索、筛选） |
#### 3.3.2 定标公告（中列）
| 属性 | 说明 |
| :------- | :-------------------------------- |
| **标题区 ** | 蓝色渐变背景（#1565c0 ），显示“定标公告”+“最新定标”标签 |
| **列表项 ** | 展示 3 条最新定标结果 |
| **每条信息 ** | 项目名称（14px，加粗）+ 定标日期、中标方 |
| **更多按钮 ** | “查看全部 →”，跳转至定标公告列表页 |
#### 3.3.3 企业新闻（右列）
| 属性 | 说明 |
| :--- | :--- |
| **标题区 ** | 橙色渐变背景（#e65100 ），显示“企业新闻”+“集团动态”标签 |
| **列表项 ** | 展示 3 条最新集团动态 |
| **每条信息 ** | 标题（14px，加粗）+ 发布日期、分类标签 |
| **更多按钮 ** | “查看全部 →”，跳转至新闻列表页 |
#### 3.3.4 动态效果
| 交互 | 效果 |
| :--- | :--- |
| **列表项 hover ** | 背景色变为 #f0f2f7 ，过渡 0.2s |
| **更多按钮 hover ** | 文字颜色加深，下划线展开 |
| **状态标签 ** | 报名中：绿色圆点 + “报名中”文字 |
### 3.4 底部声明区
| 元素 | 说明 |
| :--- | :--- |
| **免责声明 ** | “本平台所有招标信息均由滨化集团或其下属公司发布，信息真实有效。供应商应对投标行为负责，本平台保留对违规行为的处理权。” |
| **政策链接 ** | 隐私政策、服务协议、法律声明（可点击跳转） |
| **版权信息 ** | 集团名称 + 备案号 |
| **样式 ** | 浅灰背景，文字 12px，版权信息居中对齐 |
### 3.5 AI 助手浮动入口
| 属性 | 说明 |
| :--------- | :------------------------------------------------------------------------------------------------------- |
| **位置 ** | 页面右下角固定，`position: fixed` ，不随滚动移动 |
| **视觉 ** | 圆形渐变按钮（直径 84px），显示“小滨”和“AI 助手”文字 |
| **动态效果 ** | 呼吸光环动画（圆形脉冲，周期 2s），悬停时放大 1.05 倍 |
| **交互 ** | 点击展开聊天窗口（浮窗），可最小化/关闭 |
| **功能定位 ** | **替代传统帮助中心 ** 。提供：<br>• 平台操作引导（“如何发起委托？”“怎么报名？”）<br>• 常见问题解答<br>• 流程状态查询（“我的注册进度？”）<br>• 智能推荐（根据角色推荐下一步操作） |
| **登录前后差异 ** | 未登录：通用问答 + 注册引导；<br>已登录：个性化问答 + 待办提醒；<br>**注：登录后AI主动显示待办提醒，每一条提醒后面有链接直通处理页面。** |
## 4. 交互与动态效果详细说明
| 元素 | 触发事件 | 效果描述 | 持续时间 |
| :--- | :--- | :--- | :--- |
| **导航菜单 ** | hover | 文字下方滑出下划线（从左至右） | 0.3s |
| **登录/注册按钮 ** | hover | 背景色微变，轻微上浮 2px | 0.2s |
| **Banner 轮播 ** | 自动/点击指示器 | 内容淡入淡出切换，指示器高亮 | 0.8s |
| **Banner CTA 按钮 ** | hover | 背景色加深，轻微放大 | 0.2s |
| **公告列表项 ** | hover | 背景色变为 #f0f2f7 | 0.2s |
| * * “查看全部”按钮** | hover | 文字颜色加深，下划线展开 | 0.3s |
| **AI 助手浮标 ** | hover | 放大 1.05 倍，阴影加深 | 0.2s |
| **AI 助手光环 ** | 自动 | 脉冲扩散动画（呼吸效果） | 2s 循环 |
| **页面加载 ** | onLoad | 公告列表从下往上淡入（stagger 100ms）
### 4.1 关键帧动画示例（CSS）
``` css
/* AI 助手呼吸光环 */
@ keyframes breathe {
0 % { r : 42 ; opacity : 0.6 ; }
100 % { r : 58 ; opacity : 0 ; }
}
/* 公告列表入场 */
@ keyframes slideUp {
0 % { opacity : 0 ; transform : translateY ( 20 px ) ; }
100 % { opacity : 1 ; transform : translateY ( 0 ) ; }
}
/* 导航下划线 */
. nav-item :: after {
content : '' ;
position : absolute ;
bottom : -4 px ;
left : 0 ;
width : 0 ;
height : 2 px ;
background : #fff ;
transition : width 0.3 s ease ;
}
. nav-item : hover :: after { width : 100 % ; }
```
## 5. 登录前后差异化展示
| 模块 | 未登录 | 已登录 |
| :--- | :--- | :--- |
| **顶部用户区 ** | 显示“登录”+“注册”按钮 | 显示用户头像、名称及下拉菜单（个人中心/我的投标/安全设置/退出） |
| **Banner 区 ** | 展示平台宣传内容（AI赋能、全流程等） | 可增加“待办提醒”Banner（如“您有 X 个项目待投标”）或个性化推荐 |
| **公告区 ** | 全部公开，按时间倒序展示 | 可标注已读状态，或按供应商关注的品类/行业进行排序推荐 |
| **AI 助手 ** | 通用问答 + 注册引导 | 根据角色推送个性化帮助：<br>• 供应商：“您关注的品类有新公告”<br>• 专家：“您有新的评标邀请”<br>• 招标专员：“待办任务提醒” |
## 6. 技术实现建议
| 领域 | 建议 |
| :--- | :--- |
| **前端框架 ** | Vue 3 / React，采用组件化开发，公告列表、Banner 等均封装为独立组件 |
| **数据交互 ** | • 公告列表：REST API 分页获取（`/api/announcements` ） `/api/banners` ）
| **状态管理 ** | Pinia（ ） （
| **动画库 ** | CSS Animation + 少量 GSAP（数字滚动效果） |
| **响应式 ** | 使用 Grid / Flexbox，移动端适配为单列布局（≥768px 为三列，<768px 为单列） |
| **AI 助手 ** | WebSocket 实时通信，支持流式输出（SSE），后端对接大语言模型 |
## 7. 性能与可访问性
| 维度 | 要求 |
| :--- | :--- |
| **首屏加载 ** | ≤ 1.5 秒（LCP）
| **图片优化 ** | Banner 使用 WebP 格式，支持懒加载 |
| **SEO ** | 公告标题使用语义化 HTML（ `<h1>` ～ `<h3>` ），meta 信息完整 |
| **可访问性 ** | • 颜色对比度 ≥ 4.5:1（ ） `aria-label` |
| **缓存策略 ** | 公告列表缓存 60 秒，Banner 缓存 300 秒 |
## 8. 后续迭代方向
| 方向 | 说明 |
| :--- | :--- |
| **个性化推荐 ** | 根据用户历史浏览记录、关注的品类，推荐可能感兴趣的招标项目 |
| **智能搜索 ** | 顶部导航增加全局搜索框，支持关键词检索公告、供应商、专家 |
| **订阅功能 ** | 供应商可订阅关注的品类，新公告发布时通过站内信/邮件推送 |
| **多语言支持 ** | 预留中英文切换接口（i18n），后续拓展 |
| **数据看板 ** | 登录后首页可展示个人投标/评审数据统计 |
## 9. 附录：模块映射表
| 序号 | 模块名称 | SVG Y坐标 | 高度 | 功能 |
| :--- | :--- | :--- | :--- | :--- |
| 1 | 顶部导航栏 | 0 | 72 | 品牌+导航+用户操作 |
| 2 | Banner 轮播区 | 100 | 280 | 核心宣传+活动通知 |
| 3 | 招标公告 | 455 | 330 | 最新招标信息（3条） |
| 4 | 定标公告 | 455 | 330 | 最新定标结果（3条） |
| 5 | 企业新闻 | 455 | 330 | 最新集团动态（3条） |
| 6 | 底部声明区 | 815 | 110 | 免责声明+政策+版权 |
| 7 | AI 助手浮标 | 848（固定） | 84 | 智能帮助入口 |
weiwen_ye