# 碳信网服务中心页面开发设计

## 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