效果如下:
THML:
<view class="process">
<view class="ht">处理进度</view>
<view class="processList">
<view v-for="(list,index) in arrivalProcess" :key="index">
<text>{{list.content}}</text>
<text>{{list.time}}</text>
</view>
</view>
</view>
CSS:
/*引入iconfont*/
@import url("//at.alicdn.com/t/font_xxxxxx.css");
.process{padding:2rem 0 0 0;box-shadow:0 0 0.5rem #fdd3c6;background:#fff;border-radius:1rem;}
.processList{padding-left:3rem;margin:2rem 1rem 0 1rem;position:relative;}
.processList:before{content:"";display:block;position:absolute;left:1rem;top:0;width:0.1rem;height:82%;background:#ff7832;}
.processList >view{display:flex;justify-content:space-between;position:relative;padding-bottom:2rem;}
.processList >view text:last-child{color:#969696;font-size:1.3rem;}
.processList >view:before{font-family:"iconfont";display:block;position:absolute;left:-2.8rem;top:-0.2rem;font-size:2rem;color:#ff7832;background:#fff;}
.processList >view:nth-child(1):before{content:"\e60b"}
.processList >view:nth-child(2):before{content:"\e6d9"}
.processList >view:nth-child(3):before{content:"\e610"}
数据Data:
arrivalProcess:[
{content:"申请已提交",time:"2021-06-30 15:40"},
{content:"处理中...",time:"2021-06-30 15:40"},
{content:"微信到账成功",time:"2021-06-30 15:40"}
]
划重点:
1、iconfont码要转译
2、要加字体 font-family:"iconfont"