<template>
  <div>
<!--    <div style="background: #00F7DE;height:800px"></div>-->
    <vue-lazy-component>
      <img src="@/assets/images/area1.png" alt="">
    </vue-lazy-component>
    <vue-lazy-component>
      <img src="@/assets/images/area2.png" alt="">
    </vue-lazy-component>
    <vue-lazy-component>
      <img src="@/assets/images/area3.png" alt="">
    </vue-lazy-component>
    <vue-lazy-component>
      <img src="@/assets/images/area4.png" alt="">
    </vue-lazy-component>
  </div>
</template>

<script>
import url from '@/assets/public/url'
import axios from "axios";
export default {
  name: "",
  components: {},
  data() {
    return {
      url: url.signUrl,
      imgList: [
        {
          url: 'https://img1.baidu.com/it/u=1485012388,2380514454&fm=26&fmt=auto&gp=0.jpg'
        },
        {
          url: 'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg',
        },
        {
          url: 'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg'
        },
        {
          url: 'https://img0.baidu.com/it/u=3225163326,3627210682&fm=26&fmt=auto&gp=0.jpg'
        }
      ]
    }
  },
  methods: {
    getImgList: function () {
      var self = this
      axios.get(self.url + 'app/contentrelease/listpage', {
        params: {
          page: 1,
          rows: 5,
          categoryId: '0a424e44-9d7a-4a48-9942-7b5ccfe4a3aa'
        }
      }).then(function (res) {
        // console.log(res.data.rows)
        self.imgList = res.data.rows
      })
    }
  },
  mounted: function () {
    console.log(this.imgList)
    this.getImgList()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    img
      width 80%
      height 400px
      display block
      margin 0 auto 50px
    .custom-transition .lazy-component-enter
      opacity 0
      transform scale(0.4) translate(100%)


    .custom-transition .lazy-component-enter-to
      opacity 1


    .custom-transition .lazy-component-enter-active
      transition all 0.5s
      position absolute
      top 0
      width 100%


    .custom-transition .lazy-component-leave
      opacity 1


    .custom-transition .lazy-component-leave-to
      opacity 0
      transform scale(0.4) translate(-100%)


    .custom-transition .lazy-component-leave-active
      transition all 0.5s

</style>
