63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<ModalTransition class="ad" :show="show" position="center">
|
|
<div class="ad-wrapper">
|
|
<div class="btn-ad" v-html="adHtml" @click="adGoto"></div>
|
|
<div class="close" @click="emit('close')"></div>
|
|
</div>
|
|
</ModalTransition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ModalTransition from "./ModalTransition.vue"
|
|
import { ref } from "vue"
|
|
import { isWeixinPlatform, miniJumpToScene, getMiniPageBtnHack } from "../libs/utils"
|
|
const props = defineProps({
|
|
show: false,
|
|
})
|
|
const emit = defineEmits(['close'])
|
|
const adHtml = ref('')
|
|
//TODO: 这个地址后面要改的
|
|
adHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fcoupon%2Fcoupons-list")
|
|
const adGoto = () => {
|
|
if (!isWeixinPlatform()) {
|
|
weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ad-wrapper {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 190vw;
|
|
background-image: url("../assets/images/ad-bg.webp");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btn-ad {
|
|
width: 54.351852vw;
|
|
height: 20.092593vw;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 180%);
|
|
background-image: url("../assets/images/btn-ad.webp");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
width: 8.148148vw;
|
|
height: 8.148148vw;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
margin-top: 58vw;
|
|
background-image: url("../assets/images/close-btn.webp");
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
</style> |