verce-vue-test 0.0.18 → 0.0.19
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/views/NoticeDetailView.vue +124 -115
package/package.json
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { computed } from 'vue'
|
|
3
|
-
import { useRoute } from 'vue-router'
|
|
4
|
-
import { Top } from '@element-plus/icons-vue'
|
|
5
|
-
|
|
6
|
-
interface ArticleSection {
|
|
7
|
-
heading: string
|
|
8
|
-
paragraphs?: string[]
|
|
9
|
-
items?: string[]
|
|
10
|
-
}
|
|
3
|
+
import { useRoute, useRouter } from 'vue-router'
|
|
4
|
+
import { ArrowLeft, Top } from '@element-plus/icons-vue'
|
|
11
5
|
|
|
12
6
|
interface NoticeDetail {
|
|
13
7
|
id: number
|
|
@@ -15,12 +9,7 @@ interface NoticeDetail {
|
|
|
15
9
|
publishTime: string
|
|
16
10
|
views: number
|
|
17
11
|
pinned?: boolean
|
|
18
|
-
|
|
19
|
-
intro: string
|
|
20
|
-
sections: ArticleSection[]
|
|
21
|
-
closing: string
|
|
22
|
-
team: string
|
|
23
|
-
signatureDate: string
|
|
12
|
+
contentHtml: string
|
|
24
13
|
}
|
|
25
14
|
|
|
26
15
|
const noticeDetails: NoticeDetail[] = [
|
|
@@ -30,70 +19,77 @@ const noticeDetails: NoticeDetail[] = [
|
|
|
30
19
|
publishTime: '2024-06-10 10:00:00',
|
|
31
20
|
views: 1268,
|
|
32
21
|
pinned: true,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
'维护完成后，系统将自动恢复服务，无需您进行任何操作；',
|
|
57
|
-
'如有紧急问题，请联系管理员。',
|
|
58
|
-
],
|
|
59
|
-
},
|
|
60
|
-
],
|
|
61
|
-
closing: '感谢您对我们工作的支持与理解！',
|
|
62
|
-
team: '项目管理平台运营团队',
|
|
63
|
-
signatureDate: '2024年6月10日',
|
|
22
|
+
contentHtml: `
|
|
23
|
+
<p><strong>尊敬的用户：</strong></p>
|
|
24
|
+
<p style="text-indent: 2em;">为提供更稳定、高效的服务，系统将于以下时间进行维护升级。维护期间，系统部分功能将受到影响，给您带来的不便，敬请谅解！</p>
|
|
25
|
+
<h2>一、维护时间</h2>
|
|
26
|
+
<p>2024年6月15日（周六）02:00 - 06:00（预计4小时）</p>
|
|
27
|
+
<h2>二、维护范围</h2>
|
|
28
|
+
<p>系统整体升级维护，期间将暂停服务。</p>
|
|
29
|
+
<h2>三、影响范围</h2>
|
|
30
|
+
<ol>
|
|
31
|
+
<li>系统登录、项目管理、任务协作等功能将无法使用；</li>
|
|
32
|
+
<li>维护期间可能无法正常访问平台；</li>
|
|
33
|
+
<li>已进行的操作将在系统恢复后正常保存。</li>
|
|
34
|
+
</ol>
|
|
35
|
+
<blockquote>温馨提示：维护期间请勿重复提交业务数据，避免恢复后出现重复记录。</blockquote>
|
|
36
|
+
<h2>四、注意事项</h2>
|
|
37
|
+
<ul>
|
|
38
|
+
<li>请您提前安排好相关工作，避免在维护期间进行重要操作；</li>
|
|
39
|
+
<li>维护完成后，系统将自动恢复服务，无需您进行任何操作；</li>
|
|
40
|
+
<li>如有紧急问题，请联系管理员。</li>
|
|
41
|
+
</ul>
|
|
42
|
+
<p>感谢您对我们工作的支持与理解！</p>
|
|
43
|
+
<p style="text-align: right;">项目管理平台运营团队<br />2024年6月10日</p>
|
|
44
|
+
`,
|
|
64
45
|
},
|
|
65
46
|
{
|
|
66
47
|
id: 1002,
|
|
67
48
|
title: '关于优化预填报流程的通知',
|
|
68
49
|
publishTime: '2024-06-08 09:30:00',
|
|
69
50
|
views: 986,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
51
|
+
contentHtml: `
|
|
52
|
+
<p><strong>尊敬的用户：</strong></p>
|
|
53
|
+
<p>为提升预填报效率，平台已对填报步骤、校验提示和保存逻辑进行优化，请您在办理相关业务时关注页面提示。</p>
|
|
54
|
+
<h2>一、优化内容</h2>
|
|
55
|
+
<ul>
|
|
56
|
+
<li>精简重复填写字段；</li>
|
|
57
|
+
<li>优化必填项校验提示；</li>
|
|
58
|
+
<li>增强草稿保存稳定性。</li>
|
|
59
|
+
</ul>
|
|
60
|
+
<h2>二、生效时间</h2>
|
|
61
|
+
<p>本次优化自2024年6月8日起正式生效。</p>
|
|
62
|
+
<p style="text-align: right;">项目管理平台运营团队<br />2024年6月8日</p>
|
|
63
|
+
`,
|
|
79
64
|
},
|
|
80
65
|
]
|
|
81
66
|
|
|
82
67
|
const route = useRoute()
|
|
68
|
+
const router = useRouter()
|
|
83
69
|
const noticeId = computed(() => Number(route.query.id))
|
|
84
70
|
const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.value))
|
|
71
|
+
|
|
72
|
+
function goBack() {
|
|
73
|
+
router.back()
|
|
74
|
+
}
|
|
85
75
|
</script>
|
|
86
76
|
|
|
87
77
|
<template>
|
|
88
78
|
<main class="notice-detail-page">
|
|
89
79
|
<article v-if="notice" class="notice-article">
|
|
90
|
-
<
|
|
91
|
-
<el-icon :size="
|
|
92
|
-
|
|
80
|
+
<button class="back-button" type="button" @click="goBack">
|
|
81
|
+
<el-icon :size="16"><ArrowLeft /></el-icon>
|
|
82
|
+
返回
|
|
83
|
+
</button>
|
|
84
|
+
|
|
85
|
+
<div class="article-title-row">
|
|
86
|
+
<div v-if="notice.pinned" class="pin-tag">
|
|
87
|
+
<el-icon :size="18"><Top /></el-icon>
|
|
88
|
+
置顶
|
|
89
|
+
</div>
|
|
90
|
+
<h1>{{ notice.title }}</h1>
|
|
93
91
|
</div>
|
|
94
92
|
|
|
95
|
-
<h1>{{ notice.title }}</h1>
|
|
96
|
-
|
|
97
93
|
<div class="article-meta">
|
|
98
94
|
<span>发布时间： {{ notice.publishTime }}</span>
|
|
99
95
|
<span>浏览量： {{ notice.views }}</span>
|
|
@@ -101,26 +97,7 @@ const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.
|
|
|
101
97
|
|
|
102
98
|
<div class="article-divider"></div>
|
|
103
99
|
|
|
104
|
-
<section class="article-content">
|
|
105
|
-
<p class="salutation">{{ notice.salutation }}</p>
|
|
106
|
-
|
|
107
|
-
<p class="indent">{{ notice.intro }}</p>
|
|
108
|
-
|
|
109
|
-
<template v-for="section in notice.sections" :key="section.heading">
|
|
110
|
-
<h2>{{ section.heading }}</h2>
|
|
111
|
-
<p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
|
|
112
|
-
<ol v-if="section.items?.length">
|
|
113
|
-
<li v-for="item in section.items" :key="item">{{ item }}</li>
|
|
114
|
-
</ol>
|
|
115
|
-
</template>
|
|
116
|
-
|
|
117
|
-
<p>{{ notice.closing }}</p>
|
|
118
|
-
|
|
119
|
-
<footer class="article-signature">
|
|
120
|
-
<p>{{ notice.team }}</p>
|
|
121
|
-
<p>{{ notice.signatureDate }}</p>
|
|
122
|
-
</footer>
|
|
123
|
-
</section>
|
|
100
|
+
<section class="article-content" v-html="notice.contentHtml"></section>
|
|
124
101
|
</article>
|
|
125
102
|
|
|
126
103
|
<el-empty v-else class="notice-empty" description="未找到公告详情" />
|
|
@@ -142,30 +119,59 @@ const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.
|
|
|
142
119
|
.notice-article {
|
|
143
120
|
width: min(100%, 1174px);
|
|
144
121
|
margin: 0 auto;
|
|
145
|
-
padding:
|
|
122
|
+
padding: 34px 42px 54px;
|
|
146
123
|
border: 1px solid #e1e7f0;
|
|
147
124
|
border-radius: 8px;
|
|
148
125
|
background: rgba(255, 255, 255, 0.96);
|
|
149
126
|
box-shadow: 0 14px 42px rgba(32, 58, 95, 0.06);
|
|
150
127
|
}
|
|
151
128
|
|
|
129
|
+
.back-button {
|
|
130
|
+
display: inline-flex;
|
|
131
|
+
align-items: center;
|
|
132
|
+
gap: 5px;
|
|
133
|
+
height: 32px;
|
|
134
|
+
margin: 0 0 22px;
|
|
135
|
+
padding: 0 12px;
|
|
136
|
+
border: 1px solid #d8e1ee;
|
|
137
|
+
border-radius: 6px;
|
|
138
|
+
color: #52627a;
|
|
139
|
+
background: #ffffff;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
font-family: inherit;
|
|
142
|
+
font-size: 14px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.back-button:hover {
|
|
146
|
+
border-color: #1677ff;
|
|
147
|
+
color: #1677ff;
|
|
148
|
+
}
|
|
149
|
+
|
|
152
150
|
.pin-tag {
|
|
153
151
|
display: inline-flex;
|
|
152
|
+
flex: 0 0 auto;
|
|
154
153
|
align-items: center;
|
|
155
154
|
gap: 4px;
|
|
156
|
-
height:
|
|
157
|
-
padding: 0
|
|
155
|
+
height: 30px;
|
|
156
|
+
padding: 0 9px;
|
|
158
157
|
border-radius: 4px;
|
|
159
158
|
color: #ff2e25;
|
|
160
159
|
background: #ffe8e6;
|
|
161
|
-
font-size:
|
|
160
|
+
font-size: 14px;
|
|
162
161
|
font-weight: 600;
|
|
163
162
|
}
|
|
164
163
|
|
|
164
|
+
.article-title-row {
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
gap: 12px;
|
|
168
|
+
margin: 22px 0 18px;
|
|
169
|
+
}
|
|
170
|
+
|
|
165
171
|
.notice-article h1 {
|
|
166
|
-
margin:
|
|
172
|
+
margin: 0;
|
|
167
173
|
color: #080f20;
|
|
168
|
-
font-size: clamp(
|
|
174
|
+
font-size: clamp(24px, 2.3vw, 32px);
|
|
169
175
|
line-height: 1.26;
|
|
170
176
|
font-weight: 800;
|
|
171
177
|
letter-spacing: 0;
|
|
@@ -176,59 +182,56 @@ const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.
|
|
|
176
182
|
flex-wrap: wrap;
|
|
177
183
|
gap: 34px 90px;
|
|
178
184
|
color: #6f7e98;
|
|
179
|
-
font-size:
|
|
185
|
+
font-size: 15px;
|
|
180
186
|
line-height: 1.5;
|
|
181
187
|
}
|
|
182
188
|
|
|
183
189
|
.article-divider {
|
|
184
190
|
height: 1px;
|
|
185
|
-
margin:
|
|
191
|
+
margin: 28px 0 22px;
|
|
186
192
|
background: #dfe6f0;
|
|
187
193
|
}
|
|
188
194
|
|
|
189
195
|
.article-content {
|
|
190
|
-
font-size:
|
|
191
|
-
line-height:
|
|
196
|
+
font-size: 16px;
|
|
197
|
+
line-height: 1.95;
|
|
192
198
|
}
|
|
193
199
|
|
|
194
|
-
.article-content p {
|
|
195
|
-
margin: 0 0
|
|
200
|
+
.article-content :deep(p) {
|
|
201
|
+
margin: 0 0 18px;
|
|
196
202
|
}
|
|
197
203
|
|
|
198
|
-
.article-content
|
|
199
|
-
margin-bottom: 32px;
|
|
204
|
+
.article-content :deep(strong) {
|
|
200
205
|
font-weight: 700;
|
|
201
206
|
}
|
|
202
207
|
|
|
203
|
-
.article-content
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.article-content h2 {
|
|
208
|
-
margin: 43px 0 10px;
|
|
208
|
+
.article-content :deep(h2) {
|
|
209
|
+
margin: 30px 0 8px;
|
|
209
210
|
color: #0d1527;
|
|
210
|
-
font-size:
|
|
211
|
+
font-size: 17px;
|
|
211
212
|
line-height: 1.75;
|
|
212
213
|
font-weight: 800;
|
|
213
214
|
letter-spacing: 0;
|
|
214
215
|
}
|
|
215
216
|
|
|
216
|
-
.article-content ol
|
|
217
|
-
|
|
217
|
+
.article-content :deep(ol),
|
|
218
|
+
.article-content :deep(ul) {
|
|
219
|
+
margin: 0 0 20px 26px;
|
|
218
220
|
padding: 0;
|
|
219
221
|
}
|
|
220
222
|
|
|
221
|
-
.article-content li {
|
|
223
|
+
.article-content :deep(li) {
|
|
222
224
|
padding-left: 7px;
|
|
225
|
+
margin-bottom: 5px;
|
|
223
226
|
}
|
|
224
227
|
|
|
225
|
-
.article-
|
|
226
|
-
margin
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
228
|
+
.article-content :deep(blockquote) {
|
|
229
|
+
margin: 18px 0 22px;
|
|
230
|
+
padding: 12px 16px;
|
|
231
|
+
border-left: 4px solid #1677ff;
|
|
232
|
+
border-radius: 4px;
|
|
233
|
+
color: #52627a;
|
|
234
|
+
background: #f4f8ff;
|
|
232
235
|
}
|
|
233
236
|
|
|
234
237
|
.notice-empty {
|
|
@@ -247,7 +250,13 @@ const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.
|
|
|
247
250
|
}
|
|
248
251
|
|
|
249
252
|
.notice-article {
|
|
250
|
-
padding:
|
|
253
|
+
padding: 22px 18px 38px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.article-title-row {
|
|
257
|
+
align-items: flex-start;
|
|
258
|
+
flex-wrap: wrap;
|
|
259
|
+
gap: 8px;
|
|
251
260
|
}
|
|
252
261
|
|
|
253
262
|
.article-meta {
|
|
@@ -256,12 +265,12 @@ const notice = computed(() => noticeDetails.find((item) => item.id === noticeId.
|
|
|
256
265
|
}
|
|
257
266
|
|
|
258
267
|
.article-content {
|
|
259
|
-
font-size:
|
|
260
|
-
line-height: 1.
|
|
268
|
+
font-size: 15px;
|
|
269
|
+
line-height: 1.85;
|
|
261
270
|
}
|
|
262
271
|
|
|
263
|
-
.article-content h2 {
|
|
264
|
-
font-size:
|
|
272
|
+
.article-content :deep(h2) {
|
|
273
|
+
font-size: 16px;
|
|
265
274
|
}
|
|
266
275
|
}
|
|
267
276
|
</style>
|