zhsz.html 5.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/zhsz.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_aj31y803pii.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>

    <style>
        .icon-caidan{
            font-size: 0.5rem;
        }
        .icon-magnifier{
            color: #999999;
        }
        .f_size{
            font-weight: normal;
            font-size: 0.18rem;
        }
        .icon-xiugai{
            margin-left: 0.15rem;
            font-size: 0.3rem;
            color: #999999;
            display: flex;
            font-weight: bold;
            align-items: center;
        }
        .top_dot{
            width: 0.08rem;
            height: 0.08rem;
            background:rgba(166,16,16,1);
            border:1px solid rgba(255, 255, 255, 1);
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }
        .color_black{
            color: black;
        }
        .margin_t{
            margin-top: 0.1rem;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="top">
        <!--顶部菜单-->
        <div class="top_t">
            <!--左-->
            <div class="top_t_left">
                <!--中文字-->
                <div class="top_t_left_text">

                </div>
                <!--菜单图标-->
                <div class="iconfont icon-caidan"></div>
            </div>
            <!--中-->
            <div class="top_t_middle">
                <img src="images/peke.png">
            </div>
            <!--右-->
            <div class="top_t_right">
                <!--铃声-->
                <div class="iconfont icon-10">
                    <!--小红点-->
                    <div class="top_dot"></div>
                </div>
                <!--头像-->
                <div class="top_t_right_pic">
                    <img src="images/1.png">
                </div>
            </div>
        </div>
        <!--底部搜索-->
        <div class="top_d">
            <div class="iconfont icon-magnifier"></div>
            <input class="top_d_input" placeholder="搜索音乐/作品/风格">
        </div>
    </div>
    <!--账号设置-->
    <div class="mid">
        <div class="mid_big">
            账号设置
        </div>
        <!--手机号-->
        <div class="mid_item">
            <div class="mid_item_left">
                手机号
            </div>
            <div class="mid_item_right">
                修改
            </div>
            <!--手机数字-->
            <div class="mid_item_num">
                1397****111
            </div>
        </div>
        <!--邮箱-->
        <div class="mid_item2">
            <div class="mid_item2_left">
                邮箱
            </div>
            <div class="mid_item2_right">
                设置邮箱
            </div>
        </div>
        <!--密码-->
        <div class="mid_item2">
            <div class="mid_item2_left">
                邮箱
            </div>
            <div class="mid_item2_right">
                修改密码
            </div>
        </div>
    </div>
    <!--第三方账号绑定-->
    <div class="bottom">
        <!--大标题-->
        <div class="bottom_big">
            第三方账号绑定
        </div>
        <!--图标-->
        <div class="bottom_item">
            <div class="bottom_item_box">
                <!--图片-->
                <div class="bottom_item_box_top">
                    <div class="bottom_item_box_top_p">
                        <img src="images/peke.png">
                    </div>
                    <div class="bottom_item_box_top_t">
                        微信
                    </div>
                    <!--<div class="bottom_item_box_top_t margin_t">-->
                        <!--已绑定"昵称"-->
                    <!--</div>-->
                </div>
                <!--下划线-->
                <div class="bottom_item_box_mid"></div>
                <!--文字-->
                <div class="bottom_item_box_bottom">
                    立即绑定
                </div>
            </div>

            <div class="bottom_item_box">
                <!--图片-->
                <div class="bottom_item_box_top">
                    <div class="bottom_item_box_top_p">
                        <img src="images/peke.png">
                    </div>
                    <div class="bottom_item_box_top_t">
                        微信
                    </div>
                    <div class="bottom_item_box_top_t margin_t">
                        已绑定"昵称"
                    </div>
                </div>
                <!--下划线-->
                <div class="bottom_item_box_mid"></div>
                <!--文字-->
                <div class="bottom_item_box_bottom">
                    取消绑定
                </div>
            </div>


        </div>
    </div>

</div>
</body>
<script>
    $('.bottom_item_box_bottom').click(function () {
        if($('.bottom_item_box_top').has()){
            $(this).addClass()
        }
    })

</script>
</html>