css实现成长值类似的进度条效果

效果：

代码：

<view>
    <view class="levelGrow">
	    <view class="progress"></view>
    </view>
    <view class="inner">
	    <view>{{level}}</view>
	    <view>成长值{{growth}}/{{nextGrowth}}</view>
	    <view>{{nextLevel}}</view>
    </view>
</view>

css：

.levelGrow{
  width: 80%;
  height: 60rpx;
  line-height: 60rpx;
  /* background-color: #3675F9; */
  background-color: #ffffff;
  opacity: 0.2;
  position: relative;
  margin-top: 30rpx;
}
.progress{
  width: 60%;
  height: 100%;
  background-color: #3675F9;
  position: absolute;
  top: 0;
  left: 0;
}
.inner{
  z-index: 99;
  width: 80%;
  height: 60rpx;
  line-height: 60rpx;
  position: absolute;
  top: 160rpx;
  left: 0;
  font-size: 24rpx;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

实现原理就是z-index和position重叠实现 

注意，progerss的width值可以使用js动态控制，根据数值计算出百分比，然后实现进度条的效果