verce-vue-test 0.0.12 → 0.0.13
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
CHANGED
|
@@ -1,13 +1,42 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* 头寸预报 - 执行页面
|
|
4
|
+
*
|
|
5
|
+
* 页面职责：
|
|
6
|
+
* 展示当前登录用户的待处理任务概览（统计面板），
|
|
7
|
+
* 并提供快速进入各业务操作（预报填报、修改、复核确认、异常反馈）的入口。
|
|
8
|
+
*
|
|
9
|
+
* 数据来源：
|
|
10
|
+
* 目前 taskStats 和 quickEntries 为本地静态数据，
|
|
11
|
+
* 后续替换为接口请求时只需改动数据源，模板无需修改。
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
// ---- 图标导入 ----
|
|
15
|
+
// 从 Element Plus 图标库引入四个业务语义图标，分别对应四种任务类型
|
|
2
16
|
import {
|
|
3
|
-
CircleCheckFilled,
|
|
4
|
-
Document,
|
|
5
|
-
RefreshRight,
|
|
6
|
-
WarningFilled,
|
|
17
|
+
CircleCheckFilled, // 复核确认：圆圈对勾
|
|
18
|
+
Document, // 预报填报：文档
|
|
19
|
+
RefreshRight, // 修改：向右刷新箭头
|
|
20
|
+
WarningFilled, // 异常反馈：实心警告三角
|
|
7
21
|
} from '@element-plus/icons-vue'
|
|
8
22
|
|
|
23
|
+
// ---- 类型定义 ----
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* 色调枚举，决定元素的强调色。
|
|
27
|
+
* 与 CSS 中 .is-blue / .is-green / .is-orange / .is-red 类一一对应，
|
|
28
|
+
* 最终映射到 --tone CSS 变量，驱动图标、数字、按钮的颜色。
|
|
29
|
+
*/
|
|
9
30
|
type Tone = 'blue' | 'green' | 'orange' | 'red'
|
|
10
31
|
|
|
32
|
+
/**
|
|
33
|
+
* 统计面板单条数据结构
|
|
34
|
+
* @property label - 统计项名称（如"全部待处理"）
|
|
35
|
+
* @property value - 数值（如 12）
|
|
36
|
+
* @property unit - 数值单位（如"条"）
|
|
37
|
+
* @property tone - 强调色，决定数字和图标的颜色
|
|
38
|
+
* @property icon - 图标组件，可选；第一个"全部待处理"项无图标
|
|
39
|
+
*/
|
|
11
40
|
interface TaskStat {
|
|
12
41
|
label: string
|
|
13
42
|
value: number
|
|
@@ -16,6 +45,14 @@ interface TaskStat {
|
|
|
16
45
|
icon?: unknown
|
|
17
46
|
}
|
|
18
47
|
|
|
48
|
+
/**
|
|
49
|
+
* 快速入口卡片数据结构
|
|
50
|
+
* @property title - 卡片标题（如"预报填报"）
|
|
51
|
+
* @property desc - 业务描述（如"填写头寸预报数据"）
|
|
52
|
+
* @property button - 按钮文案（如"立即填报"）
|
|
53
|
+
* @property tone - 强调色，决定图标背景和按钮颜色
|
|
54
|
+
* @property icon - 图标组件
|
|
55
|
+
*/
|
|
19
56
|
interface EntryAction {
|
|
20
57
|
title: string
|
|
21
58
|
desc: string
|
|
@@ -24,30 +61,75 @@ interface EntryAction {
|
|
|
24
61
|
icon: unknown
|
|
25
62
|
}
|
|
26
63
|
|
|
64
|
+
// ---- 数据 ----
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* 待处理任务统计数据
|
|
68
|
+
* 第一项"全部待处理"是汇总值，无独立图标（模板中通过 v-if 控制）；
|
|
69
|
+
* 其余四项分别对应四个业务模块，图标和色调一一配对。
|
|
70
|
+
*/
|
|
27
71
|
const taskStats: TaskStat[] = [
|
|
28
72
|
{ label: '全部待处理', value: 12, unit: '条', tone: 'blue' },
|
|
29
|
-
{ label: '预报填报',
|
|
30
|
-
{ label: '修改',
|
|
31
|
-
{ label: '复核确认',
|
|
32
|
-
{ label: '异常反馈',
|
|
73
|
+
{ label: '预报填报', value: 5, unit: '条', tone: 'blue', icon: Document },
|
|
74
|
+
{ label: '修改', value: 3, unit: '条', tone: 'green', icon: RefreshRight },
|
|
75
|
+
{ label: '复核确认', value: 2, unit: '条', tone: 'orange', icon: CircleCheckFilled },
|
|
76
|
+
{ label: '异常反馈', value: 2, unit: '条', tone: 'red', icon: WarningFilled },
|
|
33
77
|
]
|
|
34
78
|
|
|
79
|
+
/**
|
|
80
|
+
* 快速入口卡片数据
|
|
81
|
+
* 四个卡片与统计面板的四项业务一一对应，色调保持一致，
|
|
82
|
+
* 确保用户在视觉上能将统计数字与入口卡片关联起来。
|
|
83
|
+
*/
|
|
35
84
|
const quickEntries: EntryAction[] = [
|
|
36
|
-
{ title: '预报填报', desc: '填写头寸预报数据',
|
|
37
|
-
{ title: '修改',
|
|
38
|
-
{ title: '复核确认', desc: '复核并确认预报数据',
|
|
39
|
-
{ title: '异常反馈', desc: '处理预报异常反馈',
|
|
85
|
+
{ title: '预报填报', desc: '填写头寸预报数据', button: '立即填报', tone: 'blue', icon: Document },
|
|
86
|
+
{ title: '修改', desc: '修改已填报预报数据', button: '立即处理', tone: 'green', icon: RefreshRight },
|
|
87
|
+
{ title: '复核确认', desc: '复核并确认预报数据', button: '立即处理', tone: 'orange', icon: CircleCheckFilled },
|
|
88
|
+
{ title: '异常反馈', desc: '处理预报异常反馈', button: '立即处理', tone: 'red', icon: WarningFilled },
|
|
40
89
|
]
|
|
41
90
|
</script>
|
|
42
91
|
|
|
92
|
+
<!--
|
|
93
|
+
模板结构说明
|
|
94
|
+
===========
|
|
95
|
+
<main> ─ 页面根容器，应用全屏背景和设计变量
|
|
96
|
+
<section.execution-content> ─ 内容区，限制最大宽度并居中
|
|
97
|
+
<div.intro-block> ─ 标题 + 说明文字
|
|
98
|
+
<section.stats-panel> ─ 待处理任务统计面板（5 列网格）
|
|
99
|
+
<article.stat-item> ─ 单条统计项，循环渲染 taskStats
|
|
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> ─ 操作按钮
|
|
109
|
+
|
|
110
|
+
无障碍说明：
|
|
111
|
+
- 统计面板和快速入口区均使用 aria-label 标注用途
|
|
112
|
+
- 图标容器使用 aria-hidden="true"，避免屏幕阅读器重复朗读
|
|
113
|
+
-->
|
|
43
114
|
<template>
|
|
115
|
+
<!-- 页面根容器：.forecast-execution-page 承载背景和 CSS 变量 -->
|
|
44
116
|
<main class="forecast-execution-page">
|
|
117
|
+
|
|
118
|
+
<!-- 内容区：限制最大宽度 1428px，水平居中 -->
|
|
45
119
|
<section class="execution-content">
|
|
120
|
+
|
|
121
|
+
<!-- 任务简介块：页面标题和引导文案 -->
|
|
46
122
|
<div class="intro-block">
|
|
47
123
|
<h2>待处理任务</h2>
|
|
48
124
|
<p>您有待处理的业务任务，请及时处理</p>
|
|
49
125
|
</div>
|
|
50
126
|
|
|
127
|
+
<!--
|
|
128
|
+
待处理任务统计面板
|
|
129
|
+
- 使用 grid 5 列布局，每列展示一个统计项
|
|
130
|
+
- v-for 遍历 taskStats，:key 用 label 保证唯一性
|
|
131
|
+
- :class 动态绑定色调类（is-blue 等）和汇总标记（is-total）
|
|
132
|
+
-->
|
|
51
133
|
<section class="stats-panel" aria-label="待处理任务统计">
|
|
52
134
|
<article
|
|
53
135
|
v-for="(item, index) in taskStats"
|
|
@@ -55,10 +137,17 @@ const quickEntries: EntryAction[] = [
|
|
|
55
137
|
class="stat-item"
|
|
56
138
|
:class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
|
|
57
139
|
>
|
|
140
|
+
<!--
|
|
141
|
+
统计图标
|
|
142
|
+
- v-if="item.icon"：第一项"全部待处理"无图标，此处留空
|
|
143
|
+
- aria-hidden="true"：装饰性图标，屏幕阅读器忽略
|
|
144
|
+
- <component :is>：动态渲染 Element Plus 图标组件
|
|
145
|
+
-->
|
|
58
146
|
<div v-if="item.icon" class="stat-icon" aria-hidden="true">
|
|
59
147
|
<el-icon><component :is="item.icon" /></el-icon>
|
|
60
148
|
</div>
|
|
61
149
|
|
|
150
|
+
<!-- 统计文案区：标签 + 数值 + 单位 -->
|
|
62
151
|
<div class="stat-copy">
|
|
63
152
|
<h3>{{ item.label }}</h3>
|
|
64
153
|
<p>
|
|
@@ -69,6 +158,11 @@ const quickEntries: EntryAction[] = [
|
|
|
69
158
|
</article>
|
|
70
159
|
</section>
|
|
71
160
|
|
|
161
|
+
<!--
|
|
162
|
+
快速入口区
|
|
163
|
+
- grid 4 列布局，每列一张业务入口卡片
|
|
164
|
+
- 与统计面板色调保持一致，便于用户建立视觉关联
|
|
165
|
+
-->
|
|
72
166
|
<section class="quick-section" aria-label="快速进入">
|
|
73
167
|
<h2>快速进入</h2>
|
|
74
168
|
|
|
@@ -79,82 +173,117 @@ const quickEntries: EntryAction[] = [
|
|
|
79
173
|
class="entry-card"
|
|
80
174
|
:class="`is-${entry.tone}`"
|
|
81
175
|
>
|
|
176
|
+
<!-- 卡片图标：纯装饰，屏幕阅读器忽略 -->
|
|
82
177
|
<div class="entry-icon" aria-hidden="true">
|
|
83
178
|
<el-icon><component :is="entry.icon" /></el-icon>
|
|
84
179
|
</div>
|
|
85
180
|
|
|
181
|
+
<!-- 卡片内容：标题 + 业务描述 -->
|
|
86
182
|
<h3>{{ entry.title }}</h3>
|
|
87
183
|
<p>{{ entry.desc }}</p>
|
|
88
184
|
|
|
185
|
+
<!--
|
|
186
|
+
操作按钮
|
|
187
|
+
- type="primary" 使用 Element Plus 主色（实际颜色由 CSS --tone 覆盖）
|
|
188
|
+
- 点击事件待后续接入路由跳转或业务逻辑
|
|
189
|
+
-->
|
|
89
190
|
<el-button class="entry-button" type="primary">
|
|
90
191
|
{{ entry.button }}
|
|
91
192
|
</el-button>
|
|
92
193
|
</article>
|
|
93
194
|
</div>
|
|
94
195
|
</section>
|
|
196
|
+
|
|
95
197
|
</section>
|
|
96
198
|
</main>
|
|
97
199
|
</template>
|
|
98
200
|
|
|
99
201
|
<style scoped>
|
|
202
|
+
/* ============================================================
|
|
203
|
+
头寸预报 - 执行页面样式
|
|
204
|
+
结构：页面根容器 → 内容区 → 任务简介 → 统计面板 → 快速入口
|
|
205
|
+
色彩系统：通过 --tone 变量驱动单个条目/卡片的强调色，
|
|
206
|
+
由 .is-blue / .is-green / .is-orange / .is-red 类设置。
|
|
207
|
+
响应式断点：1180px（平板/小桌面）、720px（手机）
|
|
208
|
+
============================================================ */
|
|
209
|
+
|
|
210
|
+
/* ---- 页面根容器 ----
|
|
211
|
+
定义全局设计变量（调色板）、背景渐变和基础排版。
|
|
212
|
+
overflow-x: hidden 防止水平滚动条出现；
|
|
213
|
+
overflow-y: auto 确保内容超出视口时可纵向滚动。 */
|
|
100
214
|
.forecast-execution-page {
|
|
101
|
-
--ink: #0a1020;
|
|
102
|
-
--muted: #4a5568;
|
|
103
|
-
--line: #dde3ee;
|
|
104
|
-
--blue: #2563dc;
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
--red: #e93442;
|
|
215
|
+
--ink: #0a1020; /* 主文字色：深蓝黑，用于标题和正文 */
|
|
216
|
+
--muted: #4a5568; /* 次要文字色：灰色，用于描述性文字 */
|
|
217
|
+
--line: #dde3ee; /* 边框/分割线色：淡蓝灰 */
|
|
218
|
+
--blue: #2563dc; /* 蓝色强调色：用于"预报填报" */
|
|
219
|
+
--green: #18a970; /* 绿色强调色：用于"修改" */
|
|
220
|
+
--orange: #f47a00; /* 橙色强调色：用于"复核确认" */
|
|
221
|
+
--red: #e93442; /* 红色强调色：用于"异常反馈" */
|
|
109
222
|
width: 100%;
|
|
110
223
|
min-height: 100vh;
|
|
111
224
|
overflow-x: hidden;
|
|
112
225
|
overflow-y: auto;
|
|
113
226
|
color: var(--ink);
|
|
227
|
+
/* 双层背景：左上角蓝色光晕 + 整体浅蓝渐变，营造轻盈科技感 */
|
|
114
228
|
background:
|
|
115
229
|
radial-gradient(circle at 34% 12%, rgba(77, 139, 255, .09), transparent 32%),
|
|
116
230
|
linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
|
|
117
231
|
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
|
|
118
232
|
}
|
|
119
233
|
|
|
234
|
+
/* ---- 内容区 ----
|
|
235
|
+
max-width 限制最大宽度，margin: 0 auto 实现水平居中；
|
|
236
|
+
上下内边距拉开与页面边缘的距离。 */
|
|
120
237
|
.execution-content {
|
|
121
238
|
max-width: 1428px;
|
|
122
239
|
margin: 0 auto;
|
|
123
240
|
padding: 36px 58px 42px;
|
|
124
241
|
}
|
|
125
242
|
|
|
243
|
+
/* ---- 任务简介块 ----
|
|
244
|
+
包含标题和说明文字，与下方统计面板保持 24px 间距。
|
|
245
|
+
使用 CSS nesting，h2 和 p 的选择器均相对 .intro-block 声明。 */
|
|
126
246
|
.intro-block {
|
|
127
247
|
margin-bottom: 24px;
|
|
128
|
-
}
|
|
129
248
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
249
|
+
/* h2 同时作用于简介区标题和快速入口区标题（统一字号/字重） */
|
|
250
|
+
& h2,
|
|
251
|
+
.quick-section h2 {
|
|
252
|
+
margin: 0;
|
|
253
|
+
font-size: 24px;
|
|
254
|
+
font-weight: 800; /* 800 = Extra Bold，视觉上足够醒目 */
|
|
255
|
+
}
|
|
138
256
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
257
|
+
/* 说明段落：使用 --muted 色降低视觉优先级 */
|
|
258
|
+
& p {
|
|
259
|
+
margin-top: 14px;
|
|
260
|
+
color: var(--muted);
|
|
261
|
+
font-size: 16px;
|
|
262
|
+
line-height: 1.45;
|
|
263
|
+
}
|
|
144
264
|
}
|
|
145
265
|
|
|
266
|
+
/* ---- 统计面板（待处理任务统计） ----
|
|
267
|
+
5 列等宽网格布局，每列展示一个统计项。
|
|
268
|
+
padding-block: 30px 是 padding-top/bottom 的逻辑属性简写；
|
|
269
|
+
半透明白色背景 + 阴影制造浮层质感。 */
|
|
146
270
|
.stats-panel {
|
|
147
271
|
display: grid;
|
|
148
272
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
149
273
|
min-height: 188px;
|
|
150
274
|
margin-bottom: 34px;
|
|
151
|
-
padding: 30px
|
|
275
|
+
padding-block: 30px;
|
|
152
276
|
border: 1px solid var(--line);
|
|
153
277
|
border-radius: 10px;
|
|
154
278
|
background: rgba(255, 255, 255, .9);
|
|
155
279
|
box-shadow: 0 10px 24px rgba(29, 52, 88, .11);
|
|
156
280
|
}
|
|
157
281
|
|
|
282
|
+
/* ---- 单个统计项 ----
|
|
283
|
+
flex 布局使图标和文案水平对齐；
|
|
284
|
+
min-width: 0 防止 flex 子项溢出网格单元格；
|
|
285
|
+
& + & 是 CSS nesting 写法，等价于 .stat-item + .stat-item，
|
|
286
|
+
表示"紧跟在同级元素后面的统计项"添加左侧分隔线。 */
|
|
158
287
|
.stat-item {
|
|
159
288
|
position: relative;
|
|
160
289
|
min-width: 0;
|
|
@@ -163,39 +292,48 @@ const quickEntries: EntryAction[] = [
|
|
|
163
292
|
justify-content: center;
|
|
164
293
|
gap: 14px;
|
|
165
294
|
padding: 4px 22px 0;
|
|
166
|
-
}
|
|
167
295
|
|
|
168
|
-
|
|
169
|
-
|
|
296
|
+
& + & {
|
|
297
|
+
border-left: 1px solid var(--line);
|
|
298
|
+
}
|
|
170
299
|
}
|
|
171
300
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
301
|
+
/* ---- 统计文案区（标签 + 数值） ---- */
|
|
302
|
+
.stat-copy {
|
|
303
|
+
/* 标签文字（如"全部待处理"）：稍小字号，加粗，不换行 */
|
|
304
|
+
& h3 {
|
|
305
|
+
margin: 6px 0 18px;
|
|
306
|
+
font-size: 16px;
|
|
307
|
+
font-weight: 700;
|
|
308
|
+
white-space: nowrap;
|
|
309
|
+
}
|
|
179
310
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
311
|
+
/* 数值行：使用 --tone 变量继承当前条目的强调色 */
|
|
312
|
+
& p {
|
|
313
|
+
margin: 0;
|
|
314
|
+
color: var(--tone);
|
|
315
|
+
line-height: 1;
|
|
316
|
+
white-space: nowrap; /* 防止数值和单位换行 */
|
|
317
|
+
}
|
|
186
318
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
}
|
|
319
|
+
/* 大号数字：50px Extra Bold，视觉重心 */
|
|
320
|
+
& strong {
|
|
321
|
+
font-size: 50px;
|
|
322
|
+
font-weight: 800;
|
|
323
|
+
}
|
|
192
324
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
325
|
+
/* 单位文字（如"条"）：与数字保持 10px 间距 */
|
|
326
|
+
& span {
|
|
327
|
+
margin-left: 10px;
|
|
328
|
+
font-size: 16px;
|
|
329
|
+
font-weight: 700;
|
|
330
|
+
}
|
|
197
331
|
}
|
|
198
332
|
|
|
333
|
+
/* ---- 统计图标 ----
|
|
334
|
+
38x38 的固定尺寸容器，flex 居中对齐图标；
|
|
335
|
+
flex: 0 0 auto 防止图标被压缩。
|
|
336
|
+
颜色继承 --tone 变量。 */
|
|
199
337
|
.stat-icon {
|
|
200
338
|
width: 38px;
|
|
201
339
|
height: 38px;
|
|
@@ -208,32 +346,35 @@ const quickEntries: EntryAction[] = [
|
|
|
208
346
|
font-size: 34px;
|
|
209
347
|
}
|
|
210
348
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
.is-
|
|
216
|
-
--tone: var(--green);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.quick-section h2 {
|
|
228
|
-
margin-bottom: 20px;
|
|
349
|
+
/* ---- 色调工具类 ----
|
|
350
|
+
将全局调色板变量映射到 --tone 局部变量，
|
|
351
|
+
使子元素（图标、数字、按钮）通过 var(--tone) 自动继承当前色调。
|
|
352
|
+
每个类只有一条声明，用单行写法节省空间。 */
|
|
353
|
+
.is-blue { --tone: var(--blue); }
|
|
354
|
+
.is-green { --tone: var(--green); }
|
|
355
|
+
.is-orange { --tone: var(--orange); }
|
|
356
|
+
.is-red { --tone: var(--red); }
|
|
357
|
+
|
|
358
|
+
/* ---- 快速入口区 ---- */
|
|
359
|
+
.quick-section {
|
|
360
|
+
& h2 {
|
|
361
|
+
margin-bottom: 20px; /* 标题与卡片网格的间距 */
|
|
362
|
+
}
|
|
229
363
|
}
|
|
230
364
|
|
|
365
|
+
/* ---- 入口卡片网格 ----
|
|
366
|
+
4 列等宽布局，18px 间距，适配四个业务入口。 */
|
|
231
367
|
.entry-grid {
|
|
232
368
|
display: grid;
|
|
233
369
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
234
370
|
gap: 18px;
|
|
235
371
|
}
|
|
236
372
|
|
|
373
|
+
/* ---- 单张入口卡片 ----
|
|
374
|
+
纵向 flex 布局，align-items: center 使内容水平居中；
|
|
375
|
+
min-height 保证卡片高度一致；
|
|
376
|
+
半透明白色背景 + 柔和阴影营造卡片浮层效果。
|
|
377
|
+
子元素 h3/p 使用 nesting 直接嵌套声明。 */
|
|
237
378
|
.entry-card {
|
|
238
379
|
min-height: 316px;
|
|
239
380
|
display: flex;
|
|
@@ -244,8 +385,29 @@ const quickEntries: EntryAction[] = [
|
|
|
244
385
|
border-radius: 9px;
|
|
245
386
|
background: rgba(255, 255, 255, .78);
|
|
246
387
|
box-shadow: 0 8px 20px rgba(23, 42, 75, .05);
|
|
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
|
+
}
|
|
247
405
|
}
|
|
248
406
|
|
|
407
|
+
/* ---- 入口卡片图标 ----
|
|
408
|
+
88x88 大图标容器，18px 圆角；
|
|
409
|
+
背景色使用 color-mix 将当前色调与白色按 11:89 混合，
|
|
410
|
+
得到一个极淡的同色系底色，突出图标但不抢眼。 */
|
|
249
411
|
.entry-icon {
|
|
250
412
|
width: 88px;
|
|
251
413
|
height: 88px;
|
|
@@ -258,23 +420,10 @@ const quickEntries: EntryAction[] = [
|
|
|
258
420
|
font-size: 46px;
|
|
259
421
|
}
|
|
260
422
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
font-weight: 800;
|
|
266
|
-
letter-spacing: 0;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.entry-card p {
|
|
270
|
-
min-height: 24px;
|
|
271
|
-
margin: 0 0 20px;
|
|
272
|
-
color: var(--muted);
|
|
273
|
-
font-size: 15px;
|
|
274
|
-
line-height: 1.55;
|
|
275
|
-
text-align: center;
|
|
276
|
-
}
|
|
277
|
-
|
|
423
|
+
/* ---- 入口卡片按钮 ----
|
|
424
|
+
margin-top: auto 将按钮推至卡片底部（flex column 布局下生效）；
|
|
425
|
+
背景色直接使用 --tone 变量；
|
|
426
|
+
hover/focus 时用 color-mix 将色调加深 12%，给出交互反馈。 */
|
|
278
427
|
.entry-button {
|
|
279
428
|
width: 180px;
|
|
280
429
|
height: 44px;
|
|
@@ -284,38 +433,46 @@ const quickEntries: EntryAction[] = [
|
|
|
284
433
|
background: var(--tone);
|
|
285
434
|
font-size: 18px;
|
|
286
435
|
font-weight: 700;
|
|
287
|
-
}
|
|
288
436
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
437
|
+
&:hover,
|
|
438
|
+
&:focus {
|
|
439
|
+
background: color-mix(in srgb, var(--tone) 88%, #000);
|
|
440
|
+
}
|
|
292
441
|
}
|
|
293
442
|
|
|
443
|
+
/* ============================================================
|
|
444
|
+
响应式：平板 / 小桌面（≤ 1180px）
|
|
445
|
+
统计面板改为 2 列，入口卡片改为 2 列；
|
|
446
|
+
统计项左侧对齐，分隔线逻辑从"相邻项之间"改为"偶数列左侧"。
|
|
447
|
+
============================================================ */
|
|
294
448
|
@media (max-width: 1180px) {
|
|
295
449
|
.execution-content {
|
|
296
|
-
padding-inline: 24px;
|
|
450
|
+
padding-inline: 24px; /* 逻辑属性：左右内边距 */
|
|
297
451
|
}
|
|
298
452
|
|
|
299
453
|
.stats-panel {
|
|
300
454
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
301
|
-
padding: 20px
|
|
455
|
+
padding-block: 20px;
|
|
302
456
|
}
|
|
303
457
|
|
|
304
458
|
.stat-item {
|
|
305
|
-
justify-content: flex-start;
|
|
459
|
+
justify-content: flex-start; /* 左对齐，更紧凑 */
|
|
306
460
|
padding: 24px 32px;
|
|
307
|
-
}
|
|
308
461
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
462
|
+
/* 移除桌面版的相邻分隔线 */
|
|
463
|
+
& + & {
|
|
464
|
+
border-left: 0;
|
|
465
|
+
}
|
|
312
466
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
467
|
+
/* 偶数列左侧加分隔线（2 列网格的视觉分隔） */
|
|
468
|
+
&:nth-child(2n) {
|
|
469
|
+
border-left: 1px solid var(--line);
|
|
470
|
+
}
|
|
316
471
|
|
|
317
|
-
|
|
318
|
-
|
|
472
|
+
/* 第 3 个及之后的项加顶部分隔线（区分上下两行） */
|
|
473
|
+
&:nth-child(n + 3) {
|
|
474
|
+
border-top: 1px solid var(--line);
|
|
475
|
+
}
|
|
319
476
|
}
|
|
320
477
|
|
|
321
478
|
.entry-grid {
|
|
@@ -323,41 +480,54 @@ const quickEntries: EntryAction[] = [
|
|
|
323
480
|
}
|
|
324
481
|
}
|
|
325
482
|
|
|
483
|
+
/* ============================================================
|
|
484
|
+
响应式：手机（≤ 720px）
|
|
485
|
+
所有网格改为单列，字号缩小，统计项分隔线改为纯水平。
|
|
486
|
+
============================================================ */
|
|
326
487
|
@media (max-width: 720px) {
|
|
327
488
|
.execution-content {
|
|
328
489
|
padding: 24px 16px;
|
|
329
490
|
}
|
|
330
491
|
|
|
331
|
-
|
|
332
|
-
.
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
492
|
+
/* 标题和说明文字缩小 */
|
|
493
|
+
.intro-block {
|
|
494
|
+
& h2,
|
|
495
|
+
.quick-section h2 {
|
|
496
|
+
font-size: 20px;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
& p {
|
|
500
|
+
margin-top: 10px;
|
|
501
|
+
font-size: 14px;
|
|
502
|
+
}
|
|
339
503
|
}
|
|
340
504
|
|
|
505
|
+
/* 统计面板和入口卡片均为单列 */
|
|
341
506
|
.stats-panel,
|
|
342
507
|
.entry-grid {
|
|
343
508
|
grid-template-columns: 1fr;
|
|
344
509
|
}
|
|
345
510
|
|
|
511
|
+
/* 统计项：移除竖线，改为纯水平分隔线；
|
|
512
|
+
同时覆盖桌面和平板的所有分隔线规则；
|
|
513
|
+
:first-child 例外：第一项不需要顶部分隔线。 */
|
|
346
514
|
.stat-item,
|
|
347
515
|
.stat-item:nth-child(2n),
|
|
348
516
|
.stat-item:nth-child(n + 3) {
|
|
349
517
|
border-left: 0;
|
|
350
518
|
border-top: 1px solid var(--line);
|
|
351
|
-
}
|
|
352
519
|
|
|
353
|
-
|
|
354
|
-
|
|
520
|
+
&:first-child {
|
|
521
|
+
border-top: 0;
|
|
522
|
+
}
|
|
355
523
|
}
|
|
356
524
|
|
|
525
|
+
/* 大号数字缩小，避免在窄屏溢出 */
|
|
357
526
|
.stat-copy strong {
|
|
358
527
|
font-size: 42px;
|
|
359
528
|
}
|
|
360
529
|
|
|
530
|
+
/* 卡片最小高度降低，减少纵向空间占用 */
|
|
361
531
|
.entry-card {
|
|
362
532
|
min-height: 288px;
|
|
363
533
|
}
|