douban
/
loginframe.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/loginframe.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="switch">
            <img src="./images/switch1.png" alt="">
            <span>扫码登录</span>
            <img class="hide" src="./images/switch2.png" alt="">
            <span>短信登录/注册</span>
        </div>
        <div class="title clearfix">
            <span class="left selected">短信登录 / 注册</span>
            <span class="right">密码登录</span>
        </div>
        <div class="short_msg">
            <form>
                <div class="form-error hide">手机号不能为空</div>
                <div class="form-txt">
                    <span>请仔细阅读 <a href="">豆瓣使用协议、隐私政策</a></span>
                </div>
                <div class="form-item">
                    <input class="phone" type="text" placeholder="手机号">
                    <span class="port">+86</span>
                    <div class="mask hide"></div>
                    <div class="port-item hide">
                        <span class="close">X</span>
                        <p>选择国际区号</p>
                        <ul>
                            <li class="selected"><span class="left">中国大陆</span><span class="right">+86</span></li>
                            <li><span class="left">地区2</span><span class="right">+2</span></li>
                            <li><span class="left">地区3</span><span class="right">+3</span></li>
                            <li><span class="left">地区4</span><span class="right">+4</span></li>
                            <li><span class="left">地区5</span><span class="right">+5</span></li>
                            <li><span class="left">地区6</span><span class="right">+6</span></li>
                            <li><span class="left">地区7</span><span class="right">+7</span></li>
                            <li><span class="left">地区8</span><span class="right">+8</span></li>
                            <li><span class="left">地区9</span><span class="right">+9</span></li>
                            <li><span class="left">地区10</span><span class="right">+10</span></li>
                            <li><span class="left">地区11</span><span class="right">+11</span></li>
                            <li><span class="left">地区12</span><span class="right">+12</span></li>
                            <li><span class="left">地区13</span><span class="right">+13</span></li>
                            <li><span class="left">地区14</span><span class="right">+14</span></li>
                            <li><span class="left">地区15</span><span class="right">+15</span></li>
                            <li><span class="left">地区16</span><span class="right">+16</span></li>
                            <li><span class="left">地区17</span><span class="right">+17</span></li>
                            <li><span class="left">地区18</span><span class="right">+18</span></li>
                            <li><span class="left">地区19</span><span class="right">+19</span></li>
                            <li><span class="left">地区20</span><span class="right clearfix">+20</span></li>
                        </ul>
                    </div>
                </div>
                <div class="form-item">
                    <input type="text" placeholder="验证码">
                    <span class="tip get-code">获取验证码</span>
                </div>
                <div class="form-item">
                    <button disabled>登录豆瓣</button>
                </div>
                <div class="form-txt">
                    <span class="tip right">收不到验证码</span>
                </div>
            </form>
        </div>
        <div class="password hide">
            <form>
                <div class="form-txt">
                    <span class="right tip">找回密码</span>
                </div>
                <div class="form-item">
                    <input type="text" placeholder="手机号 / 邮箱">
                </div>
                <div class="form-item">
                    <input type="password" placeholder="密码">
                </div>
                <div class="form-item">
                    <button disabled>登录豆瓣</button>
                </div>
                <div class="form-txt">
                    <span class="right tip">海外手机登录</span>
                </div>
            </form>
        </div>
        <div class="qr-code hide">
            <span class="tip1">二维码登录</span>
            <img src="./images/二维码.jpg" alt="">
            <span class="tip2">请打开豆瓣客户端扫一扫</span>
        </div>
        <div class="login-3">
            <span>第三方登录: </span>
            <i class="iconfont icon-weixin"></i>
            <i class="iconfont icon-weibo-circle-fill"></i>
        </div>
    </div>
    <script src="./js/loginframe.js"></script>
</body>

</html>