<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-01-11 11:31:51
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-15 15:45:00
 * @FilePath: /tianhua-web/src/components/MyImage/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="img-wrapper">
    <el-image
      v-if="src"
      :src="src"
      :preview-src-list="previewSrcList"
      :z-index="9999"
      class="picture"
    >
    </el-image>
    <div class="error" v-else>暂无图片</div>

    <div class="num">+{{ previewSrcList.length }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    src: {
      type: String,
    },
    previewSrcList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.picture {
  width: 50px;
  height: 50px;
  margin: 2px;
}
.img-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
  .num {
    left: 27px;
    bottom: 0px;
    width: 25px;
    height: 25px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 25px;
    pointer-events: none;
    color: #fff;
    z-index: 99999999;
    position: absolute;
    font-size: 14px;
    font-weight: 800;
  }
}
.error {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 139px;
  background: #f5f7fa;
}
</style>
