元气智驾官网前端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

128 lines
3.2 KiB

  1. <template>
  2. <div class="swiper-main">
  3. <!-- Swiper -->
  4. <div class="swiper-containerhor">
  5. <div class="swiper-wrapper">
  6. <div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index">
  7. <img :src="item.img">
  8. <el-button>进入直播间</el-button>
  9. <div class="textzb">
  10. <a class="titlezb">主播: {{ item.name }}</a>
  11. <a class="contentzb">内容: {{ item.content }}</a>
  12. </div>
  13. </div>
  14. </div>
  15. <div class="main">
  16. <span class="swiper-button-prev"></span>
  17. <span class="swiper-button-next"></span>
  18. </div>
  19. <!-- Add Pagination -->
  20. <!-- <div class="swiper-paginationhor"></div> -->
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. /* eslint-disable */
  26. import Swiper from 'swiper'
  27. import 'swiper/dist/js/swiper'
  28. import 'swiper/dist/css/swiper.css'
  29. export default {
  30. name: 'PBannerSwiper',
  31. props: {
  32. bannerArray: Array
  33. },
  34. data() {
  35. return { }
  36. },
  37. mounted() {
  38. setTimeout(() => {
  39. this.initSwiper()
  40. }, 300)
  41. },
  42. methods: {
  43. handleClickBanner(item, index) {
  44. window.open(item.link)
  45. },
  46. initSwiper() {
  47. this.mySwiper = new Swiper('.swiper-containerhor', {
  48. pagination: '.swiper-paginationhor',
  49. slidesPerView: 5,
  50. paginationClickable: true,
  51. prevButton: '.swiper-button-prev',
  52. nextButton: '.swiper-button-next',
  53. spaceBetween: 30,
  54. autoplay: 3000,
  55. loop: true
  56. })
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .swiper-containerhor {
  63. width: 1200px;
  64. position: relative;
  65. overflow: hidden;
  66. }
  67. .swiper-slide {
  68. text-align: center;
  69. font-size: 18px;
  70. }
  71. .swiper-button-prev, .swiper-button-next{
  72. width: 50px;
  73. height: 50px;
  74. position: absolute;
  75. top: 180px;
  76. background: url('../../assets/right.png') no-repeat;
  77. background-size: contain;
  78. }
  79. .swiper-button-prev{
  80. position: absolute;
  81. background: url('../../assets/left.png') no-repeat;
  82. background-size: contain;
  83. }
  84. .swiper-slide {
  85. width: 230px;
  86. margin-right: 20px;
  87. img {
  88. width: 230px;
  89. display: block;
  90. }
  91. .el-button {
  92. margin-left: -73px;
  93. border: none;
  94. background: #07CAAF;
  95. font-size: 18px;
  96. font-weight: bold;
  97. color: #FFFFFF;
  98. padding-top: 0px;
  99. padding-bottom: 0px;
  100. width: 146px;
  101. height: 44px;
  102. position: absolute;
  103. top: 310px;
  104. left: 50%;
  105. }
  106. .textzb {
  107. font-size: 18px;
  108. font-weight: bold;
  109. color: #030303;
  110. line-height: 16px;
  111. margin-top: 18px;
  112. line-height: 30px;
  113. a {
  114. display: inline-block;
  115. text-align: center;
  116. display: block;
  117. }
  118. .contentzb{
  119. margin-top: 10px;
  120. }
  121. }
  122. }
  123. </style>