311 lines
9.6 KiB
Markdown
311 lines
9.6 KiB
Markdown
# 碳信网服务中心页面开发实现计划
|
||
|
||
> **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
|