根据名称设置样式

               v-for="(item, i) in data.nodeList"
              :id="item.id"
              :key="i"
              :node="item"
              @setNodeName="setNodeName"
              @getYlList="getData(arguments)"
              @deleteNode="deleteNode"
              :class="addClass(item.nodeName)"
             
             
             addClass(i) {
                  console.log(i, "i");
                  if (i == "数据集") {
                    return "blue";
                  }
                  if (i == "数据清洗") {
                    return "green";
                  }
                  if (i == "数据导出") {
                    return "orange";
                  }
                },
                
                .blue {
                      &::before {
                        content: "";
                        width: 36px;
                        height: 36px;
                        background: #0099ff !important;
                        border-radius: 50%;
                      }
                    }
                    .rlues {
                      height: 100%;
                      width: 100%;
                      display: flex;
                      justify-content: center;
                    }
                    .green {
                      &::before {
                        content: "";
                        width: 36px;
                        height: 36px;
                        background: rgb(0, 153, 0) !important;
                        border-radius: 50%;
                      }
                    }
                    .blue {
                      &::before {
                        content: "";
                        width: 36px;
                        height: 36px;
                        background: #0099ff !important;
                        border-radius: 50%;
                      }
                    }
                    .orange {
                      &::before {
                        content: "";
                        width: 36px;
                        height: 36px;
                        background: rgb(255, 102, 0) !important;
                        border-radius: 50%;
                      }
                    }
                    
                    
                       <div
                      v-if="
                        item.onlineStatus == 1 && item.statusTypeId == 2
                      "
                      class="realtime-singletitle fl"
                      :class="item.statusTypeId == '2' ? 'oran' : ''"
                    >
                      {{ item.statusTypeId | statusNameList }}
                      {{ i.deviceValue + i.typeCode + " " }}
                      {{ i.collectTime | formatDate }}
                    </div>
              
              
                    //智慧用电下面状态图标样式
                .realtime-singletitle:before {
                  content: " ";
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  left: 10px;
                  top: 9px;
                  border-radius: 50%;
                }
                .realtime-singletitle {
                  position: relative;
                  line-height: 34px;
                  padding: 0 6px 0 35px;
                }
                // 正常
                .realtime-singletitle.normal:before {
                  border-radius: 50%;
                  width: 16px;
                  height: 16px;
                  background: #52cc77;
                }