<template>
  <div class="index">
    <div class="banner-block">
    <mt-swipe :auto="5000">
      <mt-swipe-item v-for="(data,index) in bannerList" :key="index">
        <img class="banner" :src="data.url">
      </mt-swipe-item>
    </mt-swipe>
    </div>
    <div class="btn-block">
      <div class="btn">
        <img :src="imgUrl.record"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.money"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.listen"/>
      </div>
      <div class="btn">
        <img :src="imgUrl.more"/>
      </div>
    </div>
    <div class="class-block">
      <div class="title">
        我的课程
      </div>
    </div>
  </div>
</template>

<script>
  import {getBannerListApi} from "../service/api";
  import {Swipe, SwipeItem} from 'mint-ui'
  import {IndexImage} from "../util/imgUrl";

  export default {
    name: "index",
    components:{
      'mt-swipe':Swipe,
      'mt-swipe-item':SwipeItem
    },
    data(){
      return {
        bannerList:[],
        imgUrl: IndexImage
      }
    },
    methods:{
      initPage(){
        getBannerListApi().then(res=>{
          this.bannerList = res.list
        })
      }
    },
    mounted(){
      this.initPage()
    }
  }
</script>

<style scoped lang="less">
@import "../util/public";
.index{
  background: #eee;
}
  .banner-block{
    width: 375*@toVw;
    height: 140*@toVw;
    .banner{
      width: 375*@toVw;
      height: 140*@toVw;
    }
  }
  .btn-block{
    display: flex;
    padding: 12*@toVw 8*@toVw;
    background: white;
    justify-content: space-around;
    .btn{
      width: 68*@toVw;
      height: 68*@toVw;
      img{
        width: 100%;
      }
    }
  }
  .class-block{
    margin-top: 10px;
    background: white;
    padding: 5px;
    font-family: PingFang-SC-Medium;
    font-size: 20px;
    color: #333333;
    text-align: center;
  }
</style>
