designer-hub/packages/merchant/src/components/card-menu.vue

<script setup lang="ts">
import Card from '@/components/card.vue'

defineProps({
  customClass: {
    type: String,
    default: '',
  },
  items: {
    type: Array as PropType<
      {
        title: string
        desc?: string
        icon: string
        class: string
        colStart?: number
        colEnd?: number
        rowStart?: number
        rowEnd?: number
        iconSize?: number
        gridItemClass?: string
      }[]
    >,
    default: () => [],
  },
})
</script>
<template>
  <view class="my-6 grid grid-gap-2.5" :class="customClass">
    <template v-for="it of items" :key="it.title">
      <div :class="it.gridItemClass">
        <card
          :custom-class="
            [
              it.class,
              'flex flex-col justify-between items-center',
              it.colStart ? `col-start-${it.colStart}` : '',
              it.colEnd ? `col-end-${it.colEnd}` : '',
              it.rowStart ? `row-start-${it.rowStart}` : '',
              it.rowEnd ? `row-end-${it.rowEnd}` : '',
            ].join(' ')
          "
        >
          <div class="my-3.5 flex flex-col justify-start h-full">
            <div class="text-black/80 text-base font-normal font-['PingFang_SC'] leading-[10.18px]">
              {{ it.title }}
            </div>
            <div class="mt-1 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
              {{ it.desc }}
            </div>
          </div>
          <view class="flex-1 w-full flex items-end justify-end">
            <wd-img :src="it.icon" :width="it.iconSize ?? 24" :height="it.iconSize ?? 24"></wd-img>
          </view>
        </card>
      </div>
    </template>
  </view>
</template>