盒子颜色由深变浅

 一、同色系盒子颜色由深变浅

html部分

<div class="category">
      <div class="singleCourse"
           v-for="(item,index) in array" :key="index"
           :style="{ backgroundColor: 'rgba(255,195,0,'+ opacities[index % opacities.length]+')'
           }"
      >

      </div>
    </div>

css部分

设置盒子正常大小及其他样式，

 .category {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 92vw;

    //单个课程样式
    .singleCourse {
      position: relative;
      width: 45vw;
      height: 45vw;
      //background-color: #fab0b0;
      border-radius: 20px;
      margin-bottom: 2vw;
    }
}

再设置行内样式：让盒子颜色由深到浅，主要通过设置透明度实现

:style="{ backgroundColor: 'rgba(170,213,0,'+ opacities[index % opacities.length]+')' }"

取余操作符 % 的使用是为了确保索引值 index 在数组 opacities 的有效范围内。

这样，你就可以确保即使 array 数组有无限多的元素，你也总是能够使用 opacities 数组中的五个值来循环为它们设置不透明度。

js部分

js部分主要设置opacities透明度来实现盒子由深变浅，array为循环的数组

data() {
  return {
    array: [1, 2, 3],
    opacities: [1, 0.7, 0.5, 0.3]
  }
},

效果如下：

二、多个色系盒子颜色由深变浅

html部分

 <div class="category">
      <div class="singleCourse"
           v-for="(item,index) in courses" :key="index"
           :class="getCardClass(index)"
      >
      </div>
    </div>

css部分

这里换了grid排列方式

 .category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 92vw;

    //单个课程样式
    .singleCourse {
      position: relative;
      width: 45vw;
      height: 45vw;
      //background-color: #fab0b0;
      border-radius: 20px;
      margin-bottom: 2vw;
    }
}
// 这里是为了让它一个色系在一个区域显示三个，不会挤到一块
.category > .singleCourse:nth-child(3n+3) {
    grid-column: span 2;
  }

// 这里对应js返回的颜色样式名  return `${color}-opacity-${opacity}`
.yellow-opacity-100 {
  background-color: rgba(255, 195, 0, 1);
}

.yellow-opacity-70 {
  background-color: rgba(255, 195, 0, 0.7);
}

.yellow-opacity-40 {
  background-color: rgba(255, 195, 0, 0.4);
}

.blue-opacity-100 {
  background-color: rgba(0, 122, 255, 1);
}

.blue-opacity-70 {
  background-color: rgba(0, 122, 255, 0.7);
}

.blue-opacity-40 {
  background-color: rgba(0, 122, 255, 0.4);
}

.green-opacity-100 {
  background-color: rgba(170, 213, 0, 1);
}

.green-opacity-70 {
  background-color: rgba(170, 213, 0, 0.7);
}

.green-opacity-40 {
  background-color: rgba(170, 213, 0, 0.4);
}

js部分

这里设置了三种颜色和三个透明度

getCardClass(index) {
      const colors = ['yellow', 'blue', 'green']
      const opacities = ['100', '70', '40']
      const colorIndex = index % 9
      const color = colors[Math.floor(colorIndex / 3)]
      const opacity = opacities[colorIndex % 3]
      return `${color}-opacity-${opacity}`
    },

效果：

1、加上.category > .singleCourse:nth-child(3n+3) {grid-column: span 2;}的效果：

注意：方块显示数量根据courses数量而变化，如果超过9个，则会从第一个黄色颜色重新渲染

2、没加上.category > .singleCourse:nth-child(3n+3) { grid-column: span 2; }的效果：