IntrodView copy.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <!-- 文化概况页 -->
  3. <div class="main-background">
  4. <!-- 轮播 -->
  5. <Carousel v-bind="carouselConfig" class="main-header-box carousel-light">
  6. <Slide class="main-header-box">
  7. <img src="@/assets/images/introduction/Bammer.jpg" />
  8. </Slide>
  9. <template #addons>
  10. <Navigation />
  11. <Pagination />
  12. </template>
  13. </Carousel>
  14. <!-- 历史和地理背景 -->
  15. <section class="main-section main-background main-background-type1">
  16. <div class="content">
  17. <div class="title">
  18. <h2>历史和地理背景</h2>
  19. </div>
  20. </div>
  21. </section>
  22. </div>
  23. </template>
  24. <script setup lang="ts">
  25. import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
  26. import { onMounted, ref } from 'vue';
  27. import Placeholder1 from '@/assets/images/placeholder/Midium.jpg';
  28. const carouselConfig = {
  29. itemsToShow: 1,
  30. wrapAround: true,
  31. autoPlay: 5000,
  32. }
  33. </script>
  34. <style lang="scss">
  35. @media (max-width: 425px) {
  36. }
  37. </style>