feat: 工作台前端界面
This commit is contained in:
parent
25ee16640e
commit
f238c23e19
@ -1,7 +1,9 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(yarn install:*)"
|
||||
"Bash(yarn install:*)",
|
||||
"WebFetch(domain:)",
|
||||
"Bash(git checkout:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
410
docs/superpowers/plans/2026-04-05-工作台界面实现计划.md
Normal file
410
docs/superpowers/plans/2026-04-05-工作台界面实现计划.md
Normal file
@ -0,0 +1,410 @@
|
||||
# 工作台界面实现计划
|
||||
|
||||
> **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:** 根据 `prd/工作台.html` 原型，在用户中心 (`/yhzx`) 下新增工作台视图，包含统计卡片区、常用功能区、政策公告区，并重构侧边栏菜单结构。
|
||||
|
||||
**Architecture:**
|
||||
- 新建 `views/gzt/` 目录，创建工作台主视图 `index.vue` 和子视图（概览、我的供给、我的需求、绿色交易、订单管理）
|
||||
- 复用现有 `glxtSy.vue` 的侧边栏布局结构（t-menu），将其菜单配置重构为与原型一致的分组
|
||||
- 工作台视图放在 `/yhzx/gzt` 路由下
|
||||
|
||||
**Tech Stack:** Vue2 + TDesign + Less
|
||||
|
||||
---
|
||||
|
||||
## 文件变更总览
|
||||
|
||||
| 操作 | 文件路径 |
|
||||
|------|---------|
|
||||
| 创建 | `src/pages/index/views/gzt/index.vue` |
|
||||
| 创建 | `src/pages/index/views/gzt/components/StatsCard.vue` |
|
||||
| 创建 | `src/pages/index/views/gzt/components/QuickActions.vue` |
|
||||
| 创建 | `src/pages/index/views/gzt/components/PolicyNews.vue` |
|
||||
| 创建 | `src/pages/index/views/gzt/config.js` |
|
||||
| 修改 | `src/pages/index/views/glxtSy/glxtSy.vue` |
|
||||
| 修改 | `src/pages/index/router/routes.js` |
|
||||
|
||||
---
|
||||
|
||||
## Task 1: 创建工作台目录结构和配置文件
|
||||
|
||||
**文件:**
|
||||
- 创建: `src/pages/index/views/gzt/config.js`
|
||||
- 创建: `src/pages/index/views/gzt/components/`
|
||||
- 创建: `src/pages/index/views/gzt/index.vue`
|
||||
|
||||
- [ ] **Step 1: 创建 views/gzt 目录结构**
|
||||
|
||||
在 `src/pages/index/views/gzt/` 下创建：
|
||||
- `config.js` - 工作台侧边栏菜单配置
|
||||
- `components/` - 子组件目录
|
||||
- `index.vue` - 工作台主视图
|
||||
|
||||
config.js 内容：
|
||||
```javascript
|
||||
// 工作台侧边栏菜单配置
|
||||
// 注意：name 字段对应路由名，路由注册在 routes.js 中
|
||||
// "绿色交易"、"消息中心" 使用已注册路由；其余为待注册占位路由
|
||||
export default {
|
||||
// 业务导航分组
|
||||
bizMenu: [
|
||||
{
|
||||
id: 'gzt',
|
||||
title: '工作台',
|
||||
icon: 'home',
|
||||
name: 'gzt',
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
id: 'gaikuang',
|
||||
title: '概览',
|
||||
icon: 'dashboard',
|
||||
name: 'gaikuang', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'wdgj',
|
||||
title: '我的供给',
|
||||
icon: 'list',
|
||||
name: 'wdgj', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'wdxq',
|
||||
title: '我的需求',
|
||||
icon: 'search',
|
||||
name: 'wdxq', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'lsjy',
|
||||
title: '绿色交易',
|
||||
icon: 'swap',
|
||||
name: 'lsjy', // 已注册路由
|
||||
},
|
||||
{
|
||||
id: 'ddgl',
|
||||
title: '订单管理',
|
||||
icon: 'order',
|
||||
name: 'ddgl', // TODO: 待注册路由
|
||||
},
|
||||
],
|
||||
// 账号管理分组（对应原型中的分隔线下半部分）
|
||||
accountMenu: [
|
||||
{
|
||||
id: 'zhgl',
|
||||
title: '账户设置',
|
||||
icon: 'setting',
|
||||
name: 'zhgl', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'xxxzx',
|
||||
title: '消息中心',
|
||||
icon: 'mail',
|
||||
name: 'ggwhgl', // 已注册路由（对应消息中心）
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: 创建 StatsCard 统计卡片组件
|
||||
|
||||
**文件:**
|
||||
- 创建: `src/pages/index/views/gzt/components/StatsCard.vue`
|
||||
|
||||
- [ ] **Step 1: 创建 StatsCard.vue**
|
||||
|
||||
根据原型，工作台有4个统计卡片：
|
||||
|
||||
| 卡片 | 数值 | 圆形颜色 | 跳转路由 |
|
||||
|------|------|---------|---------|
|
||||
| 我的供给 | 5条 | 亮绿色 #E8FFEA + 绿色边框 #48C666 | `/yhzx/wdgj`（待注册，见 Task 7）|
|
||||
| 我的需求 | 2条 | 灰色 #EDEDED | `/yhzx/wdxq`（待注册，见 Task 7）|
|
||||
| 绿色交易 | 1条 | 灰色 #EDEDED | `/yhzx/lsjy`（已注册）|
|
||||
| 待处理消息 | 6条 | 灰色 #EDEDED | `/yhzx/ggwhgl`（已注册）|
|
||||
|
||||
组件 Props：
|
||||
```javascript
|
||||
props: {
|
||||
title: String, // 卡片标题
|
||||
count: [String, Number], // 数值
|
||||
unit: { type: String, default: '条' }, // 单位
|
||||
bgColor: { type: String, default: '#EDEDED' }, // 圆形背景色
|
||||
borderColor: { type: String, default: 'transparent' }, // 边框色（仅"我的供给"有绿色边框）
|
||||
iconName: String, // TDesign 图标名称
|
||||
to: String, // 跳转路由
|
||||
}
|
||||
```
|
||||
|
||||
**图标规范：** 使用 TDesign 图标组件 `<t-icon name={iconName} />`，各卡片对应图标：
|
||||
| 卡片 | 图标名称 |
|
||||
|------|---------|
|
||||
| 我的供给 | `upload` 或 `publish` |
|
||||
| 我的需求 | `request` 或 `edit` |
|
||||
| 绿色交易 | `swap` |
|
||||
| 待处理消息 | `mail` |
|
||||
|
||||
样式要点：
|
||||
- 圆形背景 56×56px，使用 `border-radius: 50%`
|
||||
- 数字使用 26px 加粗字体
|
||||
- "条"使用 12px 灰色字体
|
||||
- 卡片宽度 116px，整体高度 56px
|
||||
- 使用 `cursor: pointer`，hover 时有轻微放大效果
|
||||
|
||||
---
|
||||
|
||||
## Task 3: 创建 QuickActions 常用功能组件
|
||||
|
||||
**文件:**
|
||||
- 创建: `src/pages/index/views/gzt/components/QuickActions.vue`
|
||||
|
||||
- [ ] **Step 1: 创建 QuickActions.vue**
|
||||
|
||||
四个快捷功能按钮（根据原型），使用现有实际注册路由：
|
||||
|
||||
| 按钮 | 路由 | 说明 |
|
||||
|------|------|------|
|
||||
| 发布服务 | `/yhzx/tfwgj` | 现有碳服务供给页，可复用 |
|
||||
| 发布数据 | `/yhzx/tfwgj?action=publishData` | 复用碳服务供给页，action=publishData |
|
||||
| 发布需求 | `/yhzx/tfwxq` | 现有碳服务需求页 |
|
||||
| 质证申请 | `/yhzx/zzgl` | **新建路由**，对应原型"质证申请"功能 |
|
||||
|
||||
**注意：** `/yhzx/zzgl` 路由需在 routes.js 中注册（见 Task 7）。
|
||||
|
||||
样式要点：
|
||||
- 使用 `t-button` 组件
|
||||
- 按钮样式：白色背景 + 绿色边框 (#48C666) + 绿色文字
|
||||
- 横向排列，gap 16px
|
||||
- 按钮宽度自适应文字，padding 12px 24px
|
||||
|
||||
---
|
||||
|
||||
## Task 4: 创建 PolicyNews 政策公告组件
|
||||
|
||||
**文件:**
|
||||
- 创建: `src/pages/index/views/gzt/components/PolicyNews.vue`
|
||||
|
||||
- [ ] **Step 1: 创建 PolicyNews.vue**
|
||||
|
||||
三条政策公告列表，右侧边栏样式（位置 x=1099, y=283）。
|
||||
|
||||
每条公告包含：
|
||||
- 左侧竖线标记（4px宽）：不同颜色区分重要程度
|
||||
- 第一条：蓝色 #3491FA
|
||||
- 第二条：黄色 #FADC19
|
||||
- 第三条：灰色 #C7C7C7
|
||||
- 标题文字（14px，#666666），超出宽度时换行（line-height 21px）
|
||||
|
||||
公告示例数据：
|
||||
```javascript
|
||||
newsList: [
|
||||
{
|
||||
id: 1,
|
||||
title: '关于做好2026年全国碳排放权交易市场有关工作的通知',
|
||||
leftBorderColor: '#3491FA',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉，碳…',
|
||||
leftBorderColor: '#FADC19',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '2026年全国碳市场重点工作来了!从存证到清缴,一步都不能少',
|
||||
leftBorderColor: '#C7C7C7',
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
**组件 Props：**
|
||||
```javascript
|
||||
props: {
|
||||
title: String, // 区域标题，如"政策公告"
|
||||
newsList: { // 公告列表
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
}
|
||||
newsList 项结构：`{ id, title, leftBorderColor }`
|
||||
|
||||
区域标题 "政策公告" - 18px 加粗，位置在公告列表上方。
|
||||
|
||||
---
|
||||
|
||||
## Task 5: 创建工作台主视图 index.vue
|
||||
|
||||
**文件:**
|
||||
- 创建: `src/pages/index/views/gzt/index.vue`
|
||||
|
||||
- [ ] **Step 1: 创建工作台主视图 index.vue**
|
||||
|
||||
根据原型布局（页面宽度 1366px）：
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 欢迎回来 │
|
||||
│ ─────────────────────────────────────────────────────────── │
|
||||
│ [我的供给5条] [我的需求2条] [绿色交易1条] [待处理消息6条] │
|
||||
│ ─────────────────────────────────────────────────────────── │
|
||||
│ │
|
||||
│ 常用功能 │
|
||||
│ [发布服务] [发布数据] [发布需求] [质证申请] │
|
||||
│ ┌──────────────────┐ │
|
||||
│ │ 政策公告 │ │
|
||||
│ │ ▌公告1 │ │
|
||||
│ │ ▌公告2 │ │
|
||||
│ │ ▌公告3 │ │
|
||||
│ └──────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
布局要点：
|
||||
- 主内容区使用 Flexbox，左右分布
|
||||
- 左侧：欢迎语 + 统计卡片（横向4列，gap 20px）+ 常用功能（标题 + 按钮组）
|
||||
- 右侧：政策公告区（固定宽度 249px，位置 x=1099）
|
||||
- 统计卡片区域有灰色分隔线（横向，从欢迎语下方到右侧边缘）
|
||||
- 常用功能区域也有灰色分隔线
|
||||
|
||||
样式要点：
|
||||
- "欢迎回来"：18px，#666666，颜色
|
||||
- 页面背景色：#F5F5F5（与侧边栏背景一致）
|
||||
- 内容区白色背景卡片，白色内边距
|
||||
- 使用 Less 嵌套语法，`lang="less" scoped`
|
||||
|
||||
---
|
||||
|
||||
## Task 6: 重构 glxtSy.vue 侧边栏菜单
|
||||
|
||||
**文件:**
|
||||
- 修改: `src/pages/index/views/glxtSy/glxtSy.vue`
|
||||
|
||||
- [ ] **Step 1: 更新 cdList 菜单配置**
|
||||
|
||||
将现有 `cdList` 重构为与原型一致的分组结构，使用 `config.js` 中的配置：
|
||||
|
||||
```javascript
|
||||
import gztConfig from './gzt/config';
|
||||
|
||||
data() {
|
||||
return {
|
||||
// ... existing data
|
||||
cdList: [
|
||||
// 上部分：业务导航（与原型"工作台"分组一致）
|
||||
...gztConfig.bizMenu,
|
||||
// 分隔线（通过CSS实现，不作为菜单项）
|
||||
// 下部分：账号管理
|
||||
...gztConfig.accountMenu,
|
||||
],
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 添加"工作台"高亮逻辑**
|
||||
|
||||
当前 `defaultValue` 设为 `'qyrz'`，需改为根据路由动态判断：
|
||||
```javascript
|
||||
defaultValue: 'gzt', // 默认选中工作台
|
||||
```
|
||||
|
||||
- [ ] **Step 3: 更新 gotoPage 方法**
|
||||
|
||||
确保跳转到工作台子路由时侧边栏正确高亮。
|
||||
|
||||
**布局说明：** `glxtSy.vue` 自身提供左侧侧边栏和右侧内容区，顶部导航由 `Main.vue` 提供（固定 64px 高度），Footer 在 glxtSy.vue 中已被注释掉（无需处理）。工作台视图不需要额外的 Nav 或 Footer 组件。
|
||||
|
||||
**原型顶部导航说明：** 原型 `prd/工作台.html` 中的顶部导航（可信碳信息网 Logo、菜单项、用户信息、"+ 发布信息"按钮）属于全局布局层，由 `Main.vue` 和 `new-nav/index.vue` 组件提供，不在工作台视图范围内。
|
||||
|
||||
---
|
||||
|
||||
## Task 7: 配置工作台路由
|
||||
|
||||
**文件:**
|
||||
- 修改: `src/pages/index/router/routes.js`
|
||||
|
||||
- [ ] **Step 1: 添加 gzt 路由 lazy-load 函数**
|
||||
|
||||
在 routes.js 顶部添加：
|
||||
```javascript
|
||||
// 工作台
|
||||
function gzt() {
|
||||
return import(/* webpackChunkName: "gzt" */ '@/pages/index/views/gzt/index.vue');
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: 在 yhzx 路由的 children 中添加 gzt 子路由**
|
||||
|
||||
在 `yhzx` 路由的 `children` 数组中添加：
|
||||
```javascript
|
||||
{
|
||||
path: 'gzt',
|
||||
component: gzt,
|
||||
name: 'gzt',
|
||||
meta: {
|
||||
title: '工作台',
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
注意：现有 `yhzx` 路由使用父子路由结构（`children: [...]`），子路由通过 `router-view` 在 `glxtSy.vue` 右侧内容区渲染，因此只需要添加子路由即可。
|
||||
|
||||
- [ ] **Step 3: 添加 wdgj（我的供给）路由**
|
||||
|
||||
在 `yhzx` 路由的 `children` 数组中添加：
|
||||
```javascript
|
||||
{
|
||||
path: 'wdgj',
|
||||
component: gzt, // 复用 gzt 组件作为占位视图，后续替换为我的供给页
|
||||
name: 'wdgj',
|
||||
meta: {
|
||||
title: '我的供给',
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
- [ ] **Step 4: 添加 wdxq（我的需求）路由**
|
||||
|
||||
在 `yhzx` 路由的 `children` 数组中添加：
|
||||
```javascript
|
||||
{
|
||||
path: 'wdxq',
|
||||
component: gzt, // 复用 gzt 组件作为占位视图，后续替换为我的需求页
|
||||
name: 'wdxq',
|
||||
meta: {
|
||||
title: '我的需求',
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
- [ ] **Step 5: 添加 zzgl（质证申请）路由**
|
||||
|
||||
在 `yhzx` 路由的 `children` 数组末尾添加（对应快捷功能"质证申请"按钮）：
|
||||
```javascript
|
||||
{
|
||||
path: 'zzgl',
|
||||
component: gzt, // 复用 gzt 组件作为占位视图，后续替换为质证申请页
|
||||
name: 'zzgl',
|
||||
meta: {
|
||||
title: '质证申请',
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
**本计划范围说明：** 工作台侧边栏菜单中的"概览"、"我的供给"、"我的需求"、"订单管理"在本计划中仅注册路由占位，视图组件在后续计划中实现。当前计划只实现工作台主视图（gzt/index.vue）及必要的子路由配置。
|
||||
|
||||
---
|
||||
|
||||
## 依赖关系
|
||||
|
||||
```
|
||||
Task 1 (目录结构/config) ← 无依赖，最先完成
|
||||
Task 7 (路由：gzt/wdgj/wdxq/zzgl) ← 依赖 Task 1
|
||||
Task 2 (StatsCard) ← 依赖 Task 1, 7
|
||||
Task 3 (QuickActions) ← 依赖 Task 1, 7
|
||||
Task 4 (PolicyNews) ← 依赖 Task 1
|
||||
Task 5 (index.vue) ← 依赖 Task 2, 3, 4
|
||||
Task 6 (侧边栏重构) ← 依赖 Task 1
|
||||
```
|
||||
|
||||
**建议执行顺序：** Task 1 → Task 7 → Task 2/3/4/5/6（可并行）
|
||||
|
||||
**说明：** Task 7 需先于组件创建任务（Task 2-6）完成，因组件中 `this.$router.push()` 调用依赖对应路由已注册。Task 4 (PolicyNews) 无路由依赖，可与 Task 2/3 并行执行。
|
||||
@ -90,6 +90,11 @@ function lsjy() {
|
||||
return import('@/pages/index/views/lsjy/lsjy.vue');
|
||||
}
|
||||
|
||||
// 工作台
|
||||
function gzt() {
|
||||
return import(/* webpackChunkName: "gzt" */ '@/pages/index/views/gzt/index.vue');
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -156,6 +161,10 @@ export default [
|
||||
disableBack: true,
|
||||
},
|
||||
children: [
|
||||
{ path: 'gzt', component: gzt, name: 'gzt', meta: { title: '工作台' } },
|
||||
{ path: 'wdgj', component: gzt, name: 'wdgj', meta: { title: '我的供给' } },
|
||||
{ path: 'wdxq', component: gzt, name: 'wdxq', meta: { title: '我的需求' } },
|
||||
{ path: 'zzgl', component: gzt, name: 'zzgl', meta: { title: '质证申请' } },
|
||||
{ path: 'qyrenzheng', component: qyrenzheng, name: 'qyrenzheng', meta: { title: '企业认证' } },
|
||||
{ path: 'qyruzhu', component: qyruzhu, name: 'qyruzhu', meta: { title: '企业入驻' } },
|
||||
{ path: 'tfwgj', component: tfwgj, name: 'tfwgj', meta: { title: '碳服务供给' } },
|
||||
|
||||
@ -75,11 +75,17 @@ export default {
|
||||
grxxShow: false,
|
||||
hoverxxzxTimeout: null,
|
||||
menuList,
|
||||
activeCompo: 'qyrz', // 默认
|
||||
activeCompo: 'gzt', // 默认
|
||||
collapsed: false,
|
||||
expanded: ['qyrz'],
|
||||
defaultValue: 'qyrz',
|
||||
expanded: ['gzt'],
|
||||
defaultValue: 'gzt',
|
||||
cdList: [
|
||||
{
|
||||
id: 'gzt',
|
||||
title: '工作台',
|
||||
icon: 'user',
|
||||
name: 'gzt',
|
||||
},
|
||||
{
|
||||
id: 'qyrenzheng',
|
||||
title: '企业认证',
|
||||
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="account-shortcuts">
|
||||
<div class="shortcuts-grid">
|
||||
<button
|
||||
v-for="(item, index) in shortcuts"
|
||||
:key="item.label"
|
||||
class="shortcut-item"
|
||||
:style="{ '--delay': `${index * 0.06}s` }"
|
||||
@click="handleClick(item.to)"
|
||||
>
|
||||
<div class="item-icon" :style="{ background: item.bgColor, color: item.color }">
|
||||
<t-icon :name="item.icon" />
|
||||
</div>
|
||||
<span class="item-label">{{ item.label }}</span>
|
||||
<div class="item-arrow">
|
||||
<t-icon name="arrow-right" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AccountShortcuts',
|
||||
data() {
|
||||
return {
|
||||
shortcuts: [
|
||||
{ label: '消息中心', icon: 'mail', to: '/yhzx/ggwhgl', bgColor: '#FCE4EC', color: '#E91E63' },
|
||||
{ label: '我的认证', icon: 'user', to: '/yhzx/qyrenzheng', bgColor: '#E3F2FD', color: '#2196F3' },
|
||||
{ label: '账号编辑', icon: 'edit', to: '/yhzx/qyrenzheng', bgColor: '#FFF8E1', color: '#FF9800' },
|
||||
{ label: '修改密码', icon: 'lock-on', to: '/yhzx/qyrenzheng', bgColor: '#E8F5E9', color: '#4CAF50' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(to) {
|
||||
this.$router.push(to);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.account-shortcuts {
|
||||
.shortcuts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 20px 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 14px;
|
||||
animation: fadeIn 0.4s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, @green-primary, @green-dark);
|
||||
content: '';
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: @shadow-hover;
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
display: flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 22px;
|
||||
border-radius: 12px;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: @green-primary;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
transition: all 0.3s ease;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.account-shortcuts .shortcuts-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.account-shortcuts .shortcuts-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
258
txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
Normal file
258
txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
Normal file
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="policy-news">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon">
|
||||
<t-icon name="notification" />
|
||||
</div>
|
||||
<h3 class="header-title">{{ title }}</h3>
|
||||
<span class="header-tag">政策</span>
|
||||
</div>
|
||||
<div class="news-list">
|
||||
<div
|
||||
v-for="(item, index) in newsList"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
:style="{ '--delay': `${index * 0.08}s` }"
|
||||
>
|
||||
<div class="item-indicator">
|
||||
<div class="indicator-dot" :style="{ background: item.leftBorderColor }"></div>
|
||||
<div class="indicator-line" :style="{ background: item.leftBorderColor }"></div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<div class="item-meta">
|
||||
<span class="meta-tag" :style="{ background: `${item.leftBorderColor}20`, color: item.leftBorderColor }">
|
||||
{{ item.tag || '重要' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<span class="more-link">
|
||||
查看全部
|
||||
<t-icon name="arrow-right" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PolicyNews',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '政策公告',
|
||||
},
|
||||
newsList: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
id: 1,
|
||||
title: '关于做好2026年全国碳排放权交易市场有关工作的通知',
|
||||
leftBorderColor: '#3491FA',
|
||||
tag: '官方',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉',
|
||||
leftBorderColor: '#F9A825',
|
||||
tag: '研究',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '2026年全国碳市场重点工作：从存证到清缴，一步都不能少',
|
||||
leftBorderColor: '#78909C',
|
||||
tag: '解读',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@bg-card: #FFFFFF;
|
||||
@bg-panel: #F8FAFB;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||
@shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.policy-news {
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border-radius: 16px;
|
||||
box-shadow: @shadow-soft;
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
padding: 18px 20px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-tag {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
color: @green-primary;
|
||||
background: @green-light;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
padding: 12px 20px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed @border-light;
|
||||
animation: slideIn 0.4s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
transition: all 0.25s ease;
|
||||
align-items: stretch;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(4px);
|
||||
|
||||
.item-title {
|
||||
color: @green-dark;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.item-indicator {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
padding-top: 4px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.indicator-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.indicator-line {
|
||||
width: 2px;
|
||||
margin-top: 6px;
|
||||
border-radius: 1px;
|
||||
opacity: 0.4;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
padding-left: 12px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
display: box;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: @text-dark;
|
||||
box-orient: vertical;
|
||||
transition: color 0.25s ease;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
.meta-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
padding: 12px 20px;
|
||||
background: @bg-panel;
|
||||
border-top: 1px solid @border-light;
|
||||
|
||||
.more-link {
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: @green-primary;
|
||||
cursor: pointer;
|
||||
transition: gap 0.2s ease;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="quick-actions">
|
||||
<button
|
||||
v-for="(action, index) in actions"
|
||||
:key="action.label"
|
||||
class="action-btn"
|
||||
:class="`action-btn--${index}`"
|
||||
@click="handleClick(action.to)"
|
||||
>
|
||||
<span class="btn-icon">
|
||||
<t-icon :name="action.icon" />
|
||||
</span>
|
||||
<span class="btn-label">{{ action.label }}</span>
|
||||
<span class="btn-arrow">
|
||||
<t-icon name="arrow-right" />
|
||||
</span>
|
||||
<div class="btn-bg"></div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'QuickActions',
|
||||
data() {
|
||||
return {
|
||||
actions: [
|
||||
{ label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload' },
|
||||
{ label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload' },
|
||||
{ label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit' },
|
||||
{ label: '质证申请', to: '/yhzx/zzgl', icon: 'certificate' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(to) {
|
||||
this.$router.push(to);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@green-glow: rgba(72, 198, 102, 0.2);
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(72, 198, 102, 0.3);
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.btn-bg {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background: linear-gradient(135deg, @green-light 0%, #fff 100%);
|
||||
border: 2px solid @green-primary;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px 0 0 10px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-label {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 10px 14px 10px 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: @green-dark;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
border: 2px solid @green-primary;
|
||||
border-left: none;
|
||||
border-radius: 0 10px 10px 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
color: @green-primary;
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.btn-bg {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 16px @green-glow;
|
||||
}
|
||||
|
||||
.btn-label {
|
||||
padding-left: 10px;
|
||||
color: @green-primary;
|
||||
}
|
||||
|
||||
.btn-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
txw-mhzc-web/src/pages/index/views/gzt/components/StatsCard.vue
Normal file
203
txw-mhzc-web/src/pages/index/views/gzt/components/StatsCard.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="stats-card" :class="{ 'is-clickable': to }" @click="goTo">
|
||||
<div class="card-glow"></div>
|
||||
<div class="card-inner">
|
||||
<div class="card-icon-wrap" :style="iconWrapStyle">
|
||||
<div class="icon-inner" :style="iconInnerStyle">
|
||||
<t-icon :name="iconName" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-value">
|
||||
<span class="value-num">{{ count }}</span>
|
||||
<span class="value-unit">{{ unit }}</span>
|
||||
</div>
|
||||
<div class="card-title">{{ title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-shine"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StatsCard',
|
||||
props: {
|
||||
title: String,
|
||||
count: [String, Number],
|
||||
unit: { type: String, default: '条' },
|
||||
bgColor: { type: String, default: '#E8F5E9' },
|
||||
borderColor: { type: String, default: '#48C666' },
|
||||
iconName: String,
|
||||
to: String,
|
||||
},
|
||||
computed: {
|
||||
iconWrapStyle() {
|
||||
return {
|
||||
background: `linear-gradient(135deg, ${this.bgColor} 0%, ${this.lightenColor(this.bgColor)} 100%)`,
|
||||
boxShadow: this.borderColor !== 'transparent'
|
||||
? `0 8px 24px rgba(72, 198, 102, 0.25), inset 0 1px 0 rgba(255,255,255,0.4)`
|
||||
: `0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4)`,
|
||||
};
|
||||
},
|
||||
iconInnerStyle() {
|
||||
return {
|
||||
color: this.borderColor !== 'transparent' ? this.borderColor : '#666',
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
lightenColor(hex) {
|
||||
// Simple lighten: blend with white
|
||||
const r = parseInt(hex.slice(1, 3), 16);
|
||||
const g = parseInt(hex.slice(3, 5), 16);
|
||||
const b = parseInt(hex.slice(5, 7), 16);
|
||||
return `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
|
||||
},
|
||||
goTo() {
|
||||
if (this.to) {
|
||||
this.$router.push(this.to);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@bg-card: #FFFFFF;
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 8px 32px rgba(72, 198, 102, 0.18);
|
||||
|
||||
.stats-card {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
background: @bg-card;
|
||||
border-radius: 16px;
|
||||
box-shadow: @shadow-soft;
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.is-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
box-shadow: @shadow-hover;
|
||||
|
||||
.card-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-shine {
|
||||
opacity: 1;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(circle, rgba(72, 198, 102, 0.15) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 16px 18px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
display: flex;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon-inner {
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
display: flex;
|
||||
margin-bottom: 4px;
|
||||
align-items: baseline;
|
||||
gap: 3px;
|
||||
|
||||
.value-num {
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: @text-muted;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-shine {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
txw-mhzc-web/src/pages/index/views/gzt/config.js
Normal file
60
txw-mhzc-web/src/pages/index/views/gzt/config.js
Normal file
@ -0,0 +1,60 @@
|
||||
// 工作台侧边栏菜单配置
|
||||
// 注意：name 字段对应路由名，路由注册在 routes.js 中
|
||||
// "绿色交易"、"消息中心" 使用已注册路由；其余为待注册占位路由
|
||||
export default {
|
||||
// 业务导航分组
|
||||
bizMenu: [
|
||||
{
|
||||
id: 'gzt',
|
||||
title: '工作台',
|
||||
icon: 'home',
|
||||
name: 'gzt',
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
id: 'gaikuang',
|
||||
title: '概览',
|
||||
icon: 'dashboard',
|
||||
name: 'gaikuang', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'wdgj',
|
||||
title: '我的供给',
|
||||
icon: 'list',
|
||||
name: 'wdgj', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'wdxq',
|
||||
title: '我的需求',
|
||||
icon: 'search',
|
||||
name: 'wdxq', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'lsjy',
|
||||
title: '绿色交易',
|
||||
icon: 'swap',
|
||||
name: 'lsjy', // 已注册路由
|
||||
},
|
||||
{
|
||||
id: 'ddgl',
|
||||
title: '订单管理',
|
||||
icon: 'order',
|
||||
name: 'ddgl', // TODO: 待注册路由
|
||||
},
|
||||
],
|
||||
// 账号管理分组（对应原型中的分隔线下半部分）
|
||||
accountMenu: [
|
||||
{
|
||||
id: 'zhgl',
|
||||
title: '账户设置',
|
||||
icon: 'setting',
|
||||
name: 'zhgl', // TODO: 待注册路由
|
||||
},
|
||||
{
|
||||
id: 'xxxzx',
|
||||
title: '消息中心',
|
||||
icon: 'mail',
|
||||
name: 'ggwhgl', // 已注册路由（对应消息中心）
|
||||
},
|
||||
],
|
||||
};
|
||||
435
txw-mhzc-web/src/pages/index/views/gzt/index.vue
Normal file
435
txw-mhzc-web/src/pages/index/views/gzt/index.vue
Normal file
@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<div class="gzt-page">
|
||||
<!-- 装饰背景 -->
|
||||
<div class="bg-decoration">
|
||||
<div class="deco-circle deco-circle--1"></div>
|
||||
<div class="deco-circle deco-circle--2"></div>
|
||||
<div class="deco-dots"></div>
|
||||
</div>
|
||||
|
||||
<div class="gzt-container">
|
||||
<!-- 欢迎区域 -->
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-left">
|
||||
<div class="welcome-badge">
|
||||
<t-icon name="leaf" />
|
||||
<span>碳信网</span>
|
||||
</div>
|
||||
<h1 class="welcome-title">欢迎回来</h1>
|
||||
<p class="welcome-subtitle">今天是碳市场活跃日，把握每一个交易机会</p>
|
||||
</div>
|
||||
<div class="welcome-right">
|
||||
<div class="time-widget">
|
||||
<div class="time-date">{{ currentDate }}</div>
|
||||
<div class="time-weekday">{{ currentWeekday }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片区域 -->
|
||||
<div class="stats-section">
|
||||
<div class="section-header">
|
||||
<div class="header-line"></div>
|
||||
<span class="section-label">数据概览</span>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<StatsCard
|
||||
title="我的供给"
|
||||
:count="5"
|
||||
unit="条"
|
||||
bgColor="#E8FFEA"
|
||||
borderColor="#48C666"
|
||||
iconName="upload"
|
||||
to="/yhzx/wdgj"
|
||||
/>
|
||||
<StatsCard
|
||||
title="我的需求"
|
||||
:count="2"
|
||||
unit="条"
|
||||
bgColor="#E3F2FD"
|
||||
borderColor="#2196F3"
|
||||
iconName="request"
|
||||
to="/yhzx/wdxq"
|
||||
/>
|
||||
<StatsCard
|
||||
title="绿色交易"
|
||||
:count="1"
|
||||
unit="条"
|
||||
bgColor="#FFF8E1"
|
||||
borderColor="#FF9800"
|
||||
iconName="swap"
|
||||
to="/yhzx/lsjy"
|
||||
/>
|
||||
<StatsCard
|
||||
title="待处理消息"
|
||||
:count="6"
|
||||
unit="条"
|
||||
bgColor="#FCE4EC"
|
||||
borderColor="#E91E63"
|
||||
iconName="mail"
|
||||
to="/yhzx/ggwhgl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧：功能区 -->
|
||||
<div class="left-panel">
|
||||
<!-- 常用功能 -->
|
||||
<div class="panel-card">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon">
|
||||
<t-icon name="app" />
|
||||
</div>
|
||||
<h2 class="panel-title">常用功能</h2>
|
||||
<p class="panel-desc">快速访问核心功能</p>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<QuickActions />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账号管理 -->
|
||||
<div class="panel-card account-panel">
|
||||
<div class="panel-header">
|
||||
<div class="header-icon header-icon--account">
|
||||
<t-icon name="setting" />
|
||||
</div>
|
||||
<h2 class="panel-title">账号管理</h2>
|
||||
<p class="panel-desc">账户设置与安全</p>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<AccountShortcuts />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：政策公告 -->
|
||||
<div class="right-panel">
|
||||
<PolicyNews />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StatsCard from './components/StatsCard.vue';
|
||||
import QuickActions from './components/QuickActions.vue';
|
||||
import PolicyNews from './components/PolicyNews.vue';
|
||||
import AccountShortcuts from './components/AccountShortcuts.vue';
|
||||
|
||||
export default {
|
||||
name: 'GztIndex',
|
||||
components: {
|
||||
StatsCard,
|
||||
QuickActions,
|
||||
PolicyNews,
|
||||
AccountShortcuts,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDate: '',
|
||||
currentWeekday: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.updateDateTime();
|
||||
},
|
||||
methods: {
|
||||
updateDateTime() {
|
||||
const now = new Date();
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
|
||||
this.currentWeekday = weekdays[now.getDay()];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@green-primary: #48C666;
|
||||
@green-dark: #2D8A45;
|
||||
@green-light: #E8FFEA;
|
||||
@green-soft: rgba(72, 198, 102, 0.08);
|
||||
@text-dark: #1A2B3C;
|
||||
@text-muted: #6B7C8D;
|
||||
@text-light: #94A3B8;
|
||||
@bg-page: #F4F7F6;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
@shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
|
||||
|
||||
// ========== 页面布局 ==========
|
||||
.gzt-page {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding: 28px 32px;
|
||||
overflow: hidden;
|
||||
background: @bg-page;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
inset: 0;
|
||||
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
|
||||
&--1 {
|
||||
top: -120px;
|
||||
right: -80px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(72, 198, 102, 0.12) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, rgba(45, 138, 69, 0.08) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
&--dots {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gzt-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ========== 欢迎区域 ==========
|
||||
.welcome-section {
|
||||
display: flex;
|
||||
padding: 28px 32px;
|
||||
margin-bottom: 28px;
|
||||
background: linear-gradient(135deg, #FFF 0%, #FAFFFE 50%, @green-soft 100%);
|
||||
border: 1px solid rgba(72, 198, 102, 0.1);
|
||||
border-radius: 20px;
|
||||
box-shadow: @shadow-soft;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-left {
|
||||
.welcome-badge {
|
||||
display: inline-flex;
|
||||
padding: 6px 14px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @green-dark;
|
||||
background: @green-light;
|
||||
border: 1px solid rgba(72, 198, 102, 0.2);
|
||||
border-radius: 20px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
.time-widget {
|
||||
padding: 12px 16px;
|
||||
text-align: right;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 12px;
|
||||
|
||||
.time-date {
|
||||
margin-bottom: 2px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.time-weekday {
|
||||
font-size: 12px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 统计卡片区域 ==========
|
||||
.stats-section {
|
||||
margin-bottom: 28px;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.header-line {
|
||||
width: 32px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, @green-primary, @green-dark);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: @text-muted;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// ========== 主要内容区 ==========
|
||||
.main-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 24px;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 20px;
|
||||
box-shadow: @shadow-card;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 24px 28px 20px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.header-icon {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--account {
|
||||
background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);
|
||||
box-shadow: 0 4px 12px rgba(120, 144, 156, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.panel-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
// ========== 动画 ==========
|
||||
@keyframes fadeSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 响应式 ==========
|
||||
@media (max-width: 1024px) {
|
||||
.main-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gzt-page {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
margin-top: 16px;
|
||||
|
||||
.time-widget {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user