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

feat(sponsorList): add 'Designed by' remark component

Browse Source 
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.
This commit is contained in:
xiaomai
2025-11-13 08:30:34 +08:00
parent ba744f3381
commit 2e5ba93083
2 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
20251115/sponsorList/mobile/index.html
View File

@@ -79,6 +79,19 @@
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 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> </head>
<body class="bg-gray-50"> <body class="bg-gray-50">
<div id="app" class="h-screen flex flex-col"> <div id="app" class="h-screen flex flex-col">
@@ -168,6 +181,8 @@
</div> </div>
</div> </div>
</div> </div>
<designed-remark />
</div> </div>
<!-- 赞助商分类 --> <!-- 赞助商分类 -->
@@ -188,13 +203,11 @@
v-for="s in filteredSponsors" v-for="s in filteredSponsors"
:key="s._uid" :key="s._uid"
:sponsor="s" :sponsor="s"
> />
<!-- <template #extra>
<div class="mt-2 text-xs text-gray-500">自定义插槽内容</div>
</template> -->
</sponsor-card>
</div> </div>
</div> </div>
<designed-remark />
</div> </div>
<!-- 底部导航 --> <!-- 底部导航 -->
@@ -211,6 +224,18 @@
</footer> </footer>
</div> </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"> <template id="sponsor-card-template">
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
@@ -234,6 +259,6 @@
</div> </div>
</template> </template>
<script src="./script.js"></script> <script src="./script.js?v=3"></script>
</body> </body>
</html> </html>

5
20251115/sponsorList/mobile/script.js
View File

@@ -7,6 +7,10 @@ const SponsorCard = {
template: "#sponsor-card-template", template: "#sponsor-card-template",
}; };
const DesignedRemark = {
template: "#designed-remark-template",
};
const app = createApp({ const app = createApp({
setup() { setup() {
const eventTitle = ref(""); const eventTitle = ref("");
@@ -291,5 +295,6 @@ const app = createApp({
}, },
}); });
app.component("designed-remark", DesignedRemark); // 全局注册
app.component("sponsor-card", SponsorCard); // 全局注册 app.component("sponsor-card", SponsorCard); // 全局注册
app.mount("#app"); app.mount("#app");