5 changed files with 158 additions and 4 deletions
-
3App.vue
-
66components/lf-adModal/lf-adModal.vue
-
17pages.json
-
7pages/index/index/index.vue
-
69pages/index/openScreenAd/openScreenAd.vue
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<view class="content" v-if="value"> |
||||
|
<view class="box"> |
||||
|
<image class="img" src="https://picsum.photos/200" mode="aspectFill" @click="clickAd"></image> |
||||
|
<view class="close" @click="close"> |
||||
|
<text class="lf-iconfont icon-shanchu"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
clickAd(){ |
||||
|
this.$msg('您点击了广告图') |
||||
|
}, |
||||
|
close(){ |
||||
|
this.$emit('update:value', false); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
.box{ |
||||
|
width: 600rpx; |
||||
|
height: max-content; |
||||
|
.img{ |
||||
|
width: 600rpx; |
||||
|
height: 840rpx; |
||||
|
border: 1rpx solid #979797; |
||||
|
} |
||||
|
.close{ |
||||
|
width: 70rpx; |
||||
|
height: 70rpx; |
||||
|
margin: 34rpx auto 0; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
text{ |
||||
|
font-size: 80rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<image class="img" src="https://picsum.photos/200" mode="aspectFill"></image> |
||||
|
<view class="tips" @click="next">跳过 {{ num }}s</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
num: 5, |
||||
|
timer: null |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.timer = setInterval(() => { |
||||
|
this.num--; |
||||
|
if(this.num <= 0){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
this.next(); |
||||
|
} |
||||
|
}, 1000); |
||||
|
}, |
||||
|
onUnload(){ |
||||
|
if(this.timer){ |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
next(){ |
||||
|
this.$url('/pages/index/index/index', {type: 'redirect'}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.content{ |
||||
|
position: relative; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
.img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.tips{ |
||||
|
position: absolute; |
||||
|
right: 32rpx; |
||||
|
top: 132rpx; |
||||
|
width: 144rpx; |
||||
|
height: 55rpx; |
||||
|
background-color: rgba(0,0,0,0.5); |
||||
|
color: #FFFFFF; |
||||
|
font-size: 26rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue