<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/login.css"/>
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
    <title>享像派修图师助手v3.0.1</title>
</head>
<body>
<div id="root" v-cloak>
    <img id="login_logo" src="static/ic_login_logo.png"/>
    <input id="mobile" v-model="mobile" placeholder="请输入手机号码" type="tel">
    <div id="codediv">
        <input id="code" v-model="code" :placeholder="mode === MODE_VCODE ? '请输入验证码' : '请输入密码'"
               :style="{'border-right': mode === MODE_VCODE ? '1px solid #e5e5e5' : 'none'}"
               :type="mode === MODE_VCODE ? 'number' : 'password'" @keyup.13="login">
        <button id="getVerifyCode" v-if="mode === MODE_VCODE"
                :disabled="mobile.length === 0" @click="getVcode">{{timeout}}</button>
    </div>
    <p id="login_res">{{errMsg}}</p>
    <button class="login" @click="login"
            :disabled="code.length === 0 || mobile.length === 0">登录/注册</button>

    <button class="login"
            style="color: #333333; background: white; border: 1px solid #666666; margin-top: 14px"
            @click="mode = !mode ? 1 : 0; code = '';">
        {{mode === MODE_VCODE ? '密码登录' : '验证码登录'}}
    </button>

    <div id="tip" v-if="tip">
        <span style="width: auto;height: auto; background: #333333aa;margin: auto auto;padding: 2px 8px;font-size: 13px;color: white; border-radius: 5px">{{tip}}</span>
    </div>
</div>
<div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/md5.min.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
</div>
</body>
</html>