<template>

  <div>

    <home-header :city = "city"></home-header>

    <home-swiper :list = "swiperList"></home-swiper>

    <home-icons :List = "iconList"></home-icons>

    <home-recommend :list = 'recommendList'></home-recommend>

    <home-weeked :list = "weekedList"></home-weeked>

  </div>

</template>

<script>

import homeHeader from "./components/Header";

import homeSwiper from "./components/Swiper";

import homeIcons from "./components/Icons";

import homeRecommend from "./components/recommend";

import homeWeeked from "./components/Weeked";

import axios from "axios"

export default {

  name: "home",

  components: {

    homeHeader,

    homeSwiper,

    homeIcons,

    homeRecommend,

    homeWeeked,

  },

  data() {

    return {

      city:"",

      swiperList:[],

      iconList:[],

      recommendList:[],

      weekedList:[]

    }

  },

  methods:{

    getHomeInfo(){

      axios.get("/api/index.json")

        .then(this.getHomeInfoSucc)

    },

    getHomeInfoSucc(res){

      res = res.data

      if (res.ret && res.data){

        const data = res.data

        this.city = data.city

        this.swiperList = data.swiperList

        this.iconList = data.iconList

        this.recommendList = data.recommendList

        this.weekedList = data.weekedList

      }

    }

  },

  mounted (){

    this.getHomeInfo()

  }

};

</script>

<style>

</style>

<template>

  <div>

    <div class="title">周末去哪儿？</div>

    <ul>

      <li class="item border-bottom" v-for="item of list" :key="item.id">

        <div class="item-img-wrapper">

          <img class="item-img" :src = "item.imgUrl" />

        </div>

        <div class="item-info">

          <p class="item-title">{{item.title}}</p>

          <p class="item-desc">{{item.desc}}</p>

        </div>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: "homeWeeked",

  props: {

    list:Array

  }

}

</script>

<style lang="stylus" scoped>

@import '~styles/mixins.styl';

.title

  line-height: .8rem;

  background: #eee;

  text-indent: .2rem;

  .item-img-wrapper

    overflow hidden

    height 0

    padding-bottom 37.09%

    .item-img

      width 100%

.item-info 

  padding: 0.1rem;

  .item-title {

    line-height: 0.54rem;

    font-size: 0.34rem;

    ellipsis();

    }

  .item-desc {

    line-height: 0.4rem;

    }

</style>