headCarousel.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div>
  3. <v-carousel height="80" :show-arrows="false" hide-delimiters cycle>
  4. <!-- <template v-slot:prev="{ props }">
  5. <v-btn
  6. tonal
  7. plain
  8. size="x-small"
  9. icon="$prev"
  10. variant="elevated"
  11. @click="props.onClick"
  12. ></v-btn>
  13. </template>
  14. <template v-slot:next="{ props }">
  15. <v-btn
  16. tonal
  17. plain
  18. size="x-small"
  19. icon="$next"
  20. variant="elevated"
  21. @click="props.onClick"
  22. ></v-btn>
  23. </template> -->
  24. <v-carousel-item
  25. src="@/assets/headerBg.png"
  26. cover
  27. >
  28. </v-carousel-item>
  29. <!-- <v-carousel-item
  30. v-for="(item,i) in items"
  31. :key="i"
  32. :src="item.src"
  33. cover
  34. ></v-carousel-item> -->
  35. </v-carousel>
  36. </div>
  37. </template>
  38. <script setup>
  39. // import { ref } from 'vue'
  40. defineOptions({ name:'personal-headCarousel'})
  41. // const items = ref([
  42. // // { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', },
  43. // // { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', },
  44. // // { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', },
  45. // { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', },
  46. // ])
  47. </script>
  48. <style lang="scss" scoped>
  49. </style>