列表项随机匹配不同颜色字体和背景

不同颜色字体和背景的列表效果实现

想实现如下图效果，列表每一项的icon标识颜色不一样

代码如下：

<div
    class="group-item"
    v-for="(item,index) in groupLists"
    :key="index"
    @click="groupClickHandler(item)"
>
    <div class="icon-div">
        <j-icon type="ellipsis2" color="#888"></j-icon>
        <ul>
            <li @click.stop="openModal('edit',item.id)">编辑</li>
            <li @click.stop="delGroup(item.id)">删除</li>
        </ul>
    </div>
    <div class="group-img" :style="itemStyle(index)">
        {{ item.name.slice(0,1) }}
    </div>
    <div>
        <p class="name">{{ item.name }}</p>
        <p class="owner">创建者：{{ item.owner }}</p>
    </div>
</div>

data() {
   return {
       colorArr: [
         {
             color: '#F54A44',
             backgroundColor: '#FFE3E2',
         },
         {
             color: '#407BF5',
             backgroundColor: '#E1EAFD',
         },
         {
             color: '#F2A517',
             backgroundColor: '#FFF2DB',
         },
         {
             color: '#77DF7A',
             backgroundColor: '#DBFCDC',
         },
         {
             color: '#40B4F5',
             backgroundColor: '#DDF3FF',
         },
     ],
   }
},
computed:{
  // 计算属性用于返回每个 group-item 的样式
  itemStyles() {
     return this.groupLists.map((item, index) => {
          const randomColor = this.colorArr[(index + this.randomOffset) % this.colorArr.length];
          return {
              backgroundColor: randomColor.backgroundColor,
              color: randomColor.color,
          };
     });
   },
   // 计算一个随机偏移量，以确保颜色的唯一性
   randomOffset() {
      return Math.floor(Math.random() * this.colorArr.length);
   },
},
methods:{
   // 返回每个 group-item 的样式
   itemStyle(index) {
       return this.itemStyles[index];
   },
}