Skip to content

Commit eac2ea0

Browse files
JursinJursin
committed
下载页面与捐赠页面微调
1 parent 35660fa commit eac2ea0

4 files changed

Lines changed: 134 additions & 36 deletions

File tree

‎docs/.vitepress/theme/components/Donate.vue‎

Lines changed: 101 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<template>
2+
<div class="title">
3+
<h1>捐赠</h1>
4+
</div>
5+
26
<div class="donate-container">
37
<h1>支持我，温暖继续</h1>
48
<p>每一份捐赠都是动力，让我们一起创造更美好的内容！</p>
@@ -86,6 +90,18 @@ onMounted(() => {
8690
</script>
8791

8892
<style scoped>
93+
.title {
94+
text-align: center;
95+
margin-bottom: 3rem;
96+
padding: 2rem;
97+
}
98+
99+
.title h1 {
100+
font-size: 2.5rem;
101+
color: var(--vp-c-brand-1);
102+
margin-bottom: 0rem;
103+
}
104+
89105
.donate-container {
90106
display: flex;
91107
flex-direction: column;
@@ -100,21 +116,77 @@ onMounted(() => {
100116
margin: 40px 0;
101117
}
102118
103-
h1 { font-size:2.8rem; font-weight:600; color:var(--vp-c-text-1); margin:0 0 20px 0; text-align:center; }
104-
p { font-size:1.4rem; color:var(--vp-c-text-1); text-align:center; margin:0 0 30px 0; }
105-
.thanks { margin-top:25px; font-size:0.9rem; color: var(--vp-c-text-1); }
119+
h1 {
120+
font-size: 2.8rem;
121+
font-weight: 600;
122+
color: var(--vp-c-text-1);
123+
margin: 0 0 20px 0;
124+
text-align: center;
125+
}
106126
107-
.qrcode-container { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
108-
.qrcode-wrapper { display:flex; flex-direction:column; align-items:center; background:var(--vp-c-bg-alt); backdrop-filter:blur(15px); border-radius:20px; padding:15px; box-shadow:0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
109-
.qrcode-wrapper:hover { transform:scale(1.05); box-shadow:0 8px 28px rgba(0,0,0,0.15); }
127+
p {
128+
font-size: 1.4rem;
129+
color: var(--vp-c-text-1);
130+
text-align: center;
131+
margin: 0 0 30px 0;
132+
}
110133
111-
.qrcode { width:140px; height:140px; border-radius:16px; margin-bottom:10px; object-fit:cover; }
112-
.tip { font-size:0.9rem; color: var(--vp-c-text-1); }
134+
.thanks {
135+
margin-top: 25px;
136+
font-size: 1.4rem;
137+
color: var(--vp-c-text-1);
138+
}
139+
140+
.qrcode-container {
141+
display: flex;
142+
gap: 30px;
143+
flex-wrap: wrap;
144+
justify-content: center;
145+
}
146+
147+
.qrcode-wrapper {
148+
display: flex;
149+
flex-direction: column;
150+
align-items: center;
151+
background: var(--vp-c-bg-alt);
152+
backdrop-filter: blur(15px);
153+
border-radius: 20px;
154+
padding: 20px;
155+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
156+
transition: transform 0.3s ease, box-shadow 0.3s ease;
157+
}
113158
114-
@media(max-width:768px){
115-
.donate-container { padding:30px 20px; }
116-
.qrcode-container { gap:20px; }
117-
.qrcode { width:110px; height:110px; }
159+
.qrcode-wrapper:hover {
160+
transform: scale(1.05);
161+
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
162+
}
163+
164+
.qrcode {
165+
width: 250px;
166+
height: 250px;
167+
border-radius: 16px;
168+
margin-bottom: 10px;
169+
object-fit: cover;
170+
}
171+
172+
.tip {
173+
font-size: 1.4rem;
174+
color: var(--vp-c-text-1);
175+
}
176+
177+
@media(max-width:768px) {
178+
.donate-container {
179+
padding: 30px 20px;
180+
}
181+
182+
.qrcode-container {
183+
gap: 20px;
184+
}
185+
186+
.qrcode {
187+
width: 110px;
188+
height: 110px;
189+
}
118190
}
119191
</style>
120192

@@ -141,7 +213,21 @@ p { font-size:1.4rem; color:var(--vp-c-text-1); text-align:center; margin:0 0 30
141213
align-items:center;
142214
}
143215
144-
.modal-card img { display:block; border-radius:12px; }
145-
.modal-title { margin-top:12px; font-weight:600; text-align:center; }
146-
.modal-subtitle { margin-top:6px; font-size:12px; opacity:.7; text-align:center; }
216+
.modal-card img {
217+
display: block;
218+
border-radius: 12px;
219+
}
220+
221+
.modal-title {
222+
margin-top: 12px;
223+
font-weight: 600;
224+
text-align: center;
225+
}
226+
227+
.modal-subtitle {
228+
margin-top: 6px;
229+
font-size: 12px;
230+
opacity: .7;
231+
text-align: center;
232+
}
147233
</style>

‎docs/.vitepress/theme/components/Download.vue‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<script setup lang="ts">
2-
import { ref, onMounted, computed } from 'vue'
2+
import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
33
import { marked } from 'marked'
44
5+
const deviceDropdownRef = ref<HTMLElement | null>(null)
6+
const sourceDropdownRef = ref<HTMLElement | null>(null)
7+
58
interface DeviceType {
69
id: string
710
name: string
@@ -150,7 +153,20 @@ function getFileIcon(fileName: string): string {
150153
return '📄'
151154
}
152155
156+
function handleClickOutside(event: MouseEvent) {
157+
const target = event.target as HTMLElement
158+
if (deviceDropdownRef.value && !deviceDropdownRef.value.contains(target)) {
159+
isDeviceDropdownOpen.value = false
160+
}
161+
if (sourceDropdownRef.value && !sourceDropdownRef.value.contains(target)) {
162+
isSourceDropdownOpen.value = false
163+
}
164+
}
165+
153166
onMounted(async () => {
167+
// 添加全局点击事件监听
168+
document.addEventListener('click', handleClickOutside)
169+
154170
// 自动获取SecRandom发布信息
155171
isLoading.value = true
156172
hasError.value = false
@@ -235,8 +251,12 @@ onMounted(async () => {
235251
})
236252
</script>
237253

254+
onBeforeUnmount(() => {
255+
document.removeEventListener('click', handleClickOutside)
256+
})
257+
238258
<template>
239-
<div class="download-container">
259+
<div class="download-container" @click.stop>
240260
<div class="download-header">
241261
<h1>下载 SecRandom</h1>
242262
<p class="subtitle">选择适合您需求的版本（仅支持Windows）</p>
@@ -246,7 +266,7 @@ onMounted(async () => {
246266
<div class="filter-section">
247267
<div class="filter-group">
248268
<label>版本类型：</label>
249-
<div class="dropdown" :class="{ open: isDeviceDropdownOpen }">
269+
<div class="dropdown" :class="{ open: isDeviceDropdownOpen }" ref="deviceDropdownRef">
250270
<button @click="isDeviceDropdownOpen = !isDeviceDropdownOpen" class="dropdown-button">
251271
{{ dynamicDeviceTypes.find(t => t.id === selectedDeviceType)?.name }}
252272
<span class="arrow">▼</span>
@@ -270,7 +290,7 @@ onMounted(async () => {
270290

271291
<div class="filter-group">
272292
<label>下载源：</label>
273-
<div class="dropdown" :class="{ open: isSourceDropdownOpen }">
293+
<div class="dropdown" :class="{ open: isSourceDropdownOpen }" ref="sourceDropdownRef">
274294
<button @click="isSourceDropdownOpen = !isSourceDropdownOpen" class="dropdown-button">
275295
{{ downloadSources.find(s => s.id === selectedDownloadSource)?.name }}
276296
<span class="arrow">▼</span>
@@ -378,9 +398,6 @@ onMounted(async () => {
378398

379399
<style scoped>
380400
.download-container {
381-
width: 100%;
382-
max-width: none;
383-
margin: 0;
384401
padding: 2rem 0rem;
385402
}
386403
@@ -415,7 +432,7 @@ onMounted(async () => {
415432
.filter-group label {
416433
display: block;
417434
margin-bottom: 0.5rem;
418-
font-weight: 500;
435+
font-weight: bold;
419436
}
420437
421438
.dropdown {
@@ -426,7 +443,7 @@ onMounted(async () => {
426443
width: 100%;
427444
padding: 0.75rem 1rem;
428445
border: 1px solid var(--vp-c-border);
429-
border-radius: 0.5rem;
446+
border-radius: 0.7rem;
430447
background: var(--vp-c-bg);
431448
color: var(--vp-c-text-1);
432449
cursor: pointer;
@@ -571,8 +588,8 @@ onMounted(async () => {
571588
572589
.file-list {
573590
background: var(--vp-c-bg-soft);
574-
border-radius: 0.75rem;
575-
padding: 1.5rem 1rem;
591+
border-radius: 0.7rem;
592+
padding: 2.0rem 2.0rem;
576593
width: 100%;
577594
box-sizing: border-box;
578595
}
@@ -620,7 +637,7 @@ onMounted(async () => {
620637
padding: 1rem;
621638
background: var(--vp-c-bg);
622639
border: 1px solid var(--vp-c-border);
623-
border-radius: 0.5rem;
640+
border-radius: 0.7rem;
624641
transition: all 0.2s;
625642
}
626643
@@ -659,7 +676,7 @@ onMounted(async () => {
659676
background: var(--vp-c-brand-1);
660677
color: white;
661678
text-decoration: none;
662-
border-radius: 0.25rem;
679+
border-radius: 0.7rem;
663680
transition: background 0.2s;
664681
}
665682

‎docs/donate.md‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2-
layout: doc
3-
sidebar: false
4-
aside: false
5-
prev: false
6-
next: false
7-
editLink: false
2+
layout: home
3+
titleTemplate: 捐赠
84
---
9-
# 捐赠
105

116
<Donate />

‎docs/download.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar: false
2+
layout: home
33
---
44

55
<Download />

0 commit comments

Comments
 (0)