# 碳信网服务中心页面开发实现计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将6个PRD原型页面还原为Vue组件，并抽取新版首页导航为公共组件。

**Architecture:**
- 新导航组件 `new-nav/index.vue` 从 `home2/index.vue` 抽取，复用原有 `nav/index.vue` 的登录状态和用户信息逻辑
- 6个页面组件放在 `views/fwsc/` 目录下
- 路由使用父子路由结构，`/fwsc` 为引导页，下设4个子页面路由

**Tech Stack:** Vue2 + TDesign + less

---

## 文件变更总览

| 操作 | 文件路径 |
|------|---------|
| 创建 | `src/pages/index/components/new-nav/index.vue` |
| 创建 | `src/pages/index/views/fwsc/index.vue` |
| 创建 | `src/pages/index/views/fwsc/fwsc.vue` |
| 创建 | `src/pages/index/views/fwsc/xqsc.vue` |
| 创建 | `src/pages/index/views/fwsc/jrsc.vue` |
| 创建 | `src/pages/index/views/fwsc/sjsc.vue` |
| 创建 | `src/pages/index/views/fwsc/sjlbc.vue` |
| 修改 | `src/pages/index/router/routes.js` |

---

## Task 1: 创建 NewNav 导航组件

**文件:**
- 创建: `src/pages/index/components/new-nav/index.vue`

- [ ] **Step 1: 创建 new-nav 目录和组件文件**

从 `home2/index.vue` 的 `.nav-box` 抽取导航栏代码，新建 `src/pages/index/components/new-nav/index.vue`。

关键功能点：
- Logo + 菜单栏（首页、碳证中心、服务中心[下拉]、共性能力、企业出海、行业专题）
- 服务中心下拉：碳服务市场、碳需求市场、碳金融市场、碳数据市场
- 右侧：工作台、登录/注册、用户头像下拉菜单
- 登录状态判断复用原有 nav 的 `sessionStorage.getItem('sfdl')` 逻辑
- 用户信息获取复用 `sessionStorage.getItem('yhxx')` 逻辑
- 工作台跳转 `/view/mhzc/yhzx`
- 登录跳转 `/view/mhzc/login`
- 用户下拉：用户中心、退出登录

下拉菜单使用 `position: absolute` + `z-index` 实现，hover 显示。

---

## Task 2: 创建服务中心引导页

**文件:**
- 创建: `src/pages/index/views/fwsc/index.vue`

- [ ] **Step 1: 创建 views/fwsc 目录和 index.vue**

根据 `prd/介绍.html` 实现引导页：
- 顶部：NewNav 导航栏
- Banner区：大标题"可信碳服务中心"，副标题"链接全球碳资产，赋能绿色价值链..."
- 四大服务入口卡片（2x2 Grid）：
  - 碳服务市场 → `/fwsc/fwsc`
  - 碳需求市场 → `/fwsc/xqsc`
  - 碳金融市场 → `/fwsc/jrsc`
  - 碳数据市场 → `/fwsc/sjsc`
- 交易流程指引（注册认证 → 发布信息 → 在线撮合）
- 底部：Footer

卡片样式：白色背景、圆角、hover放大效果（`transform: scale(1.02)`）
配色：绿色主题 #009a29

---

## Task 3: 创建碳服务市场页面

**文件:**
- 创建: `src/pages/index/views/fwsc/fwsc.vue`

- [ ] **Step 1: 根据 prd/供需大厅.html 创建碳服务市场页面**

布局：
- NewNav + 当前位置"首页 / 服务中心"
- 左侧筛选栏（220px宽，sticky）
- 右侧服务卡片列表（2列Grid）

左侧筛选栏：
- 服务类型（全部、碳核查服务、碳足迹核算、碳减排技术服务、碳资产管理服务、ESG报告编制、碳交易咨询）
- 服务企业（全部、欧冶云商、上海企源科技、上海零数科技、上海链坤数字科技）
- 关键词搜索输入框 + 搜索按钮

右侧卡片字段（根据原型）：
- 标题："本司提供碳相关服务寻找有需求的企业客户"
- 企业："上海链坤数字科技有限公司 · 辽宁省"
- 标签：ESG报告编制、碳减排技术服务
- 价格："¥ 10,000.00 /次"（橙色强调色 #D25F00）
- 描述："我们为参与碳市场的企业提供全方位的交易策略与风险管理咨询..."
- 按钮：联系服务商（主按钮）、收藏（次按钮）

卡片底部有分隔线。使用 `t-button` 组件。

---

## Task 4: 创建碳需求市场页面

**文件:**
- 创建: `src/pages/index/views/fwsc/xqsc.vue`

- [ ] **Step 1: 根据 prd/需求.html 创建碳需求市场页面**

布局与碳服务市场基本一致，筛选栏相同。

右侧卡片字段：
- 标题："碳核查服务需求" 或 "【碳服务需求！急急急！】"
- 企业："上海链坤数字科技有限公司"
- 标签：ESG报告编制、碳减排技术服务
- 预算："¥ 50-100 万元"（橙色 #D25F00）
- 描述
- 有效期至：2026-04-24
- 按钮：联系服务

注意：部分卡片标题带有"急"字标记，用不同颜色或样式突出。

---

## Task 5: 创建碳金融市场页面

**文件:**
- 创建: `src/pages/index/views/fwsc/jrsc.vue`

- [ ] **Step 1: 根据 prd/金融.html 创建碳金融市场页面**

左侧筛选栏：
- 服务类型（全部、绿色信贷、绿色保险）
- 服务企业（全部、中国银行、工商银行、农业银行、建设银行、招商银行、中信银行、北京银行、兴业银行、邮政储蓄银行）

右侧金融产品卡片（2列Grid）：
- 机构名称 + Logo
- 产品名称（如"云南昭通信贷业务"）
- 额度："¥ 50,000.00"
- 期限："1-3年"
- 利率："3.6%~4.2%"（绿色 #00B42A）
- 产品标签（如"绿色项目贷款"）
- 按钮：立即申请（主）、查看详情（次）

---

## Task 6: 创建碳数据市场页面

**文件:**
- 创建: `src/pages/index/views/fwsc/sjsc.vue`

- [ ] **Step 1: 根据 prd/数据.html 创建碳数据市场页面**

左侧筛选栏：
- 数据类型（全部、公共数据、因子库、社会性数据）

右侧数据库卡片（2列Grid）：
- 数据库名称："宝山绿色低碳数据创新实验室"、"HiQLCD数据库"、"天工数据库"、"ecoinvent数据库"
- 描述
- 标签：公共数据/社会性数据/商业数据、免费/付费
- 按钮：查看数据库

---

## Task 7: 创建数据列表页面

**文件:**
- 创建: `src/pages/index/views/fwsc/sjlbc.vue`

- [ ] **Step 1: 根据 prd/数据列表.html 创建数据列表页面**

左侧筛选栏：
- 价格区间（最低 - 最高）
- 有效期（日期选择器）

右侧数据列表（表格形式）：
- 列：数据类型、名称、发布时间/更新时间、数据条数、浏览量、下载量
- 数据示例：
  - 全球多源高分辨温室气体及大气污染物排放清单 / 社会性数据 / 45,000条 / 475次浏览 / 18次下载
  - 国家温室气体排放因子数据库 / 公共数据 / ...
  - 碳排放数据库 / ...

列表顶部有排序图标（三角形）和浏览量/下载量指示。

---

## Task 8: 配置路由

**文件:**
- 修改: `src/pages/index/router/routes.js`

- [ ] **Step 1: 添加6个路由**

在 routes.js 顶部添加 lazy-load 导入函数：
```javascript
function fwscIndex() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/index.vue');
}
function fwscFwsc() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/fwsc.vue');
}
function fwscXqsc() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/xqsc.vue');
}
function fwscJrsc() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/jrsc.vue');
}
function fwscSjsc() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/sjsc.vue');
}
function fwscSjlbc() {
  return import(/* webpackChunkName: "fwsc" */ '@/pages/index/views/fwsc/sjlbc.vue');
}
```

在 routes 数组末尾添加：
```javascript
{
  name: 'fwsc',
  path: '/fwsc',
  component: fwscIndex,
  meta: {
    title: '服务中心',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }],
    disableBack: true,
  },
},
{
  name: 'fwsc-fwsc',
  path: '/fwsc/fwsc',
  component: fwscFwsc,
  meta: {
    title: '碳服务市场',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }, { title: '碳服务市场', to: '/fwsc/fwsc' }],
    disableBack: true,
  },
},
{
  name: 'fwsc-xqsc',
  path: '/fwsc/xqsc',
  component: fwscXqsc,
  meta: {
    title: '碳需求市场',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }, { title: '碳需求市场', to: '/fwsc/xqsc' }],
    disableBack: true,
  },
},
{
  name: 'fwsc-jrsc',
  path: '/fwsc/jrsc',
  component: fwscJrsc,
  meta: {
    title: '碳金融市场',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }, { title: '碳金融市场', to: '/fwsc/jrsc' }],
    disableBack: true,
  },
},
{
  name: 'fwsc-sjsc',
  path: '/fwsc/sjsc',
  component: fwscSjsc,
  meta: {
    title: '碳数据市场',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }, { title: '碳数据市场', to: '/fwsc/sjsc' }],
    disableBack: true,
  },
},
{
  name: 'fwsc-sjlbc',
  path: '/fwsc/sjlbc',
  component: fwscSjlbc,
  meta: {
    title: '数据列表',
    isShowSideBar: false,
    hasHome: true,
    breadCrumbs: [{ title: '首页', to: '/home' }, { title: '服务中心', to: '/fwsc' }, { title: '碳数据市场', to: '/fwsc/sjsc' }, { title: '数据列表', to: '/fwsc/sjlbc' }],
    disableBack: true,
  },
}
```

---

## 依赖关系

```
Task 1 (NewNav) ← 无依赖，可最先完成
Task 2 (fwsc引导页) ← 依赖 Task 1
Task 3 (fwsc) ← 依赖 Task 1
Task 4 (xqsc) ← 依赖 Task 1
Task 5 (jrsc) ← 依赖 Task 1
Task 6 (sjsc) ← 依赖 Task 1
Task 7 (sjlbc) ← 依赖 Task 1
Task 8 (路由) ← 依赖 Task 2-7
```

**建议执行顺序：** Task 1 → Task 2-7 并行 → Task 8