You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.0 KiB
66 lines
1.0 KiB
2 years ago
|
<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>
|