<template>
    <div class="banner">
        <div class="index-title">
            <h3>我们致力于</h3>
            <p>让更多人享受美好生活</p>
        </div>
        <div class="banner-list">
            <el-carousel>
                <el-carousel-item>
                    <img src="../../assets/image/banner_imgs/serve2.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item  >
                    <img src="../../assets/image/banner_imgs/serve3.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item  >
                    <img src="../../assets/image/banner_imgs/serve4.jpg" alt="">
                </el-carousel-item>
                <el-carousel-item  >
                    <img src="../../assets/image/banner_imgs/serve5.jpg" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
    let bannerList =[
        {id:2,img_url:'serve2.jpg'},
        {id:3,img_url:'serve3.jpg'},
        {id:4,img_url:'serve4.jpg'},
        {id:5,img_url:'serve5.jpg'},
    ]
  </script>
  <style lang="scss">
.banner-list {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
  margin-top: 15px;
}
.banner-list .el-carousel__container {
  width: 100%;
  padding-bottom: 50%; /* 高度自适应宽度的一半 */
  position: relative;
}
.banner-list .el-carousel__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner-list .el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner{
    padding-top: 20px;
}
  </style>
  