React Js 仿京東物流列表查詢

本文出自：

http://blog.csdn.net/wyk304443164

我們先看一下效果：

• 上面沒有什麼好說的
• 下面的列表的左邊，我看了一下

https://home.m.jd.com

• 他是在最左邊加了一個border
• 上面下面都多了一點

於是我修改了一下-修改成了一個span擋住了上下的多餘的條子。className 都是照抄的，人懶。。

OrderFlow.js

/**
 * Created by wuyakun on 2017/6/19.
 */

import React from 'react';
import BaseComponent from './../../common/BaseComponent';
import './css/order_flow.css';

/**
 * 物流詳情
 */

class OrderFlow extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            flowList: [
                {
                    detail: '【無錫市】 您的訂單正在【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中配送途中',
                    date: '2017-06-19 07:52:44',
                },
                {
                    detail: '【無錫市】 您的訂單正在配送途中',
                    date: '2017-06-19 07:52:44',
                },
                {
                    detail: '【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中【無錫市】 您的訂單正在配送途中',
                    date: '2017-06-19 07:52:44',
                },
            ]
        }
    }

    render() {

        let {flowList} = this.state;

        //TODO key
        return (

            <div>
                <div className="new-order-track">
                    <div className="img-content">
                        <img src={require('./images/order_flow.png')}/>
                    </div>
                    <div>
                        <span>物流名稱：sfgsdfgdgsdfsfgsdfgdgsdf</span>
                        <span>物流編號：000000000000000000001</span>
                    </div>
                </div>

                <div className="flow-list">
                    <div className="new-order-flow new-p-re">
                        <ul className="new-of-storey">
                            {
                                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.detail}
                                    </span>
                                        <span
                                            className={index === 0 ? 'first' : ''}>
                                        {item.date}
                                    </span>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>


        );
    }
}

export default OrderFlow;

order_flow.css

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

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

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

.new-order-arr {
    position: absolute;
    top: -4px;
    left: -5px;
    width: 9px;
    height: 9px;
}

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

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

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

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

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

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

.new-of-storey li span:last-child {
    color: #d0d2d7;
}

.new-of-storey li span.first {
    color: #09B687;
}

/*上方*/

.new-order-track {
    background-color: #fff;
    padding: 20px 15px;
}

.new-order-track span {
    display: block;
    font-size: 14px;
    color: #6e6e6e;
    margin-left: 15px;
    width: 260px;
}

.new-order-track div {
    display: inline-block;
    vertical-align: middle;
}

.new-order-track .img-content {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 50%;
    background-color: #09B687;
    text-align: center;
}

.new-order-track .img-content img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}