基于Umi大屏项目--使用less旋转图片

1.设置变量@iconIndex，用于遍历

2.flex布局

3.每个item内部定位布局

4.设置背景图片

5.设置动画_旋转效果

6.将旋转角度设置为变量控制

    .dataService {
      height: 100px;
      width: 100%;
      @iconIndex: 1, 2, 3, 4;
      .list {
        display: flex;
        justify-content: space-around;
        .pxfixW(margin-right, 60px);
        .pxfixW(margin-top, 40px);
        .pxfixW(margin-bottom, 40px);
        .item {
          .pxfixW(height, 186px);
          .pxfixW(width, 186px);
          text-align: center;
          position: relative;
          .pic {
            width: 100%;
            height: 100%;
            position: relative;
            .outside {
              width: 100%;
              height: 100%;
              display: block;
              background-image: url('../../../assets/HomePage/dataService-1-1.png');
              background-size: 100%;
              animation: rotate 4s linear 0s infinite;
            }
            .inside {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              display: block;
              background-image: url('../../../assets/HomePage/dataService-1-2.png');
              background-size: 100%;
              animation: contrarotate 4s linear 0s infinite;
            }
          }
          .content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .value {
            .pxfixW(font-size, 26px);
            color: #FFFFFF
          }
          .label {
            .pxfixW(width, 100px);
            .pxfixW(font-size, 12px);
            color: #FFFFFF;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //规定几行显示省略号
            -webkit-box-orient: vertical;
          }
        }

        .loop(@i) when (@i <= length(@iconIndex)) {  //这里设置为动态加载
          .item:nth-child(@{i}) {
            .outside {
              background-image: url('../../../assets/HomePage/dataService-1-1.png');
            }
            .inside {
              background-image: url('../../../assets/HomePage/dataService-@{i}-2.png');
            }
          }
          .loop(@i+1);
        }
        .loop(1);
      }
    }

    //设置的变量
    @keyframes rotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes contrarotate {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(-360deg);
      }
   }