<template>
  <div id="index">
  <div class="header">
  <div class="dh">
    <img src="https://res.bestcake.com/images/newIndex/localtion.png">
    <span>北京</span>
     <img class="img2" src="https://res.bestcake.com/images/newIndex/more.png">
     </div>
  </div>
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in SwiperBannerList" :key="index">
          <img :src="item.ImgUrl" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div>
      <img
        style="width:100%;"
        src="https://res.bestcake.com/images/newIndex/title.png?v=1"
        class="title"
      />
    </div>
    <div class="iconList">
      <div class="cont">
        <ul>
          <li v-for="(item,index) in TopIconList" :key="index">
            <img :src="item.ImgUrl" />
            <span v-text="item.ActName"></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="tz">
      <div class="zz">通知</div>
      <div class="yy">
        <div>贝思客官方申明：我司近期发现有客户通过非正常渠道售卖的代金卡无法正常使用，目前我司正通过法律途径解决此问题。我司在此郑重申明，从未授权过任何渠道售卖我司代金卡，请客户通过正常渠道（如：官网、公司销售）进行购买消费。​</div>
      ​</div>
    </div>

    <div class="contentList">
      <ul>
        <li v-for="(item,index) in CenterContentList" :key="index">
          <img :src="item.ImgUrl" style="width:100%;height:auto;" />
        </li>
      </ul>
    </div>

    <div class="ss">
      <img
        class="seturl"
        src="https://res.bestcake.com/m-images/HotRecommend/427276281583982800.jpg"
      />
      <swiper_t v-if="SaleList.length!=0">
        <div class="swiper-slide" v-for="(item,index) in SaleList[0]" :key="index" @click="toPath(item)">
          <img class="img3" :src="item.ImgUrl">
          <div class="name">{{item.Name}}</div>
          <div class="pirce"><span>{{item.Price}}</span><span>/{{item.Size}}</span></div>
        </div>
      </swiper_t>
    </div>

      <div class="ss">
      <img
        class="seturl"
        src="https://res.bestcake.com/m-images/HotRecommend/427276281583982800.jpg"
      />
      <swiper_t v-if="SaleList.length!=0">
        <div class="swiper-slide" v-for="(item,index) in SaleList[1]" :key="index" @click="toPath(item)">
          <img class="img3" :src="item.ImgUrl">
          <div class="name">{{item.Name}}</div>
          <div class="pirce"><span>{{item.Price}}</span><span>/{{item.Size}}</span></div>
        </div>
      </swiper_t>
    </div>

     <div class="ss">
      <img
        class="seturl"
        src="https://res.bestcake.com/m-images/HotRecommend/427276281583982800.jpg"
      />
      <swiper_t v-if="SaleList.length!=0">
        <div class="swiper-slide" v-for="(item,index) in SaleList[2]" :key="index"  @click="toPath(item)">
          <img class="img3" :src="item.ImgUrl">
          <div class="name">{{item.Name}}</div>
          <div class="pirce"><span>{{item.Price}}</span><span>/{{item.Size}}</span></div>
        </div>
      </swiper_t>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      topic: ['19_qixi_0725_m.jpg"','19_qixi_0725_m.jpg','18_shizizuo_m.jpg','18_youflower_m.jpg'],
      SwiperBannerList: [],
      TopIconList: [],
      CenterContentList: [],
      SaleList: []
    };
  },
  computed: {
   
  },
  created(){
    this.$store.state.cindex=0
  },
  mounted() {
    this.pageInit();
  },
  methods: {
    pageInit() {
      this._getIndexData(res => {
        this.SwiperBannerList = res.SwiperBannerList;
        this.TopIconList = res.TopIconList;
        this.CenterContentList = res.CenterContentList;
        res.SaleList.map(item => {
          this.SaleList.push(JSON.parse(item.CakeList));
        });
        console.log(this.SaleList)
        this.SaleList.map(item => {
          item.map(item => {
            item.ImgUrl = this.$global.setUrl(item);
          });
        });
      });
    },
    toPath(item) {
      this.$router.push({
        path: "/show",
        query: {
          City: this.$store.state.city,
          SupplyNo: item.SupplyNo,
          Name: item.Name,
          id: item.Id
        }
      });
    },
    _getIndexData(callback) {
      this.$apis.getIndexData().then(res => {
        callback(res.data.Tag.mainresult);
      });
    }
  },
  watch: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
//  style=""
#index {
  .banner {
    height:r(180);
    overflow:hidden;
    border-radius:r(20);
    margin:0 auto;
    margin:0 r(16);
    img {
      width: 100%;
      height:auto
    }
  }
  .iconList {
    overflow: hidden;
     margin:0 r(22);
     margin-bottom:r(20);
  
    .cont {
      li:nth-child(4){
        margin-right:0;
      }
     
      li {
        width: r(59.5);
        height: r(98);
        float: left;
        margin-right:r(27);
       
        list-style: none;
        font-size:r(12);
        img {
          width:r(52);
          height: r(52);
          margin:r(16) r(3.75) 0;
        }
        span{
          width:100%;
          height:r(19);
          text-align:center;
          display:block;
          line-height:19px;
          margin-top:r(10);
        }
      }
    }
  }
  .contentList {
    overflow: hidden;
    margin:r(16) r(4) r(6) r(16);
    li {
      width: r(167);
      height: r(100);
      float: left;
      border-radius:r(20);
      margin-right:r(10);
      margin-bottom:r(10);
    }
  }
  .ss{
    .img3{
      width:r(120);
      height:r(120); 
    }
    .swiper-slide{
      width:r(156) !important;
      height:r(220) !important;
      background:white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      margin:r(12) r(0) r(24) r(12);  
      border-radius:r(10); 
    }
    
    .name{
      margin:r(5) r(19) r(18);
      color:black;
      font-size:r(14);
    }
    .pirce{
       margin:0 r(19);
        span:nth-child(1){
          color:#CC2825;
          font-size:r(16);
        }
        span:nth-child(2){
          color:#999;
          font-size:r(14);
        }
    }
  }
  .header{
    .dh{
      border:1px solid white;
      margin:0 r(16);
     height:r(44);
      span{
     font-size:r(14);
     height:44px;
     display:block;
     float:left;
     line-height:r(44);
     margin:0 r(4);
    }
     img:nth-child(1){
      width:r(18.75);
      height:r(22);
      margin-top:r(11);
      float:left;
    }
     .img2{
      width:r(9);
      height:r(16);
      float:left;
      margin-top:r(14)
    }
    }
  } 
 .tz{
   overflow:hidden;
   border-top:2.1334vw solid #FAFAFA;
   border-bottom:2.1334vw solid #FAFAFA;
   width:100%;
   .zz{
     float:left;
     width:r(36);
     height:r(18);
     color:white;
     background:#1fb1b8;
     line-height:r(18);
     text-align:center;
     margin:r(11) 0 0 r(16);
   }
   .yy{
     float:left;
     width:r(294);
     overflow:hidden;
     line-height:r(40);
     height:r(40);
     margin-left:r(8);
     color:#1fb1b8;
     font-size:14px;
     position:relative;
   
    div{ 
    height: r(18);
    width:r(1498);
    top:r(5);
    position: absolute;
    animation: geiwogun 25s linear infinite;
     }
     @keyframes geiwogun{
			0%{left:0};
      100%{left:r(-1498)};
			}
   }
 }
}
</style>