From 68a07e8229b301a5d3b49b00cafe42bee63081ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sat, 24 Feb 2024 11:59:49 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96&=E5=B1=8F=E5=B9=95=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vuepress/components/Sponsor.vue | 36 +++++++++++++++++----------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/docs/.vuepress/components/Sponsor.vue b/docs/.vuepress/components/Sponsor.vue
index 44a6f1223..ce540482c 100644
--- a/docs/.vuepress/components/Sponsor.vue
+++ b/docs/.vuepress/components/Sponsor.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="sponsor-container">
     <div class="sponsor-items">
-      <div v-for="item in sponsor" :key="item.type" class="sponsor-item" :title="item.name">
-        <a :href="`#${item.type}`" :title="item.name" class="hutao-sponsor-link">
+      <div v-for="item in sponsor" :key="item.type" class="sponsor-item" :title="item.name[props.lang]">
+        <a :href="`#${item.type}`" :title="item.name[props.lang]" class="hutao-sponsor-link">
           <img :src="item.icon" :alt="item.type"/>
-          <span>{{ item.name[props.lang ?? 'zh'] }}</span>
+          <span>{{ item.name[props.lang] }}</span>
         </a>
       </div>
     </div>
     <div class="sponsor-detail" v-if="type && currentSponsor">
       <div class="sponsor-detail-left">
-        <img :src="currentSponsor.icon" :alt="currentSponsor.name"/>
-        <p>{{ currentSponsor.label[props.lang ?? 'zh'] }}</p>
+        <img :src="currentSponsor.icon" :alt="currentSponsor.name[props.lang]"/>
+        <p>{{ currentSponsor.label[props.lang] }}</p>
         <a v-if="currentSponsor.url" :href="currentSponsor.url" target="_blank"
            rel="noopener noreferrer">{{ currentSponsor.url }}</a>
       </div>
       <div class="sponsor-detail-right">
-        <img :src="currentSponsor.qrcode" :alt="currentSponsor.label"/>
+        <img :src="currentSponsor.qrcode" :alt="currentSponsor.label[props.lang]"/>
       </div>
     </div>
   </div>
@@ -28,7 +28,9 @@ interface SponsorProps {
   lang: 'zh' | 'en';
 }
 
-const props = defineProps<SponsorProps>();
+const props = withDefaults(defineProps<SponsorProps>(), {
+  lang: 'zh'
+});
 
 enum SponsorType {
   afdian = 'afdian',
@@ -126,7 +128,7 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  column-gap: 10px;
+  gap: 1rem;
 }
 
 .sponsor-item {
@@ -180,6 +182,7 @@ onBeforeUnmount(() => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+  max-width: 100%;
 }
 
 .sponsor-detail-left img {
@@ -193,11 +196,14 @@ onBeforeUnmount(() => {
 }
 
 .sponsor-detail-left p {
+  max-width: 100%;
   font-weight: 700;
   word-break: break-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.sponsor-detail-left a {
+  max-width: 100%;
+  word-break: break-all;
 }
 
 .sponsor-detail-right {
@@ -227,8 +233,12 @@ onBeforeUnmount(() => {
     align-items: center;
   }
 
-  .sponsor-detail-left {
-    display: none;
+  .sponsor-detail-left img {
+    margin: auto;
+  }
+
+  .sponsor-detail-right img {
+    margin-top: 1rem;
   }
 }
 </style>
\ No newline at end of file