|
|
@@ -0,0 +1,76 @@
|
|
|
+<template>
|
|
|
+ <swiper class="fbt-swiper-container"
|
|
|
+ :class="{'swiper-no-swiping': arrBanner.length === 1}"
|
|
|
+ :options="fbtSWOptions"
|
|
|
+ v-if="arrBanner.length">
|
|
|
+ <swiper-slide v-for="(item, index) in arrBanner"
|
|
|
+ :key="index">
|
|
|
+ <img class="banner"
|
|
|
+ :src="item"
|
|
|
+ alt="">
|
|
|
+ </swiper-slide>
|
|
|
+ <div class="sw-pagination"
|
|
|
+ slot="pagination"
|
|
|
+ :style="{visibility: arrBanner.length <= 1 ? 'hidden' : 'visible'}"></div>
|
|
|
+ </swiper>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'banner',
|
|
|
+ components: {
|
|
|
+ swiper,
|
|
|
+ swiperSlide
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ fbtSWOptions () {
|
|
|
+ return {
|
|
|
+ // loop: true,
|
|
|
+ // autoplay: this.arrBanner.length > 1,
|
|
|
+ autoplay: false,
|
|
|
+ pagination: {
|
|
|
+ el: '.sw-pagination',
|
|
|
+ clickable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ arrBanner () {
|
|
|
+ return ['http://p1.music.126.net/uuO0NVbTBmvumV6Qa-ExJw==/109951166598780468.jpg?imageView&quality=89', 'http://p1.music.126.net/2gK-S1egQdDTMgs8zTzmFg==/109951166598932300.jpg?imageView&quality=89']
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.fbt-swiper-container {
|
|
|
+ .banner {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ // height: 357px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .sw-pagination {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ z-index: 1;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .swiper-pagination-bullet {
|
|
|
+ margin: 0 6px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ opacity: 1;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet-active {
|
|
|
+ background: #D8D8D8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
panyong