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.

205 lines
5.9 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <section :class="['tw-relative tw-mt-[48px] xl:tw-mx-auto']">
  3. <div class="swiper-container focusExhibitionWrapper1 xl:tw-max-w-[1060px] xl:tw-mx-auto" ref="focusExhibitionWrapper1"
  4. @mouseenter="enter" @mouseleave="leave">
  5. <div :class="['swiper-wrapper']">
  6. <template v-for="(item, index) in focusExhibitionlist1">
  7. <div :key="index" :class="['swiper-slide tw-p-[10px]']" v-if="item.ExhibitionList.length > 0 && index <=5">
  8. <div class="tw-px-[20px] tw-py-[40px] tw-rounded-[24px] bg-col-to-tr">
  9. <div class="tw-flex tw-flex-col tw-rounded-[24px]">
  10. <div class="tw-flex tw-justify-center" style="width:100%;">
  11. <div class="t18 tw-text-center tw-mb-[20px] tw-font-bold">
  12. {{item.CategoryName}}
  13. </div>
  14. </div>
  15. <div class="tw-justify-center" style="width:100%;">
  16. <template v-if="item.ExhibitionList!=undefined && item.ExhibitionList && item.ExhibitionList.length>0">
  17. <template v-for="(item2, index2) in item.ExhibitionList">
  18. <div v-if="index2<=2" :key="index2" class="tw-py-[10px]">
  19. <skeletonSlot>
  20. <focusExhibitionsCard :item="item2" ></focusExhibitionsCard>
  21. </skeletonSlot>
  22. </div>
  23. </template>
  24. </template>
  25. </div>
  26. <nuxt-link :to="localePath(`/exhibition?category=${item.CategoryID}`)" class="tw-flex tw-justify-center tw-mt-[20px]">
  27. <div class="tw-flex-none">
  28. <v-img max-height="21" :src="require(`@/assets/svg/more.svg`)"></v-img>
  29. </div>
  30. <div class="tw-shrink tw-mx-[10px] tw-text-[#cecece]">
  31. {{$t('Explore more')}}
  32. </div>
  33. <div class="tw-flex-none">
  34. <v-img max-height="21" :src="require(`@/assets/svg/more.svg`)"></v-img>
  35. </div>
  36. </nuxt-link>
  37. </div>
  38. </div>
  39. </div>
  40. </template>
  41. </div>
  42. </div>
  43. <div
  44. :class="[
  45. 'swiper-button-prev ad1 tw-text-black tw-hidden',
  46. focusExhibitionWrapper1
  47. ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
  48. : '',
  49. ]"
  50. ></div>
  51. <div
  52. :class="[
  53. 'swiper-button-next ad1 tw-text-black tw-hidden',
  54. focusExhibitionWrapper1
  55. ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
  56. : '',
  57. ]"
  58. ></div>
  59. </section>
  60. </template>
  61. <script>
  62. import skeletonSlot from "~/components/newComponent/skeleton/skeletonSlot.vue";
  63. import focusExhibitionsCard from "~/components/home/FocusExhibitionsCard.vue";
  64. import Swiper from "swiper/bundle";
  65. export default {
  66. components: {
  67. skeletonSlot,
  68. focusExhibitionsCard,
  69. Swiper,
  70. },
  71. props: {
  72. focusExhibitionlist1: {
  73. type: Array,
  74. },
  75. },
  76. data() {
  77. return {
  78. focusExhibitionWrapper1: null,
  79. exhibitions: [],
  80. };
  81. },
  82. created() {
  83. },
  84. mounted() {
  85. let vm = this;
  86. vm.$nextTick(function () {
  87. vm.focusExhibitionWrapper1 = new Swiper(".swiper-container.focusExhibitionWrapper1", {
  88. direction: "horizontal",
  89. initialSlide: 0,
  90. slidesPerView: 1.2,
  91. centeredSlides: true,
  92. loop: false,
  93. loopedSlides: 0,
  94. observer: true, //修改swiper自己或子元素时,自动初始化swiper
  95. observeParents: true, //修改swiper的父元素时,自动初始化swiper
  96. spaceBetween: 32,
  97. // autoplay: {
  98. // disableOnInteraction: true,
  99. // delay: 5000,
  100. // },
  101. preloadImages: false,
  102. // lazy: {
  103. // loadPrevNext: true,
  104. // loadOnTransitionStart: true,
  105. // loadPrevNextAmount: 6,
  106. // },
  107. watchSlidesProgress: false,
  108. navigation: {
  109. nextEl: ".swiper-button-next.ad1",
  110. prevEl: ".swiper-button-prev.ad1",
  111. },
  112. breakpoints: {
  113. 768: {
  114. slidesPerView: 1.2,
  115. spaceBetween: 48,
  116. },
  117. 1366: {
  118. slidesPerView: 2,
  119. spaceBetween: 24,
  120. centeredSlides: false,
  121. grabCursor: true,
  122. },
  123. },
  124. });
  125. vm.focusExhibitionWrapper1.init();
  126. vm.focusExhibitionWrapper1.update();
  127. });
  128. },
  129. methods: {
  130. enter() {
  131. this.focusExhibitionWrapper1.autoplay.stop();
  132. },
  133. leave() {
  134. this.focusExhibitionWrapper1.autoplay.start();
  135. },
  136. },
  137. };
  138. </script>
  139. <style lang="scss" scoped>
  140. .swiper-container {
  141. width: 100% !important;
  142. }
  143. .swiper-button {
  144. &-prev {
  145. left: 0;
  146. width: 50px;
  147. &::before {
  148. content: "";
  149. display: block;
  150. width: 50px;
  151. height: 50px;
  152. border-radius: 50px;
  153. background: white;
  154. border: 1px solid #e6e6e8;
  155. transform: rotate(180deg);
  156. }
  157. &:after {
  158. content: "";
  159. display: block;
  160. position: absolute;
  161. right: 15px;
  162. background-image: url('~/assets/svg/u-angle-left-b.svg');
  163. background-position: center;
  164. background-repeat: no-repeat;
  165. background-size: cover;
  166. width: 24px;
  167. height: 24px;
  168. }
  169. }
  170. &-next {
  171. right: 0;
  172. width: 50px;
  173. &::before {
  174. content: "";
  175. display: block;
  176. width: 50px;
  177. height: 50px;
  178. border-radius: 50px;
  179. background: white;
  180. border: 1px solid #e6e6e8;
  181. }
  182. &:after {
  183. content: "";
  184. display: block;
  185. position: absolute;
  186. left: 15px;
  187. background-image: url('~/assets/svg/u-angle-right-b.svg');
  188. background-position: center;
  189. background-repeat: no-repeat;
  190. background-size: cover;
  191. width: 24px;
  192. height: 24px;
  193. }
  194. }
  195. }
  196. .bg-col-to-tr{
  197. box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
  198. background: linear-gradient(to bottom right, rgba(220, 217, 255, 0.8), rgba(63, 61, 86, 0.6));
  199. }
  200. </style>