登入介面完成（十五）

weixin_34320159發表於2018-06-12

（1）front/signbase.html

{% from 'common/_macros.html' import static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{% block title %}{% endblock %}</title>

    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{{ static('common/zlajax.js') }}"></script>
    <link rel="stylesheet" href="{{ static("common/sweetalert/sweetalert.css") }}">
    <script src="{{ static("common/sweetalert/sweetalert.min.js") }}"></script>
    <script src="{{ static("common/sweetalert/zlalert.js") }}"></script>
    <script src="{{ static('common/zlparam.js') }}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

     <link rel="stylesheet" href="{{ static('front/css/front_signbase.css') }}">

    {% block head %}
    
    {% endblock %}

</head>
<body>

    <div class="outer-box">
        <div class="logo-box">
            <a href="/">
                <img src="{{ static('common/images/logo.jpg') }}" alt="">
            </a>
        </div>

        <h2 class="page-title">
            {% block h2_block %}

            {% endblock %}
        </h2>

        <div class="sign-box">
            {% block signbox %}

            {% endblock %}
        </div>
        <span style="display: none" id="return-to-span">{{ return_to }}</span>
    </div>

</body>
</html>

（2）front/signup

{% extends 'front/signbase.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    仙劍論壇註冊
{% endblock %}

{% block head %}
    <script src="{{ static('front/js/front_signup.js') }}"></script>

{% endblock %}

{% block h2_block %}
    仙劍論壇註冊
{% endblock %}

{% block signbox %}
    <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" name="telephone" placeholder="手機號碼">
                    <span class="input-group-btn">
                        <button id="sms-captcha-btn" class="btn btn-default">傳送驗證碼</button>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="sms_captcha" placeholder="簡訊驗證碼">
            </div>

             <div class="form-group">
                <input type="text" class="form-control" name="username" placeholder="使用者名稱">
            </div>

             <div class="form-group">
                <input type="password" class="form-control" name="password1" placeholder="密碼">
            </div>

             <div class="form-group">
                <input type="password" class="form-control" name="password2" placeholder="確認密碼">
            </div>

             <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" name="graph_captcha" placeholder="圖形驗證碼">
                    <span class="input-group-addon captcha-addon">
                        <img id="captcha-img" class="captcha-img" src="{{ url_for('common.graph_captcha') }}" alt="">
                    </span>
                </div>
            </div>

            <div class="form-group">

                <button id="submit-btn" class="btn btn-warning btn-block">立即註冊</button>
            </div>
{% endblock %}

（3）front/css/front_signbase.css
把之前signup中的css放到公共的地方，登入頁面也需要

body {
    background: #f3f3f3;
}

.outer-box {
    width: 854px;
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
}

.logo-box {
    text-align: center;
    padding-top: 40px;
}

.logo-box img {
    width: 60px;
    height: 60px;
}

.page-title {
    text-align: center;
}

.sign-box {
    width: 300px;
    margin: 0 auto;
    padding-top: 50px;
}

.captcha-addon {
    padding: 0;
    overflow: hidden;
}

.captcha-img {
    width: 94px;
    height: 32px;
    cursor: pointer;
}

（4）front/signin.html

{% extends 'front/signbase.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
仙劍論壇登入
{% endblock %}

{% block head %}
    <style>
    .resetpwd-link{
        float:right;
    }
    </style>
{% endblock %}

{% block h2_block %}
仙劍論壇賬號登入
{% endblock %}

{% block signbox %}
    <div class="form-group">
        <input class="form-control" type="text" name="telephone" placeholder="手機號" >
    </div>
    <div class="form-group">
            <input class="form-control" type="password" name="password" placeholder="密碼" >
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" name="remember" value="1">記住我
        </label>
    </div>
    <div class="form-group">
        <button id="submit-btn" class="btn btn-warning btn-block">立即登入</button>
    </div>
    <div class="form-group">
        <a href="{{ url_for('front.signup') }}" class="signup-link">沒有賬號?立即註冊</a>
        <a href="#" class="resetpwd-link">忘記密碼?</a>
    </div>
{% endblock %}

相關文章