<template>
  <div class="image-container">
    <img ref="image" v-if="customize.name === optionData[0].value ? true : false" :src="customize.url">
    <div class="tip" v-if="customize.name === optionData[0].value ? true : false">{{customize.name}}</div>
  </div>
</template>

<script>
export default {
  name: 'Focus',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
    }
  },
  computed: {
    option () {
      return this.config.option
    },
    optionData () {
      return this.option.data
    },
    customize () {
      return this.option.customize
    }
  }
}
</script>

<style lang="scss" scoped>
.image-container {
  position: relative;
  display: inline-block; /* 确保容器尺寸与图片一致 */
  pointer-events: none;
}

.image-container img {
  max-width: 100%; /* 图片最大宽度为父容器宽度 */
  height: auto; /* 图片高度自动，保持宽高比 */
  display: block; /* 阻止图片下方出现空白 */
  transition: opacity 0.5s; /* 添加过渡效果 */
  z-index: 1;
  pointer-events: none;
}

.tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 100, 100, 0.5); /* 调整背景透明度 */
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: bold; /* 增加字体权重 */
}
</style>
