BBS论坛(十五)
15.1.登录界面完成
(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 %}
posted on 2018-06-09 15:59 zhang_derek 阅读(518) 评论(0) 编辑 收藏 举报