2019-01-19页面上显示不同的背景色

页面上有时会显示多个模块，每个模块会有不同的图标，不同的背景颜色，如果单独设置背景颜色会比较麻烦，我们可以利用样式直接一次显示

  <!-- <li @click='start(2)'>
          <div class="menu-item clue background1">
            <span class='icon-work-clue'></span>
          </div>
          <div class='pt5 center'>线索</div>
        </li>
        <li>
          <div class="menu-item client background2"
               @click='bussinessDetail'>
            <span class='icon-work-client'></span>
          </div>
          <div class='pt5 center'>客户</div>
        </li>
        <li>
          <div class="menu-item contact background3">
            <span class='icon-work-contact'></span>
          </div>
          <div class='pt5 center'>联系人</div>
        </li>
        <li>
          <div class="menu-item data background4"
               @click='addBusiness'>
            <span class='icon-work-data'></span>
          </div>
          <div class='pt5 center'>数据</div>
        </li>

@bgList: #5182e4, #9bcc66, #3fb27f, #f7ca4a, #f88d48, #f06451, #cd62d5, #8a55d4,
  #5156b8, #51b4f1, #69d4db, #d32c6b;
.ml-loop(@div,@i:1,@val:extract(@div,@i)) when (length(@div)>=@i) {
  div.background@{i} {
    background-color: @val;
  }
  .ml-loop(@div, (@i+1));
}
.ml-loop(@bgList);

以上就可以实现依次显示不同的背景色