feat: 添加音乐平台链接,优化移动端样式

This commit is contained in:
alger
2025-05-18 12:45:19 +08:00
parent e47c84e5eb
commit 01a3a7a501
5 changed files with 66 additions and 47 deletions

View File

@@ -76,7 +76,7 @@ const copyQQ = () => {
};
const toDonateList = () => {
window.open('http://donate.alger.fun', '_blank');
window.open('http://donate.alger.fun/download', '_blank');
};
defineProps({

View File

@@ -4,6 +4,12 @@
<div class="description">
<p>{{ t('donation.description') }}</p>
<p>{{ t('donation.message') }}</p>
<n-button type="primary" @click="toDonateList">
<template #icon>
<i class="ri-cup-line"></i>
</template>
{{ t('donation.toDonateList') }}
</n-button>
</div>
<div class="qrcode-grid">
<div class="qrcode-item">
@@ -16,15 +22,6 @@
<span class="qrcode-label">{{ t('common.alipay') }}</span>
</div>
<div class="donate-button">
<n-button type="primary" @click="toDonateList">
<template #icon>
<i class="ri-cup-line"></i>
</template>
{{ t('donation.toDonateList') }}
</n-button>
</div>
<div class="qrcode-item">
<n-image
:src="wechat"
@@ -66,7 +63,7 @@
<div class="donor-info">
<div class="donor-meta">
<div class="donor-name">{{ donor.name }}</div>
<div class="price-tag">{{ donor.amount }}</div>
<!-- <div class="price-tag">{{ donor.amount }}</div> -->
</div>
<div class="donation-date">{{ donor.date }}</div>
</div>
@@ -172,7 +169,7 @@ const toggleExpand = () => {
};
const toDonateList = () => {
window.open('http://donate.alger.fun', '_blank');
window.open('http://donate.alger.fun/download', '_blank');
};
</script>
@@ -211,13 +208,9 @@ const toDonateList = () => {
@apply rounded-lg p-2.5 transition-all duration-200 hover:shadow-md;
@apply bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm;
@apply border border-gray-200 dark:border-gray-700/10;
@apply flex flex-col justify-between;
@apply flex flex-col;
min-height: 100px;
&.no-message {
@apply justify-between;
}
.card-content {
@apply flex items-start gap-2 mb-2;
}
@@ -327,7 +320,7 @@ const toDonateList = () => {
}
.qrcode-grid {
@apply flex justify-between items-center gap-4;
@apply flex justify-between items-center gap-4 flex-wrap;
.qrcode-item {
@apply flex flex-col items-center gap-2;