xiaoyu/txw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
460ba0d969
txw/docs/superpowers/specs/2026-04-03-fwsc-pages-design.md

6.7 KiB
Raw Blame History

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

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. 路由设计

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