mirror of https://github.com/jumpserver/jumpserver
perf: Modify the layout to flex
parent
c4a348aac6
commit
6095e9c9bd
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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' %}
|
||||||
|
|
Loading…
Reference in New Issue