HomeAds.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="ads">
  3. <swiper class="bg" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="200">
  4. <swiper-item v-for="(item, index) in ads" :key="index">
  5. <view class="swiper">
  6. <image class="image" :src="item.image" @click.stop="goUrl(item.url)"></image>
  7. </view>
  8. </swiper-item>
  9. </swiper>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. props: {
  15. ads: {
  16. type: Array,
  17. default: []
  18. }
  19. },
  20. methods: {
  21. goUrl(url) {
  22. this.$navTo(url);
  23. }
  24. },
  25. }
  26. </script>
  27. <style lang="scss" scoped>
  28. .ads {
  29. width: 100%;
  30. height: 280rpx;
  31. padding: 0 10rpx;
  32. display: block;
  33. background: #fff;
  34. .bg {
  35. width: 100%;
  36. height: 240rpx;
  37. }
  38. }
  39. .bg,
  40. .swiper {
  41. width: 100%;
  42. height: 240rpx;
  43. margin-bottom: 550rpx;
  44. image {
  45. width: 100%;
  46. height: 100%;
  47. border-radius: 6rpx;
  48. }
  49. }
  50. </style>