feat: 服务中心前端界面
This commit is contained in:
parent
76f2b947f8
commit
4f2a8c4aac
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
prd/
|
||||||
310
docs/superpowers/plans/2026-04-03-fwsc-pages-plan.md
Normal file
310
docs/superpowers/plans/2026-04-03-fwsc-pages-plan.md
Normal file
@ -0,0 +1,310 @@
|
|||||||
|
# 碳信网服务中心页面开发实现计划
|
||||||
|
|
||||||
|
> **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
|
||||||
243
docs/superpowers/specs/2026-04-03-fwsc-pages-design.md
Normal file
243
docs/superpowers/specs/2026-04-03-fwsc-pages-design.md
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
# 碳信网服务中心页面开发设计
|
||||||
|
|
||||||
|
## 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
|
||||||
35
script/copy-changed-files.sh
Normal file
35
script/copy-changed-files.sh
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# 复制 git 变更文件到 change 目录，保留原文件相对路径
|
||||||
|
|
||||||
|
set -e
|
||||||
|
|
||||||
|
TARGET_DIR="change"
|
||||||
|
|
||||||
|
# 创建目标目录
|
||||||
|
mkdir -p "$TARGET_DIR"
|
||||||
|
|
||||||
|
# 获取所有变更文件（包含未跟踪文件）
|
||||||
|
files=$(git status --porcelain | awk '{print $2}')
|
||||||
|
|
||||||
|
if [ -z "$files" ]; then
|
||||||
|
echo "没有变更文件"
|
||||||
|
exit 0
|
||||||
|
fi
|
||||||
|
|
||||||
|
count=0
|
||||||
|
for f in $files; do
|
||||||
|
# 跳过目录（如 docs/）
|
||||||
|
if [ -d "$f" ]; then
|
||||||
|
mkdir -p "$TARGET_DIR/$f"
|
||||||
|
cp -r "$f" "$TARGET_DIR/$f"
|
||||||
|
echo "✓ $f/"
|
||||||
|
elif [ -f "$f" ]; then
|
||||||
|
mkdir -p "$TARGET_DIR/$(dirname "$f")"
|
||||||
|
cp "$f" "$TARGET_DIR/$f"
|
||||||
|
echo "✓ $f"
|
||||||
|
((count++))
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "已完成，复制了 $count 个文件到 $TARGET_DIR 目录"
|
||||||
85
txw-mhzc-web/src/pages/index/components/breadcrumb/index.vue
Normal file
85
txw-mhzc-web/src/pages/index/components/breadcrumb/index.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div class="breadcrumb-box">
|
||||||
|
<span class="breadcrumb-text">当前位置：</span>
|
||||||
|
<span class="breadcrumb-link" @click="goHome">首页</span>
|
||||||
|
<span class="breadcrumb-separator">/</span>
|
||||||
|
<span class="breadcrumb-link" @click="goService">服务中心</span>
|
||||||
|
<span v-if="secondPage" class="breadcrumb-separator">/</span>
|
||||||
|
<span v-if="secondPage" :class="secondLink ? 'breadcrumb-link' : 'breadcrumb-current'" @click="secondLink && goSecond()">
|
||||||
|
{{ secondPage }}
|
||||||
|
</span>
|
||||||
|
<span class="breadcrumb-separator">/</span>
|
||||||
|
<span class="breadcrumb-current">{{ currentPage }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BreadcrumbNav',
|
||||||
|
props: {
|
||||||
|
currentPage: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
secondPage: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
secondLink: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goHome() {
|
||||||
|
this.$router.push('/view/mhzc/home');
|
||||||
|
},
|
||||||
|
goService() {
|
||||||
|
this.$router.push('/fwsc');
|
||||||
|
},
|
||||||
|
goSecond() {
|
||||||
|
if (this.secondLink) {
|
||||||
|
this.$router.push(this.secondLink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.breadcrumb-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 48px;
|
||||||
|
padding: 0 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #009a29;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #007a1f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-separator {
|
||||||
|
margin: 0 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-current {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -12,7 +12,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
// logo高度，单位为px，默认为40
|
// logo高度，单位为px，默认为40
|
||||||
size: {
|
size: {
|
||||||
type: Number,
|
type: [Number, String],
|
||||||
default: 35,
|
default: 35,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="nav-box-placeholder"></div>
|
||||||
<div class="nav-box">
|
<div class="nav-box">
|
||||||
<!-- Logo 区域 -->
|
<!-- Logo 区域 -->
|
||||||
<div class="logo-box">
|
<div class="logo-box">
|
||||||
@ -18,8 +20,7 @@
|
|||||||
|
|
||||||
<!-- 服务中心 - 带下拉 -->
|
<!-- 服务中心 - 带下拉 -->
|
||||||
<div class="menu-title service-center" @mouseenter="showServiceDropdown = true" @mouseleave="showServiceDropdown = false">
|
<div class="menu-title service-center" @mouseenter="showServiceDropdown = true" @mouseleave="showServiceDropdown = false">
|
||||||
<span>服务中心</span>
|
<span @click.stop="goPage('/fwsc')">服务中心</span>
|
||||||
<div class="dropdown-arrow">▼</div>
|
|
||||||
<!-- 下拉菜单 -->
|
<!-- 下拉菜单 -->
|
||||||
<div class="dropdown-menu service-dropdown" v-show="showServiceDropdown">
|
<div class="dropdown-menu service-dropdown" v-show="showServiceDropdown">
|
||||||
<div class="dropdown-item" @click.stop="goPage('/fwsc/fwsc')">碳服务市场</div>
|
<div class="dropdown-item" @click.stop="goPage('/fwsc/fwsc')">碳服务市场</div>
|
||||||
@ -67,6 +68,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -131,29 +133,36 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
.nav-box-placeholder {
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
.nav-box {
|
.nav-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
min-width: 1920px;
|
max-width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
overflow: visible;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #009a29;
|
background: #009a29;
|
||||||
justify-content: space-around;
|
box-sizing: border-box;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-box {
|
.logo-box {
|
||||||
width: 25%;
|
flex: 0 0 auto;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-box {
|
.option-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 25%;
|
flex: 0 0 auto;
|
||||||
font-family: PingFang SC;
|
font-family: PingFang SC;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-style: regular;
|
font-style: regular;
|
||||||
@ -170,19 +179,20 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-box {
|
.menu-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50%;
|
overflow: hidden;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
@ -190,11 +200,14 @@ export default {
|
|||||||
.menu-title {
|
.menu-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 96px;
|
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
min-width: 80px;
|
||||||
|
padding: 0 8px;
|
||||||
|
overflow: visible;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
flex: 0 0 auto;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@ -207,8 +220,8 @@ export default {
|
|||||||
// 服务中心下拉箭头
|
// 服务中心下拉箭头
|
||||||
.service-center {
|
.service-center {
|
||||||
.dropdown-arrow {
|
.dropdown-arrow {
|
||||||
font-size: 10px;
|
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -217,29 +230,29 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 64px;
|
top: 64px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
min-width: 140px;
|
min-width: 140px;
|
||||||
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
transform: translateX(-50%);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:hover {
|
.dropdown-item:hover {
|
||||||
background: #e8f5e9;
|
|
||||||
color: #009a29;
|
color: #009a29;
|
||||||
|
background: #e8f5e9;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 用户头像下拉菜单
|
// 用户头像下拉菜单
|
||||||
@ -257,8 +270,52 @@ export default {
|
|||||||
.user-dropdown {
|
.user-dropdown {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
transform: none;
|
|
||||||
min-width: 130px;
|
min-width: 130px;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式适配
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.nav-box {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-box {
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-title {
|
||||||
|
min-width: 70px;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.menu-title {
|
||||||
|
min-width: 60px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-box .gzt {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.nav-box {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-box {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-box .gzt span {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -18,6 +18,9 @@ const router = new VueRouter({
|
|||||||
mode: 'history',
|
mode: 'history',
|
||||||
base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`,
|
base: `${window.STATIC_ENV_CONFIG.ROUTER_PREFIX}/`,
|
||||||
routes: [...routes],
|
routes: [...routes],
|
||||||
|
scrollBehavior(_to, _from, _savedPosition) {
|
||||||
|
return { x: 0, y: 0 };
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
|
|||||||
@ -167,7 +167,7 @@ export default [
|
|||||||
component: hyzt,
|
component: hyzt,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'fwsc',
|
name: 'fwsc-fwsc',
|
||||||
path: '/fwsc/fwsc',
|
path: '/fwsc/fwsc',
|
||||||
component: fwsc,
|
component: fwsc,
|
||||||
meta: {
|
meta: {
|
||||||
|
|||||||
289
txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
Normal file
289
txw-mhzc-web/src/pages/index/views/fwsc/fwsc.vue
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fwsc-container">
|
||||||
|
<NewNav />
|
||||||
|
|
||||||
|
<!-- 面包屑导航 -->
|
||||||
|
<BreadcrumbNav currentPage="碳服务市场" />
|
||||||
|
|
||||||
|
<main class="fwsc-main">
|
||||||
|
<div class="内容区域">
|
||||||
|
<!-- 左侧筛选栏 -->
|
||||||
|
<aside class="筛选栏">
|
||||||
|
<div class="筛选栏内容">
|
||||||
|
<!-- 服务类型 -->
|
||||||
|
<div class="筛选项">
|
||||||
|
<div class="筛选标签">服务类型</div>
|
||||||
|
<t-select v-model="筛选.服务类型" :options="服务类型选项" placeholder="请选择服务类型" clearable />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务企业 -->
|
||||||
|
<div class="筛选项">
|
||||||
|
<div class="筛选标签">服务企业</div>
|
||||||
|
<t-select v-model="筛选.服务企业" :options="服务企业选项" placeholder="请选择服务企业" clearable />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关键词搜索 -->
|
||||||
|
<div class="筛选项">
|
||||||
|
<div class="筛选标签">关键词</div>
|
||||||
|
<t-input v-model="筛选.关键词" placeholder="请输入关键词" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<t-button theme="primary" class="搜索按钮" @click="搜索">搜索</t-button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- 右侧服务卡片列表 -->
|
||||||
|
<div class="卡片列表">
|
||||||
|
<div
|
||||||
|
v-for="(card, index) in 卡片数据"
|
||||||
|
:key="index"
|
||||||
|
class="服务卡片"
|
||||||
|
>
|
||||||
|
<!-- 卡片内容 -->
|
||||||
|
<div class="卡片头部">
|
||||||
|
<h3 class="卡片标题">{{ card.标题 }}</h3>
|
||||||
|
<p class="卡片企业">{{ card.企业 }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="卡片标签">
|
||||||
|
<span v-for="(tag, tagIndex) in card.标签" :key="tagIndex" class="标签">
|
||||||
|
{{ tag }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="卡片价格" :style="{ color: '#D25F00' }">
|
||||||
|
{{ card.价格 }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="卡片描述">{{ card.描述 }}</p>
|
||||||
|
|
||||||
|
<div class="卡片操作">
|
||||||
|
<t-button theme="primary" class="操作按钮">联系服务商</t-button>
|
||||||
|
<t-button variant="outline" class="操作按钮">收藏</t-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<div v-if="index < 卡片数据.length - 1" class="卡片分隔线"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FwscPage',
|
||||||
|
components: {
|
||||||
|
NewNav,
|
||||||
|
Footer,
|
||||||
|
BreadcrumbNav,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
筛选: {
|
||||||
|
服务类型: '',
|
||||||
|
服务企业: '',
|
||||||
|
关键词: '',
|
||||||
|
},
|
||||||
|
服务类型选项: [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '碳核查服务', value: '碳核查服务' },
|
||||||
|
{ label: '碳足迹核算', value: '碳足迹核算' },
|
||||||
|
{ label: '碳减排技术服务', value: '碳减排技术服务' },
|
||||||
|
{ label: '碳资产管理服务', value: '碳资产管理服务' },
|
||||||
|
{ label: 'ESG报告编制', value: 'ESG报告编制' },
|
||||||
|
{ label: '碳交易咨询', value: '碳交易咨询' },
|
||||||
|
],
|
||||||
|
服务企业选项: [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '欧冶云商', value: '欧冶云商' },
|
||||||
|
{ label: '上海企源科技', value: '上海企源科技' },
|
||||||
|
{ label: '上海零数科技', value: '上海零数科技' },
|
||||||
|
{ label: '上海链坤数字科技', value: '上海链坤数字科技' },
|
||||||
|
],
|
||||||
|
卡片数据: [
|
||||||
|
{
|
||||||
|
标题: '本司提供碳相关服务寻找有需求的企业客户',
|
||||||
|
企业: '上海链坤数字科技有限公司 · 辽宁省',
|
||||||
|
标签: ['ESG报告编制', '碳减排技术服务'],
|
||||||
|
价格: '¥ 10,000.00 /次',
|
||||||
|
描述: '我们为参与碳市场的企业提供全方位的交易策略与风险管理咨询。服务内容包括解读碳市场政策规则、分析碳价走势、制定交易策略助…',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
标题: '为碳超标企业提供中和方案',
|
||||||
|
企业: '上海零数科技有限公司 · 全国',
|
||||||
|
标签: ['碳核查服务', '碳足迹核算'],
|
||||||
|
价格: '¥ 5,000,000.00 /年',
|
||||||
|
描述: '本服务依据国际国内标准（如ISO 14064-1），对企业的温室气体排放报告进行独立的第三方审定与核查。我们通过文件评审、现场访…',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
标题: '',
|
||||||
|
企业: '欧冶云商 · 北京市',
|
||||||
|
标签: ['ESG报告编制'],
|
||||||
|
价格: '¥ 1,500.00 /年',
|
||||||
|
描述: '我们协助企业系统梳理其在环境、社会和治理（ESG）领域的表现，并按照GRI、SASB、TCFD等主流框架编制专业的ESG报告。服…',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
标题: '碳足迹核算、碳减排技术供给',
|
||||||
|
企业: '上海企源科技股份有限公司 · 全国',
|
||||||
|
标签: ['碳减排技术服务', '碳足迹核算'],
|
||||||
|
价格: '面议',
|
||||||
|
描述: '本服务依据国际国内标准（如ISO 14064-1），对企业的温室气体排放报告进行独立的第三方审定与核查。我们通过文件评审、现场访…',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
搜索() {
|
||||||
|
console.log('搜索条件:', this.筛选);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fwsc-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fwsc-main {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1400px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.内容区域 {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧筛选栏 */
|
||||||
|
.筛选栏 {
|
||||||
|
position: sticky;
|
||||||
|
top: 104px;
|
||||||
|
width: 220px;
|
||||||
|
height: fit-content;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.筛选栏内容 {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.筛选项 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.筛选标签 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.搜索按钮 {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧卡片列表 */
|
||||||
|
.卡片列表 {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.服务卡片 {
|
||||||
|
position: relative;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.服务卡片:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片头部 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片标题 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片企业 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片标签 {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.标签 {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #0052d9;
|
||||||
|
background: #f0f5ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片价格 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片描述 {
|
||||||
|
display: box;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #666;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片操作 {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.操作按钮 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.卡片分隔线 {
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 0;
|
||||||
|
left: 20px;
|
||||||
|
height: 1px;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -108,7 +108,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
padding-top: 64px;
|
// padding-top: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当前位置导航
|
// 当前位置导航
|
||||||
@ -210,10 +210,10 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.service-card-icon {
|
.service-card-icon {
|
||||||
|
display: flex;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
|||||||
@ -3,17 +3,11 @@
|
|||||||
<!-- 顶部导航 -->
|
<!-- 顶部导航 -->
|
||||||
<new-nav />
|
<new-nav />
|
||||||
|
|
||||||
|
<!-- 面包屑导航 -->
|
||||||
|
<BreadcrumbNav currentPage="碳金融市场" />
|
||||||
|
|
||||||
<!-- 页面主体 -->
|
<!-- 页面主体 -->
|
||||||
<div class="jrsc-main">
|
<div class="jrsc-main">
|
||||||
<!-- 当前位置 -->
|
|
||||||
<div class="current-position">
|
|
||||||
<span>首页</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span>服务中心</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span class="current">碳金融市场</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 左侧筛选栏 -->
|
<!-- 左侧筛选栏 -->
|
||||||
@ -133,12 +127,14 @@
|
|||||||
<script>
|
<script>
|
||||||
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
import FooterComponent from '@/pages/index/components/footer/index.vue';
|
import FooterComponent from '@/pages/index/components/footer/index.vue';
|
||||||
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'JrscPage',
|
name: 'JrscPage',
|
||||||
components: {
|
components: {
|
||||||
NewNav,
|
NewNav,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
|
BreadcrumbNav,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -275,26 +271,10 @@ export default {
|
|||||||
|
|
||||||
.jrsc-main {
|
.jrsc-main {
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
padding-top: 84px;
|
padding: 20px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当前位置
|
|
||||||
.current-position {
|
|
||||||
padding: 20px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
margin: 0 8px;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
color: #009a29;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 内容区域
|
// 内容区域
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -3,18 +3,12 @@
|
|||||||
<!-- 顶部导航 -->
|
<!-- 顶部导航 -->
|
||||||
<NewNav />
|
<NewNav />
|
||||||
|
|
||||||
<div class="main-content">
|
<!-- 面包屑导航 -->
|
||||||
<!-- 当前位置 -->
|
<BreadcrumbNav
|
||||||
<div class="current-position">
|
:currentPage="currentPageName"
|
||||||
<span>当前位置：</span>
|
secondPage="碳数据市场"
|
||||||
<span class="position-item" @click="goHome">首页</span>
|
secondLink="/fwsc/sjsc"
|
||||||
<span class="separator">/</span>
|
/>
|
||||||
<span class="position-item" @click="goService">服务中心</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span class="position-item" @click="goDataMarket">碳数据市场</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span class="position-current">数据列表</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
@ -25,9 +19,9 @@
|
|||||||
<div class="filter-section">
|
<div class="filter-section">
|
||||||
<div class="filter-title">价格区间</div>
|
<div class="filter-title">价格区间</div>
|
||||||
<div class="price-range">
|
<div class="price-range">
|
||||||
<input type="text" v-model="filterParams.priceMin" placeholder="最低" class="price-input" />
|
<input type="text" v-model="filterParams.priceMin" placeholder="最低" class="price-input price-min" />
|
||||||
<span class="price-separator">-</span>
|
<span class="price-separator">-</span>
|
||||||
<input type="text" v-model="filterParams.priceMax" placeholder="最高" class="price-input" />
|
<input type="text" v-model="filterParams.priceMax" placeholder="最高" class="price-input price-max" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -127,7 +121,6 @@
|
|||||||
<span class="page-btn">5</span>
|
<span class="page-btn">5</span>
|
||||||
<span class="page-btn">下一页</span>
|
<span class="page-btn">下一页</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<Footer />
|
<Footer />
|
||||||
@ -137,15 +130,19 @@
|
|||||||
<script>
|
<script>
|
||||||
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
import Footer from '@/pages/index/components/footer/index.vue';
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SjlbcPage',
|
name: 'SjlbcPage',
|
||||||
components: {
|
components: {
|
||||||
NewNav,
|
NewNav,
|
||||||
Footer,
|
Footer,
|
||||||
|
BreadcrumbNav,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
currentPageName: '数据列表',
|
||||||
|
marketId: '',
|
||||||
filterParams: {
|
filterParams: {
|
||||||
priceMin: '',
|
priceMin: '',
|
||||||
priceMax: '',
|
priceMax: '',
|
||||||
@ -229,6 +226,9 @@ export default {
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.marketId = this.$route.query.id || '';
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
sortedDataList() {
|
sortedDataList() {
|
||||||
if (!this.sortField) {
|
if (!this.sortField) {
|
||||||
@ -279,15 +279,6 @@ export default {
|
|||||||
confirmFilter() {
|
confirmFilter() {
|
||||||
console.log('筛选条件:', this.filterParams);
|
console.log('筛选条件:', this.filterParams);
|
||||||
},
|
},
|
||||||
goHome() {
|
|
||||||
window.location.href = '/view/mhzc/home';
|
|
||||||
},
|
|
||||||
goService() {
|
|
||||||
window.location.href = '/view/mhzc/fwsc/fwsc';
|
|
||||||
},
|
|
||||||
goDataMarket() {
|
|
||||||
window.location.href = '/view/mhzc/fwsc/sjsc';
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -298,66 +289,36 @@ export default {
|
|||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
|
||||||
width: 1920px;
|
|
||||||
padding-top: 64px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 当前位置
|
|
||||||
.current-position {
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
padding: 0 60px;
|
|
||||||
line-height: 48px;
|
|
||||||
background: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.position-item {
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: #009a29;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
margin: 0 8px;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.position-current {
|
|
||||||
color: #009a29;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 主内容区
|
// 主内容区
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 20px 60px;
|
max-width: 1400px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 左侧筛选栏
|
// 左侧筛选栏
|
||||||
.filter-sidebar {
|
.filter-sidebar {
|
||||||
width: 220px;
|
width: 200px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-box {
|
.filter-box {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 84px;
|
top: 104px;
|
||||||
padding: 20px;
|
padding: 16px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-title {
|
.filter-title {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
@ -365,13 +326,12 @@ export default {
|
|||||||
.price-range {
|
.price-range {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-input {
|
.price-input {
|
||||||
flex: 1;
|
height: 32px;
|
||||||
height: 36px;
|
padding: 0 6px;
|
||||||
padding: 0 12px;
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -382,15 +342,21 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.price-min,
|
||||||
|
.price-max {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
.price-separator {
|
.price-separator {
|
||||||
|
flex-shrink: 0;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-picker-box {
|
.date-picker-box {
|
||||||
.date-input {
|
.date-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 32px;
|
||||||
padding: 0 12px;
|
padding: 0 8px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|||||||
@ -1,16 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sjsc-page">
|
<div class="sjsc-page">
|
||||||
<NewNav />
|
<NewNav />
|
||||||
<div class="main-content">
|
|
||||||
<!-- 当前位置导航 -->
|
<!-- 面包屑导航 -->
|
||||||
<div class="breadcrumb-box">
|
<BreadcrumbNav currentPage="碳数据市场" />
|
||||||
<span class="breadcrumb-text">当前位置：</span>
|
|
||||||
<span class="breadcrumb-link" @click="goHome">首页</span>
|
|
||||||
<span class="breadcrumb-separator">/</span>
|
|
||||||
<span class="breadcrumb-link" @click="goService">服务中心</span>
|
|
||||||
<span class="breadcrumb-separator">/</span>
|
|
||||||
<span class="breadcrumb-current">碳数据市场</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 页面主体 -->
|
<!-- 页面主体 -->
|
||||||
<div class="page-body">
|
<div class="page-body">
|
||||||
@ -56,7 +49,7 @@
|
|||||||
<span class="price-tag" :class="card.price === '免费' ? 'free' : 'paid'">
|
<span class="price-tag" :class="card.price === '免费' ? 'free' : 'paid'">
|
||||||
{{ card.price }}
|
{{ card.price }}
|
||||||
</span>
|
</span>
|
||||||
<t-button theme="primary" size="small" variant="outline">
|
<t-button theme="primary" size="small" variant="outline" @click="goToDataList(card.id)">
|
||||||
查看数据库
|
查看数据库
|
||||||
</t-button>
|
</t-button>
|
||||||
</div>
|
</div>
|
||||||
@ -64,7 +57,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
@ -73,12 +65,14 @@
|
|||||||
<script>
|
<script>
|
||||||
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
import Footer from '@/pages/index/components/footer/index.vue';
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SjscPage',
|
name: 'SjscPage',
|
||||||
components: {
|
components: {
|
||||||
NewNav,
|
NewNav,
|
||||||
Footer
|
Footer,
|
||||||
|
BreadcrumbNav,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -150,15 +144,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goHome() {
|
|
||||||
this.$router.push('/view/mhzc/home');
|
|
||||||
},
|
|
||||||
goService() {
|
|
||||||
this.$router.push('/fwsc/fwsc');
|
|
||||||
},
|
|
||||||
handleTypeChange(value) {
|
handleTypeChange(value) {
|
||||||
this.selectedType = value;
|
this.selectedType = value;
|
||||||
},
|
},
|
||||||
|
goToDataList(id) {
|
||||||
|
this.$router.push({ path: '/fwsc/sjlbc', query: { id } });
|
||||||
|
},
|
||||||
getTagClass(tag) {
|
getTagClass(tag) {
|
||||||
const classMap = {
|
const classMap = {
|
||||||
'公共数据': 'tag-green',
|
'公共数据': 'tag-green',
|
||||||
@ -178,58 +169,19 @@ export default {
|
|||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
|
||||||
padding-top: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 当前位置导航
|
|
||||||
.breadcrumb-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 48px;
|
|
||||||
padding: 0 200px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-text {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-link {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #009a29;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #007a1f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-separator {
|
|
||||||
margin: 0 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-current {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面主体
|
// 页面主体
|
||||||
.page-body {
|
.page-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 24px 200px;
|
max-width: 1400px;
|
||||||
gap: 24px;
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 左侧筛选栏
|
// 左侧筛选栏
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 88px;
|
top: 104px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
|
|||||||
462
txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
Normal file
462
txw-mhzc-web/src/pages/index/views/fwsc/xqsc.vue
Normal file
@ -0,0 +1,462 @@
|
|||||||
|
<!--
|
||||||
|
* @Descripttion: 碳需求市场页面
|
||||||
|
* @Version: 1.0
|
||||||
|
* @Author: cby
|
||||||
|
* @Date: 2026-04-03
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NewNav />
|
||||||
|
<div class="xqsc-page">
|
||||||
|
|
||||||
|
<!-- 面包屑导航 -->
|
||||||
|
<BreadcrumbNav currentPage="碳需求市场" />
|
||||||
|
|
||||||
|
<!-- 主内容区 -->
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<!-- 左侧筛选栏 -->
|
||||||
|
<div class="filter-sidebar">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<div class="filter-search">
|
||||||
|
<t-input v-model="searchKeyword" placeholder="请输入关键词" @enter="handleSearch"></t-input>
|
||||||
|
<t-button theme="primary" @click="handleSearch">搜索</t-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务类型 -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-title">服务类型</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div
|
||||||
|
v-for="item in serviceTypeList"
|
||||||
|
:key="item.value"
|
||||||
|
:class="['filter-option', { active: selectedServiceType === item.value }]"
|
||||||
|
@click="handleServiceTypeSelect(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务企业 -->
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-title">服务企业</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div
|
||||||
|
v-for="item in companyList"
|
||||||
|
:key="item.value"
|
||||||
|
:class="['filter-option', { active: selectedCompany === item.value }]"
|
||||||
|
@click="handleCompanySelect(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧需求卡片列表 -->
|
||||||
|
<div class="demand-list">
|
||||||
|
<div class="list-header">
|
||||||
|
<span class="list-title">碳需求市场</span>
|
||||||
|
<span class="list-count">共 {{ demandList.length }} 条需求</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demand-grid">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in demandList"
|
||||||
|
:key="index"
|
||||||
|
class="demand-card"
|
||||||
|
>
|
||||||
|
<!-- 卡片头部 - 标题 -->
|
||||||
|
<div :class="['demand-title', { 'urgent': item.urgent }]">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 发布企业 -->
|
||||||
|
<div class="demand-company">
|
||||||
|
{{ item.company }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 标签 -->
|
||||||
|
<div class="demand-tags">
|
||||||
|
<span v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="demand-tag">
|
||||||
|
{{ tag }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 预算 -->
|
||||||
|
<div class="demand-budget">
|
||||||
|
<span class="budget-label">预算</span>
|
||||||
|
<span class="budget-value">{{ item.budget }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 描述 -->
|
||||||
|
<div class="demand-desc">
|
||||||
|
{{ item.desc }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 有效期 -->
|
||||||
|
<div class="demand-validity" v-if="item.validity">
|
||||||
|
<svg class="calendar-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.5V3.5C13.5 3.22386 13.2761 3 13 3H12.5V1.5C12.5 1.22386 12.2761 1 12 1C11.7239 1 11.5 1.22386 11.5 1.5V3H4.5V1.5C4.5 1.22386 4.27614 1 4 1C3.72386 1 3.5 1.22386 3.5 1.5V3H3C2.72386 3 2.5 3.22386 2.5 3.5V13.5C2.5 13.7761 2.72386 14 3 14H13C13.2761 14 13.5 13.7761 13.5 13.5V13.5" stroke="#666" stroke-width="1.2"/>
|
||||||
|
<path d="M5.5 6H10.5M5.5 8.5H10.5M5.5 11H8.5" stroke="#666" stroke-width="1.2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
<span>有效期至：{{ item.validity }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="demand-action">
|
||||||
|
<t-button theme="primary" @click="handleContact(item)">联系服务</t-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系服务弹窗 -->
|
||||||
|
<t-dialog
|
||||||
|
:closeOnOverlayClick="false"
|
||||||
|
header="联系服务"
|
||||||
|
:visible.sync="contactDialogVisible"
|
||||||
|
@confirm="handleConfirm"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
:onClose="handleClose"
|
||||||
|
class="global-dialog"
|
||||||
|
attach="body"
|
||||||
|
>
|
||||||
|
<div class="dialog-line">
|
||||||
|
<div class="dialog-line-title">联系人：</div>
|
||||||
|
<div class="dialog-line-text">{{ contactData.lxr }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-line">
|
||||||
|
<div class="dialog-line-title">联系电话：</div>
|
||||||
|
<div class="dialog-line-text">{{ contactData.lxdh }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-line">
|
||||||
|
<div class="dialog-line-title">电子邮箱：</div>
|
||||||
|
<div class="dialog-line-text">{{ contactData.email }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-line">
|
||||||
|
<div class="dialog-line-title" style="width:95px">留言内容：</div>
|
||||||
|
<t-textarea v-model="messageContent" :autosize="{ minRows: 3 }"></t-textarea>
|
||||||
|
</div>
|
||||||
|
</t-dialog>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
|
import BreadcrumbNav from '@/pages/index/components/breadcrumb/index.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Xqsc',
|
||||||
|
components: {
|
||||||
|
NewNav,
|
||||||
|
Footer,
|
||||||
|
BreadcrumbNav,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchKeyword: '',
|
||||||
|
selectedServiceType: '',
|
||||||
|
selectedCompany: '',
|
||||||
|
contactDialogVisible: false,
|
||||||
|
contactData: {
|
||||||
|
lxr: '张经理',
|
||||||
|
lxdh: '021-12345678',
|
||||||
|
email: 'service@example.com'
|
||||||
|
},
|
||||||
|
messageContent: '',
|
||||||
|
serviceTypeList: [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '碳核查服务', value: 'carbon_check' },
|
||||||
|
{ label: '碳足迹核算', value: 'carbon_footprint' },
|
||||||
|
{ label: '碳减排技术服务', value: 'carbon_reduction' },
|
||||||
|
{ label: '碳资产管理服务', value: 'carbon_asset' },
|
||||||
|
{ label: 'ESG报告编制', value: 'esg_report' },
|
||||||
|
{ label: '碳交易咨询', value: 'carbon_trade' }
|
||||||
|
],
|
||||||
|
companyList: [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '欧冶云商', value: 'ouye' },
|
||||||
|
{ label: '上海企源科技股份有限公司', value: 'qiyuan' },
|
||||||
|
{ label: '上海零数科技有限公司', value: 'lingshu' },
|
||||||
|
{ label: '上海链坤数字科技有限公司', value: 'linkun' }
|
||||||
|
],
|
||||||
|
demandList: [
|
||||||
|
{
|
||||||
|
title: '碳核查服务需求',
|
||||||
|
company: '上海链坤数字科技有限公司',
|
||||||
|
tags: ['ESG报告编制', '碳减排技术服务'],
|
||||||
|
budget: '¥ 50-100 万元',
|
||||||
|
desc: '我们为参与碳市场的企业提供全方位的交易策略与风险管理咨询。服务内容包括解读碳市场政策规则、分析碳价走势、制定交易策略...',
|
||||||
|
validity: '2026-04-24',
|
||||||
|
urgent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '【碳服务需求！急急急！】',
|
||||||
|
company: '上海零数科技有限公司',
|
||||||
|
tags: ['碳核查服务', '碳足迹核算'],
|
||||||
|
budget: '¥ 50-100 万元',
|
||||||
|
desc: '本服务依据国际国内标准（如ISO 14064-1），对企业的温室气体排放报告进行独立的第三方审定与核查。我们通过文件评审、现场访...',
|
||||||
|
validity: '2026-04-24',
|
||||||
|
urgent: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '减碳中和需求',
|
||||||
|
company: '上海链坤数字科技有限公司',
|
||||||
|
tags: ['ESG报告编制', '碳减排技术服务'],
|
||||||
|
budget: '¥ 50-100 万元',
|
||||||
|
desc: '我们为参与碳市场的企业提供全方位的交易策略与风险管理咨询。服务内容包括解读碳市场政策规则、分析碳价走势、制定交易策略...',
|
||||||
|
validity: '',
|
||||||
|
urgent: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '碳足迹核算需求',
|
||||||
|
company: '欧冶云商',
|
||||||
|
tags: ['碳核查服务', '碳足迹核算'],
|
||||||
|
budget: '¥ 50-100 万元',
|
||||||
|
desc: '本服务依据国际国内标准（如ISO 14064-1），对企业的温室气体排放报告进行独立的第三方审定与核查。我们通过文件评审、现场访...',
|
||||||
|
validity: '',
|
||||||
|
urgent: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSearch() {
|
||||||
|
console.log('搜索关键词:', this.searchKeyword);
|
||||||
|
},
|
||||||
|
handleServiceTypeSelect(value) {
|
||||||
|
this.selectedServiceType = value;
|
||||||
|
},
|
||||||
|
handleCompanySelect(value) {
|
||||||
|
this.selectedCompany = value;
|
||||||
|
},
|
||||||
|
handleContact(item) {
|
||||||
|
this.contactDialogVisible = true;
|
||||||
|
this.messageContent = '';
|
||||||
|
},
|
||||||
|
handleConfirm() {
|
||||||
|
console.log('提交留言:', this.messageContent);
|
||||||
|
this.$message.success('留言发布成功！');
|
||||||
|
this.contactDialogVisible = false;
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.contactDialogVisible = false;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.contactDialogVisible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.xqsc-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主内容区
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
max-width: 1400px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 左侧筛选栏
|
||||||
|
.filter-sidebar {
|
||||||
|
position: sticky;
|
||||||
|
top: 104px;
|
||||||
|
width: 220px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: fit-content;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-search {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #009a29;
|
||||||
|
background: #e8f5e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #009a29;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧需求列表
|
||||||
|
.demand-list {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-count {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 需求卡片网格
|
||||||
|
.demand-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&.urgent {
|
||||||
|
color: #d25f00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-company {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-tag {
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #2e7d32;
|
||||||
|
background: #e4f4e6;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-budget {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.budget-label {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.budget-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #D25F00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-desc {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #666;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-validity {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demand-action {
|
||||||
|
.t-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗样式
|
||||||
|
.dialog-line {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-line-title {
|
||||||
|
margin-right: 8px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-line-text {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,34 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-box">
|
<div class="page-box">
|
||||||
<!-- 顶部菜单栏 -->
|
<!-- 顶部菜单栏 -->
|
||||||
<div class="nav-box">
|
<NewNav />
|
||||||
<div class="logo-box">
|
|
||||||
<img src="@/pages/index/assets/logo-name.png">
|
|
||||||
</div>
|
|
||||||
<div class="menu-box">
|
|
||||||
<div class="menu-title meun-title-active">
|
|
||||||
<img src="@/pages/index/assets/nav-home.png" width="24px" height="24px">
|
|
||||||
<span> 首页</span>
|
|
||||||
</div>
|
|
||||||
<div class="menu-title">碳证中心</div>
|
|
||||||
<div class="menu-title">服务中心</div>
|
|
||||||
<div class="menu-title">共性能力</div>
|
|
||||||
<div class="menu-title">企业出海</div>
|
|
||||||
<div class="menu-title">行业专题</div>
|
|
||||||
</div>
|
|
||||||
<div class="option-box">
|
|
||||||
<div class="gzt">
|
|
||||||
<img src="@/pages/index/assets/home-gzt-icon.png" />
|
|
||||||
<span> 工作台</span>
|
|
||||||
</div>
|
|
||||||
<div style="margin-left:20px; cursor: pointer;">激活</div>
|
|
||||||
<div>|</div>
|
|
||||||
<div style="cursor: pointer;">登录</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 主页面 -->
|
<!-- 主页面 -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div>asdf</div>
|
||||||
<!-- 顶部风力发电机图片 -->
|
<!-- 顶部风力发电机图片 -->
|
||||||
<div class="top-box">
|
<div class="top-box">
|
||||||
<div class="top-title">
|
<div class="top-title">
|
||||||
@ -245,9 +222,11 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Footer from '@/pages/index/components/footer/index.vue';
|
import Footer from '@/pages/index/components/footer/index.vue';
|
||||||
|
import NewNav from '@/pages/index/components/new-nav/index.vue';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Footer,
|
Footer,
|
||||||
|
NewNav,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -257,81 +236,6 @@ export default {
|
|||||||
background: #f5f5f7;
|
background: #f5f5f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-box {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 64px;
|
|
||||||
min-width: 1920px;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
background: #009a29;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.logo-box {
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-box {
|
|
||||||
display: flex;
|
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: regular;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: 0%;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
leading-trim: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-box .gzt {
|
|
||||||
display: flex;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 6px;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-box {
|
|
||||||
display: flex;
|
|
||||||
width: 50%;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-title {
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
width: 96px;
|
|
||||||
height: 64px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meun-title-active {
|
|
||||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
|
|
||||||
border-bottom: 2px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-box {
|
.top-box {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@ -95,54 +95,54 @@ const configureWebpackPlugin = [];
|
|||||||
/**
|
/**
|
||||||
* 本地开发启用hard-source-webpack-plugin
|
* 本地开发启用hard-source-webpack-plugin
|
||||||
*/
|
*/
|
||||||
if (LOCAL_DEV) {
|
// if (LOCAL_DEV) {
|
||||||
console.log('====>> 启动本地开发缓存');
|
// console.log('====>> 启动本地开发缓存');
|
||||||
configureWebpackPlugin.push(
|
// configureWebpackPlugin.push(
|
||||||
new HardSourceWebpackPlugin({
|
// new HardSourceWebpackPlugin({
|
||||||
// 缓存目录，支持相对目录或绝对目录
|
// // 缓存目录，支持相对目录或绝对目录
|
||||||
// 如果有设置VUE_APP_HARD_SOURCE_FOLDER目录则使用设置值
|
// // 如果有设置VUE_APP_HARD_SOURCE_FOLDER目录则使用设置值
|
||||||
// 一般在coding流水线编译使用，把缓存设置到`/data/npm/`中，不会丢失
|
// // 一般在coding流水线编译使用，把缓存设置到`/data/npm/`中，不会丢失
|
||||||
cacheDirectory: `${
|
// cacheDirectory: `${
|
||||||
(process.env.VUE_APP_HARD_SOURCE_FOLDER && path.join(process.env.VUE_APP_HARD_SOURCE_FOLDER, '/')) ||
|
// (process.env.VUE_APP_HARD_SOURCE_FOLDER && path.join(process.env.VUE_APP_HARD_SOURCE_FOLDER, '/')) ||
|
||||||
path.join(process.cwd(), 'node_modules', '/')
|
// path.join(process.cwd(), 'node_modules', '/')
|
||||||
}.cache/hard-source/[confighash]`,
|
// }.cache/hard-source/[confighash]`,
|
||||||
// 基于package.json中的name来生成不同的hash串用于cacheDirectory的目录
|
// // 基于package.json中的name来生成不同的hash串用于cacheDirectory的目录
|
||||||
// @param webpackConfig
|
// // @param webpackConfig
|
||||||
configHash(webpackConfig) {
|
// configHash(webpackConfig) {
|
||||||
return require('node-object-hash')({ sort: false }).hash({ packageName, ...webpackConfig });
|
// return require('node-object-hash')({ sort: false }).hash({ packageName, ...webpackConfig });
|
||||||
},
|
// },
|
||||||
// 根据目录中的lock文件来决定是否重设缓存，如果设置false则需要手动删除
|
// // 根据目录中的lock文件来决定是否重设缓存，如果设置false则需要手动删除
|
||||||
environmentHash: {
|
// environmentHash: {
|
||||||
root: process.cwd(),
|
// root: process.cwd(),
|
||||||
directories: [],
|
// directories: [],
|
||||||
files: ['package-lock.json', 'yarn.lock'],
|
// files: ['package-lock.json', 'yarn.lock'],
|
||||||
},
|
// },
|
||||||
info: {
|
// info: {
|
||||||
// 'none' or 'test'.
|
// // 'none' or 'test'.
|
||||||
mode: 'none',
|
// mode: 'none',
|
||||||
// 'debug', 'log', 'info', 'warn', or 'error'.
|
// // 'debug', 'log', 'info', 'warn', or 'error'.
|
||||||
level: 'debug',
|
// level: 'debug',
|
||||||
},
|
// },
|
||||||
// 自动清除过期、过大缓存
|
// // 自动清除过期、过大缓存
|
||||||
cachePrune: {
|
// cachePrune: {
|
||||||
// 缓存时间：默认7天
|
// // 缓存时间：默认7天
|
||||||
maxAge: 7 * 24 * 60 * 60 * 1000,
|
// maxAge: 7 * 24 * 60 * 60 * 1000,
|
||||||
// 超过该处设置的阈值（默认500MB），则自动删除缓存
|
// // 超过该处设置的阈值（默认500MB），则自动删除缓存
|
||||||
sizeThreshold: 500 * 1024 * 1024,
|
// sizeThreshold: 500 * 1024 * 1024,
|
||||||
},
|
// },
|
||||||
}),
|
// }),
|
||||||
new HardSourceWebpackPlugin.ExcludeModulePlugin([
|
// new HardSourceWebpackPlugin.ExcludeModulePlugin([
|
||||||
{
|
// {
|
||||||
// HardSource works with mini-css-extract-plugin but due to how
|
// // HardSource works with mini-css-extract-plugin but due to how
|
||||||
// mini-css emits assets, assets are not emitted on repeated builds with
|
// // mini-css emits assets, assets are not emitted on repeated builds with
|
||||||
// mini-css and hard-source together. Ignoring the mini-css loader
|
// // mini-css and hard-source together. Ignoring the mini-css loader
|
||||||
// modules, but not the other css loader modules, excludes the modules
|
// // modules, but not the other css loader modules, excludes the modules
|
||||||
// that mini-css needs rebuilt to output assets every time.
|
// // that mini-css needs rebuilt to output assets every time.
|
||||||
test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
|
// test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
|
||||||
},
|
// },
|
||||||
]),
|
// ]),
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (isExtract) {
|
if (isExtract) {
|
||||||
configureWebpackPlugin.push(
|
configureWebpackPlugin.push(
|
||||||
@ -286,7 +286,7 @@ module.exports = {
|
|||||||
target: 'http://carbon.liantu.tech',
|
target: 'http://carbon.liantu.tech',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
'/mhzc': {
|
'^/mhzc': {
|
||||||
target: 'http://carbon.liantu.tech',
|
target: 'http://carbon.liantu.tech',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user