<template>
  <el-carousel :interval="5000" arrow="always" height="700px">
    <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
  </el-carousel>
</template>
<style scoped>
.el-carousel__item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 650px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-image: url("/static/img/login/banner1.png");
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url("/static/img/login/banner1.png");
}

.el-carousel__item:nth-child(3n) {
  background-image: url("/static/img/login/banner1.png");
}

@media screen and (min-width: 1280px) and (max-width:1812px) {
  .el-carousel__item:nth-child(2n) {
    background-image: url("/static/img/login/banner1.png");
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-image: url("/static/img/login/banner1.png");
  }

  .el-carousel__item:nth-child(3n) {
    background-image: url("/static/img/login/banner1.png");
  }
}
</style>