|
- <template>
- <div class="swiper-main">
- <!-- Swiper -->
- <div class="swiper-containerhor">
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index">
- <div v-if="type === 'image'" class="imagezb">
- <img class="swiperimg" :src="item.image">
- <el-button>进入直播间</el-button>
- <div class="textzb">
- <a class="titlezb">主播: {{ item.title }}</a>
- <a class="contentzb">内容: {{ item.subTitle }}</a>
- </div>
- </div>
- <div v-else class="videozb">
- <img class="swiperimg" :src="item.image">
- <img class="play" src="@/assets/play.png" @click.prevent="videoFn(item)">
- <div class="textzb">
- <a>{{ item.title }}</a>
- </div>
- </div>
- </div>
- </div>
- <div class="main">
- <span class="swiper-button-prev"></span>
- <span class="swiper-button-next"></span>
- </div>
- <!-- Add Pagination -->
- <!-- <div class="swiper-paginationhor"></div> -->
- </div>
- <el-dialog :visible.sync="videoDialogVisible" width="400px" >
- <VideoDialog :url="videoUrl"></VideoDialog>
- </el-dialog>
- </div>
- </template>
-
- <script>
- /* eslint-disable */
- import Swiper from 'swiper'
- import 'swiper/dist/js/swiper'
- import 'swiper/dist/css/swiper.css'
- import VideoDialog from '@/components/video'
- export default {
- name: 'bannerSwiper',
- props: {
- bannerArray: Array,
- type: {
- type: String,
- default: ''
- }
- },
- components: { VideoDialog },
- data() {
- return {
- videoDialogVisible: false,
- videoUrl: '',
- }
- },
- mounted() {
- setTimeout(() => {
- this.initSwiper()
- }, 300)
- },
- methods: {
- handleClickBanner(item, index) {
- window.open(item.link)
- },
- initSwiper() {
- this.mySwiper = new Swiper('.swiper-containerhor', {
- pagination: '.swiper-paginationhor',
- slidesPerView: 5,
- paginationClickable: true,
- prevButton: '.swiper-button-prev',
- nextButton: '.swiper-button-next',
- spaceBetween: 30,
- // autoplay: 3000,
- loop: true
- })
- },
- videoFn (item) {
- this.videoUrl = item.link
- this.videoDialogVisible = true
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .swiper-containerhor {
- width: 1200px;
- position: relative;
- overflow: hidden;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- }
- .swiper-button-prev, .swiper-button-next{
- width: 50px;
- height: 50px;
- position: absolute;
- top: 180px;
- background: url('../../assets/right.png') no-repeat;
- background-size: contain;
- }
- .swiper-button-prev{
- position: absolute;
- background: url('../../assets/left.png') no-repeat;
- background-size: contain;
- }
-
- .swiper-slide {
- width: 230px;
- margin-right: 20px;
- .swiperimg {
- width: 230px;
- display: block;
- }
- .imagezb{
- position: relative;
- width: 230px;
- }
- .el-button {
- margin-left: -73px;
- border: none;
- background: #07CAAF;
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- padding-top: 0px;
- padding-bottom: 0px;
- width: 146px;
- height: 44px;
- position: absolute;
- top: 310px;
- left: 50%;
- }
- .textzb {
- font-size: 18px;
- font-weight: bold;
- color: #030303;
- line-height: 16px;
- margin-top: 18px;
- line-height: 30px;
- a {
- display: inline-block;
- text-align: center;
- display: block;
- }
- .contentzb{
- margin-top: 10px;
- }
- }
- .videozb {
- width: 230px;
- float: left;
- margin-right: 20px;
- position: relative;
- .play {
- position: absolute;
- margin: 0 auto;
- top: 165px;
- left: 50%;
- margin-left: -27.5px;
- width: 55px;
- }
- video {
- width: 230px;
- }
- .textzb {
- margin-top: 10px;
- line-height: 16px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- a {
- width: 100%;
- display: inline-block;
- text-align: center;
- font-size: 18px;
- font-weight: 400;
- color: #030303;
- line-height: 24px;
- }
- .contentzb{
- margin-top: 10px;
- width: 207px;
- font-size: 18px;
- font-weight: 400;
- color: #030303;
- line-height: 24px;
- }
- }
- }
- // .videozb::after {
- // content: '';
- // z-index: 99;
- // width: 55px;
- // height: 55px;
- // position: absolute;
- // background-image: url('../../assets/play.png');
- // background-size: 100%;
- // left: 50%;
- // margin-left: -27.5px;
- // top: 200px;
- // z-index: 99;
- // background-repeat: no-repeat;
- // }
-
- }
- </style>
|