wangyong
/
card


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<html>

<head>
    <title>商品管理</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>
       .g-head{
            display: flex;
            font-size: 1rem;
            color: rgb(99, 99, 100);
            font-weight: bold;
            margin: 1rem auto;
            width: 96%;
       }
       .g-serch{
        width: 96%;
        margin: 1rem auto;
        border: 1px #ccc solid;
        height: 2.4rem;
        font-size: 14px;
        padding-left: 1rem;
        line-height: 2.2rem;
        border-radius: 10px;
       }
       .g-serch input{
        border: none;
        height: 2rem;
        width: 76%;
        margin-left: 0.6rem;
        margin-right: 1rem;
       }
       .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 p{
    color: #ff768a;
    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);
}
.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: hsla(0,0%,100%,0.8);
    width: 85%;
    margin: 0 auto;
    margin-top: 26%;
    height: 30rem;
    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);
}
.d-li{
    margin:1rem auto;
    color:#716868;
}
.d-but{
    width: 100%;
}
.d-but button{
    margin: 1rem 0.5rem;
    color: #353333;
    font-size: 0.8rem;
    padding: 5px;

}
    </style>
</head>

<body>
    <div class="g-main">
        
        <div class="g-head">
            <p style="transform: rotate(180deg);" onclick="window.history.go(-1);"><i class="iconfont iconxiangyou1"></i></p>
            <p style="margin-left: 35%;">商品管理</p>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ccc;"></div>

        <div class="g-serch"><i class="iconfont iconsousuo"></i><input type="text" 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><span>138***1234</span></p>
                </div>
                <div class="o-right">
                    <p><span>已实名</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><span>138***1234</span></p>
                </div>
                <div class="o-right">
                    <p><span style="color:#7f7a7a">已拉黑</span></p>
                </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 style="width: 90%;margin: 1rem auto;">
           <div class="d-li"><span>姓名：</span><span>张三</span></div>
           <div class="d-li"><span>上级：</span><span>李四</span></div>
           <div class="d-li"><span>电话：</span><span>13111111111</span></div>
           <div style="text-align: center;" class="d-but">
                <button>修改密码</button>
                <button>拉黑代理</button>
                <button>分配套餐</button>

           </div>
        </div>
        </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>