元气智驾官网前端
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.
 
 
 
 

162 line
3.8 KiB

  1. <template>
  2. <div class="swiper-main">
  3. <div class="swiper-content">
  4. <div v-if="bannerArray.length === 1">
  5. <div v-for="(item, index) in bannerArray" :key="index">
  6. <img :src="item.image" @click="handleClickBanner(item, index)" />
  7. <div class="txt">
  8. <a class="title">{{ item.title }}</a>
  9. <a class="subtitle">{{ item.subtitle }}</a>
  10. </div>
  11. </div>
  12. </div>
  13. <div class="swiper-container" v-if="bannerArray.length > 1">
  14. <div class="swiper-wrapper">
  15. <div
  16. class="swiper-slide"
  17. v-for="(item, index) in bannerArray"
  18. :key="index"
  19. >
  20. <img :src="item.image" @click="handleClickBanner(item, index)" />
  21. <div class="txt">
  22. <a class="title">{{ item.title }}</a>
  23. <a class="subtitle">{{ item.subTitle }}</a>
  24. </div>
  25. </div>
  26. </div>
  27. <!-- <div class="main">
  28. <span class="swiper-button-prev" @click="handleClickPrev"></span>
  29. <span class="swiper-button-next" @click="handleClickNext"></span>
  30. </div> -->
  31. <div class="swiper-pagination"></div>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. /* eslint-disable */
  38. import Swiper from 'swiper'
  39. import 'swiper/dist/js/swiper'
  40. import 'swiper/dist/css/swiper.css'
  41. export default {
  42. name: 'PBannerSwiper',
  43. props: {
  44. bannerArray: Array
  45. },
  46. data() {
  47. return { }
  48. },
  49. activated () {
  50. this.initSwiper()
  51. },
  52. deactivated () {
  53. try {
  54. this.mySwiper?.destroy(true, true)
  55. this.mySwiper = null
  56. // eslint-disable-next-line no-empty
  57. } catch (error) {}
  58. },
  59. mounted () {
  60. setTimeout(() => {
  61. this.initSwiper()
  62. }, 300)
  63. },
  64. methods: {
  65. handleClickBanner (item, index) {
  66. if (!item.link) return
  67. item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link
  68. },
  69. handleClickPrev () {},
  70. handleClickNext () {},
  71. initSwiper () {
  72. this.mySwiper = new Swiper('.swiper-container', {
  73. pagination: '.swiper-pagination',
  74. paginationClickable: true,
  75. prevButton: '.swiper-button-prev',
  76. nextButton: '.swiper-button-next',
  77. autoplayDisableOnInteraction: false,
  78. onTransitionEnd: () => {
  79. this.$emit('bannerChange', this.realIndex)
  80. },
  81. autoplay: 3000,
  82. effect: 'fade'
  83. })
  84. }
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. // @import '@/assets/styles/variables.scss';
  90. .swiper-main {
  91. width: 100%;
  92. height: 590px;
  93. position: relative;
  94. }
  95. .swiper-container {
  96. height: 590px !important;
  97. img {
  98. width: 100%;
  99. }
  100. .txt {
  101. position: absolute;
  102. bottom: 78px;
  103. left: 0;
  104. right: 0;
  105. text-align: center;
  106. color: #fff;
  107. width: 1200px;
  108. margin: 0 auto;
  109. .title {
  110. font-size: 36px;
  111. font-weight: bold;
  112. text-align: center;
  113. margin-bottom: 15px;
  114. }
  115. .subtitle {
  116. font-size: 16px;
  117. font-weight: 400;
  118. text-align: center;
  119. display: block;
  120. color: #ccc;
  121. }
  122. }
  123. }
  124. .main {
  125. position: relative;
  126. width: 1200px;
  127. margin: 0 auto;
  128. }
  129. .swiper-content {
  130. position: absolute;
  131. width: 1920px;
  132. height: 590px;
  133. left: 50%;
  134. margin-left: -960px;
  135. }
  136. .swiper-button-prev,
  137. .swiper-button-next {
  138. margin-top: -200px;
  139. }
  140. .swiper-pagination .swiper-pagination-bullet-active {
  141. background: #00F6BD !important;
  142. }
  143. .swiper-pagination{
  144. bottom: 30px;
  145. }
  146. </style>
  147. <style lang="scss">
  148. .swiper-pagination .swiper-pagination-bullet {
  149. width: 25px;
  150. height: 2px;
  151. border-radius: 0 !important;
  152. }
  153. .swiper-pagination .swiper-pagination-bullet-active {
  154. background: #00F6BD !important;
  155. }
  156. </style>