yangShengKeTang.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="content">
  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. </script>
  23. <style lang="scss" scoped>
  24. .uni-margin-wrap {
  25. width: 690rpx;
  26. width: 100%;
  27. }
  28. .swiper {
  29. height: 100vh;
  30. }
  31. .swiper-item {
  32. display: block;
  33. height: 100vh;
  34. width: 100%;
  35. }
  36. .swiper-list {
  37. margin-top: 40rpx;
  38. margin-bottom: 0;
  39. }
  40. .uni-common-mt {
  41. margin-top: 60rpx;
  42. position: relative;
  43. }
  44. .info {
  45. position: absolute;
  46. right: 20rpx;
  47. }
  48. .uni-padding-wrap {
  49. width: 550rpx;
  50. padding: 0 100rpx;
  51. }
  52. </style>