CSS围绕圆心自适应布局

1.将所有要分散在圆心周围的元素的起始位置统一在圆心处(圆心位置根据实际情况)：

<div v-for="(item, index) in computerList" :key="item.uuid">
     <div class="computer">{{item.name}}</div>
 </div>

.computer {
 position:absolute;
 top -30px
 left -60px
 width 120px
 height 70px
}

2.css原理：
使用 transform 属性，rotate作旋转+translateY作位移+rotate反向旋转（负的）
如：

transform: rotate(90deg) translateY(280px) rotate(-90deg)  // 其中90为旋转度数，280为半径距离

3.根据后台返回是数据，计算旋转角度：360/要布局的元素个数

async getComputerList () {
      const res = await $axios.get('/XXX')
      if (res.success) {
        this.computerList = res.data
        if (!this.computerList || this.computerList.length === 0) {
          return
        }
        // 设置每个点的位置
        this.currRot = 360 / this.computerList.length
        this.computerList.forEach((item, index) => {
          this.$set(item, 'rot', this.currRot * (index + 1))
        })
      }
    },

4.将每个元素自己的旋转角度动态绑定

<div v-for="(item, index) in computerList" :key="item.uuid">
   <div class="computer" :style="`transform: rotateZ(${item.rot}deg) translateY(280px) rotate(${-item.rot}deg)`">{{item.name}}</div>
</div>

原文参考：https://segmentfault.com/q/1010000042302059?utm_source=sf-similar-question