first commit

2025-09-15 00:28:27 +08:00
commit ae8d3ce510
28 changed files with 2882 additions and 0 deletions
--- a/20250916/sponsor-list-mobile/index.html
+++ b/20250916/sponsor-list-mobile/index.html
@@ -0,0 +1,91 @@
+<!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>