Tootaio/dinner.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
xiaomai
2025-09-15 00:28:27 +08:00
commit ae8d3ce510
28 changed files with 2882 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
20250916/archive/sponsor-list-dynamic-vue/index.html Normal file
View File

@@ -0,0 +1,146 @@
<!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>
<style>
/* 跑马灯滚动效果 */
.scroll-list {
overflow: hidden;
height: 220px; /* 固定高度，超出部分隐藏 */
position: relative;
}
.scroll-inner {
display: flex;
flex-direction: column;
animation: scrollUp 12s linear infinite;
}
@keyframes scrollUp {
0% { transform: translateY(0); }
100% { transform: translateY(-50%); }
}
</style>
</head>
<body :class="theme" class="min-h-screen flex flex-col items-center py-10 transition-colors duration-500" id="app">
<!-- 主题切换按钮 -->
<!-- <button @click="toggleTheme"
class="mb-6 px-4 py-2 rounded-lg shadow text-white"
:class="theme === 'light' ? 'bg-gray-800' : 'bg-yellow-400 text-black'">
{{ theme === 'light' ? '🌙 夜间模式' : '☀️ 日间模式' }}
</button> -->
<div class="w-full max-w-5xl px-6">
<!-- 标题 -->
<h1 class="text-3xl font-bold text-center mb-8"
:class="theme === 'light' ? 'text-gray-800' : 'text-gray-200'">
🎉 感谢所有赞助人 🎉
</h1>
<!-- 赞助金额 -->
<div class="mb-12">
<h2 class="text-2xl font-semibold mb-4 text-blue-500">💰 赞助金额</h2>
<div class="scroll-list">
<div class="scroll-inner" :style="{ animationDuration: sponsors.length * 1.5 + 's' }">
<div v-for="s in sponsors" :key="s.name"
class="flex justify-between items-center mb-2 px-4 py-2 rounded-lg shadow"
:class="theme === 'light' ? 'bg-white text-gray-700' : 'bg-gray-800 text-gray-200'">
<span>{{ s.name }}</span>
<span class="font-bold text-green-500">RM {{ s.amount.toLocaleString() }}</span>
</div>
<!-- 复制一份实现无缝循环 -->
<div v-for="s in sponsors" :key="s.name + '-copy'"
class="flex justify-between items-center mb-2 px-4 py-2 rounded-lg shadow"
:class="theme === 'light' ? 'bg-white text-gray-700' : 'bg-gray-800 text-gray-200'">
<span>{{ s.name }}</span>
<span class="font-bold text-green-500">RM {{ s.amount.toLocaleString() }}</span>
</div>
</div>
</div>
<div class="mt-4 text-right font-medium"
:class="theme === 'light' ? 'text-gray-700' : 'text-gray-300'">
赞助人数: {{ sponsors.length }} |
总金额: <span class="text-green-500 font-bold">RM {{ totalAmount.toLocaleString() }}</span>
</div>
</div>
<!-- 席位赞助 -->
<div>
<h2 class="text-2xl font-semibold mb-4 text-purple-500">🪑 席位赞助</h2>
<div class="scroll-list">
<div class="scroll-inner" :style="{ animationDuration: seats.length * 1.5 + 's' }">
<div v-for="s in seats" :key="s.name"
class="flex justify-between items-center mb-2 px-4 py-2 rounded-lg shadow"
:class="theme === 'light' ? 'bg-white text-gray-700' : 'bg-gray-800 text-gray-200'">
<span>{{ s.name }}</span>
<span class="font-bold text-blue-500">{{ s.seat }} 席</span>
</div>
<!-- 复制一份实现无缝循环 -->
<div v-for="s in seats" :key="s.name + '-copy'"
class="flex justify-between items-center mb-2 px-4 py-2 rounded-lg shadow"
:class="theme === 'light' ? 'bg-white text-gray-700' : 'bg-gray-800 text-gray-200'">
<span>{{ s.name }}</span>
<span class="font-bold text-blue-500">{{ s.seat }} 席</span>
</div>
</div>
</div>
<div class="mt-4 text-right font-medium"
:class="theme === 'light' ? 'text-gray-700' : 'text-gray-300'">
席位总数: <span class="text-blue-500 font-bold">{{ totalSeats }}</span>
</div>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
sponsors: [],
seats: [],
totalAmount: 0,
totalSeats: 0,
theme: 'light' // 默认浅色
};
},
methods: {
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
}
},
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>