<template>
<div class="shop_cart">
<div class="add">
<div class="ul">
<div>
<button @click="addShopCart($event)">添加到购物车</button>
</div>
<div>
<button @click="addShopCart($event)">添加到购物车</button>
</div>
<div>
<button @click="addShopCart($event)">添加到购物车</button>
</div>
<div>
<button @click="addShopCart($event)">添加到购物车</button>
</div>
</div>
</div>
<img id="add_img" v-if="addShow" :style="carStyle" src="../../assets/logo.png" alt="" />
<div class="cart" style="position: fixed; bottom: 0px; left:0px;">
<img src="../../assets/logo.png" alt="" style="width:80px; height:80px; border-radius: 80px;"
id="carweizhi">
</div>
</div>

</template>

<script>
export default {
data() {
return {
addShow: false,
carStyle: ''
}
},
methods: {
addShopCart(e) {
let vm = this;
vm.carStyle = "top:" + e.clientY + "px; left:" + e.clientX + "px";
vm.addShow = true;
setTimeout(function() {
let self = document.getElementById("carweizhi");
let leftData = self.getBoundingClientRect().left + document.documentElement.scrollLeft;
let topData = self.getBoundingClientRect().top + document.documentElement.scrollTop + self
.offsetHeight - 100;
vm.carStyle = "top:" + topData + "px; left:" + leftData + "px";
}, 60)
setTimeout(function() {
vm.addShow = false;
}, 1000)

}
},
mounted() {

}
}
</script>

<style scoped>
#add_img {
width: 80px;
height: 80px;
display: block;
border-radius: 80px;
transition: all 1s;
display: block;
position: fixed;
}

.ul {

margin-top: 30px;
width: 100%;
}

.ul div {
margin-top: 30px;
text-align: center;
width: 50%;
float: left;
}
</style>