verce-vue-test 0.0.14 → 0.0.16
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
|
@@ -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="26" 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="16" 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="18"><Close /></el-icon>
|
|
53
|
+
</button>
|
|
54
|
+
</section>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.website-notice {
|
|
59
|
+
min-height: 50px;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
gap: 22px;
|
|
63
|
+
padding: 0 22px 0 28px;
|
|
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: 12px;
|
|
74
|
+
color: #1267e8;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.notice-icon {
|
|
78
|
+
color: #1267e8;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.notice-title {
|
|
82
|
+
font-size: 18px;
|
|
83
|
+
font-weight: 800;
|
|
84
|
+
line-height: 1;
|
|
85
|
+
white-space: nowrap;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.notice-divider {
|
|
89
|
+
width: 1px;
|
|
90
|
+
height: 22px;
|
|
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: 16px;
|
|
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: 15px;
|
|
123
|
+
font-weight: 700;
|
|
124
|
+
white-space: nowrap;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.notice-close {
|
|
128
|
+
width: 26px;
|
|
129
|
+
height: 26px;
|
|
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: 14px 16px;
|
|
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: 18px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.notice-message {
|
|
172
|
+
font-size: 14px;
|
|
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>
|
|
@@ -23,6 +23,7 @@ import {
|
|
|
23
23
|
RefreshRight, // 修改：向右刷新箭头
|
|
24
24
|
WarnTriangleFilled, // 异常反馈：实心警告三角
|
|
25
25
|
} from '@element-plus/icons-vue'
|
|
26
|
+
import WebsiteNoticeTitle from '@/components/WebsiteNoticeTitle.vue'
|
|
26
27
|
|
|
27
28
|
// ---- 类型定义 ----
|
|
28
29
|
|
|
@@ -111,68 +112,71 @@ const quickEntries: EntryAction[] = [
|
|
|
111
112
|
<main class="forecast-execution-page">
|
|
112
113
|
<!-- 内容区：max-width 1428px，水平居中 -->
|
|
113
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>
|
|
114
129
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<
|
|
124
|
-
<p class="intro-desc">您有待处理的业务任务，请及时处理</p>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<!--
|
|
128
|
-
待处理任务统计面板
|
|
129
|
-
布局方案：
|
|
130
|
-
- el-row + el-col 替代原 CSS Grid 5 列布局
|
|
131
|
-
- :gutter="20" 在列间添加 20px 间距（列两侧各 10px padding）
|
|
132
|
-
- 桌面: span=5（约 5 列） 平板: span=12（2 列） 手机: span=24（1 列）
|
|
133
|
-
- el-statistic 替代手写数字/标签，自带数字排版
|
|
134
|
-
-->
|
|
135
|
-
<section class="stats-panel" aria-label="待处理任务统计">
|
|
136
|
-
<article
|
|
137
|
-
v-for="(item, index) in taskStats"
|
|
138
|
-
:key="item.label"
|
|
139
|
-
class="stat-item"
|
|
140
|
-
:class="[`is-${item.tone}`, { 'is-total': index === 0 }]"
|
|
141
|
-
>
|
|
142
|
-
<div v-if="item.icon" class="stat-heading">
|
|
143
|
-
<div class="stat-icon" aria-hidden="true">
|
|
144
|
-
<el-icon :size="46"><component :is="item.icon" /></el-icon>
|
|
145
|
-
</div>
|
|
146
|
-
<span class="stat-label">{{ item.label }}</span>
|
|
147
|
-
</div>
|
|
148
|
-
<span v-else class="stat-label stat-total-label">{{ item.label }}</span>
|
|
149
|
-
|
|
150
|
-
<div class="stat-number-row">
|
|
151
|
-
<strong class="stat-number">{{ item.value }}</strong>
|
|
152
|
-
<span class="stat-unit">{{ item.unit }}</span>
|
|
153
|
-
</div>
|
|
154
|
-
</article>
|
|
155
|
-
</section>
|
|
156
|
-
|
|
157
|
-
<section class="quick-section" aria-label="快速进入">
|
|
158
|
-
<h2 class="section-title">快速进入</h2>
|
|
159
|
-
|
|
160
|
-
<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="待处理任务统计">
|
|
161
139
|
<article
|
|
162
|
-
v-for="
|
|
163
|
-
:key="
|
|
164
|
-
class="
|
|
165
|
-
: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 }]"
|
|
166
144
|
>
|
|
167
|
-
<div
|
|
168
|
-
<
|
|
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>
|
|
150
|
+
</div>
|
|
151
|
+
<span v-else class="stat-label stat-total-label">{{ item.label }}</span>
|
|
152
|
+
|
|
153
|
+
<div class="stat-number-row">
|
|
154
|
+
<strong class="stat-number">{{ item.value }}</strong>
|
|
155
|
+
<span class="stat-unit">{{ item.unit }}</span>
|
|
169
156
|
</div>
|
|
170
|
-
<h3 class="entry-title">{{ entry.title }}</h3>
|
|
171
|
-
<p class="entry-desc">{{ entry.desc }}</p>
|
|
172
|
-
<button class="entry-button" type="button">{{ entry.button }}</button>
|
|
173
157
|
</article>
|
|
174
|
-
</
|
|
175
|
-
|
|
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>
|
|
176
180
|
|
|
177
181
|
</section>
|
|
178
182
|
</main>
|
|
@@ -215,7 +219,15 @@ const quickEntries: EntryAction[] = [
|
|
|
215
219
|
.execution-content {
|
|
216
220
|
max-width: 1536px;
|
|
217
221
|
margin: 0 auto;
|
|
218
|
-
padding:
|
|
222
|
+
padding: 14px 22px 36px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.execution-notice {
|
|
226
|
+
margin-bottom: 42px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.execution-main {
|
|
230
|
+
padding-inline: 36px;
|
|
219
231
|
}
|
|
220
232
|
|
|
221
233
|
/* ---- 任务简介块 ----
|
|
@@ -449,7 +461,11 @@ const quickEntries: EntryAction[] = [
|
|
|
449
461
|
============================================================ */
|
|
450
462
|
@media (max-width: 768px) {
|
|
451
463
|
.execution-content {
|
|
452
|
-
padding:
|
|
464
|
+
padding: 14px 16px 24px;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.execution-main {
|
|
468
|
+
padding-inline: 0;
|
|
453
469
|
}
|
|
454
470
|
|
|
455
471
|
.page-title {
|