wisdomcity-office/src/components/view_file/vendors/other/index.vue

<template>
  <div class="view-other">
    <img class="view-off-icon" :src="viewOffImage" alt="" />
    <p>
      {{ file.name }}.{{ file.type
      }}<span class="size-item">{{ getFileSize }}</span>
    </p>
    <p>
      <big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big>
    </p>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import viewOffImage from "../../assets/view_off.svg"

const props = defineProps({
  file: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

const getFileSize = computed(() => {
  const size = Number(props.file.size)
  if (!Number.isFinite(size) || !size) return "0KB"
  const kbToMb = 1024
  const kbToGb = 1048576
  const abs = Math.abs(size)
  const sign = size < 0 ? "-" : ""
  if (abs >= kbToGb) return `${sign}${Math.floor((abs / kbToGb) * 100) / 100} GB`
  if (abs >= kbToMb) return `${sign}${Math.floor((abs / kbToMb) * 100) / 100} MB`
  return `${sign}${abs} KB`
})
</script>

<style lang="less" scoped>
.view-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .size-item {
    margin-left: 10px;
  }

  .view-off-icon {
    width: 120px;
    height: 120px;
    object-fit: contain;
  }
}
</style>