update docs

Author: wu-clan

docs/.vuepress/client.ts

@@ -5,12 +5,14 @@ import Layout from './layouts/Layout.vue'
 import './styles/custom.css'
 import Swiper from "./components/Swiper.vue";
 import SponsorPanel from "./components/SponsorPanel.vue";
+import SponsorHome from './components/SponsorHome.vue';
 
 export default defineClientConfig({
     enhance({ app }) {
         app.component('RepoCard', RepoCard)
         app.component('Swiper', Swiper)
         app.component('SponsorPanel', SponsorPanel)
+        app.component('SponsorHome', SponsorHome)
     },
     layouts: {
         Layout,

docs/.vuepress/components/SponsorHome.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+
+import { homeSponsor } from "../data/sponsors";
+
+</script>
+
+<template>
+    <section v-if="homeSponsor.href && homeSponsor.link" id="special-spsr">
+        <span>特别赞助商</span>
+        <a :href="homeSponsor.href" target="_blank">
+            <img width="168" height="42" :src="homeSponsor.link" :alt="homeSponsor.alt" />
+        </a>
+        <span>{{ homeSponsor.text }}</span>
+    </section>
+    <section v-else id="special-spsr">
+        <span>
+            <a class="no-sponsor" href="/fastapi_best_architecture_docs/sponsors#展位赞助商">
+                特别赞助位目前空缺 - 现在咨询
+            </a>
+        </span>
+    </section>
+</template>
+
+<style scoped>
+.no-sponsor{
+    color: var(--vp-c-brand-1)
+}
+
+.no-sponsor:hover {
+    color: var(--vp-c-brand-2) !important;
+}
+
+#special-spsr {
+    border-top: 1px solid var(--vp-c-divider);
+    border-bottom: 1px solid var(--vp-c-divider);
+    padding: 12px 24px;
+    display: flex;
+    align-items: center;
+    margin: 0 -9999px;
+    padding: 1 9999px;
+}
+
+#special-spsr span {
+    color: var(--vp-c-text-2);
+    font-weight: 500;
+    font-size: 13px;
+    vertical-align: middle;
+    flex: 1;
+}
+
+#special-spsr span:first-child {
+    text-align: right;
+}
+
+#special-spsr a {
+    display: flex;
+    justify-content: center;
+    padding: 0 24px;
+}
+
+#special-spsr img {
+    height: 42px;
+    margin: -6px 0;
+}
+
+.dark #special-spsr img {
+    filter: grayscale(1) invert(1);
+}
+
+@media (max-width: 576px) {
+    #special-spsr {
+        flex-direction: column;
+    }
+
+    #special-spsr img {
+        height: 36px;
+        margin: 8px 0;
+    }
+
+    #special-spsr span {
+        text-align: center !important;
+    }
+}
+</style>

docs/.vuepress/components/SponsorPanel.vue

@@ -3,47 +3,37 @@
     <!-- Gold Sponsors -->
     <div class="gold-sponsors">
       <div
-          v-for="(sponsor, index) in goldSponsors"
-          :key="'gold-' + index"
-          class="sponsor-item gold"
-          @click="openSponsorLink(sponsor.href)"
+        v-for="(sponsor, index) in goldSponsors"
+        :key="'gold-' + index"
+        class="sponsor-item gold"
+        @click="openSponsorLink(sponsor.href)"
       >
-        <img
-            v-if="sponsor.link"
-            :src="sponsor.link"
-            :alt="sponsor.alt"
-            class="sponsor-image"
-        />
+        <img v-if="sponsor.link" :src="sponsor.link" :alt="sponsor.alt" class="sponsor-image" />
         <span v-else class="sponsor-text">{{ sponsor.text }}</span>
       </div>
     </div>
 
     <!-- General Sponsors -->
     <div class="general-sponsors">
       <div
-          v-for="(sponsor, index) in generalSponsors"
-          :key="'general-' + index"
-          class="sponsor-item"
-          @click="openSponsorLink(sponsor.href)"
+        v-for="(sponsor, index) in generalSponsors"
+        :key="'general-' + index"
+        class="sponsor-item"
+        @click="openSponsorLink(sponsor.href)"
       >
-        <img
-            v-if="sponsor.link"
-            :src="sponsor.link"
-            :alt="sponsor.alt"
-            class="sponsor-image"
-        />
+        <img v-if="sponsor.link" :src="sponsor.link" :alt="sponsor.alt" class="sponsor-image" />
         <span v-else class="sponsor-text">{{ sponsor.text }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {goldSponsors, generalSponsors} from "../data/sponsors";
+import { goldSponsors, generalSponsors } from "../data/sponsors";
 
 const openSponsorLink = (href) => {
-  window.open(href, '_blank')
-}
+  window.open(href, "_blank");
+};
 </script>
 
 <style scoped>