perf: 登录页调整

1.两个输入框左侧增加图标
2.两个输入框增加输入提示
3.语言图标大小减小
This commit is contained in:
陈劲松
2020-02-20 10:34:12 +08:00
parent 6663d6f733
commit 38d4587966
7 changed files with 48 additions and 15 deletions

View File

@@ -20,6 +20,15 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="user" unicode="&#58924;" d="M507.845486 895.42656c185.607314 0 336.0768-150.469486 336.0768-336.0768 0-116.501943-59.274971-219.153554-149.310903-279.446674 153.76384-53.324069 291.986286-174.442789 323.9936-355.854629a43.844754 43.844754 0 0 0-35.55328-50.7904c-2.574629-0.468114-5.143406-0.684617-7.665372-0.684617a43.838903 43.838903 0 0 0-43.125028 36.226194c-40.023771 226.801371-272.582949 312.747154-412.882652 314.444069l-4.224731 0.023406a44.587886 44.587886 0 0 0-1.872457 0.04096l-4.01408-0.029258-1.427749-0.023405c-138.421394 0-371.95776-83.675429-415.837623-307.65056l-1.26976-6.828617c-3.744914-21.240686-22.252983-36.202789-43.125028-36.202789a43.844754 43.844754 0 0 0-43.224503 51.463314c31.691337 179.533531 167.397669 300.020297 319.24224 354.186972C232.155429 338.265234 171.762834 441.7536 171.762834 559.34976c0 185.607314 150.463634 336.0768 336.0768 336.0768z m0-87.666103c-136.981943 0-248.416549-111.440457-248.416549-248.410697S370.863543 310.939063 507.839634 310.939063s248.410697 111.440457 248.410697 248.410697S644.809874 807.760457 507.845486 807.760457z" horiz-adv-x="1024" />
<glyph glyph-name="password" unicode="&#58922;" d="M814.08 529.92h-76.8v76.8C737.28 731.136 636.421 832 512 832S286.72 731.141 286.72 606.72v-76.8h-76.8c-56.556 0-102.4-45.844-102.4-102.4V38.4c0-56.556 45.844-102.4 102.4-102.4h604.16c56.556 0 102.4 45.844 102.4 102.4V427.52c0 56.556-45.844 102.4-102.4 102.4z m-455.68 76.8c0 84.695 68.905 153.6 153.6 153.6s153.6-68.905 153.6-153.6v-76.8H358.4v76.8zM844.8 38.4c0-16.937-13.778-30.72-30.72-30.72H209.92c-16.942 0-30.72 13.783-30.72 30.72V427.52c0 16.937 13.778 30.72 30.72 30.72h604.16c16.942 0 30.72-13.783 30.72-30.72V38.4zM512 345.6a35.84 35.84 0 0 1-35.84-35.84v-174.08a35.84 35.84 0 1 1 71.68 0V309.76A35.84 35.84 0 0 1 512 345.6z" horiz-adv-x="1024" />
<glyph glyph-name="info-normal-copy" unicode="&#58997;" d="M510.07475185 722.549577c184.07513524 0 339.05762888-150.14263273 339.05762886-339.05762887 0-188.91499613-154.98249363-339.05762888-339.05762886-339.05762886-184.07513524 0-339.05762888 150.14263273-339.05762888 339.05762886C171.01712297 567.54034424 321.15975571 722.52283786 510.07475185 722.52283786z m0-40.67087173C345.97406792 681.87870527 211.71473385 547.59263205 211.71473385 383.46520898999995c0-164.10068392 134.28607323-298.36001732 298.41349696-298.36001799 164.07394409 0 298.36001732 134.25933409 298.36001731 298.38675713 0 164.10068392-134.28607323 298.38675713-298.38675713 298.38675715z m0-225.73537087c14.54632114 0 24.22604226-9.67972111 24.22604157-24.22604158v-217.95415878c0-14.54632114-9.67972111-24.22604226-24.22604157-24.22604225-14.51958132 0-24.22604226 9.67972111-24.22604226 24.22604225v217.95415878c0 14.54632114 9.70646026 24.22604226 24.22604226 24.22604158z m0 121.10347008c19.38618135 0 38.77236273-14.54632114 38.77236272-38.77236271 0-24.19930244-14.54632114-38.74562358-38.77236272-38.74562359-24.22604226 0-38.77236273 19.38618135-38.77236341 38.77236341 0 24.19930244 19.38618135 38.74562358 38.77236341 38.74562289z" horiz-adv-x="1024" />
<glyph glyph-name="info-normal" unicode="&#58923;" d="M509.164308 882.648615c271.123692 0 499.396923-221.144615 499.396923-499.396923 0-278.252308-228.273231-499.396923-499.396923-499.396923-271.123692 0-499.396923 221.144615-499.396923 499.396923C9.767385 654.336 230.912 882.609231 509.164308 882.609231z m0-59.904C267.460923 822.744615 69.710769 624.9550770000001 69.710769 383.212308c0-241.703385 197.789538-439.453538 439.532308-439.453539 241.664 0 439.453538 197.750154 439.453538 439.492923 0 241.703385-197.789538 439.492923-439.492923 439.492923z m0-332.484923c21.425231 0 35.682462-14.257231 35.682461-35.682461v-321.024c0-21.425231-14.257231-35.682462-35.682461-35.682462-21.385846 0-35.682462 14.257231-35.682462 35.682462v321.024c0 21.425231 14.296615 35.682462 35.682462 35.682461z m0 178.372923c28.553846 0 57.107692-21.425231 57.107692-57.107692 0-35.643077-21.425231-57.068308-57.107692-57.068308-35.682462 0-57.107692 28.553846-57.107693 57.107693 0 35.643077 28.553846 57.068308 57.107693 57.068307z" horiz-adv-x="1024" />

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 29 KiB

File diff suppressed because one or more lines are too long

View File

@@ -5,11 +5,13 @@
<div class='login-box'>
<div class="login-label"></div>
<div class="login-input">
<input v-model="loginData.username" autocomplete="new-password"></input>
<i class="nz-icon nz-icon-user"></i>
<input v-model="loginData.username" autocomplete="new-password" placeholder="Username"></input>
</div>
<div class="login-label"></div>
<div class="login-input">
<input v-model="loginData.password" type="password" autocomplete="new-password"></input>
<i class="nz-icon nz-icon-password"></i>
<input v-model="loginData.password" type="password" autocomplete="new-password" placeholder="Password"></input>
</div>
<div class="login-foot">
<button @click="login" class="login-btn" id="login">Login</button>
@@ -136,12 +138,21 @@ export default {
.login-box .login-input {
padding: 20px 0;
height: 60px;
position: relative;
}
.login-box .login-input .nz-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 20px;
}
.login-box .login-input input {
height: 100%;
width: calc(100% - 30px);
width: calc(100% - 60px);
background-color: rgba(0, 0, 0, 0.55);
padding-left: 30px;
padding-left: 60px;
font-size: 20px;
border: none;
outline: none;
@@ -173,22 +184,23 @@ export default {
position: relative;
cursor: pointer;
}
.login-foot-lang .nz-icon-lang-en, .login-foot-lang .nz-icon-lang-zh {
font-size: 40px;
.login-foot-lang .nz-icon:not(.nz-icon-arrow-up):not(.nz-icon-arrow-down) {
font-size: 30px;
color: white;
margin-right: 30px;
line-height: 45px;
}
.login-foot-lang-list {
position: absolute;
height: 32px;
padding: 16px;
height: 25px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.55);
top: 107px;
right: 0;
border-radius: 4px;
}
.login-foot-lang-list .nz-icon {
font-size: 32px;
font-size: 25px;
color: white;
cursor: pointer;
}