Commit b2fc01d5 authored by “yiyousong”'s avatar “yiyousong”

perf:修改登录框

parent bbed011a
......@@ -55,15 +55,15 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe608;</div>
<span class="icon iconfont">&#xe901;</span>
<div class="name">闭眼睛</div>
<div class="code-name">&amp;#xe901;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">不可见</div>
<div class="code-name">&amp;#xe607;</div>
<span class="icon iconfont">&#xe608;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
......@@ -102,9 +102,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1692777691620') format('woff2'),
url('iconfont.woff?t=1692777691620') format('woff'),
url('iconfont.ttf?t=1692777691620') format('truetype');
src: url('iconfont.woff2?t=1693536528455') format('woff2'),
url('iconfont.woff?t=1693536528455') format('woff'),
url('iconfont.ttf?t=1693536528455') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
......@@ -131,20 +131,20 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-dot"></span>
<span class="icon iconfont icon-hidden"></span>
<div class="name">
闭眼睛
</div>
<div class="code-name">.icon-dot
<div class="code-name">.icon-hidden
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hidden"></span>
<span class="icon iconfont icon-dot"></span>
<div class="name">
不可见
</div>
<div class="code-name">.icon-hidden
<div class="code-name">.icon-dot
</div>
</li>
......@@ -204,18 +204,18 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dot"></use>
<use xlink:href="#icon-hidden"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-dot</div>
<div class="name">闭眼睛</div>
<div class="code-name">#icon-hidden</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-hidden"></use>
<use xlink:href="#icon-dot"></use>
</svg>
<div class="name">不可见</div>
<div class="code-name">#icon-hidden</div>
<div class="name"></div>
<div class="code-name">#icon-dot</div>
</li>
<li class="dib">
......
@font-face {
font-family: "iconfont"; /* Project id 4222008 */
src: url('iconfont.woff2?t=1692777691620') format('woff2'),
url('iconfont.woff?t=1692777691620') format('woff'),
url('iconfont.ttf?t=1692777691620') format('truetype');
src: url('iconfont.woff2?t=1693536528455') format('woff2'),
url('iconfont.woff?t=1693536528455') format('woff'),
url('iconfont.ttf?t=1693536528455') format('truetype');
}
.iconfont {
......@@ -13,12 +13,12 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-dot:before {
content: "\e608";
.icon-hidden:before {
content: "\e901";
}
.icon-hidden:before {
content: "\e607";
.icon-dot:before {
content: "\e608";
}
.icon-pwd:before {
......
window._iconfont_svg_string_4222008='<svg><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="" ></path></symbol><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M853.504 451.072c46.592-34.816 85.504-76.288 110.592-123.904 7.168-13.824 1.536-31.232-11.776-37.888-6.656-3.584-14.336-4.608-21.504-2.048-7.168 2.048-13.312 7.168-16.384 14.336-62.464 118.272-223.744 198.144-401.92 198.144S173.568 419.84 110.592 301.568c-3.584-6.656-9.216-11.776-16.384-13.824-7.168-2.048-14.848-1.536-21.504 2.048-14.336 6.656-19.456 24.576-11.776 37.888 25.088 47.616 63.488 90.112 110.592 123.904l-107.52 134.144c-6.656 8.704-8.192 20.48-3.584 30.208 4.608 9.728 14.848 16.384 25.6 16.384 8.704 0 16.384-3.584 22.016-10.752l111.616-138.752c49.664 27.648 106.496 48.128 167.936 60.416l-71.168 155.136c-6.656 14.336 0 31.232 14.336 37.376 4.096 1.536 8.192 3.072 11.776 3.072 10.752 0 20.992-6.144 26.112-16.384l76.8-170.496c21.504 2.048 44.032 4.096 66.56 4.096 18.432 0 35.84-1.536 53.248-3.072l77.312 168.96c3.072 6.656 8.704 12.288 15.872 14.848 7.168 2.56 14.848 2.048 21.504-1.024 14.336-6.144 20.48-23.552 14.336-37.376l-69.632-153.6c63.488-10.24 124.416-31.744 180.224-62.976l111.104 138.752c5.632 6.656 13.824 10.752 22.016 10.752 6.144 0 12.288-2.048 17.408-6.144 12.288-9.728 14.336-27.648 4.608-39.936l-106.496-134.144z m0 0" ></path></symbol><symbol id="icon-pwd" viewBox="0 0 1024 1024"><path d="M725.4 928.3H299.7c-88 0-159.6-71.6-159.6-159.6V555.8c0-88 71.6-159.6 159.6-159.6h425.7c88 0 159.6 71.6 159.6 159.6v212.8c0 88.1-71.6 159.7-159.6 159.7zM299.7 460c-52.8 0-95.8 43-95.8 95.8v212.8c0 52.8 43 95.8 95.8 95.8h425.7c52.8 0 95.8-43 95.8-95.8V555.8c0-52.8-43-95.8-95.8-95.8H299.7z" fill="#A1A0A5" ></path><path d="M778.6 406.8h-63.9c0-110.9-90.2-244.8-202.2-244.8S310.3 296 310.3 406.8h-63.9c0-142.7 116.2-308.6 266.1-308.6s266.1 165.9 266.1 308.6z" fill="#A1A0A5" ></path></symbol><symbol id="icon-show" viewBox="0 0 1024 1024"><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M512 266.112C229.248 266.112 0 586.24 0 586.24s229.248 320.128 512 320.128 512-320.128 512-320.128-229.248-320.128-512-320.128z m0 532.992c-117.568 0-212.864-95.296-212.864-212.864 0-117.568 95.296-212.864 212.864-212.864s212.864 95.296 212.864 212.864c0 117.568-95.296 212.864-212.864 212.864z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M602.08 960.576H423.488c-169.408 0-303.2 0-303.2-87.872v-17.568c0-164.672 136.032-298.624 303.2-298.624H602.08c167.168 0 303.2 133.952 303.2 298.624v17.568c-0.032 87.872-140.544 87.872-303.2 87.872zM423.456 609.184c-138.112 0-250.496 110.304-250.496 245.92v17.568c0 35.168 144.768 35.168 250.496 35.168h178.592c87.52 0 250.496 0 250.496-35.168v-17.568c0-135.616-112.384-245.92-250.496-245.92H423.456z m80.384-70.304c-132.736 0-240.672-106.4-240.672-237.184S371.104 64.544 503.84 64.544s240.672 106.368 240.672 237.152S636.544 538.88 503.84 538.88zM315.872 301.696c0 101.696 84.32 184.48 187.968 184.48s187.968-82.752 187.968-184.48-84.32-184.448-187.968-184.448S315.872 200 315.872 301.696z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var c,i,o,l,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4222008,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),c()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=c,l=n.document,d=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,a())})}function a(){d||(d=!0,o())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}a()}}(window);
\ No newline at end of file
window._iconfont_svg_string_4222008='<svg><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M469.333333 681.386667c-36.053333-2.432-71.253333-8.533333-104.96-17.92l-69.802666 149.674666a42.368 42.368 0 0 1-56.533334 20.266667 42.666667 42.666667 0 0 1-20.821333-56.32l66.986667-143.658667a451.712 451.712 0 0 1-148.906667-112.682666 388.693333 388.693333 0 0 1-70.570667-119.338667 42.666667 42.666667 0 1 1 80.128-29.354667 303.445333 303.445333 0 0 0 55.210667 93.098667C270.634667 547.413333 383.018667 597.333333 505.728 597.333333c122.752 0 235.136-49.962667 305.706667-132.181333a303.445333 303.445333 0 0 0 55.210666-93.098667 42.666667 42.666667 0 0 1 80.128 29.354667 388.693333 388.693333 0 0 1-70.570666 119.338667 423.68 423.68 0 0 1-18.773334 20.48l104.362667 104.362666a42.666667 42.666667 0 0 1-0.298667 60.032 42.368 42.368 0 0 1-60.032 0.298667l-109.653333-109.653333c-20.48 14.08-42.24 26.581333-65.024 37.418666l66.901333 143.36a42.666667 42.666667 0 0 1-20.821333 56.362667 42.368 42.368 0 0 1-56.533333-20.266667l-69.717334-149.546666a520.533333 520.533333 0 0 1-91.946666 16.810666v130.645334A42.666667 42.666667 0 0 1 512 853.333333c-23.722667 0-42.666667-18.944-42.666667-42.24v-129.706666z" fill="#3D3D3D" ></path><path d="M176.128 524.373333a42.368 42.368 0 0 1 60.032 0.256 42.666667 42.666667 0 0 1 0.298667 60.074667l-121.216 121.216a42.368 42.368 0 0 1-60.074667-0.298667 42.666667 42.666667 0 0 1-0.298667-60.032l121.258667-121.258666z" fill="#3D3D3D" ></path></symbol><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="" ></path></symbol><symbol id="icon-pwd" viewBox="0 0 1024 1024"><path d="M725.4 928.3H299.7c-88 0-159.6-71.6-159.6-159.6V555.8c0-88 71.6-159.6 159.6-159.6h425.7c88 0 159.6 71.6 159.6 159.6v212.8c0 88.1-71.6 159.7-159.6 159.7zM299.7 460c-52.8 0-95.8 43-95.8 95.8v212.8c0 52.8 43 95.8 95.8 95.8h425.7c52.8 0 95.8-43 95.8-95.8V555.8c0-52.8-43-95.8-95.8-95.8H299.7z" fill="#A1A0A5" ></path><path d="M778.6 406.8h-63.9c0-110.9-90.2-244.8-202.2-244.8S310.3 296 310.3 406.8h-63.9c0-142.7 116.2-308.6 266.1-308.6s266.1 165.9 266.1 308.6z" fill="#A1A0A5" ></path></symbol><symbol id="icon-show" viewBox="0 0 1024 1024"><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M512 266.112C229.248 266.112 0 586.24 0 586.24s229.248 320.128 512 320.128 512-320.128 512-320.128-229.248-320.128-512-320.128z m0 532.992c-117.568 0-212.864-95.296-212.864-212.864 0-117.568 95.296-212.864 212.864-212.864s212.864 95.296 212.864 212.864c0 117.568-95.296 212.864-212.864 212.864z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M602.08 960.576H423.488c-169.408 0-303.2 0-303.2-87.872v-17.568c0-164.672 136.032-298.624 303.2-298.624H602.08c167.168 0 303.2 133.952 303.2 298.624v17.568c-0.032 87.872-140.544 87.872-303.2 87.872zM423.456 609.184c-138.112 0-250.496 110.304-250.496 245.92v17.568c0 35.168 144.768 35.168 250.496 35.168h178.592c87.52 0 250.496 0 250.496-35.168v-17.568c0-135.616-112.384-245.92-250.496-245.92H423.456z m80.384-70.304c-132.736 0-240.672-106.4-240.672-237.184S371.104 64.544 503.84 64.544s240.672 106.368 240.672 237.152S636.544 538.88 503.84 538.88zM315.872 301.696c0 101.696 84.32 184.48 187.968 184.48s187.968-82.752 187.968-184.48-84.32-184.448-187.968-184.448S315.872 200 315.872 301.696z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,l,a,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4222008,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,l=n.document,a=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){a||(a=!0,c())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}s()}}(window);
\ No newline at end of file
......@@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "4354835",
"name": "闭眼睛",
"font_class": "hidden",
"unicode": "e901",
"unicode_decimal": 59649
},
{
"icon_id": "1920286",
"name": "点",
......@@ -12,13 +19,6 @@
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "12183287",
"name": "不可见",
"font_class": "hidden",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "12387627",
"name": "密码",
......
......@@ -120,6 +120,13 @@ export default {
}
},
},
watch: {
"$route.path"(newPath) {
if (newPath == "/home/dataManagement") {
this.censusListInterface();
}
},
},
created() {
this.censusListInterface();
},
......
......@@ -20,31 +20,63 @@
>
<a-form-model-item prop="loginName">
<a-input
allowClear
placeholder="请输入用户名"
v-model="form.loginName"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<img
slot="suffix"
v-show="form.loginName"
class="cursor-pointer"
@click="form.loginName = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
</a-form-model-item>
<a-form-model-item prop="password">
<a-input-password
allowClear
<a-input
placeholder="请输入密码"
class="password"
:type="iptType"
v-model="form.password"
@pressEnter="handleSubmit"
>
<img slot="prefix" src="@/assets/images/icon-pwd.png" />
</a-input-password>
<img slot="prefix" src="@/assets/images/icon-user.png" />
<template slot="suffix">
<a-space>
<img
v-show="form.password"
class="cursor-pointer"
@click="form.password = ''"
src="@/assets/images/icon-close.png"
/>
<i
v-if="iptType == 'password'"
class="iconfont icon-hidden cursor-pointer"
@click="iptType = 'text'"
></i>
<i
v-else
class="iconfont icon-show cursor-pointer"
@click="iptType = 'password'"
></i>
</a-space>
</template>
</a-input>
</a-form-model-item>
<a-form-model-item class="code" prop="securityCode">
<a-input
allowClear
placeholder="请输入验证码"
v-model="form.securityCode"
@pressEnter="handleSubmit"
>
<img
slot="suffix"
v-show="form.securityCode"
class="cursor-pointer"
@click="form.securityCode = ''"
src="@/assets/images/icon-close.png"
/>
</a-input>
<div class="code-box">
<img :src="imgCode" @click="createCode" />
......@@ -75,6 +107,7 @@ export default {
api: process.env.VUE_APP_API_BASE_URL,
loading: false,
imgCode: "",
iptType: "password",
form: {
loginName: "",
password: "",
......@@ -178,7 +211,7 @@ export default {
.login {
--pd: 9%;
--input-height: 50px;
--input-border-color: #d9d9d9;
--input-border-color: rgba(238, 238, 238, 1);
--time: 1s;
background: url("@/assets/images/login_bg.png");
background-size: 100% auto;
......@@ -214,6 +247,10 @@ export default {
background: url("@/assets/images/login_box_bg.png") center;
background-size: 100% 100%;
border-radius: 36px;
.iconfont {
font-size: 18px;
color: #232323;
}
}
.login-text {
font-family: Source Han Sans CN;
......@@ -225,9 +262,11 @@ export default {
background: #fff;
border-radius: 8px;
// font-family: Source Han Sans CN;
background: var(--input-border-color);
font-size: 16px;
font-weight: 600;
color: #232323;
border-color: var(--input-border-color);
&::placeholder {
color: #b5b5b5;
font-weight: normal;
......@@ -236,6 +275,19 @@ export default {
background: #ffffff;
}
}
:deep(.ant-input-affix-wrapper):hover .ant-input:not(.ant-input-disabled) {
&:focus {
border-color: #0857e8;
}
&:hover {
border-color: #0857e8;
}
}
:deep(.has-error) .ant-input-affix-wrapper .ant-input,
:deep(.has-error) .ant-input-affix-wrapper .ant-input:hover {
border-color: #f5222d !important;
}
:deep(.ant-input-clear-icon) {
font-size: 16px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment