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

`

  1. <template>
  2. <!-- 顶部轮播图 -->
  3. <div class="back-img-view">
  4. <el-carousel height="730px" trigger="click">
  5. <el-carousel-item v-for="(item,index) in backImg" :key="index">
  6. <img :src="item.img"/>
  7. </el-carousel-item>
  8. </el-carousel>
  9. </div>
  10. </template>
  11. <script setup>
  12. import {ref} from "vue";
  13. const backImg = ref([
  14. {img:new URL('../../assets/img/banner1.png', import.meta.url).href,id:1},
  15. {img: new URL('../../assets/img/banner2.png',import.meta.url).href,id:2},
  16. {img: new URL('../../assets/img/banner3.png',import.meta.url).href,id:3},
  17. {img: new URL('../../assets/img/banner4.png',import.meta.url).href,id:4}]
  18. )
  19. </script>
  20. <style scoped lang="less">
  21. .back-img-view{
  22. width: 1920px;
  23. height: 730px;
  24. // 指示灯高度
  25. :deep(.el-carousel .el-carousel__indicators--horizontal) {
  26. height: 100px;
  27. }
  28. // 指示灯未选中的样式
  29. :deep(.el-carousel__indicator--horizontal .el-carousel__button){
  30. width: 80px;
  31. height: 8px;
  32. border-radius: 31px;
  33. background: #FFFFFF80;
  34. }
  35. // 指示灯选中的样式
  36. :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button){
  37. width: 80px;
  38. height: 8px;
  39. border-radius: 31px;
  40. background: #fff;
  41. }
  42. }
  43. </style>

`

原网址: 访问
创建于: 2023-10-08 10:53:02
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论