s-image-banner.vue 684 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <su-swiper
  3. :list="imgList"
  4. :dotStyle="dotMap[data.indicator]"
  5. imageMode="widthFix"
  6. dotCur="bg-mask-40"
  7. :seizeHeight="300"
  8. />
  9. </template>
  10. <script setup>
  11. import { computed } from 'vue';
  12. import sheep from '@/sheep';
  13. const dotMap = {
  14. 1: 'long',
  15. 2: 'tag',
  16. };
  17. const props = defineProps({
  18. data: {
  19. type: Object,
  20. default: () => ({}),
  21. },
  22. styles: {
  23. type: Object,
  24. default: () => ({}),
  25. },
  26. });
  27. const imgList = computed(() =>
  28. props.data.list.map((item) => ({
  29. ...item,
  30. src: sheep.$url.cdn(item.src),
  31. poster: sheep.$url.cdn(item.poster),
  32. })),
  33. );
  34. </script>
  35. <style></style>