<template>
	<div class="unit">
		<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> -->
		<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
		<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	props: {
		img: {
			type: String,
		},
		text: {
			type: String
		},
        left: {
            type: String
        },
        top: {
            type: String
        }
	},
	created() {},
	mounted() {
		console.log('img', this.img, this.left, this.top)
	},
	computed: {
		
	},
	methods: {
		
	}
};
</script>

<style lang="scss" scoped>
	.unit{
		position: relative;
		width: 100px;
		.img{
            cursor: pointer;
		}
		.text{
			width: 120px;
			position: absolute;
			transform: skewY(-25deg);
		}
		.fuwuyigua{
			position: absolute;
			top: -60px;
			left: -10px;
		}
		.jiedianyigua{
			position: absolute;
			top: -60px;
			left: -25px;
		}
	}
</style>