利用css以及p元素制作图标

利用css以及p元素制作图标

// html部分
<div class="processTitleBox">
              <div>
                <div class="processTitleItem">
                  <p>1</p>
                  资源信息
                </div>
                <img src="@/assets/l-img/icon/resourceInformation.png"/>
              </div>
              <div>
                <div class="processTitleItem">
                  <p style="color: #ccc">2</p>
                  信息项填写
                </div>
                <img src="@/assets/l-img/icon/informationItem.png"/>
              </div>
            </div>

//css部分
.processTitleBox > div {
    display inline-block;
    position relative
  }

  .processTitleItem {
    position absolute;
    left: 30px;
    top: 9px;
    display flex;
    justify-content left
    line-height 30px;
    color #fff
    font-size 18px;

    p {
      margin-right 5px;
      text-align center;
      color #2D81F2;
      width 30px;
      height 30px;
      line-height 30px
      background-color: #fff;
      border-radius 15px;
    }
  }