wangyong
/
card


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<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;
        }

        .income-view .neck {
            padding: 8px 12px;
            border-top: 1px solid #f6f6f6;
            background-color: hsla(0, 0%, 100%, .8);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            position: -webkit-sticky;
            position: sticky;
            top: 44px;
            font-size: 11px;
            line-height: 1.8;
        }

        .income-view .neck .u-subsection--button {
            padding: 4px;
            border-radius: 8px;
        }

        .u-subsection--button {
            height: 32px;
            background-color: #eeeeef;
            padding: 3px;
            border-radius: 3px;
            align-items: stretch;
        }


        .u-subsection {
            display: flex;
            flex-direction: row;
            position: relative;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
        }

        .u-subsection__bar {
            position: absolute;
            transition-property: color, -webkit-transform;
            transition-property: transform, color;
            transition-property: transform, color, -webkit-transform;
            transition-duration: .3s;
            transition-timing-function: ease-in-out;
        }

        .u-subsection--button__bar {
            background-color: #fff;
            border-radius: 3px !important;
        }

        .u-subsection__item--first {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .u-subsection__item--no-border-right {
            border-right-width: 0 !important;
        }

        .u-subsection__item {
            display: flex;
            flex-direction: row;
            flex: 1;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .u-subsection__item__text {
            font-size: 12px;
            line-height: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            transition-property: color;
            transition-duration: .3s;
        }

        .seled {
            color: rgb(255, 169, 110);
            background-color: #fff;
            font-weight: bold;

        }

        .o-li {
            display: flex;
            justify-content: space-between;
            width: 96%;
            margin: 1rem auto;
            border-bottom: 1px solid #ccc;
            padding-bottom: 15px;
        }

        .o-li p {
            margin-top: 10px;
        }

        .o-li span {
            margin-left: 10px;
        }
        .o-right{
            text-align: right;
        }
        .o-right p {
            color: rgb(255, 169, 110);
            font-size: 14px;
            font-weight: 800;
        }

        .g-col-up {
            color: rgb(102, 241, 109);
        }

        .g-col-dow {
            color: rgb(250, 68, 68);
        }

        .o-left {
            color: rgb(131, 128, 128);
        }
    </style>
</head>

<body>

    <div class="o-body">

        <div class="o-head">
            <div class="o-tit">账单记录</div>
        </div>

        <div class="neck">
            <div class="u-subsection u-subsection--button" style="background-color: rgb(238, 238, 239);">

                <div
                    class="u-subsection__item u-subsection__item--0 u-subsection__item--no-border-right u-subsection__item--first seled">
                    <text class="u-subsection__item__text">
                        <span>本月收入</span>
                    </text>
                </div>
                <div class="u-subsection__item u-subsection__item--1 u-subsection__item--no-border-right">
                    <text class="u-subsection__item__text">
                        <span>今日收入</span>
                    </text>
                </div>
                <div class="u-subsection__item u-subsection__item--2 u-subsection__item--last">
                    <text class="u-subsection__item__text">
                        <span>提现记录</span>
                    </text>
                </div>
            </div>
        </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;text-align: center;;">137***12345</p>
                </div>
                <div class="o-right">
                    <p><span>66</span></p>
                    <p><span style="font-size: 12px; color: #b3b0b0;font-weight: normal;">2023-10-25 12:25：23</span></p>
                </div>
            </div>
            <div class="o-li">
                <div class="o-left">
                    <p><span style="font-size: 16px;color: rgb(144, 147, 153);">2</span><span
                            style="font-size: 16px;color: rgb(144, 147, 153);">|</span><span>(秒返)联通星空卡</span></p>
                            <p style="font-size: 12px;text-align: center;;">137***12345</p>
                </div>
                <div class="o-right">
                    <p><span>66</span></p>
                    <p><span style="font-size: 12px; color: #b3b0b0;font-weight: normal;">2023-10-25 12:25：23</span></p>
                </div>
            </div>
            <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;text-align: center;;">2023-10-25 12:25：23</p>
                </div>
                <div class="o-right">
                    <p><span>成功</span></span></p>
                    <p><span style="font-size: 14px; color: #1c9ff7;font-weight: blod;">100</span></p>
                </div>
            </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.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-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="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;
        });
        $('.u-subsection__item').click(function () {
            $('.u-subsection__item').removeClass('seled');
            $(this).addClass('seled');;


        });


    });


</script>