<?xml version="1.0" encoding="UTF-8"?>

<ui namespace="VankeLoginBoard_iPhone">
    <linear orientation="v" class="wrapper">
        <image id='bg'/>
        
        <linear orientation="v" class="logo-wrapper">
            <image class='icon' />
            <label class="title">万科商业地产管理平台</label>
        </linear>
        
        <linear orientation="v" class="form-wrapper">
            <input id="txtUserName" class="input-field" placeholder="请输入用户名"></input>
            <input id="txtPwd" class="input-field pwd" placeholder="请输入密码"></input>
            <button id="btnLogin" class="login-btn disabled-btn">登  录</button>
        </linear>
        
        <linear orientation="h" class="bottom">
            <button id="btnGetPwd" class="btn">找回密码</button>
            <button id="btnRegister" class="btn">用户注册</button>
        </linear>
        
    </linear>
    
    <style type="text/css">
        
        .wrapper {
            width: 100%;
            height: 100%;
        }
        
        #bg {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: white;
            image-mode: fill;
            image-src: url(login_bg.png);
        }
        
        .logo-wrapper {
            width: 100%;
            height: 140px;
            align: center;
            margin-top: 20%;
        }
        
        .logo-wrapper > .icon {
            image-mode: center;
            image-src: url(logo.png);
            width: 100%;
        }
        
        .logo-wrapper > .title {
            font-size: 17px;
            font-weight: bold;
            font-family: 微软雅黑;
            text-align: center;
            width: 100%;
            color: white;
            padding-top: 70px;
        }
        
        .form-wrapper {
            width: 100%;
            height: 300px;
            align: center;
            position: absolute;
            top: 50%;
            left: 0px;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .input-field {
            width: 100%;
            height: 50px;
            text-align: left;
            background-color: white;
            border-width: 1px;
            border-radius: 5px;
            border-color: gray;
            shadow-offset: 5px;
            shadow-radius: 2px;
            shadow-color: gray;
            font-size: 15px;
        }
        
        .form-wrapper .disable-input {
            background-color: #e8e8e8;
            disabled: true;
        }
        
        .pwd {
            input-secure: true;
            margin-top: 5px;
        }
        
        .login-btn {
            width: 100%;
            height: 50px;
            float: center;
            font-size: 20px;
            font-weight: bold;
            background-color: #ed1b23;
            border-radius: 5px;
            margin-top: 10px;
            color: white;
        }
        
        .disabled-btn {
            background-color: #cbcbcb !important;
            color: gray;
        }
        
        .disable {
            background-color: #DDDDDD !important;
        }
        
        .bottom {
            width: 100%;
            height: 40px;
            position: absoulte;
            left: 0px;
            bottom: 0px;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .bottom > .btn {
            font-size: 15px;
            color: white;
            width: 60px;
            height: 100%;
        }
        
        #btnRegister {
            float: right;
        }
        
        #btnGetPwd,#btnRegister {
            display: none;
        }

    </style>
</ui>

