如何解决三个颜色循环一遍，可循环多次

Question

<template>
  <div class="box1">
    <div class="box2" v-for="(item, index) in data_list" :key="index" :style="[spacing]" >
      <div class="box2_1" :class="top[index]" :key="index" ></div>
      <div class="box2_2">{{ item.date }}</div>
      <div class="box2_3 xx">{{ item.License_plate }}</div>
      <div class="box2_4 xx">{{ item.state }}</div>
      <div class="box2_5 xx">{{ item.park }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    spacing: {},
    data_list: {
      type: Array,
    },
  },
  data() {
    return {
      top: ["top1", "top2", "top3"],
    };
  },
  methods: {
    fn1(){
      alert(66)
    }
  },
  created:{
  }
};
</script>
<style scoped>
.top1 {
  background: #FC4567;
}
.top2 {
  background: #C25EC4;
}
.top3 {
  background: #2F8DF4;
}

.box2 {
  /* width: 2.838542rem; */
  height: .260417rem;
  font-family: "微软雅黑";
  font-weight: bold;
  font-size: .083333rem;
  /* outline: rgb(7, 7, 7) .005208rem solid; */
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: .109375rem;
  /* padding-left: .010417rem; */
  
}
.box2_1 {
  width: .020833rem;
  height: .15625rem;
}
.box2_2 {
  margin-left: .036458rem;
}
.box2_1:nth-child(3) {
  background: #ff0000;
}
.xx {
  padding-left: .182292rem;
}
</style>

Answer 1