refactor: login page

This commit is contained in:
xiaoxian521 2021-11-06 19:15:10 +08:00
parent 544e474e98
commit aa7a073b4a
20 changed files with 351 additions and 117 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2208059 */
src: url("iconfont.woff2?t=1634903299890") format("woff2"),
url("iconfont.woff?t=1634903299890") format("woff"),
url("iconfont.ttf?t=1634903299890") format("truetype");
src: url("iconfont.woff2?t=1636197082361") format("woff2"),
url("iconfont.woff?t=1636197082361") format("woff"),
url("iconfont.ttf?t=1636197082361") format("truetype");
}
.iconfont {
@ -13,24 +13,8 @@
-moz-osx-font-smoothing: grayscale;
}
.team-iconshuifei::before {
content: "\e62d";
}
.team-iconshuiyuandi::before {
content: "\e64e";
}
.team-iconshuifei1::before {
content: "\e616";
}
.team-iconshui::before {
content: "\e61f";
}
.team-iconzuixinlianzai::before {
content: "\e6da";
.team-iconlogo::before {
content: "\e620";
}
.team-iconxinpin::before {
@ -41,22 +25,6 @@
content: "\e615";
}
.team-iconinternationality::before {
content: "\e67a";
}
.team-iconshanchu::before {
content: "\e617";
}
.team-iconshow-main-container::before {
content: "\e878";
}
.team-iconhidden-main-container::before {
content: "\e881";
}
.team-iconexit-fullscreen::before {
content: "\e62a";
}

File diff suppressed because one or more lines are too long

View File

@ -6,39 +6,11 @@
"description": "pure-admin",
"glyphs": [
{
"icon_id": "1715043",
"name": "水费",
"font_class": "shuifei",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "7873366",
"name": "水源地",
"font_class": "shuiyuandi",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "12257150",
"name": "水费",
"font_class": "shuifei1",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "24810949",
"name": "水",
"font_class": "shui",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "2508809",
"name": "最新连载",
"font_class": "zuixinlianzai",
"unicode": "e6da",
"unicode_decimal": 59098
"icon_id": "22129506",
"name": "水能",
"font_class": "logo",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "7795613",
@ -54,34 +26,6 @@
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "18367956",
"name": "中英文2 中文",
"font_class": "internationality",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "6184565",
"name": "删除",
"font_class": "shanchu",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "9626913",
"name": "全屏",
"font_class": "show-main-container",
"unicode": "e878",
"unicode_decimal": 59512
},
{
"icon_id": "9626952",
"name": "退出全屏",
"font_class": "hidden-main-container",
"unicode": "e881",
"unicode_decimal": 59521
},
{
"icon_id": "5698509",
"name": "全屏缩小",

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1 @@
<svg t="1636193306629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="32" height="32"><path d="M410.558481 0.10861C410.558481 211.083075 109.682285 361.860579 109.682285 633.656511c0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527C711.407525 361.751969 410.558481 210.974465 410.558481 0.10861z" fill="#386BF3" p-id="1848"></path><path d="M613.468671 73.664572c0 211.055922-300.876197 361.914883-300.876196 633.547901 0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527c-0.054305-271.633018-300.876197-422.491979-300.876197-633.547901z" fill="#C3D2FB" p-id="1849"></path><path d="M312.592475 707.212473c0-183.713414 137.635722-312.171612 226.72288-441.390078 81.701694 106.111739 172.119322 218.740063 172.119323 367.725506a309.755045 309.755045 0 0 1-291.074166 316.516003 323.114046 323.114046 0 0 1-107.768037-242.851431z" fill="#303F5B" p-id="1850"></path></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/login/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="896" height="529.1129" viewBox="0 0 896 529.1129" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M832.06729,623.22778s-26.37759,9.89441-38.806,32.94348S787.06,706.69574,787.06,706.69574s26.37759-9.89447,38.806-32.94348S832.06729,623.22778,832.06729,623.22778Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M867.5,657.59637s-8.64182,26.814-31.0802,40.31373-50.17651,8.57293-50.17651,8.57293,8.64175-26.81408,31.08017-40.31378S867.5,657.59637,867.5,657.59637Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><rect y="527.1129" width="896" height="2" fill="#2f2e41"/><path d="M519.87238,620.97461a95.44448,95.44448,0,0,1-35.748-14.44629L485.306,604.915a93.36283,93.36283,0,0,0,34.999,14.10547c18.93164,3.40137,47.26075,1.73144,74.707-25.52735,53.41358-53.04785,104.39307-58.39062,104.90186-58.43847l.18652,1.99219c-.50146.04687-50.76806,5.31738-103.67822,57.86621-21.61328,21.46386-43.792,27.40234-61.71777,27.40234A83.49962,83.49962,0,0,1,519.87238,620.97461Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="515.15271" cy="381.1129" r="12" fill="#2f2e41"/><circle cx="430.15271" cy="437.1129" r="12" fill="#2f2e41"/><path d="M841.5,714s-17.46191-5.41315-52.26129-10.84192L790,692.5c6-60-34-150-34-150a401.561,401.561,0,0,1,21.4693,139.0246C772.13214,672.2124,761.82056,662.16638,742,656c0,0,25.77765,22.106,33.15918,45.10175a997.84042,997.84042,0,0,0-102.02258-8.21589L682,672.5l-17,17s-7-51-22-53l11,50s-13-10-16-9l7.39746,14.79486c-49.819-.51654-109.08453,1.7356-177.76581,8.95227L476,682l-17,17s-7-51-22-53l11,50s-13-10-16-9l8.64288,17.28583Q406.9763,708.2897,370.5,714Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M565.64813,230.37817c-10.89964,11.74783,17.59745,40.25959,17.59745,40.25959s-57.70662,9.73051-53.12783,9.14083,2.20622-49.13151,2.20622-49.13151S576.54777,218.63035,565.64813,230.37817Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M605.81236,356.10945l-50.139,25.6141-27.22969,15.6059s-32.09862,40.43116-38.08709,64.39234,25.92963,68.247,29.54371,72.82286a54.36088,54.36088,0,0,1,4.98908,7.42355c1.24727,1.85589,12.02944-.541,23.80342-3.06554S547.13,518.93875,547.13,518.93875s-15.02732-38.39505-16.14686-39.25912c-1.04554-.807-4.60093-7.44631-2.04309-10.35234a25.94993,25.94993,0,0,0,5.44489-8.89825,30.09064,30.09064,0,0,1,4.18709-7.94151s45.361-36.83645,59.52776-49.37835,51.82952-4.65839,51.82952-4.65839-17.78167,68.20027-22.22979,72.80616-4.929,8.70085-2.91535,16.50759,28.28157.39078,28.28157.39078L662.766,461.6996s15.74879-34.2925,24.29946-69.67451c4.27533-17.691-3.88828-28.23462-13.12073-34.35549a41.39094,41.39094,0,0,0-30.02983-5.97766l-46.34848,8.1308,32.14706-13.84923Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M420.87777,290.19133,361.02366,271.685s-24.179-31.16689-12.78824-36.6669,25.65172,26.94419,25.65172,26.94419l41.686,2.69751Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M672.49431,257.78673l53.2121-33.06768s15.49333-36.27612,3.0807-38.71059-17.98787,32.56435-17.98787,32.56435l-39.64232,13.17143Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M682.45318,220.40023l1.01427,39.19147-89.68779,16.025c13.19231,28.22441,9.84118,60.34675,43.04725,74.4259L524.9027,404.78717c4.9871-43.03806-15.81748-75.456-35.263-115.75876-23.68547-8.58589-51.19594-2.29078-80.33649,10.34619l-5.237-40.66416,123.87841-8.896,20.34848,7.77932,21.81842-9.17677C602.17891,238.88953,648.22076,220.77584,682.45318,220.40023Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><path d="M626.64006,486.51727c-2.72,2.36681-5.25213,21.84984-5.34982,28.92023s9.21178,8.89624,14.29855,9.2494,4.47816,3.45631,7.83678,6.04854,14.39625,2.179,28.89019-2.71238-9.75274-20.92568-11.86409-21.662-11-22.78156-11-22.78156S629.36,484.15046,626.64006,486.51727Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M547.368,531.00717c3.23089,1.60043,10.61681,19.80614,12.50274,26.62107s-6.65716,10.93994-11.48848,12.5704-3.45631,4.47816-6.04855,7.83678-13.3744,5.75546-28.63472,4.696,4.13258-22.71391,5.98847-23.96118,4.86893-24.82526,4.86893-24.82526S544.13715,529.40674,547.368,531.00717Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="389.47074" cy="35.42904" r="23.99585" fill="#a0616a"/><path d="M519.73448,218.90923a22.82668,22.82668,0,0,1-.83378-18.59281c2.35891-5.8153,7.59174-11.65569,18.87309-13.4,24.61387-3.80572,37.71267,13.43543,37.02452,19.07449s-3.99294,19.27051-3.99294,19.27051,1.47587-12.90619-4.85883-13.362-30.90178-2.37835-37.12217,4.145a14.23268,14.23268,0,0,0-3.71042,13.82977Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/></svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 12 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 29 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -118,7 +118,7 @@ onMounted(() => {
<template>
<div class="horizontal-header">
<div class="horizontal-header-left" @click="backHome">
<Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<h4>{{ title }}</h4>
</div>
<el-menu

View File

@ -19,7 +19,7 @@ const title =
class="sidebar-logo-link"
to="/"
>
<Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<span class="sidebar-title">{{ title }}</span>
</router-link>
<router-link
@ -29,7 +29,7 @@ const title =
class="sidebar-logo-link"
to="/"
>
<Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
<Icon svg :width="35" :height="35" content="team-iconlogo" />
<span class="sidebar-title">{{ title }}</span>
</router-link>
</transition>

221
src/style/login.css Normal file
View File

@ -0,0 +1,221 @@
.wave {
position: fixed;
height: 100%;
left: 0;
bottom: 0;
z-index: -1;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 18rem;
padding: 0 2rem;
}
.img {
display: flex;
justify-content: flex-end;
align-items: center;
}
.img img {
width: 500px;
}
.login-box {
display: flex;
align-items: center;
text-align: center;
}
.login-form {
width: 360px;
}
.avatar {
width: 100px;
}
.login-form h2 {
font-size: 2.9rem;
text-transform: uppercase;
margin: 15px 0;
color: #999;
}
.input-group {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.input-group:nth-child(1) {
margin-bottom: 4px;
}
.input-group::before,
.input-group::after {
content: "";
position: absolute;
bottom: -2px;
width: 0;
height: 2px;
background-color: #c5d3f7;
transition: 0.5s;
}
.input-group::after {
right: 50%;
}
.input-group::before {
left: 50%;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon i {
color: #d9d9d9;
transition: 0.5s;
}
.input-group > div {
position: relative;
height: 45px;
}
.input-group > div > h5 {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #d9d9d9;
font-size: 18px;
transition: 0.3s;
margin: 0;
padding: 0;
}
.input-group.focus .icon i {
color: #5392f0;
}
.input-group.focus div h5 {
top: -5px;
font-size: 15px;
}
.input-group.focus::after,
.input-group.focus::before {
width: 50%;
}
.input {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: "Roboto", sans-serif;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: 0.3s;
}
a:hover {
color: #5392f0;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
margin: 1rem 0;
font-size: 1.2rem;
outline: none;
border: none;
background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe);
cursor: pointer;
color: #fff;
text-transform: uppercase;
font-family: "Roboto", sans-serif;
background-size: 200%;
transition: 0.5s;
}
.btn:hover {
background-position: right;
}
.copyright {
position: absolute;
width: 100%;
height: 50px;
bottom: 2px;
color: #5392f0;
text-align: center;
font-size: 18px;
font-family: "Roboto", sans-serif;
}
@media screen and (max-width: 1080px) {
.container {
grid-gap: 9rem;
}
}
@media screen and (max-width: 1024px) {
.login-form {
width: 290px;
}
.login-form h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 360px;
}
}
@media screen and (max-width: 768px) {
.wave {
display: none;
}
.img {
display: none;
}
.container {
grid-template-columns: 1fr;
}
.login-box {
justify-content: center;
}
}

View File

@ -0,0 +1,93 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { initRouter } from "/@/router";
import { storageSession } from "/@/utils/storage";
import { addClass, removeClass } from "/@/utils/operate";
const router = useRouter();
const currentWeek = new Date().getDay();
let illustration = computed(() => {
return `/@/assets/login/illustration${currentWeek}.svg`;
});
let user = ref("admin");
let pwd = ref("123456");
const onLogin = (): void => {
storageSession.setItem("info", {
username: "admin",
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
});
initRouter("admin").then(() => {});
router.push("/");
};
function onUserFocus() {
addClass(document.querySelector(".user"), "focus");
}
function onUserBlur() {
if (user.value.length === 0)
removeClass(document.querySelector(".user"), "focus");
}
function onPwdFocus() {
addClass(document.querySelector(".pwd"), "focus");
}
function onPwdBlur() {
if (pwd.value.length === 0)
removeClass(document.querySelector(".pwd"), "focus");
}
</script>
<template>
<img src="/@/assets/login/bg.png" class="wave" />
<div class="container">
<div class="img"><img :src="illustration" /></div>
<div class="login-box">
<div class="login-form">
<img src="/@/assets/login/avatar.svg" class="avatar" />
<h2>Pure Admin</h2>
<div class="input-group user focus">
<div class="icon">
<i class="fa fa-user"></i>
</div>
<div>
<h5>用户名</h5>
<input
type="text"
class="input"
v-model="user"
@focus="onUserFocus"
@blur="onUserBlur"
/>
</div>
</div>
<div class="input-group pwd focus">
<div class="icon">
<i class="fa fa-lock"></i>
</div>
<div>
<h5>密码</h5>
<input
type="password"
class="input"
v-model="pwd"
@focus="onPwdFocus"
@blur="onPwdBlur"
/>
</div>
</div>
<button class="btn" @click="onLogin">登录</button>
</div>
</div>
</div>
</template>
<style scoped>
@import url("/@/style/login.css");
</style>