horzi_rai_wxa/pages/reportForm/components/coverGuide.vue

<template>
	<u-mask :show="show" >
			<view class="warp">
				<view class="top-bg">
					<image style="width: 80rpx;height: 80rpx;" src="../../../static/img/guide-1.png" mode=""></image>
					<view class="guide-tow">
						<image style="width: 181rpx;height: 239rpx;" src="../../../static/img/guide-2.png" mode=""></image>
					</view>
					<view class="content-text">
						<text>新增产业关注功能</text>
						<text>点击关注后可获取产业内容更新提醒</text>
						<image @click="isShow" style="width: 237rpx;height: 104rpx;" src="../../../static/img/guide-3.png" mode=""></image>
					</view>
				</view>
				
			</view>
	</u-mask>
</template>

<script>
	export default {
		props:{
			isGuideShow:{
				type:Boolean,
				default:false,
				required:true
			}
		},
		data() {
			return {
				show: true
			}
		},
		watch:{
			isGuideShow:{
				handler(){
					this.show=this.isGuideShow
				},
				immediate:true
			}
		},
		methods: {
			isShow(){
				 this.$parent.isGuideShow=false
			}
		}
	}
</script>

<style scoped lang="scss">
.warp {
		display: flex;
		height: 100%;
		.top-bg {
			margin-top: 80%;
			.guide-tow {
				padding-left: 100rpx;
				margin-top: -60rpx;
			}
		}
		.content-text {
			width: 750rpx;
			font-size: 28rpx;
			color: #fff;
			text {
				text-align: center;
			}
			image {
				margin-top: 50rpx;
				padding-left: 100%;
				transform: translateX(-50%);
			}
		}
	}

	
</style>