<template>
  <div class="swiper">
    <el-carousel height="100%" indicator-position="none">
      <el-carousel-item v-for="(item, index) in data" :key="index">
        <img :src="item.img">
        <div class="swiper-content" v-if="item.title">
          <h2>{{ item.title }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: 'AiSwiper',

    props: {
      data: {
        type: Array,
        default: () => []
      },

      width: {
        type: String,
        default: '100%'
      },
      heigth: {
        type: String,
        default: '100%'
      }
    },

    data () {
      return {

      }
    },

    mounted () {

    },

    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    width: 100%;
    height: 100%;
    padding: 20px 0 0;

    :deep( .el-carousel ){
      height: 100%;
    }

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

    .swiper-content {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      padding: 10px;
      text-align: center;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);

      h2 {
        margin-bottom: 4px;
        color: #fff;
        text-align: center;
        font-size: 18px;
      }

      p {
        line-height: 22px;
        white-space: pre-line;
        color: #B6DFFF;
        font-size: 14px;
        text-align: center;
      }
    }
  }
</style>
