<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>
