Compare commits
8 Commits
25ee16640e
...
56172e39e3
| Author | SHA1 | Date | |
|---|---|---|---|
| 56172e39e3 | |||
|
d301ad5a9c | ||
|
|
4229d445f9 | ||
| d85aadcf9a | |||
| f238c23e19 | |||
|
|
d456209b2a | ||
|
|
b5dbf326cb | ||
|
|
f4a83c8f9a |
@ -1,7 +1,9 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(yarn install:*)"
|
||||
"Bash(yarn install:*)",
|
||||
"WebFetch(domain:)",
|
||||
"Bash(git checkout:*)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
55
.gitignore
vendored
55
.gitignore
vendored
@ -1 +1,54 @@
|
||||
prd/
|
||||
# Compiled class file
|
||||
*.class
|
||||
target
|
||||
classes
|
||||
|
||||
prd
|
||||
|
||||
# Log file
|
||||
*.log
|
||||
log
|
||||
|
||||
# BlueJ files
|
||||
*.ctxt
|
||||
|
||||
# Mobile Tools for Java (J2ME)
|
||||
.mtj.tmp/
|
||||
|
||||
# Package Files #
|
||||
*.war
|
||||
*.ear
|
||||
*.zip
|
||||
*.tar.gz
|
||||
*.rar
|
||||
*.iml
|
||||
.idea
|
||||
|
||||
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
|
||||
hs_err_pid*
|
||||
|
||||
/.settings/
|
||||
.classpath
|
||||
.factorypath
|
||||
.project
|
||||
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
/test/unit/coverage/
|
||||
/test/e2e/reports/
|
||||
selenium-debug.log
|
||||
debug.log
|
||||
ewm.png
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.settings
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
||||
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 并行执行。
|
||||
@ -1196,18 +1196,6 @@
|
||||
"@types/conventional-commits-parser" "^5.0.0"
|
||||
chalk "^5.3.0"
|
||||
|
||||
"@cssyq/ggzc-web@^1.0.7":
|
||||
version "1.0.8"
|
||||
resolved "http://10.23.10.90:4873/@cssyq%2fggzc-web/-/ggzc-web-1.0.8.tgz#aa73093ae02914fda1b283809eac031b09046d2e"
|
||||
integrity sha512-ERk8chEGrvMqMAn/ObYzenAQUeEWL5RRHBYDH+ueIKPl9g8mIMMcrwJNuK+OvNbvNti18RxkAURy6uaHoqnGSQ==
|
||||
dependencies:
|
||||
vue-cli-service "^5.0.10"
|
||||
|
||||
"@fortawesome/fontawesome-free@^7.0.1":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz#188c1053ce422ad1f934d7df242a973fcb89636d"
|
||||
integrity sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.3"
|
||||
resolved "http://10.23.10.90:4873/@gar%2fpromisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
@ -13249,11 +13237,6 @@ vue-cli-plugin-style-resources-loader@~0.1.5:
|
||||
resolved "http://10.23.10.90:4873/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz#3e95f4df41f5408e1255664690698c0533648109"
|
||||
integrity sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ==
|
||||
|
||||
vue-cli-service@^5.0.10:
|
||||
version "5.0.10"
|
||||
resolved "http://10.23.10.90:4873/vue-cli-service/-/vue-cli-service-5.0.10.tgz#1ae10365dec4539358cb4860cd5876f93faf16e3"
|
||||
integrity sha512-j4+wxqjaHsgphWsQsDs0ET1TWSu+dW5syxk5MloTp6BsQ9dpN+SB0nq253thS6konMC+YiQLHxbf73ytrTHoRA==
|
||||
|
||||
vue-demi@^0.13.11:
|
||||
version "0.13.11"
|
||||
resolved "http://10.23.10.90:4873/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
|
||||
|
||||
@ -1196,11 +1196,6 @@
|
||||
"@types/conventional-commits-parser" "^5.0.0"
|
||||
chalk "^5.3.0"
|
||||
|
||||
"@fortawesome/fontawesome-free@^7.0.1":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz#188c1053ce422ad1f934d7df242a973fcb89636d"
|
||||
integrity sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.3"
|
||||
resolved "http://10.23.10.90:4873/@gar%2fpromisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
|
||||
@ -1,18 +1,13 @@
|
||||
const eslintConfig = require('@gtff/tdesign-gt-vue/.eslintrc.js');
|
||||
|
||||
const projectRules = {
|
||||
'no-shadow': 0,
|
||||
'import/no-cycle': 0,
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
endOfLine: 'auto',
|
||||
},
|
||||
],
|
||||
};
|
||||
eslintConfig.rules = {
|
||||
...eslintConfig.rules,
|
||||
...projectRules,
|
||||
};
|
||||
|
||||
module.exports = eslintConfig;
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [],
|
||||
rules: {
|
||||
// 关闭所有校验
|
||||
"prettier/prettier": "off",
|
||||
"all": "off",
|
||||
"no-undef": "off",
|
||||
"no-unused-vars": "off",
|
||||
"stylelint/no-unknown-property": "off",
|
||||
"declaration-property-value-disallowed-list": "off"
|
||||
}
|
||||
};
|
||||
2
txw-mhzc-web/.npmrc
Normal file
2
txw-mhzc-web/.npmrc
Normal file
@ -0,0 +1,2 @@
|
||||
registry=http://10.23.10.90:4873/
|
||||
strict-ssl=false
|
||||
4
txw-mhzc-web/.stylelintrc.json
Normal file
4
txw-mhzc-web/.stylelintrc.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"defaultSeverity": "off",
|
||||
"rules":[]
|
||||
}
|
||||
52670
txw-mhzc-web/package-lock.json
generated
Normal file
52670
txw-mhzc-web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -92,10 +92,6 @@
|
||||
"path": "cz-customizable"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": "yarn lint",
|
||||
"src/**/*.{vue,js,scss,less,css,html}": "yarn lint:style"
|
||||
},
|
||||
"changelog": {
|
||||
"emojis": true,
|
||||
"authorName": true,
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { logout, authorize } from '@/pages/index/api/login';
|
||||
import { logout, authorize, init } from '@/pages/index/api/login';
|
||||
import api from '@/pages/index/api/gxzx/index.js';
|
||||
|
||||
export default {
|
||||
@ -56,17 +56,6 @@ export default {
|
||||
return {
|
||||
curPage: "home",
|
||||
loginFlag: false, //是否已完成登录
|
||||
// 路由路径到菜单名的映射
|
||||
routeToMenuMap: {
|
||||
'/home': 'home',
|
||||
'/fwsc': 'fwsc',
|
||||
'/tfwsc': 'fwsc',
|
||||
'/txqsc': 'fwsc',
|
||||
'/tjrsc': 'fwsc',
|
||||
'/tsjsc': 'fwsc',
|
||||
'/yhzx': 'yhzx',
|
||||
'/login': 'login',
|
||||
},
|
||||
|
||||
menuOptions: [
|
||||
{
|
||||
@ -89,8 +78,8 @@ export default {
|
||||
divider: true, //是否显示子菜单分割线
|
||||
needLogin: true, //是否需要登录才能访问
|
||||
clientId: 'client_id_tfwzx',
|
||||
// iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/index', //外部系统链接地址
|
||||
iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query', //外部系统链接地址
|
||||
iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/index', //外部系统链接地址
|
||||
// iframeUrl: 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query', //外部系统链接地址
|
||||
},
|
||||
{
|
||||
name: 'tsjfcg',
|
||||
@ -144,7 +133,6 @@ export default {
|
||||
value: 'tfwsc',
|
||||
content: '碳服务市场',
|
||||
divider: true,
|
||||
parentName: 'fwsc',
|
||||
},
|
||||
{
|
||||
name: 'tjrsc',
|
||||
@ -152,14 +140,12 @@ export default {
|
||||
value: 'tjrsc',
|
||||
content: '碳金融市场',
|
||||
divider: true,
|
||||
parentName: 'fwsc',
|
||||
}, {
|
||||
name: 'txqsc',
|
||||
title: '碳需求市场',
|
||||
value: 'txqsc',
|
||||
content: '碳需求市场',
|
||||
divider: true,
|
||||
parentName: 'fwsc',
|
||||
},
|
||||
{
|
||||
name: 'tsjsc',
|
||||
@ -167,7 +153,13 @@ export default {
|
||||
value: 'tsjsc',
|
||||
content: '碳数据市场',
|
||||
divider: true,
|
||||
parentName: 'fwsc',
|
||||
},
|
||||
{
|
||||
name: 'fwscsjlbc',
|
||||
title: '数据列表',
|
||||
value: 'fwscsjlbc',
|
||||
content: '数据列表',
|
||||
divider: true,
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -208,53 +200,15 @@ export default {
|
||||
const sfdl = window.sessionStorage.getItem('sfdl');
|
||||
if (sfdl) {
|
||||
this.loginFlag = true;
|
||||
this.getWdxxCount();
|
||||
// this.getWdxxCount();
|
||||
} else {
|
||||
this.loginFlag = false;
|
||||
}
|
||||
|
||||
// 根据当前路由更新选中状态
|
||||
this.updateCurPageByRoute();
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化，更新菜单选中状态
|
||||
$route: {
|
||||
handler(newRoute) {
|
||||
this.updateCurPageByRoute();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
beforeUnmount() { },
|
||||
methods: {
|
||||
// 根据当前路由更新菜单选中状态
|
||||
updateCurPageByRoute() {
|
||||
const path = this.$route.path;
|
||||
const routeName = this.$route.name;
|
||||
|
||||
// 优先精确匹配路径
|
||||
if (this.routeToMenuMap[path]) {
|
||||
this.curPage = this.routeToMenuMap[path];
|
||||
return;
|
||||
}
|
||||
|
||||
// 尝试从路径中提取关键部分进行匹配
|
||||
if (path.includes('tfwsc') || path.includes('txqsc') || path.includes('tjrsc') || path.includes('tsjsc')) {
|
||||
this.curPage = 'fwsc';
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果都匹配不到，默认选中首页
|
||||
this.curPage = 'home';
|
||||
},
|
||||
//子菜单点击方法
|
||||
handleDropdownClick(menu) {
|
||||
// 如果有parentName，说明是子菜单，使用父级菜单名作为curPage
|
||||
if (menu.parentName) {
|
||||
this.curPage = menu.parentName;
|
||||
} else {
|
||||
this.curPage = menu.name;
|
||||
}
|
||||
this.gotoIfreamPage(menu); // 直接把子菜单项传入跳转方法
|
||||
},
|
||||
|
||||
@ -284,8 +238,7 @@ export default {
|
||||
this.curPage = menu.name;
|
||||
let iframeUrl = menu.iframeUrl;
|
||||
if (iframeUrl) {
|
||||
//调用login.js内的authorize方法（如果需要的话）
|
||||
//这里直接使用iframeUrl，外部系统会通过SSO Cookie等方式处理登录状态
|
||||
//调用login.js内的authorize方法
|
||||
this.$emit('gotoIfreamPage', iframeUrl);
|
||||
} else {
|
||||
this.$emit('gotoPage', this.curPage);
|
||||
@ -401,18 +354,18 @@ export default {
|
||||
<style lang="css" scoped>
|
||||
.nav-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
display: grid;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
background: #009a29;
|
||||
margin: 0 auto;
|
||||
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
place-items: center;
|
||||
|
||||
color: #fff;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.logo-box {
|
||||
text-align: center;
|
||||
@ -420,54 +373,54 @@ export default {
|
||||
|
||||
.option-box {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
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;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
leading-trim: none;
|
||||
height: 64px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 16px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
}
|
||||
|
||||
.option-box .gzt {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
height: 64px;
|
||||
font-size: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
|
||||
display: flex;
|
||||
width: 96px;
|
||||
height: 64px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-bottom: 2px solid #ffffff;
|
||||
}
|
||||
|
||||
.meun-title-disable {
|
||||
|
||||
@ -20,7 +20,7 @@ const baseRoutes = [
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
routes.push(...baseRoutes);
|
||||
|
||||
const mainRoutes = {
|
||||
path: '/',
|
||||
|
||||
@ -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: '碳服务供给' } },
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div style="height: 100%">
|
||||
<template>
|
||||
<div style="height: 100%" class="htglMenu">
|
||||
<t-menu style="width: 220px; background: #fff" :defaultValue="defaultValue" :collapsed="collapsed" :defaultExpanded="expanded" @change="gotoPage">
|
||||
<t-menu style="width: 220px; background: #fff" v-model="activeMenuId" :collapsed="collapsed" :defaultExpanded="expanded" @change="gotoPage">
|
||||
<div class="title">用户中心</div>
|
||||
<!-- 循环实现 -->
|
||||
<template v-for="item in cdList">
|
||||
@ -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: '企业认证',
|
||||
@ -115,6 +121,12 @@ export default {
|
||||
title: '绿色交易',
|
||||
icon: 'user',
|
||||
name: 'lsjy',
|
||||
}, {
|
||||
id: 'zljggl',
|
||||
title: '质证结果管理',
|
||||
icon: 'user',
|
||||
name: 'zljggl',
|
||||
iframeUrl: "https://ctn-web-pre.lingshu.net/proof-result-mgt?type=carbon-certify",
|
||||
},
|
||||
{
|
||||
id: 'cunzhengjilu',
|
||||
@ -141,19 +153,26 @@ export default {
|
||||
zljgglurl: 'https://ctn-web-pre.lingshu.net/proof-result-mgt?type=carbon-certify',
|
||||
|
||||
iframeUrl: "",
|
||||
|
||||
activeMenuId: "gzt",
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
activated() {
|
||||
console.log("glxtSy.vue,created==>", this.$route)
|
||||
// this.initView();
|
||||
// const activeCompo = this.$route.query.activeCompo;
|
||||
// if (activeCompo) {
|
||||
// this.changeHandler(activeCompo);
|
||||
// }
|
||||
|
||||
this.gotoPage(this.cdList[0].id);
|
||||
let cdId = this.cdList[0].id;
|
||||
const activeCompo = this.$route.query.activeCompo;
|
||||
if (activeCompo) {
|
||||
// this.changeHandler(activeCompo);
|
||||
cdId = activeCompo;
|
||||
}
|
||||
|
||||
this.activeMenuId = cdId;
|
||||
this.gotoPage(cdId);
|
||||
},
|
||||
methods: {
|
||||
gotoPage(menuId) {
|
||||
@ -188,8 +207,11 @@ export default {
|
||||
if (iframeUrl) {
|
||||
this.iframeUrl = iframeUrl;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: "/yhzx/" + menu.name
|
||||
this.iframeUrl = "";
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({
|
||||
path: "/yhzx/" + menu.name
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<div class="enterprise-cert">
|
||||
<div class="cert-header">
|
||||
<div class="cert-icon">
|
||||
<t-icon name="user" />
|
||||
</div>
|
||||
<div class="cert-title">
|
||||
<h3>企业认证</h3>
|
||||
<span class="cert-status" :class="statusClass">{{ statusText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-body">
|
||||
<template v-if="certData.qymc">
|
||||
<div class="cert-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">企业名称</span>
|
||||
<span class="info-value">{{ certData.qymc }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">统一社会信用代码</span>
|
||||
<span class="info-value">{{ certData.nsrsbh }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">认证时间</span>
|
||||
<span class="info-value">{{ formatDate(certData.lrrq) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="cert-empty">
|
||||
<span>暂未认证企业信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="cert-actions">
|
||||
<button class="cert-btn" @click="handleClick">
|
||||
<span>{{ certData.qymc ? '查看详情' : '立即认证' }}</span>
|
||||
<t-icon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/pages/index/api/gxzx/index.js';
|
||||
|
||||
export default {
|
||||
name: 'EnterpriseCert',
|
||||
data() {
|
||||
return {
|
||||
certData: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
if (!this.certData.qymc) return '未认证';
|
||||
return '已认证';
|
||||
},
|
||||
statusClass() {
|
||||
if (!this.certData.qymc) return 'status--unreviewed';
|
||||
return 'status--certified';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCertData();
|
||||
},
|
||||
methods: {
|
||||
async fetchCertData() {
|
||||
try {
|
||||
const { data } = await api.init();
|
||||
this.certData = data || {};
|
||||
} catch (error) {
|
||||
console.error('获取企业认证信息失败', error);
|
||||
this.certData = {};
|
||||
}
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
handleClick() {
|
||||
this.$router.push('/yhzx/qyrenzheng');
|
||||
},
|
||||
},
|
||||
};
|
||||
</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);
|
||||
|
||||
.enterprise-cert {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
transition: box-shadow 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: @shadow-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.cert-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.cert-icon {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cert-title {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.cert-status {
|
||||
padding: 3px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
|
||||
&.status--certified {
|
||||
color: @green-dark;
|
||||
background: @green-light;
|
||||
}
|
||||
|
||||
&.status--pending {
|
||||
color: #F9A825;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
|
||||
&.status--unreviewed {
|
||||
color: @text-muted;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cert-body {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.cert-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: @text-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cert-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 13px;
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
.cert-actions {
|
||||
.cert-btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: @green-primary;
|
||||
cursor: pointer;
|
||||
background: @green-light;
|
||||
border: 1px solid rgba(72, 198, 102, 0.2);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: @green-primary;
|
||||
border-color: @green-primary;
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
font-size: 14px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .t-icon {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
Normal file
259
txw-mhzc-web/src/pages/index/views/gzt/components/PolicyNews.vue
Normal file
@ -0,0 +1,259 @@
|
||||
<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 {
|
||||
width: 100%;
|
||||
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,175 @@
|
||||
<template>
|
||||
<div class="quick-actions">
|
||||
<div class="actions-grid">
|
||||
<button
|
||||
v-for="(action, index) in actions"
|
||||
:key="action.label"
|
||||
class="action-item"
|
||||
:style="{ '--delay': `${index * 0.06}s` }"
|
||||
@click="handleClick(action.to)"
|
||||
>
|
||||
<div class="item-icon-wrap">
|
||||
<div class="item-icon" :style="{ background: action.bgColor, color: action.color }">
|
||||
<t-icon :name="action.icon" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="item-label">{{ action.label }}</span>
|
||||
<div class="item-arrow">
|
||||
<t-icon name="arrow-right" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'QuickActions',
|
||||
data() {
|
||||
return {
|
||||
actions: [
|
||||
{ label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E8FFEA', color: '#48C666' },
|
||||
{ label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E3F2FD', color: '#2196F3' },
|
||||
{ label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#FFF8E1', color: '#FF9800' },
|
||||
{ label: '质证申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#FCE4EC', color: '#E91E63' },
|
||||
],
|
||||
};
|
||||
},
|
||||
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;
|
||||
@bg-card: #FFFFFF;
|
||||
@border-light: rgba(0, 0, 0, 0.06);
|
||||
@shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.quick-actions {
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-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-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.quick-actions .actions-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.quick-actions .actions-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</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', // 已注册路由（对应消息中心）
|
||||
},
|
||||
],
|
||||
};
|
||||
487
txw-mhzc-web/src/pages/index/views/gzt/index.vue
Normal file
487
txw-mhzc-web/src/pages/index/views/gzt/index.vue
Normal file
@ -0,0 +1,487 @@
|
||||
<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="top-row">
|
||||
<!-- 左侧：欢迎 + 统计 -->
|
||||
<div class="left-column">
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-left">
|
||||
<h1 class="welcome-title">欢迎回来</h1>
|
||||
<p class="welcome-subtitle">{{ currentGreeting }}，祝您工作顺利</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="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="search"
|
||||
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>
|
||||
|
||||
<!-- 右侧：企业认证 -->
|
||||
<div class="right-column">
|
||||
<EnterpriseCert />
|
||||
</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>
|
||||
<div class="header-text">
|
||||
<h2 class="panel-title">常用功能</h2>
|
||||
<p class="panel-desc">快速访问核心功能</p>
|
||||
</div>
|
||||
</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>
|
||||
<div class="header-text">
|
||||
<h2 class="panel-title">账号管理</h2>
|
||||
<p class="panel-desc">账户设置与安全</p>
|
||||
</div>
|
||||
</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';
|
||||
import EnterpriseCert from './components/EnterpriseCert.vue';
|
||||
|
||||
export default {
|
||||
name: 'GztIndex',
|
||||
components: {
|
||||
StatsCard,
|
||||
QuickActions,
|
||||
PolicyNews,
|
||||
AccountShortcuts,
|
||||
EnterpriseCert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentDate: '',
|
||||
currentWeekday: '',
|
||||
currentGreeting: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.updateDateTime();
|
||||
},
|
||||
methods: {
|
||||
updateDateTime() {
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
|
||||
this.currentWeekday = weekdays[now.getDay()];
|
||||
if (hours < 12) {
|
||||
this.currentGreeting = '早上好';
|
||||
} else if (hours < 14) {
|
||||
this.currentGreeting = '中午好';
|
||||
} else if (hours < 18) {
|
||||
this.currentGreeting = '下午好';
|
||||
} else {
|
||||
this.currentGreeting = '晚上好';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
// ========== 第一行布局 ==========
|
||||
.top-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 300px;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
animation: fadeSlideUp 0.5s ease backwards;
|
||||
}
|
||||
|
||||
.left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ========== 欢迎区域 ==========
|
||||
.welcome-section {
|
||||
display: flex;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(135deg, #FFF 0%, #FAFFFE 50%, @green-soft 100%);
|
||||
border: 1px solid rgba(72, 198, 102, 0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: @shadow-soft;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.welcome-left {
|
||||
.welcome-badge {
|
||||
display: inline-flex;
|
||||
padding: 5px 12px;
|
||||
margin-bottom: 8px;
|
||||
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: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-right {
|
||||
.time-widget {
|
||||
padding: 8px 12px;
|
||||
text-align: right;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 8px;
|
||||
|
||||
.time-date {
|
||||
margin-bottom: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.time-weekday {
|
||||
font-size: 11px;
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 统计卡片区域 ==========
|
||||
.stats-section {
|
||||
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;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
overflow: hidden;
|
||||
background: @bg-card;
|
||||
border: 1px solid @border-light;
|
||||
border-radius: 20px;
|
||||
box-shadow: @shadow-card;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 18px 24px 16px;
|
||||
background: linear-gradient(180deg, #FAFFFE 0%, @bg-card 100%);
|
||||
border-bottom: 1px solid @border-light;
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, @green-primary 0%, @green-dark 100%);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(72, 198, 102, 0.3);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--account {
|
||||
background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);
|
||||
box-shadow: 0 4px 12px rgba(120, 144, 156, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: @text-dark;
|
||||
}
|
||||
|
||||
.panel-desc {
|
||||
margin: 2px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: @text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
// ========== 动画 ==========
|
||||
@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>
|
||||
@ -29,8 +29,25 @@
|
||||
|
||||
<!-- 主页面 -->
|
||||
<div class="container">
|
||||
<!-- 顶部风力发电机图片 -->
|
||||
<!-- 顶部背景轮播 -->
|
||||
<div class="top-box">
|
||||
<t-swiper
|
||||
class="top-banner-swiper"
|
||||
animation="fade"
|
||||
:height="topBannerHeight"
|
||||
:interval="6000"
|
||||
:duration="500"
|
||||
:loop="true"
|
||||
:autoplay="true"
|
||||
theme="dark"
|
||||
:navigation="{ placement: 'inside', showSlideBtn: 'hover', type: 'bars', size: 'medium' }"
|
||||
>
|
||||
<t-swiper-item v-for="(src, idx) in topBannerImages" :key="idx">
|
||||
<div class="banner-slide" :style="{ backgroundImage: `url(${src})` }" />
|
||||
</t-swiper-item>
|
||||
</t-swiper>
|
||||
|
||||
<div class="top-box-inner">
|
||||
<div class="top-title">
|
||||
<img src="@/pages/index/assets/home-top-title.png">
|
||||
</div>
|
||||
@ -85,6 +102,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-box-bottom-over"> </div>
|
||||
</div>
|
||||
|
||||
@ -250,13 +268,36 @@ import Footer from '@/pages/index/components/footer/index.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputValue: ""
|
||||
}
|
||||
inputValue: '',
|
||||
topBannerHeight: 820,
|
||||
topBannerImages: [
|
||||
require('@/pages/index/assets/home-top-bg1.jpg'),
|
||||
require('@/pages/index/assets/home-top-bg2.jpg'),
|
||||
require('@/pages/index/assets/home-top-bg3.jpg'),
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Footer,
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
this.syncBannerHeight();
|
||||
window.addEventListener('resize', this.syncBannerHeight);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.syncBannerHeight);
|
||||
},
|
||||
methods: {
|
||||
syncBannerHeight() {
|
||||
const w = window.innerWidth;
|
||||
if (w < 768) {
|
||||
this.topBannerHeight = Math.round(640 + (w / 768) * 120);
|
||||
} else {
|
||||
this.topBannerHeight = 820;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -266,18 +307,18 @@ export default {
|
||||
|
||||
.nav-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
z-index: 9999;
|
||||
|
||||
display: grid;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
background: #009a29;
|
||||
margin: 0 auto;
|
||||
|
||||
color: #fff;
|
||||
background: #009a29;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
place-items: center;
|
||||
|
||||
color: #fff;
|
||||
|
||||
z-index: 9999;
|
||||
}
|
||||
.logo-box {
|
||||
text-align: center;
|
||||
@ -285,199 +326,208 @@ export default {
|
||||
|
||||
.option-box {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
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;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
leading-trim: none;
|
||||
height: 64px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 16px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
}
|
||||
|
||||
.option-box .gzt {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
height: 64px;
|
||||
font-size: 16px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
|
||||
display: flex;
|
||||
width: 96px;
|
||||
height: 64px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
border-bottom: 2px solid #ffffff;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-image: url(~@/pages/index/assets/home-top-bg1.jpg);
|
||||
background-position: center; /* 永远显示中间部分 */
|
||||
|
||||
/* height: 630px; */
|
||||
|
||||
background-repeat: no-repeat; /* 不重复 */
|
||||
background-size: cover; /* 不拉伸，保持原图尺寸 */
|
||||
|
||||
animation: switchBg 30s infinite linear;
|
||||
position: relative;
|
||||
min-height: 820px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-banner-swiper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.top-box-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes switchBg {
|
||||
0%,
|
||||
33% {
|
||||
background-image: url(~@/pages/index/assets/home-top-bg1.jpg);
|
||||
}
|
||||
33%,
|
||||
66% {
|
||||
background-image: url(~@/pages/index/assets/home-top-bg2.jpg);
|
||||
}
|
||||
66%,
|
||||
100% {
|
||||
background-image: url(~@/pages/index/assets/home-top-bg3.jpg);
|
||||
}
|
||||
/* 指示条默认在底部，会被 .top-box-bottom-over 渐变盖住，上移避开 300px 渐变区 */
|
||||
.top-box ::v-deep .t-swiper__navigation {
|
||||
bottom: 340px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 64px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
/* max-width: 1920px; */
|
||||
margin: 0 auto; /* 左右居中 */
|
||||
margin-top: 64px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.top-title {
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
margin-top: 128px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
.top-title-desc {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
color: #222222;
|
||||
-webkit-text-stroke: 0.3px #fff;
|
||||
text-stroke: 0.3px #fff;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.top-title-desc img {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.top-search-box {
|
||||
margin-top: 40px;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
padding: 0 6%;
|
||||
margin-top: 40px;
|
||||
padding: 0px 6%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border: 1px solid #ffffff;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
box-shadow: 0px 8px 12px 0px #00000014;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 8px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: 0 8px 12px 0 #00000014;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: linear-gradient(180deg, #00b42a 0%, #009a29 100%);
|
||||
width: 92px;
|
||||
height: 40px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-style: medium;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
font-style: Medium;
|
||||
font-size: 16px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
background: linear-gradient(180deg, #00b42a 0%, #009a29 100%);
|
||||
border-radius: 6px;
|
||||
leading-trim: none;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: calc(100% - 100px);
|
||||
max-width: 500px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #666666;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
color: #666;
|
||||
opacity: 1;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.top-search-hot {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 14px;
|
||||
leading-trim: NONE;
|
||||
color: #ffffff;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
leading-trim: none;
|
||||
}
|
||||
|
||||
.top-box-bottom-over {
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250) 100%);
|
||||
}
|
||||
|
||||
@ -487,31 +537,29 @@ export default {
|
||||
}
|
||||
|
||||
.top-options-box {
|
||||
z-index: 999;
|
||||
|
||||
display: grid;
|
||||
|
||||
/* display: flex; */
|
||||
|
||||
/* justify-content: space-between; */
|
||||
width: 100%;
|
||||
padding: 0% 20%;
|
||||
|
||||
/* position: absolute;
|
||||
bottom: -60px; */
|
||||
margin-top: 100px;
|
||||
z-index: 999;
|
||||
|
||||
/* display: flex; */
|
||||
/* justify-content: space-between; */
|
||||
width: 100%;
|
||||
padding: 0% 20%;
|
||||
gap: 3%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.option-item-box {
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #fff;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #ffffff;
|
||||
padding-bottom: 20px;
|
||||
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
@ -521,38 +569,38 @@ export default {
|
||||
}
|
||||
|
||||
.option-btn-box {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
place-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.option-item-box-title {
|
||||
width: 100%;
|
||||
height: 39px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
height: 39px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 28px;
|
||||
font-style: semibold;
|
||||
font-weight: 600;
|
||||
font-style: Semibold;
|
||||
font-size: 28px;
|
||||
leading-trim: NONE;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
leading-trim: none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.option-btn-box .btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.option-item-box.green .btn {
|
||||
@ -567,8 +615,8 @@ export default {
|
||||
|
||||
.center-box {
|
||||
width: 100%;
|
||||
padding: 60px 20%;
|
||||
background: #fff;
|
||||
padding: 60px 20%;
|
||||
}
|
||||
.center-box .content-box {
|
||||
display: grid;
|
||||
@ -579,31 +627,31 @@ export default {
|
||||
}
|
||||
|
||||
.center-box-title {
|
||||
width: fit-content;
|
||||
height: 32px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
width: fit-content;
|
||||
border-bottom: 6px solid rgba(176, 220, 255);
|
||||
height: 32px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-size: 32px;
|
||||
font-style: medium;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 32px;
|
||||
leading-trim: NONE;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0%;
|
||||
|
||||
color: #222;
|
||||
text-align: left;
|
||||
border-bottom: 6px solid rgba(176, 220, 255);
|
||||
leading-trim: none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.center-box .item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-box .item:hover {
|
||||
@ -613,25 +661,25 @@ export default {
|
||||
.center-box .item .name1 {
|
||||
width: 100%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 20px;
|
||||
font-style: medium;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
font-style: Medium;
|
||||
font-size: 20px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
line-height: 40px;
|
||||
|
||||
color: #333;
|
||||
leading-trim: none;
|
||||
color: #333333;
|
||||
}
|
||||
.center-box .item .name2 {
|
||||
width: 100%;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-size: 28px;
|
||||
font-style: semibold;
|
||||
font-weight: 600;
|
||||
font-style: Semibold;
|
||||
font-size: 28px;
|
||||
leading-trim: NONE;
|
||||
line-height: 48px;
|
||||
letter-spacing: 0%;
|
||||
leading-trim: none;
|
||||
}
|
||||
|
||||
.center-box .item .name3 {
|
||||
@ -639,46 +687,46 @@ export default {
|
||||
margin-top: 10px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 16px;
|
||||
leading-trim: NONE;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0%;
|
||||
|
||||
color: #666;
|
||||
leading-trim: none;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box {
|
||||
display: grid;
|
||||
|
||||
width: 100%;
|
||||
padding: 3% 20%;
|
||||
background: #f5f7fa;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 30px;
|
||||
|
||||
width: 100%;
|
||||
background: #f5f7fa;
|
||||
padding: 3% 20%;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box > div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
background: #fff;
|
||||
|
||||
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.3);
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
height: 553px;
|
||||
min-height: 200px;
|
||||
padding: 15px;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
background: #fff;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
@ -710,59 +758,59 @@ export default {
|
||||
|
||||
.gxnl-qych-hydt-box .name1 {
|
||||
font-family: PingFang SC;
|
||||
font-size: 28px;
|
||||
font-style: semibold;
|
||||
font-weight: 600;
|
||||
line-height: 60px;
|
||||
font-style: Semibold;
|
||||
font-size: 28px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #222;
|
||||
leading-trim: none;
|
||||
line-height: 60px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.gxnl-qych-hydt-box .name2 {
|
||||
height: 50px;
|
||||
margin-bottom: 28px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 16px;
|
||||
leading-trim: NONE;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0%;
|
||||
color: #666;
|
||||
leading-trim: none;
|
||||
color: #666666;
|
||||
margin-bottom: 28px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.gxnl-box .item {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1fr 32px;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #7be188 0%, #e8ffea 100%);
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(90deg, #7be188 0%, #e8ffea 100%);
|
||||
border-radius: 8px;
|
||||
grid-template-columns: 64px 1fr 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gxnl-box .item .text {
|
||||
padding-left: 20px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 20px;
|
||||
font-style: medium;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 20px;
|
||||
leading-trim: NONE;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0%;
|
||||
leading-trim: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.qych-box .item {
|
||||
width: 100%;
|
||||
height: 114px;
|
||||
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background: #e9f5fe;
|
||||
border-radius: 8px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.qych-box .item .desc-btn-box {
|
||||
@ -772,103 +820,108 @@ export default {
|
||||
}
|
||||
|
||||
.qych-box-item-title {
|
||||
padding: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 20px;
|
||||
font-style: semibold;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 600;
|
||||
font-style: Semibold;
|
||||
font-size: 20px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #333;
|
||||
leading-trim: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.qych-box .item .desc-btn-box .desc {
|
||||
width: 80%;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 14px;
|
||||
leading-trim: NONE;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0%;
|
||||
color: #333;
|
||||
leading-trim: none;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.qych-box .item .desc-btn-box .btn {
|
||||
width: 94px;
|
||||
background: #2196f3;
|
||||
height: 38px;
|
||||
width: 94px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: #2196f3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hydt-box .tab {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.hydt-box .tab > div {
|
||||
font-family: PingFang SC;
|
||||
font-size: 18px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 18px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #333;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
leading-trim: none;
|
||||
}
|
||||
.hydt-box .tab .active {
|
||||
height: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
border-bottom: 6px solid #00cee8;
|
||||
height: 24px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hydt-box .item {
|
||||
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
margin-top: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-style: regular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 14px;
|
||||
leading-trim: NONE;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0%;
|
||||
|
||||
color: #333;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #e6f7f9;
|
||||
border-left: 4px solid #00acc1;
|
||||
border-radius: 8px;
|
||||
leading-trim: none;
|
||||
|
||||
margin-top: 12px;
|
||||
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 539px;
|
||||
|
||||
background-image: url(~@/pages/index/assets/home-szsf-bg.png);
|
||||
background-position: left; /* 永远显示中间部分 */
|
||||
|
||||
background-repeat: no-repeat; /* 不重复 */
|
||||
background-size: cover; /* 不拉伸，保持原图尺寸 */
|
||||
background-position: left; /* 永远显示中间部分 */
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-box .content {
|
||||
display: flex;
|
||||
width: 64%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 400px;
|
||||
width: 64%;
|
||||
|
||||
border-radius: 12px;
|
||||
border: 2px solid #ffffff;
|
||||
background: linear-gradient(
|
||||
95.7deg,
|
||||
rgba(255, 255, 255, 0) 1.44%,
|
||||
@ -876,14 +929,8 @@ export default {
|
||||
rgba(255, 255, 255, 0.3) 41.25%,
|
||||
rgba(255, 255, 255, 0.5) 91.66%
|
||||
);
|
||||
border: 2px solid #fff;
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
/* backdrop-filter: blur(12px); */
|
||||
box-shadow: 0 4px 20px 0 rgba(255, 255, 255, 0.08);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.bottom-box .content > div {
|
||||
display: flex;
|
||||
@ -893,53 +940,53 @@ export default {
|
||||
}
|
||||
|
||||
.bottom-box-content-title {
|
||||
padding: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 40px;
|
||||
font-style: semibold;
|
||||
font-weight: 500;
|
||||
line-height: 80px;
|
||||
font-style: Semibold;
|
||||
font-size: 40px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #222;
|
||||
leading-trim: none;
|
||||
line-height: 80px;
|
||||
color: #222222;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.bottom-box .content .desc {
|
||||
font-family: PingFang SC;
|
||||
font-size: 22px;
|
||||
font-style: medium;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 22px;
|
||||
leading-trim: NONE;
|
||||
line-height: 40px;
|
||||
letter-spacing: 0%;
|
||||
color: #222;
|
||||
leading-trim: none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.bottom-box .content .btn {
|
||||
background: #009a29cc;
|
||||
border-radius: 8px;
|
||||
width: 360px;
|
||||
height: 56px;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
background: rgba(0, 154, 41, 0.8);
|
||||
|
||||
border: 1px solid #ffffff;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Semibold;
|
||||
font-size: 18px;
|
||||
leading-trim: NONE;
|
||||
letter-spacing: 0%;
|
||||
color: #ffffff;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-size: 18px;
|
||||
font-style: semibold;
|
||||
font-weight: 400;
|
||||
line-height: 56px;
|
||||
letter-spacing: 0%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
background: #009a29cc;
|
||||
background: rgba(0, 154, 41, 0.8);
|
||||
|
||||
border: 1px solid #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
leading-trim: none;
|
||||
}
|
||||
|
||||
.bottom-box .content .btn:hover {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<Nav @gotoIfreamPage="gotoIfreamPage" @gotoPage="gotoPage" />
|
||||
<div :style="{ 'height': documentClientHeight-64 + 'px' ,'margin-top':'64px'}">
|
||||
<div :style="{ 'height': documentClientHeight-65 + 'px' ,'margin-top':'64px' ,'overflow':'auto'}">
|
||||
<iframe v-if="iframeUrl" :src="iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
|
||||
</iframe>
|
||||
<keep-alive v-else>
|
||||
@ -49,13 +49,17 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
gotoPage(name) {
|
||||
// this.$router.push({
|
||||
// name: name
|
||||
// })
|
||||
this.iframeUrl = "";
|
||||
this.$nextTick(() => {
|
||||
this.$router.push({
|
||||
path: "/" + name
|
||||
})
|
||||
});
|
||||
|
||||
// this.$router.replace({ name: name, force: true })
|
||||
|
||||
window.location.href = name
|
||||
// // this.$router.replace({ name: name, force: true })
|
||||
// alert(name)
|
||||
// window.location.href = name
|
||||
},
|
||||
|
||||
gotoIfreamPage(iframeUrl) {
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
// { title: '上海市宝山区发改委', href: '#' },
|
||||
// { title: '上海市宝山区生态环境局', href: '#' },
|
||||
],
|
||||
copyright: '© 2025 可信碳信息网 版权所有 | 主办单位：上海市宝山区大数据中心',
|
||||
copyright: '© 2025 可信碳信息网 版权所有 | 技术支持：上海市宝山区大数据中心',
|
||||
hyztList: [
|
||||
{
|
||||
title: '钢铁行业',
|
||||
|
||||
@ -244,8 +244,8 @@ module.exports = {
|
||||
terserOptions: {
|
||||
compress: {
|
||||
warnings: false,
|
||||
drop_console: true,
|
||||
drop_debugger: true,
|
||||
drop_console: false,
|
||||
drop_debugger: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
@ -266,7 +266,8 @@ module.exports = {
|
||||
devServer: {
|
||||
port: devServerPort,
|
||||
host: '0.0.0.0',
|
||||
contentBase: './dist',
|
||||
// 开发时勿用 ./dist：会与历史 npm run build 产物混用，history 子路径刷新易命中旧 HTML/JS
|
||||
contentBase: path.resolve(__dirname, 'public'),
|
||||
publicPath: process.env.VUE_APP_ROUTER_BASE,
|
||||
https: process.env.VUE_APP_PROTOCOL_HTTPS === 'true',
|
||||
compress: false,
|
||||
@ -281,21 +282,19 @@ module.exports = {
|
||||
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
|
||||
},
|
||||
// Vue CLI prepareProxy 用 pathname.match(代理键) 判断；键写 '/mhzc' 会变成匹配路径里任意位置的 /mhzc，
|
||||
// 会误伤 SPA 路由 /view/mhzc/...，刷新时整页请求被转发到后端导致 Proxy error。必须用 ^ 限定为路径前缀。
|
||||
proxy: {
|
||||
'/sso': {
|
||||
target: 'http://carbon.liantu.tech',
|
||||
'^/sso': {
|
||||
target: 'http://10.23.20.13:94/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'^/mhzc': {
|
||||
target: 'http://carbon.liantu.tech',
|
||||
target: 'http://10.23.20.13:94/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'^/gxzx': {
|
||||
target: 'http://carbon.liantu.tech',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'^/yygl': {
|
||||
target: 'http://carbon.liantu.tech',
|
||||
target: 'http://10.23.20.13:94/',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
||||
22727
txw-mhzc-web/yarn.lock
22727
txw-mhzc-web/yarn.lock
File diff suppressed because it is too large
Load Diff
22112
txw-tzzx-web/package-lock.json
generated
Normal file
22112
txw-tzzx-web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1196,11 +1196,6 @@
|
||||
"@types/conventional-commits-parser" "^5.0.0"
|
||||
chalk "^5.3.0"
|
||||
|
||||
"@fortawesome/fontawesome-free@^7.0.1":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz#188c1053ce422ad1f934d7df242a973fcb89636d"
|
||||
integrity sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.3"
|
||||
resolved "http://10.23.10.90:4873/@gar%2fpromisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
|
||||
@ -1196,11 +1196,6 @@
|
||||
"@types/conventional-commits-parser" "^5.0.0"
|
||||
chalk "^5.3.0"
|
||||
|
||||
"@fortawesome/fontawesome-free@^7.0.1":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz#188c1053ce422ad1f934d7df242a973fcb89636d"
|
||||
integrity sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.3"
|
||||
resolved "http://10.23.10.90:4873/@gar%2fpromisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
|
||||
@ -1196,11 +1196,6 @@
|
||||
"@types/conventional-commits-parser" "^5.0.0"
|
||||
chalk "^5.3.0"
|
||||
|
||||
"@fortawesome/fontawesome-free@^7.0.1":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz#188c1053ce422ad1f934d7df242a973fcb89636d"
|
||||
integrity sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==
|
||||
|
||||
"@gar/promisify@^1.0.1":
|
||||
version "1.1.3"
|
||||
resolved "http://10.23.10.90:4873/@gar%2fpromisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user