指引图 通过制作蒙城实现,通过控制点击图片控制显示与结束
<div id="mask" v-if="isFirstInto">
<view class="maskGuide">
<view v-if="guideNumber == 1" @tap="clickToNext">
<image src="@/static/images/mc1.png" class="tl-img-1"/>
</view>
<view v-if="guideNumber == 2" @tap="clickToNext">
<image src="@/static/images/mc2.png" class="tl-img-2"/>
</view>
</view>
</div>
#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.maskGuide{
position: relative;
width: 100vw;
height: 100vh;
}
.tl-img-1{
position: absolute;
top: 220rpx;
width: 100%;
height: 280rpx;
image-rendering: -webkit-optimize-contrast;
}