<template>
  <div>
    <div class="swipe-wrapper banner">
      <mt-swipe :auto="0" ref="swipeWrapper" :show-indicators="false" :continuous="false">
        <mt-swipe-item class="swip-item-1" v-for="(item,index) in banners" :key="this" >
          <a :href="item.webadd" class="bc">
            <img :src="item.picadd" class="banner-img" alt="">
          </a>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>
<script>
    import base from '../../lib/base'
    export default {
        name: "banner",
        data(){
          return{
            hasGetBanks:false,
            banners:[]
          }
        },
        created(){
          this.queryList()
        },
        methods:{
          prev: function () {
            this.$refs.swipeWrapper.prev();
            console.log(this.$children);
          },
          next: function () {
            this.$refs.swipeWrapper.next();
          },
          queryList(cb){
             base.$.http({
               app:'WxIndexService',
               func:'advertising'
             },data=>{
               data=JSON.parse(data);
               if(data.error) {
                 this.banners = [{
                     webadd:'#',
                     picadd:base.config.baseUrl+'/static/images/banner.png'
                   },{
                     webadd:'#',
                     picadd:base.config.baseUrl+'/static/images/banner2.png'
                 }]
                 return 0;
               }
//               this.banners = [{
//                 webadd:'#',
//                 picadd:base.config.baseUrl+'/static/images/banner.png'
//               },{
//                 webadd:'#',
//                 picadd:base.config.baseUrl+'/static/images/banner2.png'
//               }]
               this.banners = data
             })
          }
        }
    }
</script>

<style scoped>
  .banner{
    /*white-space: nowrap;*/
    /*overflow-x: auto;*/
    /*overflow-y: hidden;*/
    height: 3rem;
    padding:0 .25rem;
    /*border-radius:.32rem;*/
  }
  .banner-img{
    width: 6rem;
    margin-left: .1rem;
    border-radius:.32rem;
    box-shadow: 0 5px 6px rgba(0, 0, 0, .3);
    height: 3rem;
  }
  .swip-item-1{
    margin-right: .24rem;
    display: inline-block;
    /*overflow: hidden;*/
  }
  a{
    -webkit-tap-highlight-color: transparent;
  }
</style>
