48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div :class="wrapClass">
|
|
<template v-if="file">
|
|
<div class="p-12px flex items-center text-white">
|
|
<SvgIcon name="文件" class="text-[#FEE77B] w-5 h-5" />
|
|
<div class="ml-12px text-22px">{{ file.name }}</div>
|
|
</div>
|
|
<div
|
|
class="bg-[#27292B] flex items-center px-12px py-12px justify-between text-22px"
|
|
>
|
|
<div>.{{ file.extension }}</div>
|
|
<div>{{ kbToMbWithDecimal(file.size) }} M</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="p-12px flex items-center text-white">
|
|
<SvgIcon name="删除文件夹" class=" text-gray-400 w-5 h-5" />
|
|
<div class="ml-12px text-22px">文件已失效</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
const props = defineProps({
|
|
file: {
|
|
type: Object,
|
|
},
|
|
})
|
|
|
|
function kbToMbWithDecimal(bytes) {
|
|
const mb = bytes / (1024 * 1024)
|
|
return mb.toFixed(1)
|
|
}
|
|
|
|
const wrapClass = computed(() => {
|
|
return [
|
|
'text-wrap',
|
|
'min-w-[80px]',
|
|
'rounded-6px',
|
|
'overflow-hidden',
|
|
'bg-[#d2f9d1]',
|
|
'dark:bg-[#414548]',
|
|
'message-request',
|
|
]
|
|
})
|
|
</script>
|