62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
<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;
|
|
}
|
|
.normal2 {
|
|
background-image: url("../static/bubble-tip4.png");
|
|
width: 190rpx;
|
|
height: 105rpx;
|
|
padding-top: 10px;
|
|
padding-left: 20rpx;
|
|
top: 25%;
|
|
left: 15%;
|
|
}
|
|
.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>
|