element-plus/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
2022-03-29 22:49:54 +08:00

46 lines
901 B
Vue

<script setup lang="ts">
import { isDark } from '../composables/dark'
import { sponsors } from '../../config/sponsors'
const sponsorList = sponsors.filter((_) => !_.type)
</script>
<template>
<div class="container">
<div
v-for="item in sponsorList"
:key="item.name"
:class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
>
<a
:href="item.url"
:title="`${item.name_cn || item.name} - ${
item.slogan_cn || item.slogan
}`"
target="_blank"
>
<img :src="item.img" :alt="item.name" />
</a>
</div>
</div>
</template>
<style scoped lang="scss">
.container {
display: flex;
align-items: center;
.sponsor-item {
margin-right: 4px;
a {
display: inline-flex;
align-items: center;
img {
width: 36px;
height: 36px;
}
}
}
}
</style>