自定义elementui的跑马灯

    让我们先来看看设计图需要达到的效果

    由于懒。我实在是懒得引入swiper插件了。于是，就把elment里面自带的跑马灯给改造了。左右箭头加淡入淡出效果再加下面的指示器自定义，全部是充分发挥主观能动性，即兴创造的。其中，值得一说的是那个指示器的纯CSS写法。记录一下，也方便有同样需求的人进行借鉴和改造。
    主要截图重点部分。算了。我还是贴代码吧。为了方便比我更懒的人。
大致思路就是把之前的指示点给弄没，把自己写的放上去，用after content这个来写数字。弄个新样式。记得用deep才能改变原有的样式。弄个sass变量把数据对应上就行了。

.index /deep/ .el-carousel__indicator--horizontal{
  height:44px;
  width:44px;
  padding:0;
  border-radius: 50%;
  $num_list:1,2,3;
  @each $num in $num_list{
      &:nth-of-type(#{$num}){
         margin:0 11px;
         background:#fff;
        position:relative;
          &::after{
            content:'0#{$num}';
            height:44px;
            width:44px;
            position: absolute;
            border-radius: 50%;
            border:1px #979797 solid;
            z-index: 10;
            bottom:0;
            right:0;
            text-align: center;
            line-height: 44px;
            font-size:20px;
            
        }
      }
  }
  &.is-active{
    background:#01BFBD;
    color:#fff;
  }
  .el-carousel__button{
    height:0;
    width:0;
    background:none;
   
  }
}

    我为了达到此效果（上面的盒子有个下面的边框）。特意把指示点写在盒子外面。有个属性可以设置一下

<div class="block">
            <el-carousel trigger="click" height="519px" indicator-position="outside">
              <el-carousel-item
                v-for="(item, index) in swiperList"
                :key="index"
              >

最后展示下效果图。

    是不是还凑合？这里的话满足这些最基本的需求是可以。最重要这个图片和切换类别数量是限定死的。如果是需要后台给你多少张你就要展示多少张这种动态的用这种就不合适了。你还是老老实实用swiper吧。

----------Ps后续
部署到官网后别的机器都没有问题。我们设计的苹果笔记本看的时候这一块内容特别大，超出了屏幕，显示不全。然后我又进行了整体改造。大致思路是单位变成vm。中间的字和图那一块的变成flex布局。这样就能适配不同的屏幕了。然后中间那一块外面再包一层，包的那层是flex布局，之前的标签是这个的外面一层还是需要用定位，不然没法播了。translate定位不了。所以加了一层。