Fun/Snap.Hutao.Docs
1
0
Fork 0
mirror of https://jihulab.com/DGP-Studio/Snap.Hutao.Docs.git synced 2025-11-19 21:16:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

⚡️ 调整国际化&屏幕适配

Browse Source
This commit is contained in:
目棃
2024-02-24 11:59:49 +08:00
parent 84112c80b5
commit 68a07e8229
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/.vuepress/components/Sponsor.vue
View File

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