899bbb490c
- 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.
169 lines
5.2 KiB
HTML
169 lines
5.2 KiB
HTML
<!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>
|