admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ♻️ 赞助商样式更新

Browse Source
This commit is contained in:
不如摸鱼去 2025-09-21 22:58:55 +08:00
parent 50a286fb5f
commit 9f54ef0313
2 changed files with 60 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
docs/.vitepress/theme/components/AsideSponsors.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2025-09-21 17:13:45 * @Date: 2025-09-21 17:13:45
* @LastEditTime: 2025-09-21 19:53:54 * @LastEditTime: 2025-09-21 22:57:29
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: /wot-design-uni/docs/.vitepress/theme/components/AsideSponsors.vue * @FilePath: /wot-design-uni/docs/.vitepress/theme/components/AsideSponsors.vue
@ -24,66 +24,66 @@ const goldSponsors = computed(() => {
// 判断金牌赞助数量是否为奇数 // 判断金牌赞助数量是否为奇数
const isGoldSponsorsOdd = computed(() => { const isGoldSponsorsOdd = computed(() => {
return (goldSponsors.value?.items?.length||0) % 2 === 1 return (goldSponsors.value?.items?.length || 0) % 2 === 1
}) })
</script> </script>
<template> <template>
<div class="VPDocAsideSponsors"> <div class="VPDocAsideSponsors">
<a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a> <a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a>
<div class="VPSponsors vp-sponsor aside"> <div class="VPSponsors vp-sponsor aside">
<!-- 超级赞助：一行一个 --> <!-- 超级赞助：一行一个 -->
<section class="vp-sponsor-section" v-if="superSponsors?.items.length"> <section class="vp-sponsor-section" v-if="superSponsors?.items.length">
<div class="VPSponsorsGrid vp-sponsor-grid mini" data-vp-grid="1"> <div class="VPSponsorsGrid vp-sponsor-grid mini" data-vp-grid="1">
<div class="vp-sponsor-grid-item" v-for="sponsor in superSponsors.items" :key="sponsor.name"> <div class="vp-sponsor-grid-item" v-for="sponsor in superSponsors.items" :key="sponsor.name">
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener"> <a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
<article class="vp-sponsor-grid-box"> <article class="vp-sponsor-grid-box">
<h4 class="visually-hidden">{{ sponsor.url }}</h4> <h4 class="visually-hidden">{{ sponsor.url }}</h4>
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name"> <img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span> <span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
</article> </article>
</a> </a>
</div>
</div> </div>
</div> </section>
</section>
<!-- 金牌赞助：一行两个 -->
<!-- 金牌赞助：一行两个 --> <section class="vp-sponsor-section" v-if="goldSponsors?.items.length">
<section class="vp-sponsor-section" v-if="goldSponsors?.items.length"> <div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="2">
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="2"> <div class="vp-sponsor-grid-item" v-for="sponsor in goldSponsors.items" :key="sponsor.name">
<div class="vp-sponsor-grid-item" v-for="sponsor in goldSponsors.items" :key="sponsor.name"> <a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener"> <article class="vp-sponsor-grid-box">
<article class="vp-sponsor-grid-box"> <h4 class="visually-hidden">{{ sponsor.name }}</h4>
<h4 class="visually-hidden">{{ sponsor.name }}</h4> <img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name"> <span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span> </article>
</article> </a>
</a> </div>
<!-- 当金牌赞助为奇数时，默认赞助位填补到金牌赞助位置 -->
<div class="vp-sponsor-grid-item" v-if="isGoldSponsorsOdd">
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
<article class="vp-sponsor-grid-box">
<span class="vp-sponsor-grid-text">成为赞助商</span>
</article>
</a>
</div>
</div> </div>
<!-- 当金牌赞助为奇数时，默认赞助位填补到金牌赞助位置 --> </section>
<div class="vp-sponsor-grid-item" v-if="isGoldSponsorsOdd">
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener"> <!-- 当金牌赞助为偶数或没有金牌赞助时，默认赞助位占据一整行 -->
<article class="vp-sponsor-grid-box"> <section class="vp-sponsor-section" v-if="!isGoldSponsorsOdd || !goldSponsors?.items.length">
<span class="vp-sponsor-grid-text">成为赞助商</span> <div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1">
</article> <div class="vp-sponsor-grid-item">
</a> <a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
<article class="vp-sponsor-grid-box">
<span class="vp-sponsor-grid-text">成为赞助商</span>
</article>
</a>
</div>
</div> </div>
</div> </section>
</section> </div>
<!-- 当金牌赞助为偶数或没有金牌赞助时，默认赞助位占据一整行 -->
<section class="vp-sponsor-section" v-if="!isGoldSponsorsOdd || !goldSponsors?.items.length">
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1">
<div class="vp-sponsor-grid-item">
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
<article class="vp-sponsor-grid-box">
<span class="vp-sponsor-grid-text">成为赞助商</span>
</article>
</a>
</div>
</div>
</section>
</div> </div>
</div>
</template> </template>
<style> <style>
@ -96,6 +96,12 @@ const isGoldSponsorsOdd = computed(() => {
color: var(--vp-c-gray-1); color: var(--vp-c-gray-1);
} }
.vp-sponsor-grid-image {
max-width: 120px;
max-height: 72px !important;
filter: none !important;
}
a.sponsors-aside-text { a.sponsors-aside-text {
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
display: block; display: block;

2
docs/.vitepress/theme/components/SpecialSponsor.vue
View File

@ -7,7 +7,7 @@ interface Props {
} }
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
title: '超级赞助', title: '铂金赞助商',
}) })
const { data } = useAdSponsor() const { data } = useAdSponsor()