siyu_app/pages/course/videoPopup.nvue

<template>
	<view class="subnvue" :style="{height: height+'px',width: width +'px'}">
		<!-- 逐集观看提示弹窗 -->
		<view class="tipspopbox">
			<view class="tipspop">
				<view class="tc_bg">
					<image class="tc_bg" src="@/static/images/ad/tc_bg.png" mode="widthFix" style="width: 100%;height: auto;"></image>
				</view>
				<view class="tipspop-con">
					<text class="tipspop-title">建议逐集观看，学习效果更佳</text>
					<text class="tipspop-desc">是否返回逐集观看？</text>
				</view>
				<view class="tipspop-footer">
					<text class="tipspop-footer-btn tipspop-footer-l" @click="handleClick('cancel')">取消</text>
					<text class="tipspop-footer-btn" @click="handleClick('confirm')">确认</text>
				</view>
			</view>
			<view class="jianyi_icon_flex">
				<view class="jianyi_icon_box">
					<image class="jianyi_icon" src="@/static/images/ad/jianyi_icon.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				width: uni.getSystemInfoSync().windowWidth,
				index: null,
			};
		},
		created() {
			const that = this;
			uni.$on('getTipShowType', (data) => {
				this.index = data.index
			})
		},
		beforeDestroy() {
			uni.$off('getTipShowType');
		},
		methods: {
			handleClick(type) {
				const data = {
					type: type,
					extraData: this.index
				}
				uni.$emit('getEventType', data);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.subnvue {
		@include u-flex(column, center, center);
	}
	.tipspopbox{
		position: relative;
		padding-top: 74rpx;
		@include u-flex(column, center, center);
		.jianyi_icon_flex {
			width: 630rpx;
			@include u-flex(row, center, center);
			position: absolute;
			left:0;
			top: 0;
		}
		.jianyi_icon_box {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			background-image:linear-gradient(to bottom,#FF9B45, #FF5C03);
			border: 12rpx solid #FFFFFF;
			@include u-flex(row, center, center);
		}
		
		.jianyi_icon {
			height: 64rpx;
			width: 64rpx;
		}
	}
	.tipspop {
		width: 630rpx;
		// height: 376rpx;
		padding-bottom: 40rpx;
		background: linear-gradient(to bottom, #FFEDE3, #FFFFFF);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		position: relative;
		text-align: center;

		.tc_bg {
			width: 630rpx;
			// height: auto;
			border-radius: 32rpx 32rpx 0 0;
			overflow: hidden;
		}

		&-con {
			padding: 0 48rpx;
			text-align: center;
		}

		&-title {
			display: inline-flex;
			text-align: center;
			margin: 14rpx 0 20rpx 0;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}

		&-desc {
			display: inline-flex;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #757575;
		}

		&-footer {
			padding-top: 34rpx;
			@include u-flex(row, center, center);

			&-btn {
				width: 248rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				background: #FF5C03;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.tipspop-footer-l {
				margin-right: 38rpx;
				background: #F4F4F4;
				color: #757575;
			}
		}
	}
</style>