xiaoyu/txw

2026-04-03 20:28:59 +08:00

9.6 KiB

Raw Blame History

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

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 导入函数：

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 数组末尾添加：

{
  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

9.6 KiB Raw Blame History Unescape Escape

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

文件变更总览

Task 1: 创建 NewNav 导航组件

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

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

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

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

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

Task 7: 创建数据列表页面

Task 8: 配置路由

依赖关系

9.6 KiB

Raw Blame History