mediaAll/src/view/easyDiffusion/components/image.vue

<template>
  <div class="image">
    <el-icon :size="25" class="close" @click="close"><CircleClose /></el-icon>
    <img :src="file.fileResult" style="width: 100%; border-radius: 6px" />
    <div class="right">
      <label for="file" class="dark label" style="">
        <el-icon><FolderOpened /></el-icon>
        选择
      </label>
      <p style="height: 1em"></p>
      <span class="dark label" @click="draw">
        <el-icon><EditPen /></el-icon>
        绘制
      </span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
defineProps({
  file: Object,
});
const emit = defineEmits(['close', 'draw']);

const close = () => {
  emit('close');
};
const draw = () => {
  emit('draw');
};
</script>

<style scoped>
.image {
  width: 100px;
  position: relative;
  margin-top: 1em;
  margin-bottom: 1em;
}
.close {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #000;
  border-radius: 50%;
  font-weight: 500;
}

.label {
  background-color: #202225;
  padding: 3px 8px;
  font-size: 0.9em;
  border-radius: 3px;
}

.right {
  position: absolute;
  width: 6em;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  right: -7em;
}
</style>