iview等级级别

最后效果：

代码：

   <div class="level" v-if="isShowLevel">
      <span>级别</span>
      <div class="rating">
        <span v-if="level == null" style="font-size: 12px;">暂无数据</span>
        <div class="level-icon" v-else v-for="(index) in 4" :key="index" :style="{ background: getColor(index) }"></div>
      </div>
    </div>

methods: {
    getColor (index) {
      if (index < this.level) {
        return '#64e3ff' 
      } else {
        return '#ffffff'
      }
    },
}

//屏幕分辨率适配版，长经验长经验
.level {
  width: 55%;
  position: absolute;
  left: 20px;
  bottom: 3px;
  display: flex;
  align-items: center;
  color: #fff;
  .rating {
    font-size: 14px;
    display: flex;
    width: 70%;
    .level-icon {
      width: 25%;
      height: 10px;
      background: #fff;
      border: 2px solid #84efff;
      border-radius: 15%;
      margin-left: 5px;
    }
  }
}
//初始版
.level {
  width: 210px;
  position: absolute;
  left: 20px;
  bottom: 3px;
  display: flex;
  align-items: center;
  color: #fff;
}
.rating {
  font-size: 14px;
  display: flex;
}
.level-icon {
  width: 30px;
  height: 10px;
  background: #fff;
  border: 2px solid #84efff;
  border-radius: 15%;
  margin-left: 5px;
}

lelve变量是数字