div <div v-if="isShowQR" class="QRAlert"> <div class="QR-container"> <div class="QR-code-bg"> <div class="title" v-if="isApp">{{selectedItem.title}}APP下载</div> <div class="title" v-if="!isApp">{{selectedItem.title}}公众号</div> <div class="QR-code"> <img v-if="isApp" class="QR-image" :src="selectedItem.appUrl"> <img v-if="!isApp" class="QR-image" :src="selectedItem.weChatUrl"> </div> </div> <div class="QR-close" @click="hiddenQR"> <img class="QR-close-image" src="https://yunsiluguanwang.oss-cn-hangzhou.aliyuncs.com/qr-close.png"> </div> </div> </div> script function showQR(item,app){ selectedItem.value = item isShowQR.value = true isApp.value = app } function hiddenQR(){ isShowQR.value = false } css样式 .QRAlert{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 99999; .QR-container{ position: fixed; top: 50%; left: 50%; width: 200px; transform: translate(-50%, -50%); .QR-code-bg{ border-radius: 10px; background: #C7020B; .title{ width: 100%; text-align: center; color: #FFFFFF; font-size: 17px; font-weight: bold; padding: 10px; } .QR-code{ width: 100%; height: 200px; .QR-image{ width: 100%; height: 100%; border-radius: 10px; } } } .QR-close{ margin-left: 75px; margin-top: 20px; width: 50px; height: 50px; .QR-close-image{ margin-left: 10px; margin-top: 10px; width: 30px; height: 30px; } } } }
效果