wangyong
/
card


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<html>

<head>
    <title>订单列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_2056629_vzvl0jvb2q.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <style>


 .o-tit{
    font-size: 16px;
    font-weight: bold;
    color: rgb(80, 160, 255);
    margin: 1rem auto;
    padding-left: 1rem;
 }
 .o-where {
    margin: 1rem auto;
    padding-left: 1rem;
 }

.o-where ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1rem auto;
    font-size: 14px;
}
.o-serch{
    padding: 5px 11px;
    border: 1px solid #f2f2f2;
    background-color: #f2f2f2;
    color: #323232;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: border .3s;
}
.o-serch input{
    line-height: 2.4em;
    height: 2.4em;
    min-height: 2.0em;
    overflow: hidden;
    flex: 1;
    font-size: 14px;
    display: flex;
    align-items: center;
    border: none;
    color: grey;
    text-overflow: clip;
    white-space: pre;
    word-break: keep-all;
   
    line-height: inherit;
}
.o-li{
    display: flex;
    justify-content: space-around;
}
.o-li p{
    margin-top: 10px;
}
.o-li span{
    margin-left: 10px;
}
.o-right p{
    /* color: rgb(144, 147, 153); */
    font-size: 12px;
}
.o-seled{
    color:#50a0ff;
    font-size: 14px;
}

.detail{
    position: absolute;
    z-index: 99;
    background-color: #cccccc87;
    height: 100%;
    width: 100%;
    /* border-radius: 5%; */
    top: 0;
    left: 0;
    display: none;
}
.m-body{
    background-color: rgb(237 237 237);
    width: 85%;
    margin: 0 auto;
    margin-top: 26%;
    height: 26rem;
    border-radius: 5%;
    overflow: auto;
    scrollbar-width: none;
}
.scrollable-div::-webkit-scrollbar {
  display: none; /* 对于Chrome和Safari隐藏滚动条 */
}
.m-head1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 1rem;
    width: 92%;
    margin: auto;
    font-size: 18px;
    font-weight: 700;
    color: rgba(0,0,0,.6);
}
.o-detail{
    background-color: #fff;
    margin: 1.2rem 0.6rem;
    padding: 1rem;

}
.o-copy{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    color: rgba(0,0,0,.35);
}

.o-key{
    flex: 1;
    font-size: 12px;
    color: rgba(80,160,255,.8);
    display: flex;
    justify-content: space-between;
    margin: 0.5rem auto;
}
.o-val{
    font-size: 14px;
}

    </style>
</head>

<body>

    <div class="o-body">

        <div class="o-head">
            <div class="o-tit">订单列表</div>
            <div class="o-where">
                <ul>
                    <li class="o-seled">全部</li>
                    <li>待处理</li>
                    <li>已提交</li>
                    <li>运输中</li>
                    <li>待激活</li>
                    <li>已激活</li>
                    <li>退单</li>
                </ul>
                <ul>
                    <li class="o-seled">全部</li>
                    <li>首充50及以上</li>
                    <li>首充100及以上</li>

                </ul>
            </div>
            <div class="o-serch">
                <i class="iconfont iconsousuo"></i>
                <input type="search" name="serch" value="" placeholder="请输入完整手机号" />
                
            </div>
            <div class="o-list">
                <div class="o-li">
                    <div class="o-left">
                        <p><span style="font-size: 16px;color: rgb(144, 147, 153);">1</span><span style="font-size: 16px;color: rgb(144, 147, 153);">|</span><span>张三</span></p>
                        <p style="font-size: 12px;color: rgb(144, 147, 153);">1388****12345</p>
                    </div>
                    <div class="o-right">
                        <p><span>(秒返)联通星空卡</span><span>已激活</span></p>
                        <p><span style="color: rgb(144, 147, 153);">2023-03-30 14:25:20</span></p>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <div class="detail" id="myDiv">
        <div class="m-body">
            <div class="m-head1"><div class="xq">详情</div><div id="hideButton"><i class="iconfont iconguanbi"></i></div></div>
            <div  class="o-detail">
                <p class="o-key"><span>用户</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>张三</span><span>13111111116</span></p>
                <p class="o-key"><span>套餐</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>(秒返)联通星空卡</span><span>【已激活】</span></p>
                <p class="o-key"><span>快递</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>京东</span><span>JDV013410759958</span></p>
                <p class="o-key"><span>首充</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>100元</span><span>2023-04-02 12：12:30</span></p>
                <p class="o-key"><span>秒返</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>已反</span></p>
                <p class="o-key"><span>代理</span><span class="o-copy">复制</span></p>
                <p class="o-val"><span>李四</span><span>13111111116</span></p>
            </div>
        </div>
</div>


    <div class="uni-tabbar-bottom">
        <div class="uni-tabbar" style="background-color: rgb(255, 255, 255); backdrop-filter: none;">
            <div class="uni-tabbar-border" style="background-color: rgb(228, 231, 237);"></div>
            <div class="uni-tabbar__item">
                <div class="uni-tabbar__bd" style="height: 50px;" data-url="index.html">
                    <div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
                        <img src="static/images/home.png">
                    </div>
                    <div class="uni-tabbar__label"
                        style="color: rgb(50, 50, 50); font-size: 10px; line-height: normal; margin-top: 3px;"> 首页
                    </div>
                </div>
            </div>
            <div class="uni-tabbar__item"><!---->
                <div class="uni-tabbar__bd" style="height: 50px;" data-url="order.html">
                    <div class="uni-tabbar__icon" style="width: 24px; height: 24px;"><img src="static/images/order-act.png">
                    </div>
                    <div class="uni-tabbar__label"
                        style="color: rgb(150, 150, 150); font-size: 10px; line-height: normal; margin-top: 3px;">
                        订单 </div>
                    <!---->
                </div>
            </div>
            <div class="uni-tabbar__item"><!---->
                <div class="uni-tabbar__bd" style="height: 50px;" data-url="bill.html">
                    <div class="uni-tabbar__icon" style="width: 24px; height: 24px;"><img
                            src="static/images/income.png"></div>
                    <div class="uni-tabbar__label"
                        style="color: rgb(150, 150, 150); font-size: 10px; line-height: normal; margin-top: 3px;">
                        账单 </div><!---->
                </div>
            </div>
            <div class="uni-tabbar__item"><!---->
                <div class="uni-tabbar__bd" style="height: 50px;" data-url="my.html">
                    <div class="uni-tabbar__icon" style="width: 24px; height: 24px;"><img src="static/images/my.png">
                    </div>
                    <div class="uni-tabbar__label"
                        style="color: rgb(150, 150, 150); font-size: 10px; line-height: normal; margin-top: 3px;">
                        我的 </div><!---->
                </div>
            </div>
        </div>
        <div class="uni-placeholder" style="height: 50px;"></div>
    </div>


</body>

</html>
<script>
    $(document).ready(function () {
        $('#hideButton').click(function () {
            $('#myDiv').hide();
        });

        $('.o-li').click(function () {
            $('#myDiv').show();
        });

        $('.uni-tabbar__bd').click(function(){
    var url=$(this).data('url');
    window.location.href=url;
  });

    });


</script>