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
<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> |