commit
71e8a5c851
17 changed files with 486 additions and 205 deletions
@ -0,0 +1,85 @@ |
||||
<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> |
||||
Loading…
Reference in new issue