Add sponsor list JSON and corresponding HTML for event celebration
- Created sponsorList.json with details of sponsors for the event "永平新港汕河体育协会 2 周年庆联欢晚宴". - Developed index.html to display the event title, sponsor logos, and a scrolling list of sponsors using Vue.js. - Implemented sorting logic for sponsors based on type and amount. - Added animations for sponsor display and ensured responsive design.
This commit is contained in:
14
20251115/.prettierrc
Normal file
14
20251115/.prettierrc
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": ["sponsorList.json"],
|
||||||
|
"options": {
|
||||||
|
"printWidth": 9999,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"bracketSpacing": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
64
20251115/sponsorList.json
Normal file
64
20251115/sponsorList.json
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"eventTitle": "永平新港汕河体育协会 2 周年庆联欢晚宴",
|
||||||
|
"logos": [{ "imgSrc": "SamHor-HighRes.png" }, { "imgSrc": "关公文化-HighRes.png" }, { "imgSrc": "VWorld2 Logo.png" }],
|
||||||
|
"sponsorList": [
|
||||||
|
{ "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": "" }
|
||||||
|
]
|
||||||
|
}
|
||||||
168
20251115/sponsorList/index.html
Normal file
168
20251115/sponsorList/index.html
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Sponsor list - 汕河</title>
|
||||||
|
|
||||||
|
<script src="/analysis.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.sponsor-marquee-track {
|
||||||
|
animation: sponsor-marquee-move-text 120s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.special-marquee-track {
|
||||||
|
animation: special-marquee-move-text 30s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sponsor-marquee-move-text {
|
||||||
|
to {
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes special-marquee-move-text {
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" class="h-screen flex flex-col select-none">
|
||||||
|
<div class="text-center">{{eventTitle}}</div>
|
||||||
|
<!-- 特别赞助 -->
|
||||||
|
<div class="overflow-clip mask-x-from-95% mask-x-to-100%">
|
||||||
|
<div class="flex pl-4 gap-4 w-max special-marquee-track">
|
||||||
|
<div v-for="sponsor in specialSponsorDouble" :key="sponsor">
|
||||||
|
{{sponsor}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 下半部分二八分,左侧放 image,右侧走马灯 -->
|
||||||
|
<div class="flex-1 flex min-h-0 overflow-clip">
|
||||||
|
<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%]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex-8">
|
||||||
|
<div class="flex flex-col pt-4 gap-4 sponsor-marquee-track">
|
||||||
|
<div v-for="sponsor in sponsorListDouble" :key="sponsor">
|
||||||
|
<div v-if="sponsor.type == 'table'">
|
||||||
|
{{sponsor.name}} {{tableToSeats(sponsor.amount)}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { createApp, ref, computed, onMounted } = Vue;
|
||||||
|
|
||||||
|
createApp({
|
||||||
|
setup() {
|
||||||
|
const eventTitle = ref("");
|
||||||
|
const logos = ref([]);
|
||||||
|
const sponsorList = ref([]); // Load from JSON
|
||||||
|
const specialSponsor = ref(
|
||||||
|
"由 V World2.0 特别赞助本场晚宴,现在下载 APP 并进行实名认证即可获得 RM50 的登录奖励!"
|
||||||
|
);
|
||||||
|
|
||||||
|
const typePriority = {
|
||||||
|
table: 3, // 优先级最高
|
||||||
|
cash: 2,
|
||||||
|
items: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
function sortSponsors(list) {
|
||||||
|
return list.sort((a, b) => {
|
||||||
|
// 先按 type 优先级排序(table > cash > items)
|
||||||
|
const typeDiff = typePriority[b.type] - typePriority[a.type];
|
||||||
|
if (typeDiff !== 0) return typeDiff;
|
||||||
|
|
||||||
|
// 若 type 相同,再按 amount 从大到小
|
||||||
|
if (b.amount !== a.amount) return b.amount - a.amount;
|
||||||
|
|
||||||
|
// 若 amount 相同,最后按名称排序(可选)
|
||||||
|
return a.name.localeCompare(b.name, "zh");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
const [sponsorListResult] = await Promise.all([
|
||||||
|
fetch("../sponsorList.json"),
|
||||||
|
]);
|
||||||
|
if (!sponsorListResult.ok) {
|
||||||
|
throw new Error(
|
||||||
|
"Error while loading sponsorList: " + sponsorListResult.status
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const sponsorListJsonData = await sponsorListResult.json();
|
||||||
|
eventTitle.value = sponsorListJsonData.eventTitle || "活动名称";
|
||||||
|
logos.value = sponsorListJsonData.logos || [];
|
||||||
|
sponsorList.value = (sponsorListJsonData.sponsorList || []).map(
|
||||||
|
(s, idx) => ({
|
||||||
|
...s,
|
||||||
|
_uid: `s-${idx}`,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
// Sort SponsorList by type and amount
|
||||||
|
sponsorList.value = sortSponsors(sponsorList.value);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const sponsorListDouble = computed(() => {
|
||||||
|
const a = sponsorList.value.map((s) => ({
|
||||||
|
...s,
|
||||||
|
_uid: s._uid + "-a",
|
||||||
|
}));
|
||||||
|
const b = sponsorList.value.map((s) => ({
|
||||||
|
...s,
|
||||||
|
_uid: s._uid + "-b",
|
||||||
|
}));
|
||||||
|
return [...a, ...b];
|
||||||
|
});
|
||||||
|
|
||||||
|
const specialSponsorDouble = computed(() => [
|
||||||
|
specialSponsor.value,
|
||||||
|
specialSponsor.value,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const tableToSeats = (amount) => {
|
||||||
|
switch (amount) {
|
||||||
|
case 1:
|
||||||
|
return "一桌";
|
||||||
|
case 0.5:
|
||||||
|
return "半桌";
|
||||||
|
default:
|
||||||
|
console.error("Error while converting table amount: ", amount);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
eventTitle,
|
||||||
|
logos,
|
||||||
|
sponsorListDouble,
|
||||||
|
specialSponsorDouble,
|
||||||
|
tableToSeats,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}).mount("#app");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
竞标软件
|
||||||
|
背景设计静态(要有 Logo)
|
||||||
|
Sponsor List
|
||||||
Reference in New Issue
Block a user