Q3学习计划
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.

82 lines
2.0 KiB

  1. <template>
  2. <view class="carousel">
  3. <swiper :circular="true" :autoplay="false" :interval="3000">
  4. <swiper-item>
  5. <navigator url="/pages/index/index" hover-class="none" class="navigator">
  6. <image
  7. mode="aspectFill"
  8. class="image"
  9. src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"
  10. ></image>
  11. </navigator>
  12. </swiper-item>
  13. <swiper-item>
  14. <navigator url="/pages/index/index" hover-class="none" class="navigator">
  15. <image
  16. mode="aspectFill"
  17. class="image"
  18. src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"
  19. ></image>
  20. </navigator>
  21. </swiper-item>
  22. <swiper-item>
  23. <navigator url="/pages/index/index" hover-class="none" class="navigator">
  24. <image
  25. mode="aspectFill"
  26. class="image"
  27. src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
  28. ></image>
  29. </navigator>
  30. </swiper-item>
  31. </swiper>
  32. <!-- 指示点 -->
  33. <view class="indicator">
  34. <text
  35. v-for="(item, index) in 3"
  36. :key="item"
  37. class="dot"
  38. :class="{ active: index === activeIndex }"
  39. ></text>
  40. </view>
  41. </view>
  42. </template>
  43. <script setup lang="ts">
  44. import { ref } from 'vue'
  45. const activeIndex = ref(0)
  46. </script>
  47. <style lang="scss">
  48. /* 轮播图 */
  49. .carousel {
  50. height: 280rpx;
  51. position: relative;
  52. overflow: hidden;
  53. transform: translateY(0);
  54. background-color: #efefef;
  55. .indicator {
  56. position: absolute;
  57. left: 0;
  58. right: 0;
  59. bottom: 16rpx;
  60. display: flex;
  61. justify-content: center;
  62. .dot {
  63. width: 30rpx;
  64. height: 6rpx;
  65. margin: 0 8rpx;
  66. border-radius: 6rpx;
  67. background-color: rgba(255, 255, 255, 0.4);
  68. }
  69. .active {
  70. background-color: #fff;
  71. }
  72. }
  73. .navigator,
  74. .image {
  75. width: 100%;
  76. height: 100%;
  77. }
  78. }
  79. </style>