flex布局元素怎么重叠_旋转动画、元素中间添加竖线并用flex布局

// html
<div @click="rotateClick"><i :class="resetStatus ? 'act' : ''"></i>换一批</div>
 <div class="nav_list">
     <template v-for="(item,index) of navList">
        <span :class="index % 2 !== 0 ? 'icon' : 'text'" :key="index">
          {{item}}
        </span>
      </template>
  </div>
// js
<script>
export default {
  data() {
     return {
        resetStatus: false,
        navList:[],
     }
  },
  mounted () {
    this.init()
  },
  methdos:{
     /**
     * 初始化 API
     */
    init() {
      const axiosArr = ['户籍办理','入伍服役','抵押质押','证件办理','党费缴纳']
      const arr = this.arrToIcon(axiosArr)
      this.navList = arr
    },
     rotateClick() {
      this.resetStatus = true
      const _this = this

      const r = Math.floor(Math.random() * 100)
      setTimeout(() => {
        const newArr = [`户籍${r}`, `入伍服役办理${r}`, `押办理${r}`, `证${r}`, '缴纳党费']
        _this.navList = _this.arrToIcon(newArr)
        _this.resetStatus = false
        }, 1200)
      },
      arrToIcon(arr) {
        const list = []
        arr.forEach((item, index) => {
          list.push(item)
          if(index !== arr.length - 1) {
            list.push('')
          }
        })
        return list
    }
   }
}
</script>
// css
<style lang="less" scoped>
       i {
           margin-right: 0.17rem;
            width: 0.28rem;
            height: 0.24rem;
            background: url("~@/assets/img/officArea/bu_001.png");
            background-size: 100% 100%;
            &.act {
              animation: rotateAnimal 1.2s infinite linear ;
              transform-origin: center center;
            }
            @keyframes rotateAnimal {
            0%{
              transform: rotate(0deg);
            }
            100%{
              transform: rotate(360deg);
            }
          }
       >span {
          height: .33rem;
          &.text {
            display: block;
            max-width: .96rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &.icon {
            display: block;
            width: 0.02rem;
            max-width: 0.02rem;
            font-style: normal;
            background: #fff;
            margin: 0 .11px;
            height: .24rem;
          }
        }

</style>