uniApp之在伪类中使用iconfont

最新推荐文章于 2024-03-21 16:22:58 发布

米柆

最新推荐文章于 2024-03-21 16:22:58 发布

阅读量379

点赞数

分类专栏： Millia's work 文章标签： html5 css html

本文链接：https://blog.youkuaiyun.com/millia/article/details/119926066

版权

Millia's work 专栏收录该内容

57 篇文章

订阅专栏

效果如下：

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"}
]