perf: Modify the layout to flex

pull/15760/head
wangruidong 2025-07-18 15:50:50 +08:00 committed by 老广
parent c4a348aac6
commit 6095e9c9bd
5 changed files with 148 additions and 112 deletions

View File

@ -69,23 +69,27 @@
} }
.login-content { .login-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 500px; height: 500px;
width: 1000px; width: 1000px;
margin-top: auto;
margin-bottom: auto;
} }
body { body {
position: relative; box-sizing: border-box;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #f3f3f3; background-color: #f3f3f3;
{#height: calc(100vh - (100vh - 470px) / 3);#} {#height: calc(100vh - (100vh - 470px) / 3);#}
} }
.captcha { .captcha {
float: right; float: right;
} }
@ -330,7 +334,8 @@
</h2> </h2>
<ul class=" nav navbar-top-links navbar-right"> <ul class=" nav navbar-top-links navbar-right">
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#" target="_blank"> <a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#"
target="_blank">
<i class="fa fa-globe fa-lg" style="margin-right: 2px"></i> <i class="fa fa-globe fa-lg" style="margin-right: 2px"></i>
<span>{{ current_lang.title }}<b class="caret"></b></span> <span>{{ current_lang.title }}<b class="caret"></b></span>
</a> </a>
@ -447,6 +452,7 @@
$('#password-hidden').val(passwordEncrypted); //返回给密码输入input $('#password-hidden').val(passwordEncrypted); //返回给密码输入input
$('#login-form').submit(); //post提交 $('#login-form').submit(); //post提交
} }
function checkHealth() { function checkHealth() {
let url = "{% url 'health' %}"; let url = "{% url 'health' %}";
requestApi({ requestApi({
@ -455,6 +461,7 @@
flash_message: false, flash_message: false,
}) })
} }
setInterval(checkHealth, 30 * 1000); setInterval(checkHealth, 30 * 1000);
</script> </script>
</html> </html>

View File

@ -15,16 +15,30 @@
<style> <style>
.passwordBox { .passwordBox {
max-width: 560px; max-width: 560px;
margin: 0 auto; margin-bottom: auto;
padding: 100px 20px 20px 20px; padding: 100px 20px 20px 20px;
width: 100%;
} }
.ibox-content { .ibox-content {
padding: 30px; padding: 30px;
} }
.ibox-context-margin { .ibox-context-margin {
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
body {
box-sizing: border-box;
min-height: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.wrapper {
margin: auto;
}
</style> </style>
{% block custom_head_css_js %} {% endblock %} {% block custom_head_css_js %} {% endblock %}
</head> </head>

View File

@ -18,14 +18,9 @@
} }
.markdown-footer { .markdown-footer {
position: absolute; flex-grow: 0;
bottom: 0; flex-shrink: 0;
left: 50%;
width: 285px; width: 285px;
transform: translate(-50%, -50%);
@media (min-width: 768px) {
top: 97%;
}
} }
.markdown-footer p { .markdown-footer p {

View File

@ -12,6 +12,26 @@
<link href="{% static 'css/style.css' %}" rel="stylesheet"> <link href="{% static 'css/style.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/otp.css' %}"/> <link rel="stylesheet" href="{% static 'css/otp.css' %}"/>
<script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script> <script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script>
<style>
body {
box-sizing: border-box;
min-height: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
header {
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.wrapper {
margin: auto;
}
</style>
</head> </head>
<body style="background-color: #f3f3f4"> <body style="background-color: #f3f3f4">
@ -26,10 +46,10 @@
<a href="{% url 'index' %}">{% trans 'Home page' %}</a> <a href="{% url 'index' %}">{% trans 'Home page' %}</a>
</div> </div>
</header> </header>
<body> <div class="wrapper">
{% block body %} {% block body %}
{% endblock %} {% endblock %}
</body> </div>
<footer> <footer>
<div style="margin-top: 100px;"> <div style="margin-top: 100px;">
{% include '_copyright.html' %} {% include '_copyright.html' %}