uni-app实现 步骤条

实现如图样式

 html部分代码如下

<view class="range-div">
			<view class="title">投资期限与收益</view>
			<!-- 步骤条 -->
			<view class="step-deiv">
				<view class="step-name">
					<view :class="step>0? 'active':'default'">募集开始</view>
					<view :class="step>1? 'active':'default'">募集结束</view>
					<view :class="step>2? 'active':'default'">产品成立</view>
					<view :class="step>3? 'active':'default'">产品到期</view>
				</view>
				<view class="step-list">
					<view :class="step>0? 'active-step1':'step1'"></view>
					<view :class="