Vue uses variables to dynamically set style styles

Use CSS variables. When declaring CSS variables, add two conjunction lines before the name of the variable. The var function is used to read variables.

<div class="process">
     <div class="step" v-for="(item, index) in stepList" :key="index" @click="markSteps(index)" :style="{'--bgc': item.active ? '#C8A56B': '#bfbfbf'}">
          <div class="mark_circle" :style="{'--mc': item.active ? '#C8A56B':'#bfbfbf'}"></div>
          <div class="stepName"  :style="{'--sN': item.active ? '#C8A56B':'#bfbfbf'}">{{ item.label }}</div>
     </div>
 </div>
Copy the code

  .stepName{
    font-size: 24px;
    line-height: 100px;
    color:var(--sN)
  }
  .mark_circle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    top: -10%;
    left: -20px;
    background: var(--mc);
  }
  .step:nth-child(1)::before{
    content: "";
    height: 1px;
    width: 30px;
    display: block;
    background: var(--bgc);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 20px;
  }
Copy the code