verce-vue-test 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/WebsiteNoticeTitle.vue +185 -0
- package/src/router/index.ts +1 -1
- package/src/views/{ExecutiveManagementView.vue → ExecutiveManagementView/index.vue} +5 -5
- package/src/views/PositionForecastExecutionView.vue +220 -250
- /package/src/{components/executive → views/ExecutiveManagementView/components}/ExecutiveAccountPanel.vue +0 -0
- /package/src/{components/executive → views/ExecutiveManagementView/components}/ExecutiveReliablePanel.vue +0 -0
- /package/src/{components/executive → views/ExecutiveManagementView/components}/ExecutiveWarningOverview.vue +0 -0
- /package/src/{components/executive → views/ExecutiveManagementView/components}/ExecutiveWarningTablePanel.vue +0 -0
- /package/src/{components/executive → views/ExecutiveManagementView/components}/chart.ts +0 -0
- /package/src/{assets → views/ExecutiveManagementView}/executive-management.css +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import {
|
|
4
|
+
ArrowRight,
|
|
5
|
+
Close,
|
|
6
|
+
Notification,
|
|
7
|
+
} from '@element-plus/icons-vue'
|
|
8
|
+
|
|
9
|
+
interface Props {
|
|
10
|
+
title?: string
|
|
11
|
+
message?: string
|
|
12
|
+
moreText?: string
|
|
13
|
+
backgroundColor?: string
|
|
14
|
+
borderColor?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
withDefaults(defineProps<Props>(), {
|
|
18
|
+
title: '网站公告',
|
|
19
|
+
message: '系统将于 2024年6月15日 0:00 - 2:00 进行维护升级，期间可能影响部分功能使用，请合理安排业务时间。',
|
|
20
|
+
moreText: '查看更多',
|
|
21
|
+
backgroundColor: 'linear-gradient(180deg, rgba(247, 251, 255, .96), rgba(238, 246, 255, .94))',
|
|
22
|
+
borderColor: '#a9c9ff',
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
const visible = ref(true)
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<template>
|
|
29
|
+
<section
|
|
30
|
+
v-if="visible"
|
|
31
|
+
class="website-notice"
|
|
32
|
+
:style="{ background: backgroundColor, borderColor }"
|
|
33
|
+
aria-label="网站公告"
|
|
34
|
+
>
|
|
35
|
+
<div class="notice-heading">
|
|
36
|
+
<el-icon :size="32" class="notice-icon" aria-hidden="true">
|
|
37
|
+
<Notification />
|
|
38
|
+
</el-icon>
|
|
39
|
+
<strong class="notice-title">{{ title }}</strong>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<span class="notice-divider" aria-hidden="true"></span>
|
|
43
|
+
|
|
44
|
+
<p class="notice-message">{{ message }}</p>
|
|
45
|
+
|
|
46
|
+
<button class="notice-more" type="button">
|
|
47
|
+
<span>{{ moreText }}</span>
|
|
48
|
+
<el-icon :size="18" aria-hidden="true"><ArrowRight /></el-icon>
|
|
49
|
+
</button>
|
|
50
|
+
|
|
51
|
+
<button class="notice-close" type="button" aria-label="关闭公告" @click="visible = false">
|
|
52
|
+
<el-icon :size="22"><Close /></el-icon>
|
|
53
|
+
</button>
|
|
54
|
+
</section>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.website-notice {
|
|
59
|
+
min-height: 78px;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
gap: 28px;
|
|
63
|
+
padding: 0 28px 0 34px;
|
|
64
|
+
border: 1px solid;
|
|
65
|
+
border-radius: 7px;
|
|
66
|
+
box-shadow: 0 10px 28px rgba(68, 126, 224, .10);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.notice-heading {
|
|
70
|
+
flex: 0 0 auto;
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: 14px;
|
|
74
|
+
color: #1267e8;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.notice-icon {
|
|
78
|
+
color: #1267e8;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.notice-title {
|
|
82
|
+
font-size: 24px;
|
|
83
|
+
font-weight: 800;
|
|
84
|
+
line-height: 1;
|
|
85
|
+
white-space: nowrap;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.notice-divider {
|
|
89
|
+
width: 1px;
|
|
90
|
+
height: 28px;
|
|
91
|
+
flex: 0 0 auto;
|
|
92
|
+
background: #b7c3d6;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.notice-message {
|
|
96
|
+
min-width: 0;
|
|
97
|
+
flex: 1 1 auto;
|
|
98
|
+
margin: 0;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
color: #111827;
|
|
101
|
+
font-size: 20px;
|
|
102
|
+
line-height: 1.45;
|
|
103
|
+
text-overflow: ellipsis;
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.notice-more,
|
|
108
|
+
.notice-close {
|
|
109
|
+
flex: 0 0 auto;
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: center;
|
|
113
|
+
border: 0;
|
|
114
|
+
background: transparent;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.notice-more {
|
|
119
|
+
gap: 6px;
|
|
120
|
+
padding: 0;
|
|
121
|
+
color: #1267e8;
|
|
122
|
+
font-size: 18px;
|
|
123
|
+
font-weight: 700;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.notice-close {
|
|
128
|
+
width: 32px;
|
|
129
|
+
height: 32px;
|
|
130
|
+
color: #9aa4b2;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.notice-close:hover,
|
|
134
|
+
.notice-more:hover {
|
|
135
|
+
opacity: .82;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media (max-width: 992px) {
|
|
139
|
+
.website-notice {
|
|
140
|
+
min-height: auto;
|
|
141
|
+
align-items: flex-start;
|
|
142
|
+
gap: 14px;
|
|
143
|
+
padding: 18px 18px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.notice-message {
|
|
147
|
+
white-space: normal;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.notice-divider {
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@media (max-width: 768px) {
|
|
156
|
+
.website-notice {
|
|
157
|
+
display: grid;
|
|
158
|
+
grid-template-columns: 1fr auto;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.notice-heading,
|
|
162
|
+
.notice-message,
|
|
163
|
+
.notice-more {
|
|
164
|
+
grid-column: 1 / -1;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.notice-title {
|
|
168
|
+
font-size: 21px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.notice-message {
|
|
172
|
+
font-size: 16px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.notice-more {
|
|
176
|
+
justify-self: start;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.notice-close {
|
|
180
|
+
position: absolute;
|
|
181
|
+
right: 12px;
|
|
182
|
+
top: 12px;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
</style>
|
package/src/router/index.ts
CHANGED
|
@@ -64,7 +64,7 @@ const router = createRouter({
|
|
|
64
64
|
path: '/executive-management',
|
|
65
65
|
name: 'executiveManagement',
|
|
66
66
|
meta: { fullscreen: true },
|
|
67
|
-
component: () => import('../views/ExecutiveManagementView.vue'),
|
|
67
|
+
component: () => import('../views/ExecutiveManagementView/index.vue'),
|
|
68
68
|
},
|
|
69
69
|
],
|
|
70
70
|
})
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import ExecutiveAccountPanel from '
|
|
3
|
-
import ExecutiveReliablePanel from '
|
|
4
|
-
import ExecutiveWarningOverview from '
|
|
5
|
-
import ExecutiveWarningTablePanel from '
|
|
6
|
-
import '
|
|
2
|
+
import ExecutiveAccountPanel from './components/ExecutiveAccountPanel.vue'
|
|
3
|
+
import ExecutiveReliablePanel from './components/ExecutiveReliablePanel.vue'
|
|
4
|
+
import ExecutiveWarningOverview from './components/ExecutiveWarningOverview.vue'
|
|
5
|
+
import ExecutiveWarningTablePanel from './components/ExecutiveWarningTablePanel.vue'
|
|
6
|
+
import './executive-management.css'
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<template>
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
* 展示当前登录用户的待处理任务概览（统计面板），
|
|
7
7
|
* 并提供快速进入各业务操作（预报填报、修改、复核确认、异常反馈）的入口。
|
|
8
8
|
*
|
|
9
|
+
* 页面结构：
|
|
10
|
+
* - 统计面板：五等分统计项，匹配设计图的分隔线和数字排版
|
|
11
|
+
* - 快速入口：四张业务卡片，匹配设计图的图标、标题、描述和按钮
|
|
12
|
+
*
|
|
9
13
|
* 数据来源：
|
|
10
14
|
* 目前 taskStats 和 quickEntries 为本地静态数据，
|
|
11
15
|
* 后续替换为接口请求时只需改动数据源，模板无需修改。
|
|
@@ -17,8 +21,9 @@ import {
|
|
|
17
21
|
CircleCheckFilled, // 复核确认：圆圈对勾
|
|
18
22
|
Document, // 预报填报：文档
|
|
19
23
|
RefreshRight, // 修改：向右刷新箭头
|
|
20
|
-
|
|
24
|
+
WarnTriangleFilled, // 异常反馈：实心警告三角
|
|
21
25
|
} from '@element-plus/icons-vue'
|
|
26
|
+
import WebsiteNoticeTitle from '@/components/WebsiteNoticeTitle.vue'
|
|
22
27
|
|
|
23
28
|
// ---- 类型定义 ----
|
|
24
29
|
|
|
@@ -73,7 +78,7 @@ const taskStats: TaskStat[] = [
|
|
|
73
78
|
{ label: '预报填报', value: 5, unit: '条', tone: 'blue', icon: Document },
|
|
74
79
|
{ label: '修改', value: 3, unit: '条', tone: 'green', icon: RefreshRight },
|
|
75
80
|
{ label: '复核确认', value: 2, unit: '条', tone: 'orange', icon: CircleCheckFilled },
|
|
76
|
-
{ label: '异常反馈', value: 2, unit: '条', tone: 'red', icon:
|
|
81
|
+
{ label: '异常反馈', value: 2, unit: '条', tone: 'red', icon: WarnTriangleFilled },
|
|
77
82
|
]
|
|
78
83
|
|
|
79
84
|
/**
|
|
@@ -85,114 +90,93 @@ const quickEntries: EntryAction[] = [
|
|
|
85
90
|
{ title: '预报填报', desc: '填写头寸预报数据', button: '立即填报', tone: 'blue', icon: Document },
|
|
86
91
|
{ title: '修改', desc: '修改已填报预报数据', button: '立即处理', tone: 'green', icon: RefreshRight },
|
|
87
92
|
{ title: '复核确认', desc: '复核并确认预报数据', button: '立即处理', tone: 'orange', icon: CircleCheckFilled },
|
|
88
|
-
{ title: '异常反馈', desc: '处理预报异常反馈', button: '立即处理', tone: 'red', icon:
|
|
93
|
+
{ title: '异常反馈', desc: '处理预报异常反馈', button: '立即处理', tone: 'red', icon: WarnTriangleFilled },
|
|
89
94
|
]
|
|
90
95
|
</script>
|
|
91
96
|
|
|
92
97
|
<!--
|
|
93
98
|
模板结构说明
|
|
94
99
|
===========
|
|
95
|
-
<main>
|
|
96
|
-
<section.execution-content
|
|
97
|
-
<div.intro-block>
|
|
98
|
-
<section.stats-panel>
|
|
99
|
-
|
|
100
|
-
<div.stat-icon> ─ 业务图标（第一项无图标，v-if 控制）
|
|
101
|
-
<div.stat-copy> ─ 标签 + 数值 + 单位
|
|
102
|
-
<section.quick-section> ─ 快速入口区
|
|
103
|
-
<div.entry-grid> ─ 入口卡片网格（4 列）
|
|
104
|
-
<article.entry-card> ─ 单张入口卡片，循环渲染 quickEntries
|
|
105
|
-
<div.entry-icon> ─ 卡片图标
|
|
106
|
-
<h3> ─ 卡片标题
|
|
107
|
-
<p> ─ 业务描述
|
|
108
|
-
<el-button> ─ 操作按钮
|
|
100
|
+
<main> ─ 页面根容器，承载背景和设计变量
|
|
101
|
+
<section.execution-content>─ 内容区，限制最大宽度并居中
|
|
102
|
+
<div.intro-block> ─ 任务标题和说明
|
|
103
|
+
<section.stats-panel> ─ 五列统计面板
|
|
104
|
+
<section.quick-section> ─ 四列快速入口
|
|
109
105
|
|
|
110
106
|
无障碍说明：
|
|
111
107
|
- 统计面板和快速入口区均使用 aria-label 标注用途
|
|
112
108
|
- 图标容器使用 aria-hidden="true"，避免屏幕阅读器重复朗读
|
|
113
109
|
-->
|
|
114
110
|
<template>
|
|
115
|
-
<!--
|
|
111
|
+
<!-- 页面根容器：承载背景渐变和 CSS 设计变量 -->
|
|
116
112
|
<main class="forecast-execution-page">
|
|
117
|
-
|
|
118
|
-
<!-- 内容区：限制最大宽度 1428px，水平居中 -->
|
|
113
|
+
<!-- 内容区：max-width 1428px，水平居中 -->
|
|
119
114
|
<section class="execution-content">
|
|
115
|
+
<WebsiteNoticeTitle class="execution-notice" />
|
|
116
|
+
|
|
117
|
+
<div class="execution-main">
|
|
118
|
+
<!--
|
|
119
|
+
任务简介块
|
|
120
|
+
el-text 替代原生 h2/p，统一使用 Element Plus 排版体系：
|
|
121
|
+
- type="primary" 显示主题色标题
|
|
122
|
+
- size="large" 设置 20px 字号
|
|
123
|
+
- tag="h2" 渲染为 h2 标签，保持语义
|
|
124
|
+
-->
|
|
125
|
+
<div class="intro-block">
|
|
126
|
+
<el-text tag="h2" size="large" class="page-title">待处理任务</el-text>
|
|
127
|
+
<p class="intro-desc">您有待处理的业务任务，请及时处理</p>
|
|
128
|
+
</div>
|
|
120
129
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
-
|
|
130
|
-
- v-for 遍历 taskStats，:key 用 label 保证唯一性
|
|
131
|
-
- :class 动态绑定色调类（is-blue 等）和汇总标记（is-total）
|
|
132
|
-
-->
|
|
133
|
-
<section class="stats-panel" aria-label="待处理任务统计">
|
|
134
|
-
<article
|
|
135
|
-
v-for="(item, index) in taskStats"
|
|
136
|
-
:key="item.label"
|
|
137
|
-
class="stat-item"
|
|
138
|
-
:class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
|
|
139
|
-
>
|
|
140
|
-
<!--
|
|
141
|
-
统计图标
|
|
142
|
-
- v-if="item.icon"：第一项"全部待处理"无图标，此处留空
|
|
143
|
-
- aria-hidden="true"：装饰性图标，屏幕阅读器忽略
|
|
144
|
-
- <component :is>：动态渲染 Element Plus 图标组件
|
|
145
|
-
-->
|
|
146
|
-
<div v-if="item.icon" class="stat-icon" aria-hidden="true">
|
|
147
|
-
<el-icon><component :is="item.icon" /></el-icon>
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
<!-- 统计文案区：标签 + 数值 + 单位 -->
|
|
151
|
-
<div class="stat-copy">
|
|
152
|
-
<h3>{{ item.label }}</h3>
|
|
153
|
-
<p>
|
|
154
|
-
<strong>{{ item.value }}</strong>
|
|
155
|
-
<span>{{ item.unit }}</span>
|
|
156
|
-
</p>
|
|
157
|
-
</div>
|
|
158
|
-
</article>
|
|
159
|
-
</section>
|
|
160
|
-
|
|
161
|
-
<!--
|
|
162
|
-
快速入口区
|
|
163
|
-
- grid 4 列布局，每列一张业务入口卡片
|
|
164
|
-
- 与统计面板色调保持一致，便于用户建立视觉关联
|
|
165
|
-
-->
|
|
166
|
-
<section class="quick-section" aria-label="快速进入">
|
|
167
|
-
<h2>快速进入</h2>
|
|
168
|
-
|
|
169
|
-
<div class="entry-grid">
|
|
130
|
+
<!--
|
|
131
|
+
待处理任务统计面板
|
|
132
|
+
布局方案：
|
|
133
|
+
- el-row + el-col 替代原 CSS Grid 5 列布局
|
|
134
|
+
- :gutter="20" 在列间添加 20px 间距（列两侧各 10px padding）
|
|
135
|
+
- 桌面: span=5（约 5 列） 平板: span=12（2 列） 手机: span=24（1 列）
|
|
136
|
+
- el-statistic 替代手写数字/标签，自带数字排版
|
|
137
|
+
-->
|
|
138
|
+
<section class="stats-panel" aria-label="待处理任务统计">
|
|
170
139
|
<article
|
|
171
|
-
v-for="
|
|
172
|
-
:key="
|
|
173
|
-
class="
|
|
174
|
-
:class="`is-${
|
|
140
|
+
v-for="(item, index) in taskStats"
|
|
141
|
+
:key="item.label"
|
|
142
|
+
class="stat-item"
|
|
143
|
+
:class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
|
|
175
144
|
>
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
145
|
+
<div v-if="item.icon" class="stat-heading">
|
|
146
|
+
<div class="stat-icon" aria-hidden="true">
|
|
147
|
+
<el-icon :size="46"><component :is="item.icon" /></el-icon>
|
|
148
|
+
</div>
|
|
149
|
+
<span class="stat-label">{{ item.label }}</span>
|
|
179
150
|
</div>
|
|
151
|
+
<span v-else class="stat-label stat-total-label">{{ item.label }}</span>
|
|
180
152
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
<!--
|
|
186
|
-
操作按钮
|
|
187
|
-
- type="primary" 使用 Element Plus 主色（实际颜色由 CSS --tone 覆盖）
|
|
188
|
-
- 点击事件待后续接入路由跳转或业务逻辑
|
|
189
|
-
-->
|
|
190
|
-
<el-button class="entry-button" type="primary">
|
|
191
|
-
{{ entry.button }}
|
|
192
|
-
</el-button>
|
|
153
|
+
<div class="stat-number-row">
|
|
154
|
+
<strong class="stat-number">{{ item.value }}</strong>
|
|
155
|
+
<span class="stat-unit">{{ item.unit }}</span>
|
|
156
|
+
</div>
|
|
193
157
|
</article>
|
|
194
|
-
</
|
|
195
|
-
|
|
158
|
+
</section>
|
|
159
|
+
|
|
160
|
+
<section class="quick-section" aria-label="快速进入">
|
|
161
|
+
<h2 class="section-title">快速进入</h2>
|
|
162
|
+
|
|
163
|
+
<div class="entry-grid">
|
|
164
|
+
<article
|
|
165
|
+
v-for="entry in quickEntries"
|
|
166
|
+
:key="entry.title"
|
|
167
|
+
class="entry-card"
|
|
168
|
+
:class="`is-${entry.tone}`"
|
|
169
|
+
>
|
|
170
|
+
<div class="entry-icon" aria-hidden="true">
|
|
171
|
+
<el-icon :size="58"><component :is="entry.icon" /></el-icon>
|
|
172
|
+
</div>
|
|
173
|
+
<h3 class="entry-title">{{ entry.title }}</h3>
|
|
174
|
+
<p class="entry-desc">{{ entry.desc }}</p>
|
|
175
|
+
<button class="entry-button" type="button">{{ entry.button }}</button>
|
|
176
|
+
</article>
|
|
177
|
+
</div>
|
|
178
|
+
</section>
|
|
179
|
+
</div>
|
|
196
180
|
|
|
197
181
|
</section>
|
|
198
182
|
</main>
|
|
@@ -201,16 +185,13 @@ const quickEntries: EntryAction[] = [
|
|
|
201
185
|
<style scoped>
|
|
202
186
|
/* ============================================================
|
|
203
187
|
头寸预报 - 执行页面样式
|
|
204
|
-
|
|
205
|
-
色彩系统：通过 --tone
|
|
206
|
-
由 .is-blue / .is-green / .is-orange / .is-red 类设置。
|
|
207
|
-
响应式断点：1180px（平板/小桌面）、720px（手机）
|
|
188
|
+
结构：内容区 → 任务简介 → 统计面板 → 快速入口
|
|
189
|
+
色彩系统：通过 --tone 变量驱动图标、数字和按钮的强调色。
|
|
208
190
|
============================================================ */
|
|
209
191
|
|
|
210
192
|
/* ---- 页面根容器 ----
|
|
211
193
|
定义全局设计变量（调色板）、背景渐变和基础排版。
|
|
212
|
-
overflow-x: hidden
|
|
213
|
-
overflow-y: auto 确保内容超出视口时可纵向滚动。 */
|
|
194
|
+
overflow-x: hidden 防止 el-row 负 margin 导致水平滚动条。 */
|
|
214
195
|
.forecast-execution-page {
|
|
215
196
|
--ink: #0a1020; /* 主文字色：深蓝黑，用于标题和正文 */
|
|
216
197
|
--muted: #4a5568; /* 次要文字色：灰色，用于描述性文字 */
|
|
@@ -233,46 +214,65 @@ const quickEntries: EntryAction[] = [
|
|
|
233
214
|
|
|
234
215
|
/* ---- 内容区 ----
|
|
235
216
|
max-width 限制最大宽度，margin: 0 auto 实现水平居中；
|
|
236
|
-
上下内边距拉开与页面边缘的距离。
|
|
217
|
+
上下内边距拉开与页面边缘的距离。
|
|
218
|
+
el-col 自带 padding（由 el-row gutter 控制），无需额外 gap。 */
|
|
237
219
|
.execution-content {
|
|
238
|
-
max-width:
|
|
220
|
+
max-width: 1536px;
|
|
239
221
|
margin: 0 auto;
|
|
240
|
-
padding:
|
|
222
|
+
padding: 14px 22px 36px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.execution-notice {
|
|
226
|
+
margin-bottom: 42px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.execution-main {
|
|
230
|
+
padding-inline: 36px;
|
|
241
231
|
}
|
|
242
232
|
|
|
243
233
|
/* ---- 任务简介块 ----
|
|
244
|
-
|
|
245
|
-
使用 CSS nesting，h2 和 p 的选择器均相对 .intro-block 声明。 */
|
|
234
|
+
el-text 替代了原生 h2/p，仅保留间距和标题字重。 */
|
|
246
235
|
.intro-block {
|
|
247
|
-
margin-bottom:
|
|
236
|
+
margin-bottom: 28px;
|
|
237
|
+
}
|
|
248
238
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
239
|
+
/* 页面标题：el-text 渲染为 h2，额外设置 Extra Bold 字重 */
|
|
240
|
+
.page-title {
|
|
241
|
+
display: block;
|
|
242
|
+
margin-bottom: 18px;
|
|
243
|
+
color: #091225;
|
|
244
|
+
font-size: 30px;
|
|
245
|
+
line-height: 1;
|
|
246
|
+
font-weight: 800 !important;
|
|
247
|
+
}
|
|
256
248
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
line-height: 1.45;
|
|
263
|
-
}
|
|
249
|
+
.intro-desc {
|
|
250
|
+
margin: 0;
|
|
251
|
+
color: #3f4a5c;
|
|
252
|
+
font-size: 18px;
|
|
253
|
+
line-height: 1.4;
|
|
264
254
|
}
|
|
265
255
|
|
|
266
|
-
/*
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
256
|
+
/* 区块标题：快速入口标题，同样 Extra Bold */
|
|
257
|
+
.section-title {
|
|
258
|
+
display: block;
|
|
259
|
+
margin-bottom: 24px;
|
|
260
|
+
color: #070b13;
|
|
261
|
+
font-size: 26px;
|
|
262
|
+
line-height: 1;
|
|
263
|
+
font-weight: 800 !important;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* ---- 统计面板 ----
|
|
267
|
+
保留面板容器样式（背景、边框、阴影），内部栅格由 el-row 接管。
|
|
268
|
+
overflow-x: hidden 包含 el-row 的负 margin，防止溢出。 */
|
|
270
269
|
.stats-panel {
|
|
270
|
+
min-height: 188px;
|
|
271
271
|
display: grid;
|
|
272
272
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
273
|
-
|
|
274
|
-
margin-bottom:
|
|
275
|
-
padding
|
|
273
|
+
align-items: center;
|
|
274
|
+
margin-bottom: 44px;
|
|
275
|
+
padding: 30px 0;
|
|
276
276
|
border: 1px solid var(--line);
|
|
277
277
|
border-radius: 10px;
|
|
278
278
|
background: rgba(255, 255, 255, .9);
|
|
@@ -280,134 +280,95 @@ const quickEntries: EntryAction[] = [
|
|
|
280
280
|
}
|
|
281
281
|
|
|
282
282
|
/* ---- 单个统计项 ----
|
|
283
|
-
flex
|
|
284
|
-
|
|
285
|
-
& + & 是 CSS nesting 写法，等价于 .stat-item + .stat-item，
|
|
286
|
-
表示"紧跟在同级元素后面的统计项"添加左侧分隔线。 */
|
|
283
|
+
el-col 自带 gutter padding，仅需 flex 对齐和分隔线。
|
|
284
|
+
& + & 选择器：相邻统计项之间显示左侧分隔线（桌面端）。 */
|
|
287
285
|
.stat-item {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
align-
|
|
286
|
+
min-height: 118px;
|
|
287
|
+
display: grid;
|
|
288
|
+
grid-template-rows: 42px 62px;
|
|
289
|
+
align-content: center;
|
|
292
290
|
justify-content: center;
|
|
293
|
-
|
|
294
|
-
padding:
|
|
291
|
+
justify-items: center;
|
|
292
|
+
padding: 0 28px;
|
|
295
293
|
|
|
296
294
|
& + & {
|
|
297
295
|
border-left: 1px solid var(--line);
|
|
298
296
|
}
|
|
299
297
|
}
|
|
300
298
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
font-weight: 700;
|
|
308
|
-
white-space: nowrap;
|
|
309
|
-
}
|
|
299
|
+
.stat-heading {
|
|
300
|
+
display: inline-flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
gap: 16px;
|
|
303
|
+
color: #070b13;
|
|
304
|
+
}
|
|
310
305
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
color: var(--tone);
|
|
315
|
-
line-height: 1;
|
|
316
|
-
white-space: nowrap; /* 防止数值和单位换行 */
|
|
317
|
-
}
|
|
306
|
+
.stat-total-label {
|
|
307
|
+
align-self: center;
|
|
308
|
+
}
|
|
318
309
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
310
|
+
/* 统计标签文字（如"全部待处理"）：700 字重，不换行 */
|
|
311
|
+
.stat-label {
|
|
312
|
+
color: #05070d;
|
|
313
|
+
font-size: 18px;
|
|
314
|
+
font-weight: 800;
|
|
315
|
+
white-space: nowrap;
|
|
316
|
+
}
|
|
324
317
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
318
|
+
.stat-number-row {
|
|
319
|
+
align-self: end;
|
|
320
|
+
display: inline-flex;
|
|
321
|
+
align-items: baseline;
|
|
322
|
+
gap: 14px;
|
|
323
|
+
color: var(--tone);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.stat-number {
|
|
327
|
+
font-size: 50px;
|
|
328
|
+
font-weight: 800;
|
|
329
|
+
line-height: .95;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.stat-unit {
|
|
333
|
+
font-size: 18px;
|
|
334
|
+
font-weight: 800;
|
|
331
335
|
}
|
|
332
336
|
|
|
333
337
|
/* ---- 统计图标 ----
|
|
334
|
-
|
|
335
|
-
flex: 0 0 auto 防止图标被压缩。
|
|
336
|
-
颜色继承 --tone 变量。 */
|
|
338
|
+
el-icon 提供 :size prop，仅需颜色继承和 flex 防压缩。 */
|
|
337
339
|
.stat-icon {
|
|
338
|
-
width: 38px;
|
|
339
|
-
height: 38px;
|
|
340
340
|
flex: 0 0 auto;
|
|
341
|
-
display: inline-flex;
|
|
342
|
-
align-items: center;
|
|
343
|
-
justify-content: center;
|
|
344
|
-
margin-top: 2px;
|
|
345
341
|
color: var(--tone);
|
|
346
|
-
|
|
342
|
+
margin-top: 2px;
|
|
347
343
|
}
|
|
348
344
|
|
|
349
345
|
/* ---- 色调工具类 ----
|
|
350
346
|
将全局调色板变量映射到 --tone 局部变量，
|
|
351
|
-
使子元素（图标、数字、按钮）通过 var(--tone)
|
|
352
|
-
每个类只有一条声明，用单行写法节省空间。 */
|
|
347
|
+
使子元素（图标、数字、按钮）通过 var(--tone) 自动继承色调。 */
|
|
353
348
|
.is-blue { --tone: var(--blue); }
|
|
354
349
|
.is-green { --tone: var(--green); }
|
|
355
350
|
.is-orange { --tone: var(--orange); }
|
|
356
351
|
.is-red { --tone: var(--red); }
|
|
357
352
|
|
|
358
|
-
/* ---- 快速入口区 ---- */
|
|
359
|
-
.quick-section {
|
|
360
|
-
& h2 {
|
|
361
|
-
margin-bottom: 20px; /* 标题与卡片网格的间距 */
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
/* ---- 入口卡片网格 ----
|
|
366
|
-
4 列等宽布局，18px 间距，适配四个业务入口。 */
|
|
367
353
|
.entry-grid {
|
|
368
354
|
display: grid;
|
|
369
355
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
370
|
-
gap:
|
|
356
|
+
gap: 24px;
|
|
371
357
|
}
|
|
372
358
|
|
|
373
|
-
/* ---- 单张入口卡片 ----
|
|
374
|
-
纵向 flex 布局，align-items: center 使内容水平居中；
|
|
375
|
-
min-height 保证卡片高度一致；
|
|
376
|
-
半透明白色背景 + 柔和阴影营造卡片浮层效果。
|
|
377
|
-
子元素 h3/p 使用 nesting 直接嵌套声明。 */
|
|
378
359
|
.entry-card {
|
|
379
|
-
min-height:
|
|
360
|
+
min-height: 330px;
|
|
380
361
|
display: flex;
|
|
381
362
|
flex-direction: column;
|
|
382
363
|
align-items: center;
|
|
383
|
-
padding:
|
|
364
|
+
padding: 34px 34px 34px;
|
|
384
365
|
border: 1px solid var(--line);
|
|
385
|
-
border-radius:
|
|
386
|
-
background: rgba(255, 255, 255, .
|
|
387
|
-
box-shadow: 0 8px
|
|
388
|
-
|
|
389
|
-
/* 卡片标题（如"预报填报"）：22px，Extra Bold */
|
|
390
|
-
& h3 {
|
|
391
|
-
margin: 18px 0 10px;
|
|
392
|
-
font-size: 22px;
|
|
393
|
-
font-weight: 800;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
/* 卡片描述文字：居中对齐，最小高度保证布局稳定 */
|
|
397
|
-
& p {
|
|
398
|
-
min-height: 24px;
|
|
399
|
-
margin: 0 0 20px;
|
|
400
|
-
color: var(--muted);
|
|
401
|
-
font-size: 15px;
|
|
402
|
-
line-height: 1.55;
|
|
403
|
-
text-align: center;
|
|
404
|
-
}
|
|
366
|
+
border-radius: 10px;
|
|
367
|
+
background: rgba(255, 255, 255, .86);
|
|
368
|
+
box-shadow: 0 8px 18px rgba(21, 39, 68, .05);
|
|
369
|
+
text-align: center;
|
|
405
370
|
}
|
|
406
371
|
|
|
407
|
-
/* ---- 入口卡片图标 ----
|
|
408
|
-
88x88 大图标容器，18px 圆角；
|
|
409
|
-
背景色使用 color-mix 将当前色调与白色按 11:89 混合，
|
|
410
|
-
得到一个极淡的同色系底色，突出图标但不抢眼。 */
|
|
411
372
|
.entry-icon {
|
|
412
373
|
width: 88px;
|
|
413
374
|
height: 88px;
|
|
@@ -417,22 +378,35 @@ const quickEntries: EntryAction[] = [
|
|
|
417
378
|
border-radius: 18px;
|
|
418
379
|
color: var(--tone);
|
|
419
380
|
background: color-mix(in srgb, var(--tone) 11%, #fff);
|
|
420
|
-
font-size: 46px;
|
|
421
381
|
}
|
|
422
382
|
|
|
423
|
-
/*
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
383
|
+
/* 入口卡片标题：el-text 渲染，额外设置 Extra Bold */
|
|
384
|
+
.entry-title {
|
|
385
|
+
margin: 24px 0 14px;
|
|
386
|
+
color: #030713;
|
|
387
|
+
font-size: 24px;
|
|
388
|
+
line-height: 1;
|
|
389
|
+
font-weight: 800 !important;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.entry-desc {
|
|
393
|
+
margin: 0;
|
|
394
|
+
color: #4a5568;
|
|
395
|
+
font-size: 16px;
|
|
396
|
+
line-height: 1.5;
|
|
397
|
+
}
|
|
398
|
+
|
|
427
399
|
.entry-button {
|
|
428
400
|
width: 180px;
|
|
429
|
-
height:
|
|
401
|
+
height: 46px;
|
|
430
402
|
margin-top: auto;
|
|
431
403
|
border: 0;
|
|
432
404
|
border-radius: 7px;
|
|
433
405
|
background: var(--tone);
|
|
434
|
-
|
|
406
|
+
color: #fff;
|
|
407
|
+
font-size: 17px;
|
|
435
408
|
font-weight: 700;
|
|
409
|
+
cursor: pointer;
|
|
436
410
|
|
|
437
411
|
&:hover,
|
|
438
412
|
&:focus {
|
|
@@ -441,23 +415,23 @@ const quickEntries: EntryAction[] = [
|
|
|
441
415
|
}
|
|
442
416
|
|
|
443
417
|
/* ============================================================
|
|
444
|
-
响应式：平板 / 小桌面（≤
|
|
445
|
-
|
|
446
|
-
|
|
418
|
+
响应式：平板 / 小桌面（≤ 992px）
|
|
419
|
+
el-col 的 sm="12" 自动切换为 2 列布局；
|
|
420
|
+
统计项分隔线逻辑从"相邻项之间"改为"偶数列左侧 + 行间横线"。
|
|
447
421
|
============================================================ */
|
|
448
|
-
@media (max-width:
|
|
422
|
+
@media (max-width: 992px) {
|
|
449
423
|
.execution-content {
|
|
450
|
-
padding-inline: 24px;
|
|
424
|
+
padding-inline: 24px;
|
|
451
425
|
}
|
|
452
426
|
|
|
453
427
|
.stats-panel {
|
|
454
428
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
455
|
-
padding
|
|
429
|
+
padding: 0;
|
|
456
430
|
}
|
|
457
431
|
|
|
458
432
|
.stat-item {
|
|
459
|
-
justify-content: flex-start;
|
|
460
|
-
padding:
|
|
433
|
+
justify-content: flex-start;
|
|
434
|
+
padding: 28px;
|
|
461
435
|
|
|
462
436
|
/* 移除桌面版的相邻分隔线 */
|
|
463
437
|
& + & {
|
|
@@ -481,36 +455,33 @@ const quickEntries: EntryAction[] = [
|
|
|
481
455
|
}
|
|
482
456
|
|
|
483
457
|
/* ============================================================
|
|
484
|
-
响应式：手机（≤
|
|
485
|
-
|
|
458
|
+
响应式：手机（≤ 768px）
|
|
459
|
+
el-col 的 xs="24" 自动切换为单列布局；
|
|
460
|
+
统计项分隔线改为纯水平，字号缩小。
|
|
486
461
|
============================================================ */
|
|
487
|
-
@media (max-width:
|
|
462
|
+
@media (max-width: 768px) {
|
|
488
463
|
.execution-content {
|
|
489
|
-
padding:
|
|
464
|
+
padding: 14px 16px 24px;
|
|
490
465
|
}
|
|
491
466
|
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
.quick-section h2 {
|
|
496
|
-
font-size: 20px;
|
|
497
|
-
}
|
|
467
|
+
.execution-main {
|
|
468
|
+
padding-inline: 0;
|
|
469
|
+
}
|
|
498
470
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
471
|
+
.page-title {
|
|
472
|
+
font-size: 28px;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.section-title {
|
|
476
|
+
font-size: 26px;
|
|
503
477
|
}
|
|
504
478
|
|
|
505
|
-
/* 统计面板和入口卡片均为单列 */
|
|
506
479
|
.stats-panel,
|
|
507
480
|
.entry-grid {
|
|
508
481
|
grid-template-columns: 1fr;
|
|
509
482
|
}
|
|
510
483
|
|
|
511
|
-
/*
|
|
512
|
-
同时覆盖桌面和平板的所有分隔线规则；
|
|
513
|
-
:first-child 例外：第一项不需要顶部分隔线。 */
|
|
484
|
+
/* 统计项：移除所有竖线，改为纯水平分隔线（首项除外） */
|
|
514
485
|
.stat-item,
|
|
515
486
|
.stat-item:nth-child(2n),
|
|
516
487
|
.stat-item:nth-child(n + 3) {
|
|
@@ -523,13 +494,12 @@ const quickEntries: EntryAction[] = [
|
|
|
523
494
|
}
|
|
524
495
|
|
|
525
496
|
/* 大号数字缩小，避免在窄屏溢出 */
|
|
526
|
-
.stat-
|
|
527
|
-
font-size:
|
|
497
|
+
.stat-number {
|
|
498
|
+
font-size: 48px;
|
|
528
499
|
}
|
|
529
500
|
|
|
530
|
-
/* 卡片最小高度降低，减少纵向空间占用 */
|
|
531
501
|
.entry-card {
|
|
532
|
-
min-height:
|
|
502
|
+
min-height: 340px;
|
|
533
503
|
}
|
|
534
504
|
}
|
|
535
505
|
</style>
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|