@import "../styles/imgVar.less";
@import "./config.less";

//定义
.loop-i-1(@n, @i:0) when (@i <= @n) {
  .loop-j-1(@i);
  .loop-i-1(@n, (@i + 1));
}
.loop-j-1(@i,@k:9, @j:0) when (@j <= @k) {
  .scroll@{i}-@{j} {
    animation: ~"2s move@{i}-@{j} linear";
    animation-fill-mode: forwards;
  }
  .loop-j-1(@i, @k, (@j + 1));
}
//调用
.loop-i-1(9);

// 定义
.loop-i-2(@n, @i:0) when (@i <= @n) {
  .loop-j-2(@i);
  .loop-i-2(@n, (@i + 1));
}
.loop-j-2(@i,@k:9, @j:0) when (@j <= @k) {
  .keyframes(
    ~"move@{i}-@{j}",
    {0% {top: (-100% * @i) ;} 100% {top: (-100% * @j) ;}}
  );
  .loop-j-2(@i, @k, (@j + 1));
}

.keyframes (@name,@content) {
  @keyframes @name {
    @content();
  }
}
//调用
.loop-i-2(9);

.vue-scroll-num {
  display: flex;
  justify-content: flex-start;
  .vsn {
    &__wrap {
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      i {
        display: none;
      }

      //定义
      .loop-i-3(@n, @i:0) when (@i <= @n) {
        .pos@{i} {
          top: (-100% - @i);
        }
        .loop-i-3(@n, (@i + 1));
      }
      //调用
      .loop-i-3(9);
    }
    &__list {
      position: absolute;
      left: 0;
      top: 0;
      margin: 0;
      padding: 0;
      height: 100%;
      box-sizing: border-box;
      li {
        list-style: none;

        text-align: center;
        box-sizing: border-box;
      }
    }

    &__wrap-dian,
    &__wrap-point {
      i {
        display: block;
        font-style: normal;
        position: absolute;
      }
      .vsn__list {
      }
    }
    &__wrap-dian {
      i {
        bottom: -6px;
        font-size: 36px;
        left: 0px;
      }
    }
    &__wrap-point {
      i {
      }
    }
  }
}

// 设置默认样式
.vsn-set-font-style(40px, normal, #000);
