vue3 + element-plus 走马灯指示器样式修改代码

<template>
<!--  顶部轮播图 -->
  <div class="back-img-view">
    <el-carousel  height="730px" trigger="click">
      <el-carousel-item v-for="(item,index) in backImg" :key="index">
        <img :src="item.img"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import {ref} from "vue";

const backImg = ref([
  {img:new URL('../../assets/img/banner1.png', import.meta.url).href,id:1},
  {img: new URL('../../assets/img/banner2.png',import.meta.url).href,id:2},
  {img: new URL('../../assets/img/banner3.png',import.meta.url).href,id:3},
  {img: new URL('../../assets/img/banner4.png',import.meta.url).href,id:4}]
)

</script>

<style scoped lang="less">

.back-img-view{
  width: 1920px;
  height: 730px;
   // 指示灯高度
  :deep(.el-carousel .el-carousel__indicators--horizontal) { 
    height: 100px;
  }
// 指示灯未选中的样式
  :deep(.el-carousel__indicator--horizontal .el-carousel__button){
    width: 80px;
    height: 8px;
    border-radius: 31px;
    background: #FFFFFF80;
  }
// 指示灯选中的样式
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button){
    width: 80px;
    height: 8px;
    border-radius: 31px;
    background: #fff;
  }
}

</style>

声明：该代码需要父级包裹走马灯，通过父级class名:deep(.组件名)来深层次调用组件样式

复制代码请自行修改img src的路径