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"
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">
@@ -168,6 +181,8 @@
</div>
</div>
</div>
<designed-remark />
</div>
<!-- 赞助商分类 -->
@@ -188,13 +203,11 @@
v-for="s in filteredSponsors"
:key="s._uid"
:sponsor="s"
>
<!-- <template #extra>
<div class="mt-2 text-xs text-gray-500">自定义插槽内容</div>
</template> -->
</sponsor-card>
/>
</div>
</div>
<designed-remark />
</div>
<!-- 底部导航 -->
@@ -211,6 +224,18 @@
</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">
@@ -234,6 +259,6 @@
</div>
</template>
<script src="./script.js"></script>
<script src="./script.js?v=3"></script>
</body>
</html>