修改elementui 的el-carousel轮播图样式。自定义样式（轮播图带文字轮播+修改按钮样式）

效果：

代码：

改图标样式：

        <div class="home-middle-top">
          <el-carousel :interval="5000" arrow="always" trigger="click">
            <el-carousel-item v-for="item in imgUrls" :key="item.id">
              <el-row>
                <el-col :span="24" class="banner_img">
                  <img
                    ref="bannerHeight"
                    :src="item.idView"
                    class="bannerImg"
                    @load="imgLoad"
                  />
                  <div class="zhezhao">
                    <p>{{ item.text }}</p>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>

  data() {
    return {
      showIndex: true,
      bannerHeight: '',
      isChecked: 1,
      lis: ['11', '22'],
      imgUrls: [
        {
          id: 0,
          idView: require('./../../public/static/images/index-banner.jpg'),
          text: '训练1'
        },
        {
          id: 1,
          idView: require('./../../public/static/images/index-banner.png'),
          text: '团队演习'
        },
        {
          id: 3,
          idView: require('./../../public/static/images/bgi.png'),
          text: '团队训练'
        }
      ]
    }
  },

.home-middle-top {
  height: 42%;
  overflow: hidden;
  position: relative;
  /*margin-bottom: 10vh;*/
}

.home-middle-top .el-carousel {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__container {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item > .el-row {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item > .el-row > .banner_img {
  height: 100%;
}
/* 轮播图指示标样式 */
.home-middle-top .el-carousel >>> .el-carousel__indicators--horizontal {
  height: 5vh;
  left: 85%;
  bottom: 2vh;
}
.home-middle-top
  .el-carousel
  >>> .el-carousel__indicator--horizontal
  .el-carousel__button {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.home-middle-top .el-carousel >>> .is-active .el-carousel__button {
  background: #31e5f5;
  width: 2rem;
  border-radius: 0.5rem;
}
/* end */

.home-middle-bottom {
  height: 52%;
  margin-top: 3%;
}

.home-middle-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.bannerImg {
  height: 100% !important;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.banner_img {
  position: relative;
}

.zhezhao p {
  line-height: 1vh;
  color: #fff;
  text-align: left;
  padding-left: 1vw;
}

.zhezhao {
  width: 100%;
  height: 5vh;
  background-color: #000;
  position: absolute;
  bottom: 2vh;
  opacity: 0.5;
  /*z-index: 9999;*/
}

/* 轮播图指示标样式 */
.home-middle-top .el-carousel >>> .el-carousel__indicators--horizontal {
  height: 5vh;
  left: 85%;
  bottom: 2vh;
}
.home-middle-top
  .el-carousel
  >>> .el-carousel__indicator--horizontal
  .el-carousel__button {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.home-middle-top .el-carousel >>> .is-active .el-carousel__button {
  background: #31e5f5;
  width: 2rem;
  border-radius: 0.5rem;
}
/* end */