2e5ba93083
This commit introduces a new 'DesignedRemark' component to display an attribution link. - Adds the Pacifico font for custom styling of the remark. - Creates and registers the global `DesignedRemark` Vue component. - Integrates the component into the mobile sponsor list page.
265 lines
9.2 KiB
HTML
265 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>永平新港汕河体育协会 2 周年庆联欢晚宴｜电子征信录与赞助名单</title>
|
|
|
|
<!-- ✅ SEO 基础优化 -->
|
|
<meta
|
|
name="description"
|
|
content="永平新港汕河体育协会 2 周年庆联欢晚宴电子征信录，完整收录所有赞助商与支持者名单，感谢社会各界的热心赞助与参与。"
|
|
/>
|
|
<meta
|
|
name="keywords"
|
|
content="永平新港汕河体育协会, 永平, 汕河, 体育会, 赞助名单, 周年庆, 晚宴, 电子征信录, Malaysia, Yong Peng"
|
|
/>
|
|
|
|
<!-- ✅ Open Graph (社交分享预览) -->
|
|
<meta property="og:type" content="website" />
|
|
<meta
|
|
property="og:title"
|
|
content="永平新港汕河体育协会 2 周年庆联欢晚宴 - 电子征信录"
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="感谢所有赞助商与嘉宾的支持，共襄盛举。查看完整赞助名单与活动记录。"
|
|
/>
|
|
<meta property="og:image" content="https://example.com/assets/cover.jpg" />
|
|
<meta property="og:url" content="https://example.com/sponsor-record" />
|
|
<meta property="og:site_name" content="永平新港汕河体育协会" />
|
|
|
|
<!-- ✅ Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta
|
|
name="twitter:title"
|
|
content="永平新港汕河体育协会 2 周年庆联欢晚宴"
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="电子征信录｜感谢所有赞助商与支持者"
|
|
/>
|
|
<meta name="twitter:image" content="https://example.com/assets/cover.jpg" />
|
|
|
|
<!-- ✅ Favicon -->
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
<!-- ✅ 性能优化 -->
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
|
<link rel="preconnect" href="https://unpkg.com" />
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
|
|
|
|
<!-- ✅ JSON-LD 结构化数据 (Google 识别为活动页面) -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Event",
|
|
"name": "永平新港汕河体育协会 2 周年庆联欢晚宴",
|
|
"startDate": "2025-11-22T19:00",
|
|
"location": {
|
|
"@type": "Place",
|
|
"name": "永平新港汕河体育协会会所",
|
|
"address": "Yong Peng, Johor, Malaysia"
|
|
},
|
|
"image": "https://example.com/assets/cover.jpg",
|
|
"description": "庆祝永平新港汕河体育协会成立两周年的晚宴活动，并公布电子征信录感谢所有赞助商与支持者。",
|
|
"organizer": {
|
|
"@type": "Organization",
|
|
"name": "永平新港汕河体育协会",
|
|
"url": "https://example.com"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
/>
|
|
|
|
<style type="text/tailwindcss">
|
|
@theme {
|
|
/* 🎨 定义自定义字体族变量 */
|
|
--font-pacifico: "Pacifico", cursive;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Pacifico";
|
|
src: url("/fonts/Pacifico-Regular.ttf") format("truetype");
|
|
font-display: swap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<div id="app" class="h-screen flex flex-col">
|
|
<!-- 头部 -->
|
|
<header
|
|
class="bg-radial from-orange-600 to-red-600 text-white p-4 shadow-md"
|
|
>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h1 class="text-lg font-bold truncate">{{ eventTitle }}</h1>
|
|
<button
|
|
@click="showStats = !showStats"
|
|
class="bg-white/20 p-2 rounded-full"
|
|
>
|
|
<i class="fas fa-chart-bar"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Logo区域 -->
|
|
<div class="flex justify-center space-x-4 overflow-x-auto py-2">
|
|
<div v-for="(logo, index) in logos" :key="index" class="shrink-0">
|
|
<div
|
|
class="bg-white rounded-lg p-2 w-16 h-16 flex items-center justify-center"
|
|
>
|
|
<img :src="`../../assets/${logo.imgSrc}`" :alt="logo.imgSrc" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 特别赞助商 -->
|
|
<div
|
|
v-if="specialSponsor"
|
|
class="bg-yellow-100 border-l-4 border-yellow-500 p-3 mx-4 mt-4 rounded-r"
|
|
>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-star text-yellow-500 mt-1 mr-2"></i>
|
|
<p class="text-sm text-yellow-800">{{ specialSponsor }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计数据 -->
|
|
<div v-if="showStats" class="bg-white m-4 p-4 rounded-lg shadow-sm">
|
|
<h2 class="text-lg font-semibold mb-3 flex items-center">
|
|
<i class="fas fa-chart-pie mr-2 text-blue-500"></i>赞助统计
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="bg-blue-50 p-3 rounded-lg">
|
|
<p class="text-xs text-blue-700">赞助商总数</p>
|
|
<p class="text-xl font-bold">{{ stats.totalSponsors }}</p>
|
|
</div>
|
|
<div class="bg-green-50 p-3 rounded-lg">
|
|
<p class="text-xs text-green-700">现金赞助总额</p>
|
|
<p class="text-xl font-bold">
|
|
RM {{ stats.totalCash.toLocaleString() }}
|
|
</p>
|
|
</div>
|
|
<div class="bg-purple-50 p-3 rounded-lg">
|
|
<p class="text-xs text-purple-700">标品赞助数量</p>
|
|
<p class="text-xl font-bold">{{ stats.totalItems }}</p>
|
|
</div>
|
|
<div class="bg-orange-50 p-3 rounded-lg">
|
|
<p class="text-xs text-orange-700">赞助席位总数</p>
|
|
<p class="text-xl font-bold">
|
|
{{ tableToSeats(stats.totalTables) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h3 class="text-sm font-medium mb-2">赞助类型分布</h3>
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="type in stats.typeDistribution"
|
|
:key="type.name"
|
|
class="flex items-center"
|
|
>
|
|
<div class="w-20 text-xs">{{ type.name }}</div>
|
|
<div class="flex-1 bg-gray-200 rounded-full h-2">
|
|
<div
|
|
:class="type.color"
|
|
class="h-2 rounded-full"
|
|
:style="{ width: type.percentage + '%' }"
|
|
></div>
|
|
</div>
|
|
<div class="w-10 text-right text-xs">{{ type.count }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<designed-remark />
|
|
</div>
|
|
|
|
<!-- 赞助商分类 -->
|
|
<div class="flex-1 overflow-auto">
|
|
<!-- 赞助商列表 -->
|
|
<div class="p-4">
|
|
<div
|
|
v-if="filteredSponsors.length === 0"
|
|
class="text-center py-8 text-gray-500"
|
|
>
|
|
<i class="fas fa-inbox text-4xl mb-2"></i>
|
|
<p>暂无此类赞助商</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<!-- 现金赞助商 -->
|
|
<sponsor-card
|
|
v-for="s in filteredSponsors"
|
|
:key="s._uid"
|
|
:sponsor="s"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<designed-remark />
|
|
</div>
|
|
|
|
<!-- 底部导航 -->
|
|
<footer class="bg-white border-t p-3 flex justify-around">
|
|
<button
|
|
v-for="category in categories"
|
|
:key="category.type"
|
|
@click="activeCategory = category.type"
|
|
:class="['flex flex-col items-center text-xs', (activeCategory === category.type ? category.color : 'text-gray-400')]"
|
|
>
|
|
<i :class="['text-lg mb-1', category.icon]"></i>
|
|
<span>{{category.name}}</span>
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
|
|
<template id="designed-remark-template">
|
|
<a href="https://tootaio.com/">
|
|
<div class="text-center my-4">
|
|
<i>Designed by</i>
|
|
<span class="font-pacifico">
|
|
<span class="text-red-500">TooTaio</span>
|
|
Studio
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
|
|
<template id="sponsor-card-template">
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="flex justify-between items-start">
|
|
<h3 class="font-medium text-gray-800">{{ sponsor.name }}</h3>
|
|
<span
|
|
:class="['text-sm px-2 py-1 rounded-full', sponsor.pillBg, sponsor.pillColor]"
|
|
>
|
|
<span v-if="sponsor.type == 'cash'" class="whitespace-nowrap">
|
|
RM {{ sponsor.displayAmount }}
|
|
</span>
|
|
<span v-else-if="sponsor.type == 'item'">
|
|
<i class="fas fa-gift mr-1"></i>标品赞助
|
|
</span>
|
|
<span v-else-if="sponsor.type == 'table'">{{sponsor.seats}}</span>
|
|
</span>
|
|
</div>
|
|
<p v-if="sponsor.detail" class="text-sm text-gray-600 mt-2">
|
|
{{ sponsor.detail }}
|
|
</p>
|
|
<slot name="extra"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./script.js?v=3"></script>
|
|
</body>
|
|
</html>
|