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.
85 lines
1.9 KiB
85 lines
1.9 KiB
<template> |
|
<view> |
|
<uni-popup :mask-click='false' ref='showAdvertisement'> |
|
<view class="Advertisement_body"> |
|
<image style="width: 100%;height: 100%;" :src="imgURL+'groupbannerzhongp.png'" mode=""></image> |
|
<view @click="informNext(true)" class="Advertisement_butten"> |
|
立即进入 |
|
</view> |
|
<view @click="closeAdvertisement" class="Advertisement_closeButten"> |
|
<uni-icons color='#ffffff' type="closeempty" size="35"></uni-icons> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
imgURL: this.global.newImgURL, |
|
} |
|
}, |
|
mounted() { |
|
console.log('广告组件挂载完成'); |
|
this.showAdvertisement() |
|
}, |
|
methods: { |
|
showAdvertisement() { |
|
this.$refs.showAdvertisement.open('center') |
|
}, |
|
closeAdvertisement() { |
|
this.$refs.showAdvertisement.close(); |
|
this.informNext() |
|
}, |
|
informNext(type=false) { |
|
this.$emit('informNext',type) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
.Advertisement_butten { |
|
width: 278rpx; |
|
height: 70rpx; |
|
color: #FFFFFF; |
|
position: absolute; |
|
bottom: 30rpx; |
|
font-size: 32rpx; |
|
left: 0; |
|
right: 0; |
|
margin: 0 auto; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background: linear-gradient(270deg, #FDA96A 0%, #FE5048 100%); |
|
box-shadow: 0px 3px 10px 0px rgba(178, 126, 81, 0.5); |
|
border-radius: 103px 103px 103px 103px; |
|
border-image: linear-gradient(90deg, rgba(255, 121.00000038743019, 94.0000019967556, 1), rgba(252.00000017881393, 158.00000578165054, 79.00000289082527, 1)) 1 1; |
|
} |
|
|
|
.Advertisement_closeButten { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: -45px; |
|
margin: auto; |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
/* border: solid 1px #000000; */ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.Advertisement_body { |
|
width: 602rpx; |
|
height: 690rpx; |
|
background-color: #FFFFFF; |
|
border-radius: 20rpx; |
|
position: relative; |
|
} |
|
</style>
|
|
|