93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
record: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const dayjs = useDayjs()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative w-full aspect-video rounded-lg overflow-hidden shadow"
|
|
>
|
|
<NuxtImg :src="record.video_cover"></NuxtImg>
|
|
<div class="absolute inset-0 flex flex-col justify-between bg-black/10 bg-gradient-to-t from-black/20">
|
|
<div class="flex justify-between items-start p-2.5 gap-2">
|
|
<div>
|
|
<UButton icon="i-solar-play-circle-bold-duotone">预览</UButton>
|
|
</div>
|
|
<div class="flex flex-col items-end gap-1">
|
|
<UTooltip :text="record.task_id" :close-delay="300">
|
|
<h1 class="text-white text-xs font-bold font-sans">
|
|
ID: {{ record.task_id.slice(0, 6) }}
|
|
</h1>
|
|
</UTooltip>
|
|
<UTooltip :text="dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')">
|
|
<h1 class="text-white text-xs font-bold font-sans">
|
|
{{ dayjs(record.create_time * 1000).fromNow() }}
|
|
</h1>
|
|
</UTooltip>
|
|
</div>
|
|
<!-- <UProgress-->
|
|
<!-- size="md"-->
|
|
<!-- indicator-->
|
|
<!-- :ui="{-->
|
|
<!-- wrapper: 'flex-col-reverse',-->
|
|
<!-- progress: {-->
|
|
<!-- base: '!bg-opacity-50'-->
|
|
<!-- }-->
|
|
<!-- }"-->
|
|
<!-- :value="10"-->
|
|
<!-- :max="100"-->
|
|
<!-- :animation="'carousel'"-->
|
|
<!-- />-->
|
|
</div>
|
|
<div class="flex justify-between items-center p-2.5 gap-2">
|
|
<div class="overflow-hidden whitespace-nowrap">
|
|
<UTooltip
|
|
:text="record.title"
|
|
:popper="{
|
|
placement: 'bottom-start'
|
|
}"
|
|
:open-delay="300"
|
|
:close-delay="300"
|
|
class="w-full"
|
|
>
|
|
<h1 class="text-white text-base font-bold font-sans drop-shadow overflow-hidden text-ellipsis leading-none">
|
|
{{ record.title }}
|
|
</h1>
|
|
</UTooltip>
|
|
</div>
|
|
<div class="flex-1 whitespace-nowrap flex gap-1.5">
|
|
<UButton
|
|
size="xs"
|
|
color="red"
|
|
variant="soft"
|
|
icon="i-tabler-trash"
|
|
/>
|
|
<UButton
|
|
size="xs"
|
|
color="primary"
|
|
variant="soft"
|
|
icon="i-solar-subtitles-linear"
|
|
>
|
|
字幕
|
|
</UButton>
|
|
<UButton
|
|
size="xs"
|
|
icon="i-tabler-download"
|
|
>
|
|
下载
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |