verce-vue-test 0.0.16 → 0.0.17
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/App.vue +5 -0
- package/src/assets/notice-hero-banner.jpg +0 -0
- package/src/main.ts +2 -1
- package/src/router/index.ts +10 -0
- package/src/views/NoticeAnnouncementView.vue +388 -0
- package/src/views/NoticeDetailView.vue +188 -0
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -13,6 +13,7 @@ import {
|
|
|
13
13
|
DataLine,
|
|
14
14
|
InfoFilled,
|
|
15
15
|
TrendCharts,
|
|
16
|
+
Bell,
|
|
16
17
|
} from '@element-plus/icons-vue'
|
|
17
18
|
|
|
18
19
|
const isCollapse = ref(false)
|
|
@@ -87,6 +88,10 @@ function toggleCollapse() {
|
|
|
87
88
|
<el-icon><TrendCharts /></el-icon>
|
|
88
89
|
<span>总行管理员首页</span>
|
|
89
90
|
</el-menu-item>
|
|
91
|
+
<el-menu-item index="/notice-announcement">
|
|
92
|
+
<el-icon><Bell /></el-icon>
|
|
93
|
+
<span>通知公告</span>
|
|
94
|
+
</el-menu-item>
|
|
90
95
|
<el-menu-item index="/about">
|
|
91
96
|
<el-icon><InfoFilled /></el-icon>
|
|
92
97
|
<span>关于</span>
|
|
Binary file
|
package/src/main.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
|
|
|
2
2
|
import { createPinia } from 'pinia'
|
|
3
3
|
import ElementPlus from 'element-plus'
|
|
4
4
|
import 'element-plus/dist/index.css'
|
|
5
|
+
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|
5
6
|
import './assets/reset.css'
|
|
6
7
|
|
|
7
8
|
import App from './App.vue'
|
|
@@ -11,6 +12,6 @@ const app = createApp(App)
|
|
|
11
12
|
|
|
12
13
|
app.use(createPinia())
|
|
13
14
|
app.use(router)
|
|
14
|
-
app.use(ElementPlus)
|
|
15
|
+
app.use(ElementPlus, { locale: zhCn })
|
|
15
16
|
|
|
16
17
|
app.mount('#app')
|
package/src/router/index.ts
CHANGED
|
@@ -66,6 +66,16 @@ const router = createRouter({
|
|
|
66
66
|
meta: { fullscreen: true },
|
|
67
67
|
component: () => import('../views/ExecutiveManagementView/index.vue'),
|
|
68
68
|
},
|
|
69
|
+
{
|
|
70
|
+
path: '/notice-announcement',
|
|
71
|
+
name: 'noticeAnnouncement',
|
|
72
|
+
component: () => import('../views/NoticeAnnouncementView.vue'),
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
path: '/notice-announcement/detail',
|
|
76
|
+
name: 'noticeDetail',
|
|
77
|
+
component: () => import('../views/NoticeDetailView.vue'),
|
|
78
|
+
},
|
|
69
79
|
],
|
|
70
80
|
})
|
|
71
81
|
|
|
@@ -0,0 +1,388 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import { Search, Top } from '@element-plus/icons-vue'
|
|
4
|
+
import noticeHeroBanner from '@/assets/notice-hero-banner.jpg'
|
|
5
|
+
|
|
6
|
+
interface NoticeItem {
|
|
7
|
+
title: string
|
|
8
|
+
date: string
|
|
9
|
+
pinned?: boolean
|
|
10
|
+
detailPath?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const notices: NoticeItem[] = [
|
|
14
|
+
{
|
|
15
|
+
title: '关于系统维护升级的公告（2024年6月15日）',
|
|
16
|
+
date: '2024-06-10',
|
|
17
|
+
pinned: true,
|
|
18
|
+
detailPath: '/notice-announcement/detail',
|
|
19
|
+
},
|
|
20
|
+
{ title: '关于优化预填报流程的通知', date: '2024-06-08' },
|
|
21
|
+
{ title: '端午节放假安排通知', date: '2024-06-05' },
|
|
22
|
+
{ title: '系统性能优化完成公告', date: '2024-06-03' },
|
|
23
|
+
{ title: '数据安全重要提醒', date: '2024-05-30' },
|
|
24
|
+
{ title: '关于系统新增功能的使用说明', date: '2024-05-28' },
|
|
25
|
+
{ title: '五一劳动节放假安排通知', date: '2024-04-25' },
|
|
26
|
+
{ title: '系统升级完成公告', date: '2024-04-15' },
|
|
27
|
+
]
|
|
28
|
+
|
|
29
|
+
const currentPage = ref(1)
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<main class="notice-page">
|
|
34
|
+
<section class="notice-hero" aria-label="通知公告">
|
|
35
|
+
<img class="notice-hero__image" :src="noticeHeroBanner" alt="" aria-hidden="true" />
|
|
36
|
+
|
|
37
|
+
<div class="notice-hero__copy">
|
|
38
|
+
<h1>通知公告</h1>
|
|
39
|
+
<p>了解平台最新动态和重要通知</p>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="notice-search" role="search">
|
|
43
|
+
<input type="search" placeholder="请输入关键词" aria-label="请输入关键词" />
|
|
44
|
+
<el-icon :size="22"><Search /></el-icon>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
</section>
|
|
48
|
+
|
|
49
|
+
<section class="notice-panel" aria-label="公告列表">
|
|
50
|
+
<div class="notice-table__head">
|
|
51
|
+
<span>公告标题</span>
|
|
52
|
+
<span>发布时间</span>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<ul class="notice-list">
|
|
56
|
+
<li v-for="item in notices" :key="`${item.title}-${item.date}`" class="notice-row">
|
|
57
|
+
<RouterLink class="notice-title" :to="item.detailPath || '/notice-announcement/detail'">
|
|
58
|
+
<span v-if="item.pinned" class="pin-tag">
|
|
59
|
+
<el-icon :size="18"><Top /></el-icon>
|
|
60
|
+
置顶
|
|
61
|
+
</span>
|
|
62
|
+
<span>{{ item.title }}</span>
|
|
63
|
+
</RouterLink>
|
|
64
|
+
<time :datetime="item.date">{{ item.date }}</time>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
|
|
68
|
+
<div class="notice-pagination">
|
|
69
|
+
<el-pagination
|
|
70
|
+
v-model:current-page="currentPage"
|
|
71
|
+
:page-size="8"
|
|
72
|
+
:pager-count="5"
|
|
73
|
+
:total="40"
|
|
74
|
+
background
|
|
75
|
+
layout="prev, pager, next, jumper"
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
</main>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
82
|
+
<style scoped>
|
|
83
|
+
.notice-page {
|
|
84
|
+
height: 100vh;
|
|
85
|
+
min-height: 100vh;
|
|
86
|
+
overflow-x: hidden;
|
|
87
|
+
overflow-y: auto;
|
|
88
|
+
color: #10182d;
|
|
89
|
+
background:
|
|
90
|
+
radial-gradient(circle at 86% 20%, rgba(26, 111, 255, 0.1), transparent 24%),
|
|
91
|
+
linear-gradient(180deg, #f9fbff 0%, #f4f7fc 42%, #f7f9fd 100%);
|
|
92
|
+
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.notice-hero {
|
|
96
|
+
position: relative;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
min-height: 283px;
|
|
99
|
+
padding: 56px clamp(28px, 4.6vw, 72px) 34px;
|
|
100
|
+
border-bottom: 1px solid rgba(219, 226, 237, 0.82);
|
|
101
|
+
background: #eef6ff;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.notice-hero__image {
|
|
105
|
+
position: absolute;
|
|
106
|
+
inset: 0;
|
|
107
|
+
width: 100%;
|
|
108
|
+
height: 100%;
|
|
109
|
+
object-fit: cover;
|
|
110
|
+
object-position: center;
|
|
111
|
+
user-select: none;
|
|
112
|
+
pointer-events: none;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.notice-hero__copy {
|
|
116
|
+
position: relative;
|
|
117
|
+
z-index: 2;
|
|
118
|
+
padding-top: 3px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.notice-hero__copy h1 {
|
|
122
|
+
margin: 0;
|
|
123
|
+
font-size: clamp(32px, 3vw, 42px);
|
|
124
|
+
line-height: 1.18;
|
|
125
|
+
font-weight: 800;
|
|
126
|
+
letter-spacing: 0;
|
|
127
|
+
color: #0c172d;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.notice-hero__copy p {
|
|
131
|
+
margin: 22px 0 0;
|
|
132
|
+
font-size: 17px;
|
|
133
|
+
line-height: 1.7;
|
|
134
|
+
color: #748098;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.notice-search {
|
|
138
|
+
position: absolute;
|
|
139
|
+
z-index: 3;
|
|
140
|
+
top: 24px;
|
|
141
|
+
right: clamp(28px, 4.6vw, 72px);
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
width: min(288px, calc(100vw - 56px));
|
|
145
|
+
height: 45px;
|
|
146
|
+
padding: 0 15px 0 16px;
|
|
147
|
+
border: 1px solid #d5ddea;
|
|
148
|
+
border-radius: 8px;
|
|
149
|
+
background: rgba(255, 255, 255, 0.84);
|
|
150
|
+
box-shadow: 0 8px 22px rgba(29, 63, 112, 0.05);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.notice-search input {
|
|
154
|
+
width: 100%;
|
|
155
|
+
border: 0;
|
|
156
|
+
outline: 0;
|
|
157
|
+
color: #24314b;
|
|
158
|
+
background: transparent;
|
|
159
|
+
font: inherit;
|
|
160
|
+
font-size: 16px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.notice-search input::placeholder {
|
|
164
|
+
color: #9aa6ba;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.notice-search .el-icon {
|
|
168
|
+
flex: 0 0 auto;
|
|
169
|
+
color: #65738e;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.notice-panel {
|
|
173
|
+
position: relative;
|
|
174
|
+
z-index: 4;
|
|
175
|
+
width: calc(100% - clamp(36px, 3.7vw, 56px));
|
|
176
|
+
margin: -1px auto 32px;
|
|
177
|
+
padding: 37px 42px 22px;
|
|
178
|
+
border: 1px solid #e1e7f0;
|
|
179
|
+
border-radius: 8px;
|
|
180
|
+
background: rgba(255, 255, 255, 0.93);
|
|
181
|
+
box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.notice-table__head,
|
|
185
|
+
.notice-row {
|
|
186
|
+
display: grid;
|
|
187
|
+
grid-template-columns: minmax(0, 1fr) 190px;
|
|
188
|
+
column-gap: 32px;
|
|
189
|
+
align-items: center;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.notice-table__head {
|
|
193
|
+
height: 44px;
|
|
194
|
+
padding: 0 23px;
|
|
195
|
+
border-bottom: 1px solid #dfe6f0;
|
|
196
|
+
color: #6e7b94;
|
|
197
|
+
font-size: 17px;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.notice-list {
|
|
202
|
+
margin: 0;
|
|
203
|
+
padding: 0;
|
|
204
|
+
list-style: none;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.notice-row {
|
|
208
|
+
min-height: 67px;
|
|
209
|
+
padding: 0 23px;
|
|
210
|
+
border-bottom: 1px solid #e8edf5;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.notice-title {
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
min-width: 0;
|
|
217
|
+
gap: 16px;
|
|
218
|
+
color: #0e172b;
|
|
219
|
+
text-decoration: none;
|
|
220
|
+
font-size: 18px;
|
|
221
|
+
line-height: 1.45;
|
|
222
|
+
font-weight: 500;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.notice-title:hover {
|
|
226
|
+
color: #006fff;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.pin-tag {
|
|
230
|
+
display: inline-flex;
|
|
231
|
+
flex: 0 0 auto;
|
|
232
|
+
align-items: center;
|
|
233
|
+
gap: 4px;
|
|
234
|
+
height: 32px;
|
|
235
|
+
padding: 0 7px;
|
|
236
|
+
border-radius: 4px;
|
|
237
|
+
color: #ff2e25;
|
|
238
|
+
background: #ffe8e6;
|
|
239
|
+
font-size: 16px;
|
|
240
|
+
font-weight: 600;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.notice-row time {
|
|
244
|
+
color: #71809c;
|
|
245
|
+
font-size: 18px;
|
|
246
|
+
line-height: 1.4;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.notice-pagination {
|
|
250
|
+
display: flex;
|
|
251
|
+
align-items: center;
|
|
252
|
+
justify-content: center;
|
|
253
|
+
min-height: 66px;
|
|
254
|
+
padding-top: 11px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@media (max-width: 920px) {
|
|
258
|
+
.notice-hero {
|
|
259
|
+
min-height: 300px;
|
|
260
|
+
padding-top: 94px;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.notice-hero__image {
|
|
264
|
+
object-position: 62% center;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.notice-panel {
|
|
268
|
+
padding-inline: 20px;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.notice-table__head,
|
|
272
|
+
.notice-row {
|
|
273
|
+
grid-template-columns: minmax(0, 1fr) 128px;
|
|
274
|
+
column-gap: 18px;
|
|
275
|
+
padding-inline: 10px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.notice-title,
|
|
279
|
+
.notice-row time {
|
|
280
|
+
font-size: 16px;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
@media (max-width: 640px) {
|
|
285
|
+
.notice-hero {
|
|
286
|
+
min-height: 260px;
|
|
287
|
+
padding: 86px 22px 26px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.notice-search {
|
|
291
|
+
left: 22px;
|
|
292
|
+
right: 22px;
|
|
293
|
+
width: auto;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.notice-hero__image {
|
|
297
|
+
object-position: 66% center;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.notice-panel {
|
|
301
|
+
width: calc(100% - 24px);
|
|
302
|
+
padding: 20px 14px 18px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.notice-table__head {
|
|
306
|
+
display: none;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.notice-row {
|
|
310
|
+
display: flex;
|
|
311
|
+
min-height: 82px;
|
|
312
|
+
align-items: flex-start;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
flex-direction: column;
|
|
315
|
+
gap: 7px;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.notice-title {
|
|
319
|
+
gap: 9px;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.pin-tag {
|
|
323
|
+
height: 28px;
|
|
324
|
+
font-size: 14px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.notice-row time {
|
|
328
|
+
font-size: 14px;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.notice-pagination {
|
|
332
|
+
flex-wrap: wrap;
|
|
333
|
+
gap: 8px;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
:deep(.el-pagination) {
|
|
338
|
+
--el-pagination-button-width: 45px;
|
|
339
|
+
--el-pagination-button-height: 43px;
|
|
340
|
+
--el-pagination-border-radius: 7px;
|
|
341
|
+
--el-pagination-bg-color: #ffffff;
|
|
342
|
+
--el-pagination-button-color: #0f1729;
|
|
343
|
+
--el-pagination-hover-color: #0b75ff;
|
|
344
|
+
--el-pagination-font-size: 17px;
|
|
345
|
+
align-items: center;
|
|
346
|
+
gap: 11px;
|
|
347
|
+
font-weight: 400;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
:deep(.el-pagination.is-background .btn-prev),
|
|
351
|
+
:deep(.el-pagination.is-background .btn-next),
|
|
352
|
+
:deep(.el-pagination.is-background .el-pager li) {
|
|
353
|
+
margin: 0;
|
|
354
|
+
border: 1px solid #dde4ee;
|
|
355
|
+
background: #ffffff;
|
|
356
|
+
box-shadow: 0 5px 14px rgba(31, 59, 94, 0.04);
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
:deep(.el-pagination.is-background .el-pager li.is-active) {
|
|
360
|
+
border-color: #0075ff;
|
|
361
|
+
background: linear-gradient(180deg, #1486ff, #006df0);
|
|
362
|
+
box-shadow: 0 8px 18px rgba(0, 110, 245, 0.24);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
:deep(.el-pagination__jump) {
|
|
366
|
+
margin-left: 28px;
|
|
367
|
+
color: #6a778f;
|
|
368
|
+
font-size: 17px;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
:deep(.el-pagination__goto) {
|
|
372
|
+
margin-right: 12px;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
:deep(.el-pagination__classifier) {
|
|
376
|
+
margin-left: 12px;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
:deep(.el-pagination__editor.el-input) {
|
|
380
|
+
width: 67px;
|
|
381
|
+
height: 43px;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
:deep(.el-pagination__editor.el-input .el-input__wrapper) {
|
|
385
|
+
border-radius: 7px;
|
|
386
|
+
box-shadow: 0 0 0 1px #dde4ee inset, 0 5px 14px rgba(31, 59, 94, 0.04);
|
|
387
|
+
}
|
|
388
|
+
</style>
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { Top } from '@element-plus/icons-vue'
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<template>
|
|
6
|
+
<main class="notice-detail-page">
|
|
7
|
+
<article class="notice-article">
|
|
8
|
+
<div class="pin-tag">
|
|
9
|
+
<el-icon :size="18"><Top /></el-icon>
|
|
10
|
+
置顶
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<h1>关于系统维护升级的公告（2024年6月15日）</h1>
|
|
14
|
+
|
|
15
|
+
<div class="article-meta">
|
|
16
|
+
<span>发布时间： 2024-06-10 10:00:00</span>
|
|
17
|
+
<span>浏览量： 1268</span>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="article-divider"></div>
|
|
21
|
+
|
|
22
|
+
<section class="article-content">
|
|
23
|
+
<p class="salutation">尊敬的用户：</p>
|
|
24
|
+
|
|
25
|
+
<p class="indent">
|
|
26
|
+
为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，
|
|
27
|
+
给您带来的不便，敬请谅解！
|
|
28
|
+
</p>
|
|
29
|
+
|
|
30
|
+
<h2>一、维护时间</h2>
|
|
31
|
+
<p>2024年6月15日（周六）02:00 - 06:00（预计4小时）</p>
|
|
32
|
+
|
|
33
|
+
<h2>二、维护范围</h2>
|
|
34
|
+
<p>系统整体升级维护，期间将暂停服务。</p>
|
|
35
|
+
|
|
36
|
+
<h2>三、影响范围</h2>
|
|
37
|
+
<ol>
|
|
38
|
+
<li>系统登录、项目管理、任务协作等功能将无法使用；</li>
|
|
39
|
+
<li>维护期间可能无法正常访问平台；</li>
|
|
40
|
+
<li>已进行的操作将在系统恢复后正常保存。</li>
|
|
41
|
+
</ol>
|
|
42
|
+
|
|
43
|
+
<h2>四、注意事项</h2>
|
|
44
|
+
<ol>
|
|
45
|
+
<li>请您提前安排好相关工作，避免在维护期间进行重要操作；</li>
|
|
46
|
+
<li>维护完成后，系统将自动恢复服务，无需您进行任何操作；</li>
|
|
47
|
+
<li>如有紧急问题，请联系管理员。</li>
|
|
48
|
+
</ol>
|
|
49
|
+
|
|
50
|
+
<p>感谢您对我们工作的支持与理解！</p>
|
|
51
|
+
|
|
52
|
+
<footer class="article-signature">
|
|
53
|
+
<p>项目管理平台运营团队</p>
|
|
54
|
+
<p>2024年6月10日</p>
|
|
55
|
+
</footer>
|
|
56
|
+
</section>
|
|
57
|
+
</article>
|
|
58
|
+
</main>
|
|
59
|
+
</template>
|
|
60
|
+
|
|
61
|
+
<style scoped>
|
|
62
|
+
.notice-detail-page {
|
|
63
|
+
min-height: 100%;
|
|
64
|
+
padding: 0 0 30px;
|
|
65
|
+
overflow-x: hidden;
|
|
66
|
+
color: #0f172a;
|
|
67
|
+
background:
|
|
68
|
+
radial-gradient(circle at 18% 10%, rgba(35, 116, 255, 0.06), transparent 30%),
|
|
69
|
+
linear-gradient(180deg, #f8fbff 0%, #f5f8fc 100%);
|
|
70
|
+
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.notice-article {
|
|
74
|
+
width: min(100%, 1174px);
|
|
75
|
+
margin: 0 auto;
|
|
76
|
+
padding: 46px 46px 62px;
|
|
77
|
+
border: 1px solid #e1e7f0;
|
|
78
|
+
border-radius: 8px;
|
|
79
|
+
background: rgba(255, 255, 255, 0.96);
|
|
80
|
+
box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.pin-tag {
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
gap: 4px;
|
|
87
|
+
height: 37px;
|
|
88
|
+
padding: 0 10px;
|
|
89
|
+
border-radius: 4px;
|
|
90
|
+
color: #ff2e25;
|
|
91
|
+
background: #ffe8e6;
|
|
92
|
+
font-size: 17px;
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.notice-article h1 {
|
|
97
|
+
margin: 33px 0 22px;
|
|
98
|
+
color: #080f20;
|
|
99
|
+
font-size: clamp(28px, 3vw, 38px);
|
|
100
|
+
line-height: 1.26;
|
|
101
|
+
font-weight: 800;
|
|
102
|
+
letter-spacing: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.article-meta {
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-wrap: wrap;
|
|
108
|
+
gap: 34px 90px;
|
|
109
|
+
color: #6f7e98;
|
|
110
|
+
font-size: 18px;
|
|
111
|
+
line-height: 1.5;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.article-divider {
|
|
115
|
+
height: 1px;
|
|
116
|
+
margin: 35px 0 26px;
|
|
117
|
+
background: #dfe6f0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.article-content {
|
|
121
|
+
font-size: 21px;
|
|
122
|
+
line-height: 2.08;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.article-content p {
|
|
126
|
+
margin: 0 0 28px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.article-content .salutation {
|
|
130
|
+
margin-bottom: 32px;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.article-content .indent {
|
|
135
|
+
text-indent: 2em;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.article-content h2 {
|
|
139
|
+
margin: 43px 0 10px;
|
|
140
|
+
color: #0d1527;
|
|
141
|
+
font-size: 22px;
|
|
142
|
+
line-height: 1.75;
|
|
143
|
+
font-weight: 800;
|
|
144
|
+
letter-spacing: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.article-content ol {
|
|
148
|
+
margin: 0 0 28px 30px;
|
|
149
|
+
padding: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.article-content li {
|
|
153
|
+
padding-left: 7px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.article-signature {
|
|
157
|
+
margin-top: 52px;
|
|
158
|
+
text-align: right;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.article-signature p {
|
|
162
|
+
margin: 0 0 8px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@media (max-width: 768px) {
|
|
166
|
+
.notice-detail-page {
|
|
167
|
+
padding: 0 0 20px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.notice-article {
|
|
171
|
+
padding: 28px 20px 42px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.article-meta {
|
|
175
|
+
gap: 8px 28px;
|
|
176
|
+
font-size: 15px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.article-content {
|
|
180
|
+
font-size: 17px;
|
|
181
|
+
line-height: 1.9;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.article-content h2 {
|
|
185
|
+
font-size: 18px;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
</style>
|