<script setup lang="ts">
const imageList = [
  {
    image: '/static/images/home/banner.png'
  },
  {
    image: '/static/images/home/banner1.png'
  },
  {
    image: '/static/images/home/banner2.png'
  },
  {
    image: '/static/images/home/banner3.png'
  }
]
</script>

<template>
  <div class="banner">
    <el-carousel style="height: 100%">
      <el-carousel-item v-for="(item,index) in imageList" :key="index">
        <img class="image" :src="item.image" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.banner {
  height: 154px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  margin-top: 24px;

  .image {
    width: 100%;
    height: 100%;
    border-radius: 8px 8px 8px 8px;
  }
}
</style>