244 lines
6.7 KiB
Markdown
244 lines
6.7 KiB
Markdown
# 碳信网服务中心页面开发设计
|
||
|
||
## 1. 概述
|
||
|
||
### 1.1 项目背景
|
||
将 `prd/` 目录下的6个Axure原型HTML页面还原为Vue组件，集成到 `txw-mhzc-web` 项目中。同时抽取 `home2/index.vue` 中的顶部导航栏为独立公共组件。
|
||
|
||
### 1.2 页面映射关系
|
||
| 页面 | 文件 | 路由 | 说明 |
|
||
|------|------|------|------|
|
||
| 服务中心 | `views/fwsc/index.vue` | `/fwsc` | 引导页，含4个子入口 |
|
||
| 碳服务市场 | `views/fwsc/fwsc.vue` | `/fwsc/fwsc` | 对应供需大厅.html |
|
||
| 碳需求市场 | `views/fwsc/xqsc.vue` | `/fwsc/xqsc` | 对应需求.html |
|
||
| 碳金融市场 | `views/fwsc/jrsc.vue` | `/fwsc/jrsc` | 对应金融.html |
|
||
| 碳数据市场 | `views/fwsc/sjsc.vue` | `/fwsc/sjsc` | 对应数据.html |
|
||
| 数据列表 | `views/fwsc/sjlbc.vue` | `/fwsc/sjlbc` | 对应数据列表.html |
|
||
|
||
---
|
||
|
||
## 2. 新导航组件设计
|
||
|
||
### 2.1 组件路径
|
||
`src/pages/index/components/new-nav/index.vue`
|
||
|
||
### 2.2 抽取内容
|
||
从 `home2/index.vue` 的 `.nav-box` 抽取为独立组件。
|
||
|
||
### 2.3 功能逻辑（复用原有 nav 的逻辑）
|
||
|
||
**状态判断：**
|
||
- 登录状态：`sessionStorage.getItem('sfdl')`
|
||
- 用户信息：`sessionStorage.getItem('yhxx')`
|
||
|
||
**交互功能：**
|
||
- 工作台跳转 → `/view/mhzc/yhzx`
|
||
- 登录/注册按钮 → `/view/mhzc/login`
|
||
- 用户头像 hover 显示下拉菜单（用户中心、退出登录）
|
||
- 消息中心入口
|
||
|
||
### 2.4 "服务中心"菜单 — 二级下拉结构
|
||
```
|
||
首页 / 碳证中心 / 服务中心（二级菜单） / 共性能力 / 企业出海 / 行业专题
|
||
```
|
||
服务中心下拉：
|
||
- 碳服务市场 → `/fwsc/fwsc`
|
||
- 碳需求市场 → `/fwsc/xqsc`
|
||
- 碳金融市场 → `/fwsc/jrsc`
|
||
- 碳数据市场 → `/fwsc/sjsc`
|
||
|
||
---
|
||
|
||
## 3. 页面设计
|
||
|
||
### 3.1 服务中心（引导页）`views/fwsc/index.vue`
|
||
|
||
**布局：**
|
||
- 顶部：NewNav 导航栏
|
||
- Banner区：大标题 + 副标题
|
||
- 四大服务入口卡片（碳服务市场、碳需求市场、碳金融市场、碳数据市场）
|
||
- 底部：Footer
|
||
|
||
**交互：**
|
||
- 点击卡片跳转对应二级页面
|
||
- 卡片hover有放大效果
|
||
|
||
### 3.2 碳服务市场 `views/fwsc/fwsc.vue`
|
||
|
||
**对应原型：** `prd/供需大厅.html`
|
||
|
||
**布局：**
|
||
- 左侧筛选栏（服务类型、服务企业）
|
||
- 右侧服务卡片列表（2列Grid）
|
||
- 顶部：NewNav + 当前位置导航
|
||
- 底部：Footer
|
||
|
||
**卡片内容：**
|
||
- 服务标题
|
||
- 发布企业 + 地区
|
||
- 服务类型标签
|
||
- 价格
|
||
- 描述
|
||
- 操作按钮（联系服务商、收藏）
|
||
|
||
**筛选功能：**
|
||
- 服务类型：全部、碳核查服务、碳足迹核算、碳减排技术服务、碳资产管理服务、ESG报告编制、碳交易咨询
|
||
- 服务企业：全部、欧冶云商、上海企源科技、上海零数科技、上海链坤数字科技
|
||
- 关键词搜索
|
||
|
||
### 3.3 碳需求市场 `views/fwsc/xqsc.vue`
|
||
|
||
**对应原型：** `prd/需求.html`
|
||
|
||
**布局：** 与碳服务市场一致
|
||
|
||
**卡片内容：**
|
||
- 需求标题
|
||
- 发布企业
|
||
- 需求类型标签
|
||
- 预算范围
|
||
- 描述
|
||
- 操作按钮（联系服务）
|
||
- 有效期
|
||
|
||
### 3.4 碳金融市场 `views/fwsc/jrsc.vue`
|
||
|
||
**对应原型：** `prd/金融.html`
|
||
|
||
**布局：**
|
||
- 左侧筛选栏（服务类型、服务机构）
|
||
- 右侧金融产品卡片（2列Grid）
|
||
|
||
**卡片内容：**
|
||
- 机构名称（Logo）
|
||
- 产品名称
|
||
- 额度、期限、利率
|
||
- 操作按钮（立即申请、查看详情）
|
||
|
||
**筛选功能：**
|
||
- 服务类型：全部、绿色信贷、绿色保险
|
||
- 服务企业：全部、中国银行、工商银行、农业银行、建设银行、招商银行、中信银行、北京银行、兴业银行、邮政储蓄银行
|
||
|
||
### 3.5 碳数据市场 `views/fwsc/sjsc.vue`
|
||
|
||
**对应原型：** `prd/数据.html`
|
||
|
||
**布局：**
|
||
- 左侧筛选栏（数据类型）
|
||
- 右侧数据库卡片（2列Grid）
|
||
|
||
**卡片内容：**
|
||
- 数据库名称
|
||
- 描述
|
||
- 数据类型标签（公共数据、社会性数据、商业数据）
|
||
- 价格标签（免费/付费）
|
||
- 操作按钮（查看数据库）
|
||
|
||
**数据类型筛选：**
|
||
- 全部、公共数据、因子库、社会性数据
|
||
|
||
### 3.6 数据列表 `views/fwsc/sjlbc.vue`
|
||
|
||
**对应原型：** `prd/数据列表.html`
|
||
|
||
**布局：**
|
||
- 左侧筛选栏
|
||
- 右侧数据列表（表格形式）
|
||
|
||
**列表字段：**
|
||
- 数据名称
|
||
- 数据类型（公共数据、社会性数据）
|
||
- 发布时间/更新时间
|
||
- 数据条数
|
||
- 浏览量
|
||
- 下载量
|
||
|
||
**筛选项：**
|
||
- 价格区间
|
||
- 有效期
|
||
|
||
---
|
||
|
||
## 4. 路由设计
|
||
|
||
```javascript
|
||
// routes.js 新增
|
||
{
|
||
name: 'fwsc',
|
||
path: '/fwsc',
|
||
component: () => import('@/pages/index/views/fwsc/index.vue'),
|
||
meta: { title: '服务中心', isShowSideBar: false, hasHome: true }
|
||
},
|
||
{
|
||
name: 'fwsc-fwsc',
|
||
path: '/fwsc/fwsc',
|
||
component: () => import('@/pages/index/views/fwsc/fwsc.vue'),
|
||
meta: { title: '碳服务市场', isShowSideBar: false, hasHome: true }
|
||
},
|
||
{
|
||
name: 'fwsc-xqsc',
|
||
path: '/fwsc/xqsc',
|
||
component: () => import('@/pages/index/views/fwsc/xqsc.vue'),
|
||
meta: { title: '碳需求市场', isShowSideBar: false, hasHome: true }
|
||
},
|
||
{
|
||
name: 'fwsc-jrsc',
|
||
path: '/fwsc/jrsc',
|
||
component: () => import('@/pages/index/views/fwsc/jrsc.vue'),
|
||
meta: { title: '碳金融市场', isShowSideBar: false, hasHome: true }
|
||
},
|
||
{
|
||
name: 'fwsc-sjsc',
|
||
path: '/fwsc/sjsc',
|
||
component: () => import('@/pages/index/views/fwsc/sjsc.vue'),
|
||
meta: { title: '碳数据市场', isShowSideBar: false, hasHome: true }
|
||
},
|
||
{
|
||
name: 'fwsc-sjlbc',
|
||
path: '/fwsc/sjlbc',
|
||
component: () => import('@/pages/index/views/fwsc/sjlbc.vue'),
|
||
meta: { title: '数据列表', isShowSideBar: false, hasHome: true }
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 目录结构
|
||
|
||
```
|
||
src/pages/index/
|
||
├── components/
|
||
│ └── new-nav/
|
||
│ └── index.vue # 新导航组件
|
||
└── views/
|
||
└── fwsc/
|
||
├── index.vue # 服务中心（引导页）
|
||
├── fwsc.vue # 碳服务市场
|
||
├── xqsc.vue # 碳需求市场
|
||
├── jrsc.vue # 碳金融市场
|
||
├── sjsc.vue # 碳数据市场
|
||
└── sjlbc.vue # 数据列表
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 技术实现要点
|
||
|
||
### 6.1 公共组件
|
||
- NewNav 组件：复用原有 Nav 的登录状态判断、用户信息获取逻辑
|
||
- Footer 组件：直接使用现有 `@/pages/index/components/footer/index.vue`
|
||
|
||
### 6.2 样式规范
|
||
- 使用 TDesign 组件库（`t-button`、`t-input`、`t-select` 等）
|
||
- 布局使用 `t-row`、`t-col` 栅格系统
|
||
- 卡片hover效果使用 `transform: scale(1.02)` 过渡动画
|
||
- 颜色使用项目现有配色（绿色主题 #009a29）
|
||
|
||
### 6.3 筛选栏
|
||
- 服务类型、服务企业等筛选项，使用 `t-select` 组件
|
||
- 左侧筛选栏宽度固定 220px，使用 `position: sticky` 固定
|
||
|
||
### 6.4 卡片列表
|
||
- 使用 CSS Grid 两列布局：`grid-template-columns: repeat(2, 1fr)`
|
||
- 卡片间距：24px
|