catalogs.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!-- @format -->
  2. <script lang="ts" setup>
  3. import { Swiper, SwiperSlide } from 'swiper/vue'
  4. import { Navigation, Pagination } from 'swiper/modules'
  5. import 'swiper/css'
  6. import 'swiper/css/navigation'
  7. import { Api } from '@/api/model/url'
  8. const config = useRuntimeConfig()
  9. const baseURL = config.public.apiBaseSiteUrl
  10. const modules = [Navigation, Pagination]
  11. const catalogueList = ref<any>([])
  12. const swiperVertical = ref<any>(null)
  13. const solution = ref('category')
  14. const list = ref([
  15. {
  16. key: 'category',
  17. title: 'By Category',
  18. },
  19. {
  20. key: 'trend',
  21. title: 'By Trend',
  22. },
  23. ])
  24. const requestUrl = `${baseURL}${Api.CatalogueList}`
  25. const params = { pageNo: 1, pageSize: 9, state: 1, trend: '', order: 'desc' }
  26. const { data, refresh } = await useAsyncData(
  27. 'catalogue-list-s',
  28. () => $fetch(requestUrl, { method: 'GET', params }),
  29. )
  30. watch(() => data.value?.result?.records, (newRecords: any[]) => {
  31. if (newRecords) catalogueList.value = newRecords
  32. }, { immediate: true })
  33. function onVerticalSwiper(swiper: any) {
  34. swiperVertical.value = swiper
  35. }
  36. function onClickLeft() {
  37. swiperVertical.value.slidePrev()
  38. }
  39. function onClickRight() {
  40. swiperVertical.value.slideNext()
  41. }
  42. function switchCatalogs(item: any) {
  43. solution.value = item.key
  44. params.trend = item.key === 'category' ? '' : '1'
  45. refresh()
  46. }
  47. </script>
  48. <template>
  49. <div
  50. id="catalogs" class="bg-#0F0820 pt-100px pb-160px data-section"
  51. data-section-color="#0F0820"
  52. >
  53. <div class="w-1200-auto text-left pos-relative">
  54. <h2 class="text-36px fw-800 text-#fff !mb-40px custom-title-font">
  55. Download EJET Spark <span class="custom-title-bg02">Catalogs</span>
  56. </h2>
  57. <div class="flex gap-20px mb-30px text-center">
  58. <div
  59. v-for="(item, index) in list"
  60. :key="index"
  61. class="py-8px w-132px b-rd-6px text-14px fw-bold b-solid b-1px cursor-pointer hover:bg-#fff hover:text-#000 transition-all duration-300"
  62. :class="
  63. solution === item.key
  64. ? '!bg-#fff !text-#000 b-#fff'
  65. : 'bg-#0F0820 text-#fff b-#fff'
  66. "
  67. @click="switchCatalogs(item)"
  68. >
  69. <div>{{ item.title }}</div>
  70. </div>
  71. </div>
  72. <div class="w-1200-auto pos-relative">
  73. <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer">
  74. <nuxt-link class="text-#fff hover:text-#D7C4FF" :to="solution === 'category' ? '/categories' : '/trends'">
  75. View All
  76. </nuxt-link>
  77. <svgo-arrow-line-r class="w-16px h-16px ml-10px" />
  78. </div>
  79. <div
  80. class="pos-absolute cursor-pointer left-48% bottom--60px w-30px h-30px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
  81. @click="onClickLeft()"
  82. >
  83. <img
  84. src="~/assets/images/swiper_icon2_l.png"
  85. alt=""
  86. class="!w-2430px !h-30px"
  87. srcset=""
  88. >
  89. </div>
  90. <div
  91. class="pos-absolute cursor-pointer left-52% bottom--60px w-28px h-28px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
  92. @click="onClickRight()"
  93. >
  94. <img
  95. src="~/assets/images/swiper_icon2_r.png"
  96. alt=""
  97. class="!w-30px !h-30px"
  98. srcset=""
  99. >
  100. </div>
  101. <div v-if="catalogueList.length">
  102. <Swiper
  103. :slides-per-view="3"
  104. :space-between="20"
  105. :modules="modules"
  106. :centered-slides="true"
  107. :loop="true"
  108. :navigation="false"
  109. :pagination="true"
  110. class="pos-relative"
  111. @swiper="onVerticalSwiper"
  112. >
  113. <SwiperSlide v-for="(item, index) in catalogueList" :key="index">
  114. <common-catalogs-item :item="item" class="catalog-item" />
  115. </SwiperSlide>
  116. </Swiper>
  117. </div>
  118. </div>
  119. <img
  120. class="w-240px h-148px pos-absolute right-0 bottom--160px z-101"
  121. src="~/assets/images/catalogs_img01.png"
  122. alt=""
  123. >
  124. </div>
  125. </div>
  126. </template>
  127. <style lang="less" scoped>
  128. .swiper{
  129. .swiper-slide{
  130. border-radius: 10px;
  131. // background-color: #F3F4FB;
  132. &.swiper-slide-prev{
  133. .custom-main{
  134. transition: all 0.3s ease-in-out;
  135. background-color: #D7C4FF!important;
  136. }
  137. }
  138. }}
  139. </style>