Realize css dynamic color assignment through :style

Example one:

1. First dynamically give a color variable


2. Then introduce the color variable

<style lang="scss">
.mroeMeun {
    
    
  .el-submenu__title {
    
    
  // 引入颜色变量
    color: #{
    
    "var(--title_color)"} !important;
    i {
    
    
      color: #{
    
    "var(--title_color)"} !important;
    }
  }
}
</style>

Example two:

1. Use:style binding interface return value to dynamically change font color

<template>
    <div class="new-energy-product">
        <div class="items">
            <div class="item" v-for="e of result.data">
                <h3 class="border" style="width: 60px">{
   
   { e.name }}</h3>
                <div class="border">
                	<!-- 使用:style 动态改变字体颜色 -->
                    <h4 :style="{
                    'color': (e.timeOutCasteNum>0 || e.littleAbnomalTaskNum>0) ? 'red' : 'green'
                    }">小物供给</h4>
                    <span>正在执行&nbsp;<span>{
   
   {e.littleExcutingTaskNum ? e.littleExcutingTaskNum  : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>待投棚数&nbsp;<span>{
   
   {e.watingCastingNum ? e.watingCastingNum : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>投棚超时&nbsp;<span :style="{
                    'color': (e.timeOutCasteNum && e.timeOutCasteNum > 0) ? 'red' : 'green'
                    }">{
   
   {e.abnomalTaskNum ? e.abnomalTaskNum : ''}}&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
                    <span>异常任务&nbsp;<span :style="{
                    'color': (e.littleAbnomalTaskNum > 0) ? 'red' : 'green'
                    }">{
   
   {e.littleAbnomalTaskNum ? e.littleAbnomalTaskNum : ''}}</span></span>
                </div>
                
            </div>
        </div>
    </div>
</template>

//绑定数据示例：
result:{
    
    
                    "code": "0",
                    "data": [
                        {
    
    
                            "name": "T1",
                            "littleExcutingTaskNum": 30,
                            "watingCastingNum": 15,
                            "timeOutCasteNum": 0,
                            "littleAbnomalTaskNum": 0,
                            "bigSuppltyExcutingTaskNum": 4,
                            "materialShortageNum": 4,
                            "bigSuppltyAbnomalTaskNum": 0,
                            "bigEmptyExcutingTaskNum": 30,
                            "bigEmptyAbnomalTaskNum": 6,
                            "twiceSingleExcutingTaskNum": 54,
                            "twiceSinglePodLeakNum": 8,
                            "twiceSingleAbnomalTaskNum": 0,
                            "twiceSuppltyExcutingTaskNum": 30,
                            "twiceSuppltyPodLeakNum": 0,
                            "twiceSuppltyAbnomalTaskNum": 0,
                            "twiceEmptyExcutingTaskNum": 89,
                            "twiceEmptyPodLeakNum": 8,
                            "twiceEmptyAbnomalTaskNum": 7
                        }
                    ]
                }

Effect: