element-plus/docs/.vitepress/vitepress/components/sponsors/right-richtext-list.vue

<script setup lang="ts">
import { computed } from 'vue'
import { rightRichTextSponsors } from '../../../config/sponsors'
import { sendEvent } from '../../../config/analytics'
import { useLang } from '../../composables/lang'
import { isDark } from '../../composables/dark'
const lang = useLang()
const langZhCN = 'zh-CN'
const isZhCn = computed(() => lang.value === langZhCN)
const onItemClick = (item: any) => {
  sendEvent('sp_click', item.name, 'right_richtext_list')
}
</script>

<template>
  <div class="m-t-16px">
    <a
      v-for="item in rightRichTextSponsors"
      :key="item.name"
      :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 pl-12px pr-12px pt-16px pb-16px rd-4px',
        ]"
      >
        <div class="w-32px m-r-8px h-56px">
          <img
            class="mt-2px rd-4px w-32px h-32px"
            :src="item.img"
            :alt="item.name"
          />
        </div>
        <div class="flex-1 h-56px">
          <div
            :class="[
              'color-#303133 font-400 text-13px',
              isDark && '!color-#E5E9F3',
            ]"
          >
            {{ isZhCn ? item.name_cn || item.name : item.name }}
          </div>
          <div
            :class="[
              'm-t-2px font-400 text-12px color-#909399',
              isDark && '!color-#A3A6AD',
            ]"
          >
            {{ isZhCn ? item.slogan_cn || item.slogan : item.slogan }}
          </div>
        </div>
      </div>
    </a>
  </div>
</template>