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.
86 lines
1.9 KiB
86 lines
1.9 KiB
2 years ago
|
<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>
|