Django登录UI美化，使用验证码时输入框美化

最新推荐文章于 2024-06-14 08:08:37 发布

骑上单车去旅行

最新推荐文章于 2024-06-14 08:08:37 发布

阅读量133

点赞数 1

文章标签： django ui python

本文链接：https://blog.csdn.net/qq_46366184/article/details/137442277

版权

本文解析了使用Django框架和SimpleUI库构建的登录页面，展示了HTML结构、CSS样式和JavaScript交互，包括验证码输入、表单验证及粒子动画效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
{% load i18n static simpletags %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<!--
   The project use: django-simpleui
   source code：
   https://github.com/newpanjing/simpleui
-->
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% block title %}
        <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% endblock %}
    {% block icon %}
{#        <link rel="icon" href="{% static 'admin/simpleui-x/img/favicon.png' %}">#}
    {% endblock %}

    {% include 'admin/includes/css-part.html' %}

    {% block css %}
        <link rel="stylesheet" href="{% static 'admin/simpleui-x/css/login.css' %}?_=2.1">
    {% endblock %}
    {% block bg %}
        <style type="text/css">
            .bg {
                background: #f0f2f5;
                background-image: url('{% static 'admin/simpleui-x/img/bg.svg' %}');
                min-height: 100%;
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: 100%;
                padding: 20px 0;
                position: relative;
            }
        </style>
    {% endblock %}

    {% block head %}
        {# You can add code here. #}
    {% endblock %}
</head>
<body class="bg">
{% block main %}
    <div class="login-main">
    {% block logo %}
        <div class="logo">
            {% if "SIMPLEUI_LOGO"|get_config %}
                <img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}">
            {% else %}
                <img src="{% static 'admin/simpleui-x/img/logo.png' %}">
            {% endif %}
        </div>
    {% endblock %}

    {% block header %}
        <div class="header">{{ site_header }}</div>
    {% endblock %}

    {% block errors %}
        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                <el-alert
                        title="{{ error }}"
                        type="error">
                </el-alert>
            {% endfor %}
        {% endif %}
        {% if form.errors and not form.non_field_errors %}
            <p class="errornote">
                {% if form.errors.items|length == 1 %}
                    <el-alert title="{% trans "Please correct the error below." %}" type="error"></el-alert>
                {% else %}
                    <el-alert title="{% trans "Please correct the errors below." %}" type="error"></el-alert>
                {% endif %}
            </p>
        {% endif %}
    {% endblock %}
    {% block form %}
        <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
            {% csrf_token %}
            <div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-user" v-model="username" name="username"
                          placeholder="{% trans 'username' %}" autofocus></el-input>
            </div>
            <div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                          @keyup.enter.native="login()"
                          placeholder="{% trans 'password' %}" show-password></el-input>
            </div>
            <!--            验证码-->
            <div class="simpleui-input-inline">
                {{ form.captcha}}
                <input type="hidden" name="next" value="{{ next }}">
            </div>
            {% url 'admin_password_reset' as password_reset_url %}
              {% if password_reset_url %}

             <div class="password-reset-link">
                <a class="forgot-password" href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
              </div>
              {% endif %}
            <div class="simpleui-input-inline login-btn">
                <el-button :icon="loading?'el-icon-loading':''" @click="login()"
                           type="primary">{% trans 'Log in' %}</el-button>
            </div>

            <input type="hidden" name="next" value="{{ next }}"/>
        </form>
    {% endblock %}
</div>
{% endblock %}
{% include 'admin/includes/js-part.html' %}
{% block login_js %}
<script type="text/javascript" src="{% static 'admin/simpleui-x/js/login.js' %}?_=3.3"></script>
{% endblock %}

{% block  particles %}
    {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
        <!--
            Close login page particles see link:
            关闭登录页粒子动画请查看：
            https://github.com/newpanjing/simpleui/blob/master/QUICK.md#关闭登录页粒子动画
        -->
        <style type="text/css">
            #particles-js {
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: -1;
            }
            .forgot-password {
                  margin-top: 10px;
                  color: #3a8ee6;
                  text-decoration: none;
                  &:hover,
                  &:active,
                  &:focus {
                    color: lighten($teal, 7);
                  }
                }
            #id_captcha_1{
            position: absolute;
            margin:0 0 0 9px; /*上右下左*/
            width: 265px;
            font-size: inherit;
            -webkit-appearance: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            text-align: center;
        }
        </style>
        <!-- particles.js container -->
        <div id="particles-js"></div>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/particles.js' %}"></script>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/app.js' %}"></script>
    {% endif %}
{% endblock %}

</body>
</html>