Recently, I was doing front-end page development. There was a simple requirement in the project to achieve an operation pop-up effect similar to the one shown in the following figure.
As is known to all, operation activities have always been the focus of companies. As an important activity guidance method, popover has penetrated into various behavioral links of users. For more analysis of operating popovers, see this article: blog.csdn.net/weixin_3963…
The use of Vue framework development, extracted from the popover part. Without further ado, on the code:
<template> <div vlass = "home"> <div v-if = "isShowCard"> <div class="advertise"> <img class = "img" :src="adver_img" alt=""> <img class = "img_set" :src="adver_set" @click="clickSet" alt=""> <i class = "shut" @click = "closeCard"></i> </div> <div class = "mask" ></div> </div> </div> </template> <script> export default { data(){ return{ adver_img: ".. /images/advertise.png", adver_set: ".. /images/set.png", isShowCard: false}; }, created(){methods:{clickSet(){this.isshowcard = false; this.$router.push(XXX); }, closeCard(){this.isShowcard = false; }}} </script> <style lang="less" scoped>. Mask {background: rgba(0, 0, 0, 0.5); position: fixed; margin: 0, 0, 0, 0; z-index: 10; } .advertise { position: fixed; Width: 5.2 rem; height: 7rem; Top: 3.31 rem; left: 50%; transform: translate(-50%, 0%); // Control center displays z-index: 20; } .img{ position: absolute; Width: 5.2 rem; Height: 6.2 rem; Border - the radius: 0.12 rem; z-index: 30; } .img_set{ position: absolute; Width: 2.4 rem; Height: 0.64 rem; top: 5rem; left: 50%; z-index: 40; transform: translate(-50%, 0%); } .shut{ position: absolute; Width: 0.42 rem; Height: 0.42 rem; bottom: 0; left: 50%; transform: translateX(-50%); background: url(".. /images/close.png") no-repeat 50%; background-size: 42px 42px; } </style>Copy the code