<!--
  Copyright (c) 2020.
  author: song
  email: 15235360226@163.com
  -->

<template>
  <div class="head">
    <a-carousel :autoplay="false">
      <div :key="item.id" v-for="item in bannerLists">
        <img :src="item.url" alt />
        <!-- <img alt class="fill-height" src="~assets/banner.png" /> -->
      </div>
    </a-carousel>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
  name: 'RichText',
  props: {
    showPage: {
      type: Number,
      default: 11,
    },
  },
  data() {
    return {};
  },

  computed: mapState('home', ['bannerLists']),

  async created() {
    this.setBannerLists([]);
    await this.getQueryRotation(this.showPage);
  },

  methods: {
    ...mapMutations('home', ['setBannerLists']),
    ...mapActions('home', ['getQueryRotation']),
  },
};
</script>

<style lang="stylus" scoped>
.head {
  background: white;
  max-height: 360px;
  overflow: hidden;
  position: relative;
}
</style>
