换行旋转样式

思路 — 处理数据 第2行数据需要倒序

  mounted() {
    const _this = this
    window.onresize = () => {
      this.$nextTick(_ => {
        _this.processWidth = _this.$refs.bussiProcessRef.clientWidth   // 获取容器宽度
      })
    }
  },
、、、、监听容器宽度
  watch: {
    processWidth(val) {
      if (!this.timer) {
        this.timer = true
        const _this = this
        setTimeout(() => {
          _this.timer = false
        }, 500)
      }
      this.deserveProcessDom()
    }
  },

• 获取数据

  deserveProcessDom() {
      if (!(this.bussiStageList && this.bussiStageList.length)) return
      // 容器宽度 大于 所有的标签宽度  就一行
      if (this.processWidth >= (120 * this.bussiStageList.length)) {
        this.lineNum = 1
        // 一行几个
        this.lineSize = this.bussiStageList.length
        // 等分宽度
        this.bussiLessWidth = Math.floor(this.processWidth / this.lineSize)
      } else {
        // 多行 lineNum行数  Math.ceil向上取整
        this.lineNum = Math.ceil((120 * this.bussiStageList.length) / this.processWidth)
        // 一行个数  宽度/120px
        this.lineSize = Math.floor(this.processWidth / 120)
        // 定义一个宽度为120px
        this.bussiLessWidth = 120
      }
      // 获取数据
      this.showStageList = []
      for (let i = 1; i <= this.lineNum; i++) {
        let arr = []
        // 每一行数据 lineSize一行的个数 bussiStageList总数据
        arr = this.bussiStageList.slice((i - 1) * this.lineSize, i * this.lineSize)
        if (i % 2 == 0) {
          if (arr.length < this.lineSize) {
            // 偶数行 填满 倒序
            for (let j = 1; j <= this.lineSize; j++) {
              if (arr.length < j) {
                arr.push({})
              }
            }
          }
          arr.reverse() // 数据翻转
        }
        this.showStageList.push(arr)
      }
    },

• 样式
  
  半圆样式 是1下的after

 .bussi-process-icon {
      span {
        &::after {
          content: "";
          position: absolute;
          height: 85px;
          width: 45px;
          border: 6px solid #e9f3ff;
          border-left: 0;
          border-radius: 0 85px 85px 0 ;
          top: 22px;
          right: -50px;
        }
      }
    }

• 同理

  .bussi-process-icon {
      span {
        &::after {
          content: "";
          position: absolute;
          height: 85px;
          width: 45px;
          border: 6px solid #e9f3ff;
          border-right: 0;
          border-radius: 170px 0 0 170px;
          top: 22px;
          right: 50px;
        }
      }
    }

• 前面的线条
  

  span {
      height: 50px;
      width: 50px;
      display: inline-block;
      border-radius: 50%;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        height: 6px;
        width: var(--lessWidth)!important;
        background: #e9f3ff;
        top: 22px;
        right: 50px;
      }
    }