2022-06-11 16:35:10 +08:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { rightLogoSmallSponsors } from '../../../config/sponsors'
|
|
|
|
import { sendEvent } from '../../../config/analytics'
|
|
|
|
import { isDark } from '../../composables/dark'
|
|
|
|
const onItemClick = (item: any) => {
|
|
|
|
sendEvent('sp_click', item.name, 'right_logo_small')
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="m-t-16px flex flex-wrap justify-between">
|
2022-06-12 00:09:01 +08:00
|
|
|
<template
|
2022-06-11 16:35:10 +08:00
|
|
|
v-for="item in rightLogoSmallSponsors.concat([{} as any])"
|
|
|
|
:key="item.name"
|
|
|
|
>
|
|
|
|
<div
|
2022-06-12 00:09:01 +08:00
|
|
|
v-if="!item.url"
|
2022-06-11 16:35:10 +08:00
|
|
|
:class="[
|
2022-06-12 00:09:01 +08:00
|
|
|
isDark && '!bg-#262729 color-$text-color-placeholder',
|
2022-06-11 16:35:10 +08:00
|
|
|
'flex bg-#F9F9F9 rd-0px h-40px w-89px justify-center items-center',
|
|
|
|
]"
|
|
|
|
>
|
2022-06-12 00:09:01 +08:00
|
|
|
<div class="color-#ddd text-13px cursor-default">Your logo</div>
|
2022-06-11 16:35:10 +08:00
|
|
|
</div>
|
2022-06-12 00:09:01 +08:00
|
|
|
<a
|
|
|
|
v-else
|
|
|
|
:href="item.url"
|
|
|
|
:title="`${item.name_cn || item.name} - ${
|
|
|
|
item.slogan_cn || item.slogan
|
|
|
|
}`"
|
|
|
|
target="_blank"
|
|
|
|
@click="onItemClick(item)"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
:class="[
|
|
|
|
isDark && '!bg-#262729',
|
|
|
|
'flex bg-#F9F9F9 rd-0px h-40px w-89px justify-center items-center',
|
|
|
|
]"
|
|
|
|
>
|
|
|
|
<img :src="item.imgL" :alt="item.name" />
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</template>
|
2022-06-11 16:35:10 +08:00
|
|
|
</div>
|
|
|
|
</template>
|