uniApp之在伪类中使用iconfont

最新推荐文章于 2024-04-21 18:27:53 发布

原创最新推荐文章于 2024-04-21 18:27:53 发布 · 456 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Millia‘s work

本文展示了如何使用Vue.js和CSS来创建一个处理进度的视图组件。内容包括HTML结构、CSS样式以及数据绑定，通过iconfont图标增强视觉效果，详细解析了各个部分的实现细节，如进度条、时间戳和状态指示图标。

效果如下：

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(https://blog.csdn.net/"//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"}
]