首页 > 代码库 > 模仿京东淘宝的物流跟踪模板样式

模仿京东淘宝的物流跟踪模板样式

2024-09-06 20:23:41   216人阅读

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
        <style>
            body,
            html {
                background-color: #f2f2f2;
            }
            ul,li{
                list-style: none;
            }
            .order_track {
                background-color: #fff;
                margin-bottom: 0.5em;
                padding: 0.5em;
            }

            .order_track p {
                font-size: 1.0em;
                line-height: 1.5;
                color: #666;
                margin-bottom: 0;
            }

            .order_track p span {
                color: #333;
            }

            .order_logistics{
                padding-left: 2.0em;
                background-color: #fff;
            }

            .order-flow {
                padding-left: 0em;
                padding-bottom: 1.0em;
                position: relative;
            }
            .order-flow:before{
                content: ‘‘;
                position: absolute;
                width: 200%;
                height: 200%;
                border-left: 1px solid rgb(230, 230, 230);/* 直接改变border的位置即可 */
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scale(0.5, 0.5);
                transform: scale(0.5, 0.5);
                box-sizing: border-box;
            }

            .of-storey li {
                position: relative;
                padding: 10px;
                /* border-bottom: 1px solid #e8e5e5; */
            }
            .of-storey li:after{
                content: " ";
                position: absolute;
                left: 0;
                width: 100%;
                height: 1px;
                bottom: 0;
                border-bottom: 1px solid rgb(230, 230, 230);
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }

            .of-storey li span {
                display: block;
                font-size: 1.0em;
                color: #666;
            }

            .of-storey li span.time {
                font-size: 0.9em;
                color: #999;
            }

            .of-storey li .icon {
                position: absolute;
                top: 45%;
                left: -2.75em;
                width: 9px;
                height: 9px;
                border-radius: 5px;
                background-color: #ccc;
            }

            .of-storey li .icon.on {
                background-color: #0099ff;
            }
        </style>
    </head>
    <body>
        <div class="order_logistics">
            <div class="order-flow">
                <ul class="of-storey">
                    <li>
                        <span class="icon on"></span>
                        <span>快递快递快递快递快递快递</span>
                        <span class="time">2017-03-04 9:26</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

 

模仿京东淘宝的物流跟踪模板样式


联系
我们