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

214 lines
5.9 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. <div v-if="type === 'image'" class="imagezb">
  8. <img class="swiperimg" :src="item.image">
  9. <el-button>进入直播间</el-button>
  10. <div class="textzb">
  11. <a class="titlezb">主播: {{ item.title }}</a>
  12. <a class="contentzb">内容: {{ item.subTitle }}</a>
  13. </div>
  14. </div>
  15. <div v-else class="videozb">
  16. <img class="swiperimg" :src="item.image">
  17. <img class="play" src="@/assets/play.png" @click.prevent="videoFn(item)">
  18. <div class="textzb">
  19. <a>{{ item.title }}</a>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="main">
  25. <span class="swiper-button-prev"></span>
  26. <span class="swiper-button-next"></span>
  27. </div>
  28. <!-- Add Pagination -->
  29. <!-- <div class="swiper-paginationhor"></div> -->
  30. </div>
  31. <el-dialog :visible.sync="videoDialogVisible" width="400px" >
  32. <VideoDialog :url="videoUrl"></VideoDialog>
  33. </el-dialog>
  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. import VideoDialog from '@/components/video'
  42. export default {
  43. name: 'bannerSwiper',
  44. props: {
  45. bannerArray: Array,
  46. type: {
  47. type: String,
  48. default: ''
  49. }
  50. },
  51. components: { VideoDialog },
  52. data() {
  53. return {
  54. videoDialogVisible: false,
  55. videoUrl: '',
  56. }
  57. },
  58. mounted() {
  59. setTimeout(() => {
  60. this.initSwiper()
  61. }, 300)
  62. },
  63. methods: {
  64. handleClickBanner(item, index) {
  65. window.open(item.link)
  66. },
  67. initSwiper() {
  68. this.mySwiper = new Swiper('.swiper-containerhor', {
  69. pagination: '.swiper-paginationhor',
  70. slidesPerView: 5,
  71. paginationClickable: true,
  72. prevButton: '.swiper-button-prev',
  73. nextButton: '.swiper-button-next',
  74. spaceBetween: 30,
  75. // autoplay: 3000,
  76. loop: true
  77. })
  78. },
  79. videoFn (item) {
  80. this.videoUrl = item.link
  81. this.videoDialogVisible = true
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. .swiper-containerhor {
  88. width: 1200px;
  89. position: relative;
  90. overflow: hidden;
  91. }
  92. .swiper-slide {
  93. text-align: center;
  94. font-size: 18px;
  95. }
  96. .swiper-button-prev, .swiper-button-next{
  97. width: 50px;
  98. height: 50px;
  99. position: absolute;
  100. top: 180px;
  101. background: url('../../assets/right.png') no-repeat;
  102. background-size: contain;
  103. }
  104. .swiper-button-prev{
  105. position: absolute;
  106. background: url('../../assets/left.png') no-repeat;
  107. background-size: contain;
  108. }
  109. .swiper-slide {
  110. width: 230px;
  111. margin-right: 20px;
  112. .swiperimg {
  113. width: 230px;
  114. display: block;
  115. }
  116. .imagezb{
  117. position: relative;
  118. width: 230px;
  119. }
  120. .el-button {
  121. margin-left: -73px;
  122. border: none;
  123. background: #07CAAF;
  124. font-size: 18px;
  125. font-weight: bold;
  126. color: #FFFFFF;
  127. padding-top: 0px;
  128. padding-bottom: 0px;
  129. width: 146px;
  130. height: 44px;
  131. position: absolute;
  132. top: 310px;
  133. left: 50%;
  134. }
  135. .textzb {
  136. font-size: 18px;
  137. font-weight: bold;
  138. color: #030303;
  139. line-height: 16px;
  140. margin-top: 18px;
  141. line-height: 30px;
  142. a {
  143. display: inline-block;
  144. text-align: center;
  145. display: block;
  146. }
  147. .contentzb{
  148. margin-top: 10px;
  149. }
  150. }
  151. .videozb {
  152. width: 230px;
  153. float: left;
  154. margin-right: 20px;
  155. position: relative;
  156. .play {
  157. position: absolute;
  158. margin: 0 auto;
  159. top: 165px;
  160. left: 50%;
  161. margin-left: -27.5px;
  162. width: 55px;
  163. }
  164. video {
  165. width: 230px;
  166. }
  167. .textzb {
  168. margin-top: 10px;
  169. line-height: 16px;
  170. display: flex;
  171. flex-direction: column;
  172. align-items: center;
  173. justify-content: space-between;
  174. width: 100%;
  175. a {
  176. width: 100%;
  177. display: inline-block;
  178. text-align: center;
  179. font-size: 18px;
  180. font-weight: 400;
  181. color: #030303;
  182. line-height: 24px;
  183. }
  184. .contentzb{
  185. margin-top: 10px;
  186. width: 207px;
  187. font-size: 18px;
  188. font-weight: 400;
  189. color: #030303;
  190. line-height: 24px;
  191. }
  192. }
  193. }
  194. // .videozb::after {
  195. // content: '';
  196. // z-index: 99;
  197. // width: 55px;
  198. // height: 55px;
  199. // position: absolute;
  200. // background-image: url('../../assets/play.png');
  201. // background-size: 100%;
  202. // left: 50%;
  203. // margin-left: -27.5px;
  204. // top: 200px;
  205. // z-index: 99;
  206. // background-repeat: no-repeat;
  207. // }
  208. }
  209. </style>