<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: 24rpx;
}
.normal {
  background-image: url("../static/bubble-tip.png");
  width: 157rpx;
  height: 105rpx;
  padding-top: 10px;
  padding-left: 30rpx;
}
.normal2 {
  background-image: url("../static/bubble-tip4.png");
  width: 190rpx;
  height: 105rpx;
  padding-top: 10px;
  padding-left: 20rpx;
  top: 0;
  left: 15%;
  z-index: 1;
}
.long {
  background-image: url("../static/bubble-tip2.png");
  width: 370rpx;
  height: 70rpx;
  top: -50%;
  left: 49%;
}
.short {
  background-image: url("../static/bubble-tip3.png");
  width: 300rpx;
  height: 70rpx;
  top: -50%;
  right: -1%;
}
</style>
