饿了么ui的走马灯修改指示点样式

html

  <div class="pointer home-banner" v-if="BannerHome.length">

            <el-carousel height="310px" width="880px">

              <el-carousel-item v-for="item in BannerHome" :key="item" @click="goToUrl(item.jumpUrl)">

                <img class="bannarimg" :src="item.bannerUrl" alt="" />

              </el-carousel-item>

            </el-carousel>

          </div>

css

 

.home-banner {

  width: 880px;

  height: 310px;

  border-radius: 20px;

  overflow: hidden;

  float: left;

// 可以修改指示点的位置

   ::v-deep .el-carousel .el-carousel__indicators--horizontal {

      // left: unset;

      // right: 40px;

      // transform: translateX(5%);

      height: 60px;

      line-height: 60px;

    }

}

 // 指示点未激活的样式

 ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {

    width: 35px;

    height: 6px;

    background: #fff;

    border: 1px solid #ffffff;

    border-radius: 20px;

    opacity: 0.5;

  }  

 // 指示点激活的样式

  ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button{

    width: 35px;

    height: 6px;

    background: #ffffff;

    border-radius: 20px;

    opacity: 1;

  }

 效果图