uniapp广告飘窗

<template>
	<view>
		<view id="floatingImg" class="float-btn" :style="{ position: 'absolute', left: imgX + 'px', top: imgY + 'px' }"
			@mouseover="stopFloat" @mouseout="startFloat">
			<view class="">
				我要
			</view>
			<view class="">
				评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgX: 50,
				imgY: 60,
				step: 1,
				delay: 10,
				xin: true,
				yin: true,
				interval: null,
			};
		},
		mounted() {
			this.startFloat();
		},
		methods: {
			float() {
				const L = 0;
				const T = 0;
				const R = uni.getSystemInfoSync().windowWidth - 80; // 50为图片宽度
				const B = uni.getSystemInfoSync().windowHeight - 80; // 50为图片高度

				this.imgX += this.step * (this.xin ? 1 : -1);
				this.imgY += this.step * (this.yin ? 1 : -1);

				if (this.imgX < L) {
					this.xin = true;
					this.imgX = L;
				}
				if (this.imgX > R) {
					this.xin = false;
					this.imgX = R;
				}
				if (this.imgY < T) {
					this.yin = true;
					this.imgY = T;
				}
				if (this.imgY > B) {
					this.yin = false;
					this.imgY = B;
				}
			},
			startFloat() {
				this.interval = setInterval(this.float, this.delay);
			},
			stopFloat() {
				clearInterval(this.interval);
			},
		},
	};
</script>

<style scoped>
	/* 可以根据需要添加样式 */
	.float-btn {
		// width: 100rpx;
		height: 100rpx;
		text-align: center;
		letter-spacing: 6px;
		font-weight: 900;
		padding: 10px 5px 5px 11px;
		font-size: 18px;
		color: rgb(220, 2, 2);
		// line-height: 140rpx;

		background: #fff;
		box-shadow: 3rpx 4rpx 8rpx 4rpx rgba(231, 68, 52, 0.54);
		border-radius: 4px;
		position: fixed;
	}
</style>