vue盒子背景由多个矩形不均匀分布组成如何实现

要实现这种效果，你可以使用CSS3的伪元素来实现。具体步骤如下：

1. 首先，给盒子设置一个相对定位的position属性，以便伪元素可以相对于盒子进行定位。

2. 使用:before伪元素来创建多个矩形。可以通过设置伪元素的content属性为空字符串来创建一个没有内容的元素。

3. 设置伪元素的宽高、背景色、边框等属性，然后使用绝对定位来控制矩形的位置。

4. 通过设置不同的left和top值，来让矩形不均匀分布。

下面是一个简单的示例代码，供你参考：

<div class="box"></div>

.box {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.box:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 100px;
  background-color: #f0f;
  border: 1px solid #ccc;
  top: 20px;
  left: 30px;
}

.box:before {
  content: '';
  position: absolute;
  width: 80px;
  height: 60px;
  background-color: #0f0;
  border: 1px solid #ccc;
  top: 80px;
  left: 120px;
}

.box:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: #00f;
  border: 1px solid #ccc;
  top: 200px;
  left: 300px;
}

在上面的代码中，我们创建了三个矩形，并使用position属性来控制它们的位置和大小。你可以根据自己的需求，调整矩形的样式和位置，来实现你想要的效果。