tracking.html 5.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="__INDEX__/css/base.css">
    <script type="text/javascript" src="__INDEX__/js/base.js" charset="utf-8"></script>
    <title>查看物流</title>
    <style>

        body,html{
            background: #fff;
            position:relative;
        }
        .head{

            height:1.68rem;
            padding: 0.36rem 0.34rem;


        }
        .bill{
            display:flex;
            align-items: center;
        }
        .bill_num,.bill_name,.bill_info_from,.bill_info_name{
            color: #000000;
            font-size: 0.28rem;
            font-weight: bold;

        }
        .bill_info{
            display:flex;
            align-items: center;
            margin-top: 0.23rem;
        }
        .line{
            width:7.5rem;
            height:0.16rem;
            background:#F5F6FA ;
        }
        .body{
            /*display:flex;*/
            align-items: center;
            font-size: 0;
            padding-top: 0.35rem;
            overflow: hidden;

        }
        .body_left{
            float:left;
            width:1rem;
            padding:0 0.32rem;

        }
        .body_right{
            float:left;
            width:6.18rem;

        }
        .circle_transportation{
            width:0.39rem;
            height:0.39rem;
        }
        .circle_notransportation{
            width:0.26rem;
            height:0.23rem;
            margin-left: 0.06rem;
        }
        .circle_transportation img,.circle_notransportation img{
            width:100%;
            height:100%;
        }
        .circle_line{
            width:0.19rem;
            height:1.17rem;
            border:none;
            border-right: 1px solid #f5f5f5;
        }
        .transportation_bill{
            width:6.2rem;
            /*height:2.43rem;*/
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 0.35rem;
            padding-top: 0.35rem;

        }
        .transportation_bill:first-child{
            padding-top: 0;
        }
        .transportation_bill_name{
            color: #000000;
            font-size: 0.28rem;
            font-weight: bold;

        }
        .notransportation_bill_name{
            color: #97A0A8;
            font-size: 0.28rem;
            font-weight: bold;

        }
        .transportation_bill_date{
            color:#53575C;
            font-size: 0.26rem;
            font-weight: bold;
            margin-top: 0.2rem;
        }
        .notransportation_bill_date{
            color:#97A0A8;
            font-size: 0.26rem;
            font-weight: bold;
            margin-top: 0.2rem;
        }

        .circle_ying{

        }
    </style>
</head>
<body>
<div class="container">
    <div class="head">
        <div class="bill">
            <p class="bill_name">运单号:</p>
            <p class="bill_num">{$tracking.LogisticCode}</p>
        </div>

        <div class="bill_info">
            <p class="bill_info_from">信息来源:</p>
            <p class="bill_info_name">{$kd_name}</p>
        </div>
    </div>
    <div class="line"></div>
    <div class="body">
        <div class="body_left">
            <volist name="tracking.Traces" id="vo">
                <div class="circle_ying">
                    <div class="circle_transportation">

                    </div>

                    <div class="circle_line"></div>
                </div>
            </volist>

        </div>
        <div class="body_right">
            <volist name="tracking.Traces" id="vo">
                <div class="transportation_bill">
                    <div class="transportation_bill_name">
                        {$vo.AcceptStation}

                    </div>
                    <div class="transportation_bill_date">{$vo.AcceptTime}</div>
                </div>
            </volist>
        </div>

    </div>
    <script src="__INDEX__/js/jquery.min.js"></script>
    <script>
        var circle=$(".circle_ying");
        console.log(circle);
        var list=$(".transportation_bill");
        console.log(list)
        for(var i=0;i<circle.length;i++){
            for(var j=0;j<list.length;j++) {
                if(i==j&&i==0&&j==0){

                    var h=$(list[j]).css("height");
                    console.log(h)
                    h=h.split("p");
                    h=parseInt(h[0]);
                    h=h+20;
                    console.log(h);
                    // console.log(h);
                    $(circle[i]).css("height",h+"px")
                    $(circle[i]).children(".circle_line").css("height",h+"px")
                }else if(i==j!=0){
                    var h=$(list[j]).css("height");
                    console.log(h)
                    h=h.split("p");
                    console.log(h[0]);
                    h=parseInt(h[0]);
                    console.log(h);
                    $(circle[i]).css("height",h+"px")
                    $(circle[i]).children(".circle_line").css("height",h+"px")
                }

            }
        }
    </script>
</div>
</body>
</html>