sl-sfy-safety/src/views/traffic/violation/act/components/ImageViewer.vue

<template>
  <div class="image-viewer">
    <div v-if="images && images.length">
      <el-image
        fit="cover"
        :src="images[0]"
        :preview-src-list="images"
        class="image-viewer__image"
        :preview-teleported="true"
      />
      <div class="image-viewer__text">共{{ images.length }}张</div>
    </div>
    <div v-else> - </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { unformatImage } from '../utils';

  const props = defineProps<{
    fileList: string;
  }>();

  const images = computed(() => {
    return unformatImage(props.fileList);
  });
</script>

<style scoped>
  .image-viewer {
    width: 120px;
    height: 90px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image-viewer__image {
    width: 120px;
    height: 90px;
    border-radius: 5px;
  }
  .image-viewer__text {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    pointer-events: none;
  }
</style>