92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>赞助名单展示</title>
|
|
<!-- TailwindCSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Vue 3 CDN -->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
|
</head>
|
|
<body class="bg-gradient-to-r from-gray-100 to-gray-200 min-h-screen flex flex-col items-center py-10">
|
|
|
|
<div id="app" class="w-full max-w-5xl px-6">
|
|
<!-- 标题 -->
|
|
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">🎉 感谢所有赞助人 🎉</h1>
|
|
|
|
<!-- 赞助金额 -->
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-semibold mb-4 text-blue-700">💰 赞助金额</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div v-for="s in sponsors" :key="s.name"
|
|
class="flex justify-between items-center bg-white shadow-md rounded-lg px-4 py-2">
|
|
<span class="font-medium text-gray-700">{{ s.name }}</span>
|
|
<span class="text-green-600 font-bold">RM {{ s.amount.toLocaleString() }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-right text-gray-700 font-medium">
|
|
赞助人数: {{ sponsors.length }} |
|
|
总金额: <span class="text-green-600 font-bold">RM {{ totalAmount.toLocaleString() }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 席位赞助 -->
|
|
<div>
|
|
<h2 class="text-2xl font-semibold mb-4 text-purple-700">🪑 席位赞助</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div v-for="s in seats" :key="s.name"
|
|
class="flex justify-between items-center bg-white shadow-md rounded-lg px-4 py-2">
|
|
<span class="font-medium text-gray-700">{{ s.name }}</span>
|
|
<span class="text-blue-600 font-bold">{{ s.seat }} 席</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-right text-gray-700 font-medium">
|
|
席位总数: <span class="text-blue-600 font-bold">{{ totalSeats }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
sponsors: [],
|
|
seats: [],
|
|
totalAmount: 0,
|
|
totalSeats: 0
|
|
};
|
|
},
|
|
mounted() {
|
|
// 🚀 动态加载 JSON
|
|
Promise.all([
|
|
fetch('../data/sponsors.json').then(res => res.json()),
|
|
fetch('../data/seats.json').then(res => res.json())
|
|
]).then(([sponsors, seats]) => {
|
|
this.sponsors = sponsors;
|
|
this.seats = seats;
|
|
this.totalAmount = sponsors.reduce((sum, s) => sum + Number(s.amount), 0);
|
|
this.totalSeats = seats.reduce((sum, s) => sum + Number(s.seat), 0);
|
|
}).catch(err => {
|
|
console.error("加载 JSON 数据失败，使用 mock 数据", err);
|
|
// 🔙 Fallback mock 数据
|
|
this.sponsors = [
|
|
{ name: "亮湘厨中国烧烤", amount: 8000 },
|
|
{ name: "未来教育基金会", amount: 20000 },
|
|
{ name: "星空科技集团", amount: 15000 }
|
|
];
|
|
this.seats = [
|
|
{ name: "郑来兴", seat: 1 },
|
|
{ name: "未来教育基金会", seat: 5 }
|
|
];
|
|
this.totalAmount = this.sponsors.reduce((sum, s) => sum + Number(s.amount), 0);
|
|
this.totalSeats = this.seats.reduce((sum, s) => sum + Number(s.seat), 0);
|
|
});
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|