<script setup>
const props = defineProps({
  type: {
    type: String,
    default: "normal",
  },
  location: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<template>
  <view :class="`container ${type}`" :style="{ ...location }">
    <slot />
  </view>
</template>

<style scoped>
.container {
  position: absolute;
  color: #fff;
  display: flex;
  flex-direction: column;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 13px;
}
.normal {
  background-image: url("../static/bubble-tip.png");
  width: 190rpx;
  height: 105rpx;
  padding-top: 5px;
  padding-left: 49rpx;
}
.long {
  background-image: url("../static/bubble-tip2.png");
  width: 370rpx;
  height: 70rpx;
}
</style>
