<template>
    <div class="strategy">
        <div class="text-title">
            企业战略
            <span class="english" >STRATEGY</span>
        </div>
        <div class="strategy-content-wrapper">
            <div class="strategy-content">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="item in swiperList">
                        <div class="swiper-item">
                            <div class="item-left"
                                 :style="{'background-image': 'url(https://file.funcheergame.com/office/image/strategy/'+item.left+'.png)'}"
                            >
                            </div>
                            <div class="item-right">
                                <div class="item-right-wrapper">
                                    <h1>{{item.title}}</h1>
                                    <div class="line"></div>
                                    <p class="titleSecond">{{item.titleSecond}}</p>
                                </div>

                            </div>
                        </div>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    name: 'strategy',
    data() {
      return {
        swiperList:[
          {left:'1',title:'精品化',titleSecond:'不断精进品质，用创新诠释快乐理念，追求极致互动体验'},
          {left:'3',title:'全球化',titleSecond:'立足全球视野高度，全面推进从研发、发行到投资的全球布局'},
          {left:'2',title:'新文化',titleSecond:'融合产业价值与文化价值，用互动科技带来新体验，点亮文化魅力'}
        ],
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          pagination: {
            el: '.swiper-pagination',
            clickable : true,
            bulletClass: 'str-bullet',
            bulletActiveClass: 'str-bullet-active'
          },
          effect:'fade',
          autoplay: {
            delay: 6000,
            disableOnInteraction: true
          },
        }
      }
    }
  }
</script>

<style lang="less" scoped>
    @import url('./strategy.less');
</style>
