yangShengKeTang.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
  3. <swiper class="swiper" circular :indicator-dots="true"
  4. indicator-color="#fff" indicator-active-color="#58b3df"
  5. :autoplay="false" :interval="2000" :duration="2000">
  6. <swiper-item v-for="img in imgList">
  7. <image :src="img" class="swiper-item"></image>
  8. </swiper-item>
  9. </swiper>
  10. </view>
  11. </template>
  12. <script setup>
  13. import { ref, onMounted } from "vue";
  14. import { onShow } from "@dcloudio/uni-app";
  15. const imgList = ref([
  16. 'http://gips3.baidu.com/it/u=764883555,2569275522&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  17. 'http://gips3.baidu.com/it/u=764883555,2569275522&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  18. 'http://gips3.baidu.com/it/u=764883555,2569275522&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  19. 'https://img2.baidu.com/it/u=4214113141,2036563917&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
  20. 'https://img0.baidu.com/it/u=3803731919,348987985&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=996',
  21. ])
  22. var statusBarHeight = uni.getStorageSync('statusBarHeight')
  23. </script>
  24. <style lang="scss" scoped>
  25. .uni-margin-wrap {
  26. width: 690rpx;
  27. width: 100%;
  28. }
  29. .swiper {
  30. height: 100vh;
  31. }
  32. .swiper-item {
  33. display: block;
  34. height: 100vh;
  35. width: 100%;
  36. }
  37. .swiper-list {
  38. margin-top: 40rpx;
  39. margin-bottom: 0;
  40. }
  41. .uni-common-mt {
  42. margin-top: 60rpx;
  43. position: relative;
  44. }
  45. .info {
  46. position: absolute;
  47. right: 20rpx;
  48. }
  49. .uni-padding-wrap {
  50. width: 550rpx;
  51. padding: 0 100rpx;
  52. }
  53. </style>