liankao-dev/src/components/TheCard.vue

<script setup lang="ts">
defineProps<{
  title: string
  description: string
  completed: boolean
}>()

const self = $shallowRef<HTMLElement>()

defineExpose({
  getDom: () => self,
})
</script>

<template>
  <div
    ref="self" class="min-h-100px w-250px flex overflow-hidden rounded"
    :class="completed ? 'bg-hex-d5dfff' : 'bg-hex-f2f2f2'"
  >
    <div class="w-175px flex flex-col px-14px py-14px">
      <div>{{ title }}</div>
      <div class="text-xs text-hex-6c6c6c">
        {{ description }}
      </div>
      <slot name="tip" />
    </div>
    <!--  -->
    <div
      class="w-75px flex flex-col items-center justify-center py-4 space-y-2"
      :class="completed ? 'bg-hex-003eee text-hex-003eee' : 'bg-hex-a3a3a3 text-hex-a3a3a3'"
    >
      <div class="h-42px w-42px border-3 border-white rounded-full border-dashed text-white">
        <i:mdi:tick v-if="completed" class="h-full w-full" />
        <i:mdi:horizontal-line v-else class="h-full w-full" />
      </div>

      <slot name="operate">
        <!-- <div class="min-w-60px cursor-pointer rounded bg-light-50 py-3px text-center text-xs">
          {{ completed ? '已经完成' : '立即开始' }}
        </div> -->
      </slot>
    </div>
  </div>
</template>