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
@@ -21,19 +21,19 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "BaiGeTianXing";
|
||||
src: url("../fonts/字魂白鸽天行体.ttf") format("truetype");
|
||||
src: url("/fonts/字魂白鸽天行体.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "ShangShouGuHuang";
|
||||
src: url("../fonts/ShangShouGuHuangTi-2.ttf") format("truetype");
|
||||
src: url("/fonts/ShangShouGuHuangTi-2.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "YeZiTangYingHei";
|
||||
src: url("../fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype");
|
||||
src: url("/fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,83 +1,86 @@
|
||||
{
|
||||
"eventTitle": "永平新港汕河体育协会 2 周年庆联欢晚宴",
|
||||
"logos": [{ "imgSrc": "SamHor-HighRes.png" }, { "imgSrc": "关公文化-HighRes.png" }, { "imgSrc": "VWorld2 Logo.png" }],
|
||||
"poems": ["汕水流长通四海", "河川万里泽邦家"],
|
||||
"sponsorList": [
|
||||
{ "name": "Tootaio Studio", "type": "cash", "amount": 5000 },
|
||||
{ "name": "路人甲子", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人乙丑", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人丙寅", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人丁卯", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人戊辰", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人己巳", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人庚午", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人辛未", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人壬申", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人癸酉", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人甲戌", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人乙亥", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人丙子", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人丁丑", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人戊寅", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人己卯", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人庚辰", "type": "cash", "amount": 500 },
|
||||
{ "name": "路人辛巳", "type": "cash", "amount": 500 },
|
||||
{ "name": "永平新港月圆联谊会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "新港三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平宏愿体育会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平关圣宫联谊会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平广华俱乐部", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平赵子龙庙", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "李金盛仁兄", "type": "item", "detail": "Camus Extra Elegance 一支" },
|
||||
{ "name": "许敏捷（四哥）", "type": "cash", "amount": 1000 },
|
||||
{ "name": "无尘", "type": "cash", "amount": 500 },
|
||||
{ "name": "CC集团", "type": "item", "detail": "迎宾舞狮" },
|
||||
{ "name": "永平福满家", "type": "item", "detail": "大彩" },
|
||||
{ "name": "kenzo 祥", "type": "cash", "amount": 1000 },
|
||||
{ "name": "莲花村洪河公司", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "砂益洪河公司", "type": "item", "detail": "Gold Label 一支" },
|
||||
{ "name": "巴力西贡洪河公司", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "黄伟能", "type": "cash", "amount": 200 },
|
||||
{ "name": "皇后福名氏", "type": "cash", "amount": 500 },
|
||||
{ "name": "Richard Woon", "type": "item", "detail": "Hennessy VSOP 3L 大炮 一支" },
|
||||
{ "name": "WHEEL MASTER TYRE & MOTORSPORTS SDN BHD", "type": "cash", "amount": 1000 },
|
||||
{ "name": "海金贸易", "type": "cash", "amount": 300 },
|
||||
{ "name": "molek洪河公司", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "新山大马关帝文化推广中心报效", "type": "item", "detail": "DON CRILLION XO 一支" },
|
||||
{ "name": "南利三川福利联谊会", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "dabee", "type": "cash", "amount": 500 },
|
||||
{ "name": "拿督刘书致", "type": "cash", "amount": 3000 },
|
||||
{ "name": "兄弟", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "砂劳越洪河公司", "type": "cash", "amount": 3000 },
|
||||
{ "name": "V-world 2.0", "type": "cash", "amount": 2000 },
|
||||
{ "name": "陈德福报效", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "MDL Auto Werk", "type": "cash", "amount": 500 },
|
||||
{ "name": "郑旭辉", "type": "cash", "amount": 2000 },
|
||||
{ "name": "黄潮明", "type": "cash", "amount": 300 },
|
||||
{ "name": "王添顺贤兄", "type": "item", "detail": "J.W Gold Label 色酒 2支" },
|
||||
{ "name": "九酝云科技有限公司", "type": "item", "detail": "贵州茅台 4支" },
|
||||
{ "name": "马六甲洪河公司", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "顺发汽车修理有限公司", "type": "cash", "amount": 500 },
|
||||
{ "name": "Vworld2.0 88Group", "type": "item", "detail": "Remy Martin XO CNY 2025 700ml 一支" },
|
||||
{ "name": "UU摄影艺术馆", "type": "item", "detail": "大笔进财酒 一支" },
|
||||
{ "name": "颜在专", "type": "item", "detail": "Johnnie Walker X.R 21yrs CNY F25 750ml 一支" },
|
||||
{ "name": "林樑展仁兄", "type": "item", "detail": "Hennessy XO 一支" },
|
||||
{ "name": "新邦令金洪河公司", "type": "item", "detail": "Martell Cordon Bleu 700ml 一支" },
|
||||
{ "name": "黄鎔敬", "type": "cash", "amount": 100 },
|
||||
{ "name": "啊南", "type": "cash", "amount": 750 },
|
||||
{ "name": "69 Group", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "领善精密刀具贸易", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "农景汶", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "地南祥子", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "好运99", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "宝哥榴莲", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "道士强", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "张章理", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "新成酒家", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "新港村委会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "明安熟食广场有限公司", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "李桂安", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "林樑展", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平阿光", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "王添顺贤兄", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "美珍生果贸易有限公司", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "荣成生命礼仪关怀服务有限公司", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "莫少权", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "世纪白钢五金", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "小猪 & 小许", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "林联裕", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "阿富", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "颜在专", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "阿依淡洪日山世缘", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "峇株罗汉坛", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "世纪白钢五金", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "黄伟胜", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "永平业余钓鱼俱乐部", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "新邦令金月圆联谊社", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "明安熟食广场有限公司", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "Momo Music Cafe", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "张章理", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平阿光", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "莫少权", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "69 Group", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "林樑展", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "道士强", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "地南祥子", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "郑旭辉", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "巴力拉惹月圆联谊会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "和合汽车服务中心", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "荣成生命礼仪关怀服务有限公司", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "美珍生果贸易有限公司", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "农景汶", "type": "table", "amount": 1, "note": "白" },
|
||||
{ "name": "南利三川福利联谊会", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "拿督刘书致", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "V-world", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "福满家", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "领善精密刀具贸易", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "啊南", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "李新标", "type": "table", "amount": 0.5, "note": "赠" },
|
||||
{ "name": "李桂安", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "新港村委会", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "二师兄", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "小猪/小许", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "好运99", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "阿富", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "黑青", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "王添顺贤兄", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "林联裕", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "祯发油棕", "type": "table", "amount": 0.5, "note": "报销" },
|
||||
{ "name": "阿平油棕", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "旺兴打嗎甲烧焊喷漆车厂", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "Sarawak 毅哥", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "巫骐洲贤兄", "type": "table", "amount": 1, "note": "赠" },
|
||||
{ "name": "陈德福", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "颜在专", "type": "table", "amount": 1, "note": "报销" },
|
||||
{ "name": "宝哥榴莲", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "永平快乐园", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "龙园海鲜", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "新成酒家", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "诚信油棕", "type": "table", "amount": 0.5, "note": "" },
|
||||
{ "name": "HL Group", "type": "table", "amount": 1, "note": "" },
|
||||
{ "name": "新邦令金城阴殿", "type": "table", "amount": 1, "note": "" }
|
||||
{ "name": "新邦令金城阴殿", "type": "table", "amount": 1, "note": "" },
|
||||
|
||||
{ "name": "Momo Music cafe", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "黄伟胜", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "黑青", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "南利三川福利联谊会", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "旺兴打嗎甲烧焊喷漆车厂", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "李新标", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "永平业余钓鱼俱乐部", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "永平快乐园", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "龙园海鲜", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "阿平油棕", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "诚信油棕", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "和合汽车服务中心", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
{ "name": "陈德福", "type": "table", "amount": 0.5, "note": "半桌" },
|
||||
|
||||
{ "name": "二师兄", "type": "table", "amount": 2, "note": "" }
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user