Skip to content

Commit

Permalink
fix: 调整登录页面布局 TencentBlueKing#144
Browse files Browse the repository at this point in the history
  • Loading branch information
v_yutyi committed Nov 9, 2021
1 parent 8563cd6 commit a83ecc7
Show file tree
Hide file tree
Showing 11 changed files with 163 additions and 31 deletions.
21 changes: 14 additions & 7 deletions src/login/bklogin/templates/account/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
<link rel="icon" type="image/x-icon" href="{{STATIC_URL}}favicon.ico">
<link href="{{STATIC_URL}}css/bk.{{CSS_SUFFIX}}" rel="stylesheet" type="text/css" />
<link href="{{STATIC_URL}}assets/bk-icon-2.0/iconfont.css" rel="stylesheet" type="text/css" />
<link href="{{STATIC_URL}}assets/blueking-icon/index.css" rel="stylesheet" type="text/css" />
<link href="{{STATIC_URL}}css/login.{{CSS_SUFFIX}}?v={{STATIC_VERSION}}" rel="stylesheet" type="text/css" />
<title>{% trans '登录|蓝鲸智云企业版' %}</title>
</head>
<body>
<div class="page-content">
<div class="login-from">
<div class="logo-title">
<img src="{{STATIC_URL}}{% trans 'img/logo/logo_cn.svg' %}" height="33" width="178" alt="">
<span class="title">{% trans '蓝鲸社区版' %}</span>
<img src="{{STATIC_URL}}{% trans 'img/logo/v7.png' %}" alt="">
</div>
{% if not custom_login %}
<div class="from-detail">
Expand All @@ -24,30 +26,35 @@
{% endif %}
</div>
<div class="form-login">
<p class="label">{% trans '用户名' %}</p>
<div class="user group-control">
<i class="bk-icon icon-user"></i>
<input id="user" type="text" name="username" placeholder="{% trans '用户名/邮箱/手机号' %}" autocomplete="off">
<input id="user" type="text" name="username" placeholder="{% trans '请输入用户名' %}" autocomplete="off">
<ul class="user-domain-list" id="user-domain-list">

<input id="domains" type="hidden" name="domains" value="{{categories}}" >

</div>
<p class="label">{% trans '密码' %}</p>
<div class="pwd group-control">
<i class="bk-icon icon-lock"></i>
<input class="password" id="password" type="password" name="password" value="" placeholder="{% trans '密码' %}">
<i class="bk-icon icon-invisible-eye" id="invisible"></i>
<input class="password" id="password" type="password" name="password" value="" placeholder="{% trans '请输入密码' %}">
</div>
<p class="change-password">
<!-- <span>{% trans '你的密码已过期，请' %}</span>
<a href="javascript: void(0);" target="_blank">{% trans '修改密码' %}</a> -->
</p>
<div>
<input type="hidden" name="next" value="{{ next }}" />
<input type="hidden" name="app_id" value="{{ app_id }}">
</div>
<div class="btn-content clearfix">
<button class="login-btn" type="button" id="login-btn">{% trans '登录' %}</button>
<button class="login-btn" type="button" id="login-btn">{% trans '立即登录' %}</button>
<!--<span class="protocol-btn">{% trans '查看用户协议' %}</span>-->
</div>
<div class="action clearfix">

{% if "/plain/" not in APP_PATH %}
<a href="javascript: void(0);" class="protocol-btn fl">{% trans '查看用户协议' %}</a>
<a href="javascript: void(0);" class="protocol-btn fl">{% trans '用户协议 >' %}</a>
{% endif %}

<a href="{{ reset_password_url }}" class="password-btn fr" target="_blank">{% trans '忘记密码？' %}</a>
Expand Down
Binary file added src/login/static/assets/blueking-icon/fonts/iconcool.eot
View file
Binary file not shown.
47 changes: 47 additions & 0 deletions src/login/static/assets/blueking-icon/fonts/iconcool.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/login/static/assets/blueking-icon/fonts/iconcool.ttf
View file
Binary file not shown.
Binary file added src/login/static/assets/blueking-icon/fonts/iconcool.woff
View file
Binary file not shown.
1 change: 1 addition & 0 deletions src/login/static/assets/blueking-icon/iconcool.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"iconName":"bk","icons":[{"name":"yuyanqiehuanzhongwen","svgCode":"<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M825.6 809.6c0 12.8-9.6 22.4-22.4 22.4H249.6c-12.8 0-22.4-9.6-22.4-22.4V483.2l-131.2 128h67.2V832c0 35.2 28.8 64 64 64h598.4c35.2 0 64-28.8 64-64v-281.6l-64 60.8V809.6zM227.2 214.4C227.2 201.6 236.8 192 249.6 192h560c12.8 0 22.4 9.6 22.4 22.4V512l131.2-137.6h-73.6V192c0-35.2-28.8-64-64-64H227.2c-35.2 0-64 28.8-64 64v252.8l64-64V214.4zM556.8 704v-124.8h86.4v25.6h57.6v-217.6h-144V320h-57.6v67.2H352V608h57.6v-28.8h86.4V704H556.8zM643.2 524.8h-86.4v-83.2h86.4V524.8zM496 524.8h-86.4v-83.2h86.4V524.8z\"/></svg>","codepoint":"\\e102"},{"name":"yuyanqiehuanyingwen","svgCode":"<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M464 425.6v-60.8H300.8v291.2h169.6v-60.8h-102.4v-60.8h89.6v-54.4h-89.6v-54.4H464zM227.2 483.2v329.6c0 12.8 9.6 22.4 22.4 22.4l0 0h553.6c12.8 0 22.4-9.6 22.4-22.4l0 0v-201.6l64-60.8V832c0 35.2-28.8 64-64 64l0 0H227.2c-35.2 0-64-28.8-64-64l0 0v-220.8H96L227.2 483.2zM758.4 368v291.2h-67.2l-115.2-188.8-3.2-3.2v195.2h-64v-291.2h73.6l112 179.2 3.2 3.2v-188.8H758.4zM825.6 128c35.2 0 64 28.8 64 64l0 0v182.4h73.6L828.8 512V214.4c0-12.8-9.6-22.4-22.4-22.4l0 0H249.6C236.8 192 227.2 201.6 227.2 214.4l0 0v166.4l-64 64V192c0-35.2 28.8-64 64-64l0 0H825.6z\"/></svg>","codepoint":"\\e101"},{"name":"kejian","svgCode":"<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M512 384a128 128 0 1 0 128 128A128 128 0 0 0 512 384Zm0 192a64 64 0 1 1 64-64A64 64 0 0 1 512 576Z\"/><path d=\"M512 240C264.64 240 64 512 64 512S264.64 784 512 784 960 512 960 512 759.36 240 512 240Zm0 480C352 720 208 580.96 147.04 512 208 442.88 352 304 512 304s304 139.04 364.96 208C816 581.12 672 720 512 720Z\"/></svg>","codepoint":"\\e103"},{"name":"invisible-eye","svgCode":"<svg viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M500.16 304a355.04 355.04 0 0 1 128 24.8l48-48.96a426.08 426.08 0 0 0-176-39.84v64Z\"/><path d=\"M763.2 328.8l-46.08 46.08a822.24 822.24 0 0 1 160 138.88 807.52 807.52 0 0 1-86.88 85.12C723.84 654.24 620.48 720 502.56 720a331.52 331.52 0 0 1-111.04-19.52l-49.44 49.28a402.4 402.4 0 0 0 160 34.24C768 784 960 512 960 512A962.56 962.56 0 0 0 763.2 328.8Z\"/><path d=\"M254.88 701.12l46.08-46.08a706.56 706.56 0 0 1-156.64-144C197.44 442.88 328.16 304 500.16 304V240h0C234.72 240 64 512 64 512A838.72 838.72 0 0 0 254.88 701.12Z\"/><path d=\"M512 640a128 128 0 0 0 110.24-192.96L888 181.28A32 32 0 1 0 842.72 136L576.96 401.76a128 128 0 0 0-176 176L136 842.72a32 32 0 1 0 45.28 45.28L447.04 622.24A128 128 0 0 0 512 640Zm64-128a64 64 0 0 1-64 64 60.96 60.96 0 0 1-16-2.4L573.6 496A60.96 60.96 0 0 1 576 512Zm-64-64a60.96 60.96 0 0 1 16 2.4L450.4 528A60.96 60.96 0 0 1 448 512 64 64 0 0 1 512 448Z\"/></svg>","codepoint":"\\e104"}]}
37 changes: 37 additions & 0 deletions src/login/static/assets/blueking-icon/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@font-face {
font-family: "bk";
src: url("fonts/iconcool.svg#iconcool") format("svg"),
url("fonts/iconcool.ttf") format("truetype"),
url("fonts/iconcool.woff") format("woff"),
url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
font-weight: normal;
font-style: normal;
}

.bk-icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'bk' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
text-align: center;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-yuyanqiehuanzhongwen:before {
content: "\e102";
}
.icon-yuyanqiehuanyingwen:before {
content: "\e101";
}
.icon-kejian:before {
content: "\e103";
}
.icon-invisible-eye:before {
content: "\e104";
}
72 changes: 50 additions & 22 deletions src/login/static/css/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,8 @@ input[type=number]::-webkit-outer-spin-button {
}

.page-content .login-from {
width: 400px;
min-height: 400px;
width: 450px;
min-height: 452px;
border-radius: 2px;
position: absolute;
top: 15%;
Expand All @@ -165,32 +165,35 @@ input[type=number]::-webkit-outer-spin-button {
}

.page-content .login-from .logo-title {
width: 100%;
height: 110px;
border-bottom: 1px solid #F0F1F5;
border-radius: 2px 2px 0 0;
background: #fff;
text-align: center;
line-height: 110px
opacity: 1;
background: #ffffff;
border-radius: 8px 8px 0 0;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.10);
padding: 32px 36px;
}

.page-content .login-from .logo-title .title {
font-size: 24px;
font-weight: 600;
color: #313238;
}

.page-content .login-from .logo-title img {
height: 35px;
vertical-align: top;
margin-top: 37px;
vertical-align: text-bottom;
}

.page-content .login-from .from-detail {
position: relative;
background: #fff;
padding-bottom: 44px;
border-radius: 0 0 8px 8px;
}

.page-content .login-from .from-detail .is-danger-tip {
position: absolute;
color: #EA3636;
top: 11px;
left: 55px;
left: 38px;
font-size: 12px
}

Expand Down Expand Up @@ -220,10 +223,27 @@ input[type=number]::-webkit-outer-spin-button {

.page-content .login-from .form-login {
width: 100%;
padding: 0 55px 0 56px
padding: 0 38px;
}

.page-content .login-from .form-login .label {
color: #313238;
margin-bottom: 12px;
}

.page-content .login-from .form-login .change-password {
height: 22px;
}

.page-content .login-from .form-login .change-password span {
color: #ea3636;
}

.page-content .login-from .form-login.is-danger .group-control i {
.page-content .login-from .form-login .change-password a {
color: #1768EF;
}

.page-content .login-from .form-login.is-danger .group-control p {
color: #ff5656
}

Expand Down Expand Up @@ -291,20 +311,28 @@ input[type=number]::-webkit-outer-spin-button {
}

.page-content .login-from .form-login .group-control {
width: 290px;
height: 42px;
width: 100%;
height: 40px;
border-radius: 2px;
position: relative
}

.page-content .login-from .form-login .user {
margin-bottom: 32px;
}

.page-content .login-from .form-login .group-control i {
position: absolute;
font-size: 16px;
top: 12px;
left: 14px;
right: 13px;
color: #979BA5;
}

.page-content .login-from .form-login .group-control i:hover {
cursor: pointer;
}

.page-content .login-from .form-login .group-control+.group-control {
margin-top: 15px
}
Expand All @@ -314,7 +342,7 @@ input[type=number]::-webkit-outer-spin-button {
height: 100%;
outline: 0;
border: 1px solid #C4C6CC;
padding: 0 20px 0 37px;
padding: 0 40px 0 12px;
color: #737987;
border-radius: 2px
}
Expand All @@ -329,7 +357,7 @@ input[type=number]::-webkit-outer-spin-button {

.page-content .login-from .form-login .btn-content {
font-size: 0;
padding-top: 30px
padding-top: 10px
}

.page-content .login-from .form-login .login-btn {
Expand All @@ -356,15 +384,15 @@ input[type=number]::-webkit-outer-spin-button {
.page-content .login-from .form-login .password-btn {
font-size: 14px;
letter-spacing: 0;
color: #4D66C6;
color: #63656e;
display: inline-block;
cursor: pointer;
float: right
}

.page-content .login-from .form-login .protocol-btn:hover,
.page-content .login-from .form-login .password-btn:hover {
color: #526eb5
color: #1768EF;
}

.language-switcher {
Expand Down
Loading

0 comments on commit a83ecc7

Please sign in to comment.