|
- <template>
- <div class="swiper-main">
- <div class="swiper-content">
- <div v-if="bannerArray.length === 1">
- <div v-for="(item, index) in bannerArray" :key="index">
- <img :src="item.image" @click="handleClickBanner(item, index)" />
- <div class="txt">
- <a class="title">{{ item.title }}</a>
- <a class="subtitle">{{ item.subtitle }}</a>
- </div>
- </div>
- </div>
- <div class="swiper-container" v-if="bannerArray.length > 1">
- <div class="swiper-wrapper">
- <div
- class="swiper-slide"
- v-for="(item, index) in bannerArray"
- :key="index"
- >
- <img :src="item.image" @click="handleClickBanner(item, index)" />
- <div class="txt">
- <a class="title">{{ item.title }}</a>
- <a class="subtitle">{{ item.subTitle }}</a>
- </div>
- </div>
- </div>
- <!-- <div class="main">
- <span class="swiper-button-prev" @click="handleClickPrev"></span>
- <span class="swiper-button-next" @click="handleClickNext"></span>
- </div> -->
- <div class="swiper-pagination"></div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- /* eslint-disable */
- import Swiper from 'swiper'
- import 'swiper/dist/js/swiper'
- import 'swiper/dist/css/swiper.css'
- export default {
- name: 'PBannerSwiper',
- props: {
- bannerArray: Array
- },
- data() {
- return { }
- },
- activated () {
- this.initSwiper()
- },
- deactivated () {
- try {
- this.mySwiper?.destroy(true, true)
- this.mySwiper = null
- // eslint-disable-next-line no-empty
- } catch (error) {}
- },
- mounted () {
- setTimeout(() => {
- this.initSwiper()
- }, 300)
- },
- methods: {
- handleClickBanner (item, index) {
- if (!item.link) return
- item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link
- },
- handleClickPrev () {},
- handleClickNext () {},
- initSwiper () {
- this.mySwiper = new Swiper('.swiper-container', {
- pagination: '.swiper-pagination',
- paginationClickable: true,
- prevButton: '.swiper-button-prev',
- nextButton: '.swiper-button-next',
- autoplayDisableOnInteraction: false,
- onTransitionEnd: () => {
- this.$emit('bannerChange', this.realIndex)
- },
- autoplay: 3000,
- effect: 'fade'
- })
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- // @import '@/assets/styles/variables.scss';
- .swiper-main {
- width: 100%;
- height: 590px;
- position: relative;
- }
-
- .swiper-container {
- height: 590px !important;
- img {
- width: 100%;
- }
- .txt {
- position: absolute;
- bottom: 78px;
- left: 0;
- right: 0;
- text-align: center;
- color: #fff;
- width: 1200px;
- margin: 0 auto;
- .title {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- margin-bottom: 15px;
-
- }
- .subtitle {
- font-size: 16px;
- font-weight: 400;
- text-align: center;
- display: block;
- color: #ccc;
- }
- }
- }
- .main {
- position: relative;
- width: 1200px;
- margin: 0 auto;
- }
- .swiper-content {
- position: absolute;
- width: 1920px;
- height: 590px;
- left: 50%;
- margin-left: -960px;
- }
- .swiper-button-prev,
- .swiper-button-next {
- margin-top: -200px;
- }
-
- .swiper-pagination .swiper-pagination-bullet-active {
- background: #00F6BD !important;
- }
- .swiper-pagination{
- bottom: 30px;
- }
- </style>
- <style lang="scss">
- .swiper-pagination .swiper-pagination-bullet {
- width: 25px;
- height: 2px;
- border-radius: 0 !important;
- }
- .swiper-pagination .swiper-pagination-bullet-active {
- background: #00F6BD !important;
- }
- </style>
|