漂亮的前端物流显示

最新推荐文章于 2024-08-20 13:06:45 发布

lao_peii

最新推荐文章于 2024-08-20 13:06:45 发布

阅读量2.1k

点赞数

文章标签： html css react

本文链接：https://blog.csdn.net/lao_peii/article/details/103877188

版权

物流样式

  <div className="logistics-flow lgs-p-re">
                            <ul className="logistics">
                                {
                                    flowList.map((item, index) => {
                                        return <li key={index}>
                                            {
                                                index === 0 ? <span className="top-white"/> : ''
                                            }
                                            {
                                                index === flowList.length - 1 ?
                                                    <span className="bottom-white"/> : ''
                                            }
                                            <span className={`icon ${index === 0 ? 'on' : ''}`}/>
                                            <span className={index === 0 ? 'first' : ''}>
                                            {item.status}
                                        </span>
                                            <span
                                                className={index === 0 ? 'first' : ''}>
                                            {item.time}
                                        </span>
                                        </li>
                                    })
                                }
                            </ul>
                        </div>

logistics = [ ]为一个物流查询结果，属性为一个数组

css样式

li{
    list-style-type:none;
}
.flow-list {
    margin-top: 20px;
    padding: 0 10px 0 20px;
    background-color: #fff;
}

.logistics-flow {
    /*margin-top: 20px;*/
    padding: 5px 10px 0;
    border-left: 2px solid #f1f3f7;
}

.lgs-p-re {
    position: relative;
}


.logistics li {
    position: relative;
    padding: 15px 10px;
    border-bottom: 1px dotted #e8e5e5;
}

.logistics li .icon {
    position: absolute;
    /* top: 26 %;*/
    left: -29px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dbe0eb;
}

.logistics li .top-white {
    position: absolute;
    top: -5%;
    left: -17.5px;
    width: 12px;
    height: 20%;
    background-color: #fff;
}

.logistics li .bottom-white {
    position: absolute;
    top: 27px;
    left: -17.5px;
    width: 12px;
    height: calc(100% - 26px);
    background-color: #fff;
}

.logistics li .icon.on {
    background-color: #09B687;
    top: 14%;
    width: 18px;
    height: 18px;
    left: -32px;
    border: solid #d5f2e5 2px;
}

.logistics li span {
    display: block;
    font-size: 14px;
    color: #a1a5b1;
}

.logistics li span:last-child {
    color: #d0d2d7;
}

.logistics li span.first {
    color: #09B687;
}