slibra-module-web/src/components/RecodeCardItem/index.vue

<script setup>
import SvgIcon from '@/components/SvgIcon';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  time: {
    type: String,
    default: ''
  },
  dataItem: {
    type: Object,
    default: {}
  }
});

const emit = defineEmits(['on-delete', 'on-click']);

const handleCardClick = () => {
  emit('on-click', props.dataItem);
}

const handleDelete = async () => {
  emit('on-delete', props.dataItem.id);
}
</script>

<template>
  <div class="recode-card-item" @click="handleCardClick">
    <p class="content">{{ title }}</p>
    <p class="time flex item-center justify-between w-full mt-[2px] hover:color-[red]">
      <span class="hover:color-[red]">{{ time }}</span>
      <SvgIcon name="tool-bucket-del" size="16" class="del-icon cursor-pointer hidden" @click.stop="handleDelete"></SvgIcon>
    </p>
  </div>
</template>

<style scoped lang="scss">
.recode-card-item {
  position: relative;
  @include flex(y, start, center);
  height: 60px;
  padding: 0 10px 0 12px;
  transition: bakground .3s;
  cursor: pointer;

  .content {
    @include textLine(1);
  }

}
</style>