VUE v-for循环下奇数行和偶数行样式

 <div class="list" v-for="(item, index) in list" :key="index">
        <div class="item-style">
          <div class="rank">
            <img
              v-if="item.rank == 1"
              src="../../assets/images/point/jinpai.png"
              alt=""
            />
            <img
              v-else-if="item.rank == 2"
              src="../../assets/images/point/yinpai.png"
              alt=""
            />
            <img
              v-else-if="item.rank == 3"
              src="../../assets/images/point/tongpai.png"
              alt=""
            />

            <img
              class="yuan"
              v-else
              src="../../assets/images/point/circle.png"
              alt=""
            />
            <p v-if="item.rank < 10 && item.rank > 3" class="num">
              {{ item.rank }}
            </p>

            <p v-if="item.rank > 9" class="num2">
              {{ item.rank }}
            </p>
            <p v-if="item.rank < 4" class="num" style="visibility: hidden">
              {{ item.rank }}
            </p>
          </div>
          <div class="name">{{ item.user_name }}</div>
          <div class="score">{{ item.total }}</div>
        </div>
      </div>

 <style>
/* 奇数行的样式 */
.list:nth-child(odd) > .item-style {
  background: #f5f9ff;
  width: 100%;
  display: flex;
}

/* 偶数行的样式 */
.list:nth-child(even) > .item-style {
  background: #ecf4ff;
  width: 100%;
  display: flex;
}
</style>