1212

2023-03-22 09:23:04 +08:00
parent 84613456a7
commit 7247973c63
14 changed files with 475 additions and 197 deletions
--- a/pages/components/Advertisement.vue
+++ b/pages/components/Advertisement.vue
@@ -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>