<template>
  <div class="head">
    <a-carousel autoplay :autoplay-speed="time">
      <div class="img-box" v-for="item in lists" :key="item.id">
        <img :src="item.url" alt="" />
      </div>
    </a-carousel>
  </div>
</template>

<script>
import { queryRotation } from 'config/api';
export default {
  data() {
    return {
      time: 3000,
      lists: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const params = { param: { showPage: 0 } };
        const res = await queryRotation(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.lists = data;
        } else {
          this.$message.error(error);
        }
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
};
</script>

<style lang="stylus">
.head {
  background: white;
  max-height: 460px;
  overflow: hidden;
}

.img-box {
  height: 460px;
  width: 100%;

  img {
    height: 100%;
    width: 100%;
  }
}

.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
