金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

69 lines
1.1 KiB

  1. <template>
  2. <view class="content">
  3. <image class="img" src="https://picsum.photos/200" mode="aspectFill"></image>
  4. <view class="tips" @click="next">跳过 {{ num }}s</view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. data(){
  10. return {
  11. num: 5,
  12. timer: null
  13. }
  14. },
  15. onLoad(){
  16. this.timer = setInterval(() => {
  17. this.num--;
  18. if(this.num <= 0){
  19. clearInterval(this.timer);
  20. this.timer = null;
  21. this.next();
  22. }
  23. }, 1000);
  24. },
  25. onUnload(){
  26. if(this.timer){
  27. clearInterval(this.timer);
  28. this.timer = null;
  29. }
  30. },
  31. methods: {
  32. next(){
  33. this.$url('/pages/index/index/index', {type: 'redirect'});
  34. }
  35. }
  36. }
  37. </script>
  38. <style>
  39. page{
  40. overflow: hidden;
  41. }
  42. </style>
  43. <style lang="scss" scoped="scoped">
  44. .content{
  45. position: relative;
  46. width: 100vw;
  47. height: 100vh;
  48. .img{
  49. width: 100%;
  50. height: 100%;
  51. }
  52. .tips{
  53. position: absolute;
  54. right: 32rpx;
  55. top: 132rpx;
  56. width: 144rpx;
  57. height: 55rpx;
  58. background-color: rgba(0,0,0,0.5);
  59. color: #FFFFFF;
  60. font-size: 26rpx;
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. border-radius: 28rpx;
  65. }
  66. }
  67. </style>