mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
ada12878d1
* chore(docs): update sponsors on main page - Update sponsors layout on main page - Add a footer section on hero contents * Extract common code * Fix main page parallax image issue * Remove unused variables * Remove unused variables
56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { isDark } from '../../composables/dark'
|
|
import { useLang } from '../../composables/lang'
|
|
import sponsorLocale from '../../../i18n/component/sponsor.json'
|
|
|
|
defineProps({
|
|
sponsors: Array,
|
|
sponsorType: String,
|
|
})
|
|
|
|
const lang = useLang()
|
|
const sponsorLang = computed(() => sponsorLocale[lang.value])
|
|
|
|
const langZhCN = 'zh-CN'
|
|
|
|
const getSponsorName = (sponsor) => {
|
|
if (lang.value === langZhCN) {
|
|
return sponsor.name_cn || sponsor.name
|
|
}
|
|
return sponsor.name
|
|
}
|
|
const getSponsorSlogan = (sponsor) => {
|
|
if (lang.value === langZhCN) {
|
|
return sponsor.slogan_cn || sponsor.slogan
|
|
}
|
|
return sponsor.slogan
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h2 class="text-center mb-4 text-xl">{{ sponsorLang[sponsorType] }}</h2>
|
|
<div class="grid gap-1 sponsor-list platinum">
|
|
<a
|
|
v-for="(sponsor, i) in sponsors"
|
|
:key="i"
|
|
:class="['sponsor flex px-4 rounded-md', sponsor.className]"
|
|
:href="sponsor.url"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
:class="sponsor.isDark && isDark ? 'filter invert' : ''"
|
|
width="45"
|
|
:src="sponsor.img"
|
|
:alt="sponsor.name"
|
|
/>
|
|
<div>
|
|
<p>
|
|
<span class="name">{{ getSponsorName(sponsor) }}</span>
|
|
</p>
|
|
<p>{{ getSponsorSlogan(sponsor) }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</template>
|