shalu-velofex/apps/web-velofex/src/views/dashboard/home/sales-partners.vue

<script setup lang="ts">
import { computed } from 'vue';

import { useUserStore } from '@vben/stores';

import { $t } from '@/locales';

const userStore = useUserStore();
const isLogin = computed(() => !!userStore.userInfo);
</script>

<template>
  <div class="info-card border-box h-[217px] w-full rounded-lg p-5 shadow-md">
    <div class="flex items-start justify-between">
      <div>
        <h2 class="text-lg font-bold">{{ $t('homeModule.salesPartners') }}</h2>
        <div class="text-xs text-[#9A9BA3]">Sales Partners</div>
      </div>
      <img
        alt="more"
        class="h-[29px] w-[29px] cursor-pointer"
        src="@/assets/image/home-more.png"
      />
    </div>
    <p
      v-if="!isLogin"
      class="mt-4 w-[249px] text-sm text-xs leading-relaxed text-[#9A9BA3]"
    >
      {{ $t('homeModule.salesPartnersIntroduction') }}
    </p>
    <div v-else class="mt-[38px] flex flex-wrap gap-[18px]">
      <div
        class="flex h-[37px] cursor-pointer items-center rounded-[11px] bg-[#fff] p-[6px_10px] shadow-md"
      >
        <img
          alt=""
          class="h-[24px] w-auto object-contain"
          src="@/assets/image/partners1.png"
        />
      </div>
      <div
        class="flex h-[37px] cursor-pointer items-center rounded-[11px] bg-[#fff] p-[6px_10px] shadow-md"
      >
        <img
          alt=""
          class="h-[24px] w-auto object-contain"
          src="@/assets/image/partners2.png"
        />
      </div>
      <div
        class="flex h-[37px] cursor-pointer items-center rounded-[11px] bg-[#fff] p-[6px_10px] shadow-md"
      >
        <img
          alt=""
          class="h-[24px] w-auto object-contain"
          src="@/assets/image/partners3.png"
        />
      </div>
      <div
        class="flex h-[37px] cursor-pointer items-center rounded-[11px] bg-[#fff] p-[6px_10px] shadow-md"
      >
        <img
          alt=""
          class="h-[24px] w-auto object-contain"
          src="@/assets/image/partners4.png"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.info-card {
  overflow: hidden;
  background: url('@/assets/image/Group 220355@2x.png') no-repeat center center;
  background-size: cover;
  border-radius: 26px;
}
</style>