feat(sponsorList): enhance display with item sponsors and poems

This commit significantly updates the sponsor list page for the 2025/11/15 event.

- Adds support for displaying item-based sponsorships, including their details.
- Introduces a new visual layout with vertical poems on the sides, utilizing custom fonts.
- Updates the sponsor data with the latest list of cash, item, and table sponsors.
- Refactors the sorting logic to correctly prioritize all sponsor types.
- Centralizes font assets by updating paths to be absolute and removing redundant font files.
This commit is contained in:
xiaomai
2025-11-12 21:54:45 +08:00
parent f1fe8eb559
commit 326ddee342
3 changed files with 144 additions and 89 deletions

View File

@@ -9,6 +9,37 @@
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style type="text/tailwindcss">
@theme {
/* 🎨 定义自定义字体族变量 */
--font-bai-ge: "BaiGeTianXing", sans-serif;
--font-gu-huang: "ShangShouGuHuang", sans-serif;
--font-tang-ying: "YeZiTangYingHei", sans-serif;
}
@font-face {
font-family: "BaiGeTianXing";
src: url("/fonts/字魂白鸽天行体.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "ShangShouGuHuang";
src: url("/fonts/ShangShouGuHuangTi-2.ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "YeZiTangYingHei";
src: url("/fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype");
font-display: swap;
}
.poem {
@apply flex-1 [writing-mode:vertical-rl] flex items-center justify-center text-6xl font-bai-ge tracking-[0.5em] text-white ring-amber-300 text-shadow-lg text-shadow-black;
}
</style>
<style>
.sponsor-marquee-track {
animation: sponsor-marquee-move-text 120s linear infinite;
@@ -50,14 +81,15 @@
<div
class="flex-1 flex min-h-0 overflow-clip bg-linear-to-b from-red-500 to-red-900"
>
<div class="flex-2 flex flex-col items-center justify-around">
<!-- <div class="flex-2 flex flex-col items-center justify-around">
<img
v-for="logo in logos"
:src="`../assets/${logo.imgSrc}`"
:alt="logo.imgSrc"
class="w-[80%] drop-shadow-2xl"
/>
</div>
</div> -->
<div class="poem">汕水流长通四海</div>
<div class="flex-8 inset-red-lg">
<div class="flex flex-col pt-4 gap-4 px-4 sponsor-marquee-track">
<div
@@ -67,7 +99,7 @@
>
<div v-if="sponsor.type == 'cash'" class="text-center py-8">
<div class="text-7xl text-yellow-400 font-bold">
RM {{sponsor.amount}}
RM {{sponsor.displayAmount}}
</div>
<div
class="text-7xl text-white text-shadow-amber-400 text-shadow-lg"
@@ -83,7 +115,12 @@
RM {{sponsor.amount}}
</div>
<div class="flex flex-wrap gap-4">
<div v-for="child in sponsor.children" class="text-3xl px-4 py-2 bg-white/40 rounded-2xl">{{child}}</div>
<div
v-for="child in sponsor.children"
class="text-3xl px-4 py-2 bg-white/40 rounded-2xl"
>
{{child}}
</div>
</div>
</div>
<div
@@ -99,9 +136,20 @@
{{sponsor.name}}
</div>
</div>
<div v-else-if="sponsor.type == 'item'" class="flex items-center">
<div
class="text-3xl bg-red-500 text-white font-bold px-4 py-2 border-2 border-white rounded-full"
>
{{sponsor.detail}}
</div>
<div class="text-4xl font-bold flex-1 ml-4 text-white">
{{sponsor.name}}
</div>
</div>
</div>
</div>
</div>
<div class="poem">河川万里泽邦家</div>
</div>
</div>
@@ -114,20 +162,21 @@
const logos = ref([]);
const sponsorList = ref([]); // Load from JSON
const specialSponsor = ref(
" V World2.0 特别赞助本场晚宴,现在下载 APP 并进行实名认证即可获得 RM50 的登录奖励!"
"感谢 V World2.0 特别赞助,现在下载 APP 并进行实名认证即可获得 RM50 的登录奖励!"
);
const typePriority = {
table: 2, // 优先级最高
cash: 3,
items: 1,
cash: 4,
"cash-group": 3,
table: 2,
item: 1,
};
const groupByCashLessThan = ref(600);
const groupByCashLessThan = ref(0);
function sortSponsors(list) {
return list.sort((a, b) => {
// 先按 type 优先级排序table > cash > items
// 先按 type 优先级排序
const typeDiff = typePriority[b.type] - typePriority[a.type];
if (typeDiff !== 0) return typeDiff;
@@ -158,7 +207,7 @@
).reduce((acc, s, idx) => {
const sponsor = {
...s,
amount:
displayAmount:
s.type == "cash"
? s.amount.toLocaleString("en-MY")
: s.amount,
@@ -220,10 +269,13 @@
specialSponsor.value,
specialSponsor.value,
specialSponsor.value,
specialSponsor.value,
]);
const tableToSeats = (amount) => {
switch (amount) {
case 2:
return "两席";
case 1:
return "一席";
case 0.5: