mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
style(login): 修改登录页样式
This commit is contained in:
chen.home
parent
8ea29c9d88
commit
383331f3f2
@ -1,3 +1,2 @@
|
|||||||
export * from './config';
|
export * from './config';
|
||||||
export * from './plugins';
|
export * from './plugins';
|
||||||
// export * from './utils';
|
|
||||||
@ -17,10 +17,10 @@ export default [
|
|||||||
}),
|
}),
|
||||||
createSvgIconsPlugin({
|
createSvgIconsPlugin({
|
||||||
// 指定需要缓存的图标文件夹
|
// 指定需要缓存的图标文件夹
|
||||||
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
|
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
|
||||||
// 指定symbolId格式
|
// 指定symbolId格式
|
||||||
symbolId: 'icon-[dir]-[name]',
|
symbolId: 'icon-[dir]-[name]',
|
||||||
inject: 'body-last',
|
// inject: 'body-last',
|
||||||
customDomId: '__svg__icons__dom__',
|
// customDomId: '__svg__icons__dom__',
|
||||||
}),
|
}),
|
||||||
];
|
];
|
||||||
|
|||||||
1
src/assets/icons/cool.svg
Normal file
1
src/assets/icons/cool.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678514274388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1083" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M813.696 813.738667a426.666667 426.666667 0 1 0-603.434667 0 426.666667 426.666667 0 0 0 603.434667 0z" fill="#FFD264" p-id="1084"></path><path d="M735.232 147.797333A426.666667 426.666667 0 0 1 152.448 741.333333 426.666667 426.666667 0 1 0 735.232 147.797333z" fill="#FFC656" p-id="1085"></path><path d="M143.36 556.970667A396.16 396.16 0 0 1 853.333333 315.477333 396.202667 396.202667 0 1 0 195.968 754.432a393.898667 393.898667 0 0 1-52.608-197.461333z" fill="#FFD781" p-id="1086"></path><path d="M337.066667 605.866667a14.037333 14.037333 0 0 0-23.296 5.930666 14.037333 14.037333 0 0 0 0.426666 9.429334 213.845333 213.845333 0 0 0 395.477334 3.882666 14.464 14.464 0 0 0 0.469333-9.386666 14.037333 14.037333 0 0 0-23.210667-6.101334c-62.378667 60.501333-194.944 146.645333-349.866666-3.754666z" fill="#62422A" p-id="1087"></path><path d="M438.656 451.754667a42.197333 42.197333 0 0 0 8.533333-25.088c0-22.186667-18.730667-41.344-45.824-50.176h208.085334v75.264zM333.482667 376.490667h-5.632v2.005333c1.834667-0.725333 3.712-1.408 5.632-2.005333z" fill="#2D292A" p-id="1088"></path><path d="M303.317333 437.461333m-155.605333 0a155.605333 155.605333 0 1 0 311.210667 0 155.605333 155.605333 0 1 0-311.210667 0Z" fill="#474549" p-id="1089"></path><path d="M298.325333 421.632m-155.605333 0a155.605333 155.605333 0 1 0 311.210667 0 155.605333 155.605333 0 1 0-311.210667 0Z" fill="#2D292A" p-id="1090"></path><path d="M704.896 437.461333m-155.605333 0a155.605333 155.605333 0 1 0 311.210666 0 155.605333 155.605333 0 1 0-311.210666 0Z" fill="#474549" p-id="1091"></path><path d="M699.904 425.898667m-155.605333 0a155.605333 155.605333 0 1 0 311.210666 0 155.605333 155.605333 0 1 0-311.210666 0Z" fill="#2D292A" p-id="1092"></path></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 523 B After Width: | Height: | Size: 523 B |
1
src/assets/svg/login-bg.svg
Normal file
1
src/assets/svg/login-bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.9 KiB |
@ -1,24 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<svg aria-hidden="true" :width="`${props.size}px`">
|
<svg
|
||||||
<use :xlink:href="symbolId" fill="currentColor" />
|
aria-hidden="true"
|
||||||
|
:width="`${props.size}px`"
|
||||||
|
:height="`${props.size}px`"
|
||||||
|
display="inline"
|
||||||
|
>
|
||||||
|
<use
|
||||||
|
:xlink:href="symbolId"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
prefix: {
|
prefix: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'icon',
|
default: 'icon',
|
||||||
},
|
},
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 18,
|
default: 18,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -6,14 +6,14 @@
|
|||||||
*,
|
*,
|
||||||
::before,
|
::before,
|
||||||
::after {
|
::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
border-color: currentColor;
|
border-color: currentColor;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -24,16 +24,17 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
-moz-tab-size: 4;
|
-moz-tab-size: 4;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||||
/* 4 */
|
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
/* 4 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -42,10 +43,10 @@ html {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -55,12 +56,12 @@ body {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: 0;
|
height: 0;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
color: inherit;
|
color: inherit;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -68,7 +69,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
abbr:where([title]) {
|
abbr:where([title]) {
|
||||||
text-decoration: underline dotted;
|
text-decoration: underline dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -81,8 +82,8 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -90,8 +91,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -100,7 +101,7 @@ Add the correct font weight in Edge and Safari.
|
|||||||
|
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -112,10 +113,10 @@ code,
|
|||||||
kbd,
|
kbd,
|
||||||
samp,
|
samp,
|
||||||
pre {
|
pre {
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -123,7 +124,7 @@ Add the correct font size in all browsers.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -132,18 +133,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
font-size: 75%;
|
font-size: 75%;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -153,12 +154,12 @@ sup {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
table {
|
table {
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -172,18 +173,18 @@ input,
|
|||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
color: inherit;
|
color: inherit;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* 3 */
|
/* 3 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -192,7 +193,7 @@ Remove the inheritance of text transform in Edge and Firefox.
|
|||||||
|
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -204,11 +205,11 @@ button,
|
|||||||
[type='button'],
|
[type='button'],
|
||||||
[type='reset'],
|
[type='reset'],
|
||||||
[type='submit'] {
|
[type='submit'] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
/* background-color: transparent; 2 */
|
/* background-color: transparent; 2 */
|
||||||
background-image: none;
|
background-image: none;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -216,7 +217,7 @@ Use the modern Firefox focus style for all focusable elements.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
:-moz-focusring {
|
:-moz-focusring {
|
||||||
outline: auto;
|
outline: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -224,7 +225,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
:-moz-ui-invalid {
|
:-moz-ui-invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -232,7 +233,7 @@ Add the correct vertical alignment in Chrome and Firefox.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -241,7 +242,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
|||||||
|
|
||||||
::-webkit-inner-spin-button,
|
::-webkit-inner-spin-button,
|
||||||
::-webkit-outer-spin-button {
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -250,10 +251,10 @@ Correct the cursor style of increment and decrement buttons in Safari.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
[type='search'] {
|
[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -261,7 +262,7 @@ Remove the inner padding in Chrome and Safari on macOS.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -270,10 +271,10 @@ Remove the inner padding in Chrome and Safari on macOS.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
font: inherit;
|
font: inherit;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -281,7 +282,7 @@ Add the correct display in Chrome and Safari.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -301,24 +302,24 @@ hr,
|
|||||||
figure,
|
figure,
|
||||||
p,
|
p,
|
||||||
pre {
|
pre {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
menu {
|
menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -326,7 +327,7 @@ Prevent resizing textareas horizontally by default.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -336,10 +337,10 @@ textarea {
|
|||||||
|
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
textarea::placeholder {
|
textarea::placeholder {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
color: #9ca3af;
|
color: #9ca3af;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -347,15 +348,15 @@ Set the default cursor for buttons.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[role="button"] {
|
[role='button'] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Make sure disabled buttons don't get the pointer cursor.
|
Make sure disabled buttons don't get the pointer cursor.
|
||||||
*/
|
*/
|
||||||
:disabled {
|
:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -372,10 +373,11 @@ audio,
|
|||||||
iframe,
|
iframe,
|
||||||
embed,
|
embed,
|
||||||
object {
|
object {
|
||||||
display: block;
|
display: block;
|
||||||
/* 1 */
|
/* 1 */
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
/* 2 */
|
/* 2 */
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -384,8 +386,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|||||||
|
|
||||||
img,
|
img,
|
||||||
video {
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -393,9 +395,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,128 +1,166 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex-center wh-full">
|
<div class="wh-full flex-center bg-[#EBECF0]">
|
||||||
<n-carousel
|
|
||||||
autoplay
|
|
||||||
trigger="hover"
|
|
||||||
dot-type="line"
|
|
||||||
effect="fade"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
v-for="(item, index) in swiperList"
|
|
||||||
:key="index"
|
|
||||||
class="wh-full object-cover"
|
|
||||||
:src="item"
|
|
||||||
>
|
|
||||||
</n-carousel>
|
|
||||||
<n-el
|
<n-el
|
||||||
tag="div"
|
class="w-1400px h-70% flex-center shadow-2xl b-rd-22px p-10px"
|
||||||
style="background: var(--modal-color); box-shadow: var(--box-shadow-3)"
|
style="background: var(--card-color)"
|
||||||
class="h-xl py-10 px-6xl rounded-lg backdrop-blur-xl fixed op-90"
|
|
||||||
>
|
>
|
||||||
<n-h1 class="c-blue">
|
<n-grid
|
||||||
<i-icon-park-outline-plastic-surgery />
|
x-gap="10"
|
||||||
Ench Admin
|
cols="s:1 l:2"
|
||||||
</n-h1>
|
class="h-full"
|
||||||
<n-p depth="3">
|
responsive="screen"
|
||||||
高效、简约、可能对你有点帮助
|
|
||||||
</n-p>
|
|
||||||
<n-form
|
|
||||||
ref="formRef"
|
|
||||||
:rules="rules"
|
|
||||||
:model="formValue"
|
|
||||||
:show-label="false"
|
|
||||||
size="large"
|
|
||||||
>
|
>
|
||||||
<n-form-item path="account">
|
<n-gi>
|
||||||
<n-input
|
<div class="h-full flex-center">
|
||||||
v-model:value="formValue.account"
|
<img
|
||||||
clearable
|
src="@/assets/svg/login-bg.svg"
|
||||||
placeholder="输入账号"
|
class="h-full b-rd-12px"
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<i-icon-park-outline-woman />
|
|
||||||
</template>
|
|
||||||
</n-input>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item path="pwd">
|
|
||||||
<n-input
|
|
||||||
v-model:value="formValue.pwd"
|
|
||||||
type="password"
|
|
||||||
placeholder="输入密码"
|
|
||||||
clearable
|
|
||||||
show-password-on="click"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<i-icon-park-outline-lock />
|
|
||||||
</template>
|
|
||||||
<template #password-invisible-icon>
|
|
||||||
<i-icon-park-outline-preview-close-one />
|
|
||||||
</template>
|
|
||||||
<template #password-visible-icon>
|
|
||||||
<i-icon-park-outline-preview-open />
|
|
||||||
</template>
|
|
||||||
</n-input>
|
|
||||||
</n-form-item>
|
|
||||||
<n-form-item path="code">
|
|
||||||
<n-space align="center">
|
|
||||||
<n-input
|
|
||||||
v-model:value="formValue.code"
|
|
||||||
clearable
|
|
||||||
placeholder="输入验证码"
|
|
||||||
:maxlength="4"
|
|
||||||
>
|
>
|
||||||
<template #prefix>
|
|
||||||
<i-icon-park-outline-message />
|
|
||||||
</template>
|
|
||||||
</n-input>
|
|
||||||
<span>验证码什么的</span>
|
|
||||||
</n-space>
|
|
||||||
</n-form-item>
|
|
||||||
<n-space
|
|
||||||
vertical
|
|
||||||
:size="24"
|
|
||||||
>
|
|
||||||
<div class="flex-y-center justify-between">
|
|
||||||
<n-checkbox v-model:checked="isRemember">
|
|
||||||
记住我
|
|
||||||
</n-checkbox>
|
|
||||||
<n-button :text="true">
|
|
||||||
忘记密码？
|
|
||||||
</n-button>
|
|
||||||
</div>
|
</div>
|
||||||
<n-button
|
</n-gi>
|
||||||
w-full
|
<n-gi>
|
||||||
type="primary"
|
<div class="h-full flex-col-center justify-between">
|
||||||
size="large"
|
<div class="w-full flex">
|
||||||
:loading="authStore.loginLoading"
|
<n-switch
|
||||||
@click="handleLogin"
|
size="medium"
|
||||||
>
|
:value="appStore.darkMode"
|
||||||
<template #icon>
|
@update:value="appStore.toggleDarkMode()"
|
||||||
<n-icon>
|
>
|
||||||
<i-icon-park-outline-six-points />
|
<template #checked-icon>
|
||||||
</n-icon>
|
🌙
|
||||||
</template>
|
</template> <template #unchecked-icon>
|
||||||
登录
|
🔆
|
||||||
</n-button>
|
</template>
|
||||||
</n-space>
|
</n-switch>
|
||||||
</n-form>
|
</div>
|
||||||
<n-divider><span op-80>其他登录</span></n-divider>
|
|
||||||
|
<div class="w-1/2">
|
||||||
|
<n-h1 class="text-center">
|
||||||
|
<SvgIcon
|
||||||
|
name="logo"
|
||||||
|
:size="36"
|
||||||
|
/>
|
||||||
|
Ench Admin
|
||||||
|
</n-h1>
|
||||||
|
<n-p depth="3">
|
||||||
|
高效、简约、可能对你有点帮助
|
||||||
|
</n-p>
|
||||||
|
<n-form
|
||||||
|
ref="formRef"
|
||||||
|
:rules="rules"
|
||||||
|
:model="formValue"
|
||||||
|
:show-label="false"
|
||||||
|
size="large"
|
||||||
|
>
|
||||||
|
<n-form-item path="account">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.account"
|
||||||
|
clearable
|
||||||
|
placeholder="输入账号"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-icon-park-outline-woman />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="pwd">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.pwd"
|
||||||
|
type="password"
|
||||||
|
placeholder="输入密码"
|
||||||
|
clearable
|
||||||
|
show-password-on="click"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-icon-park-outline-lock />
|
||||||
|
</template>
|
||||||
|
<template #password-invisible-icon>
|
||||||
|
<i-icon-park-outline-preview-close-one />
|
||||||
|
</template>
|
||||||
|
<template #password-visible-icon>
|
||||||
|
<i-icon-park-outline-preview-open />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="code">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.code"
|
||||||
|
clearable
|
||||||
|
placeholder="输入验证码"
|
||||||
|
:maxlength="4"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-icon-park-outline-message />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
<span>验证码什么的</span>
|
||||||
|
</n-space>
|
||||||
|
</n-form-item>
|
||||||
|
<n-space
|
||||||
|
vertical
|
||||||
|
:size="24"
|
||||||
|
>
|
||||||
|
<div class="flex-y-center justify-between">
|
||||||
|
<n-checkbox v-model:checked="isRemember">
|
||||||
|
记住我
|
||||||
|
</n-checkbox>
|
||||||
|
<n-button :text="true">
|
||||||
|
忘记密码？
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<n-button
|
||||||
|
w-full
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
:loading="authStore.loginLoading"
|
||||||
|
@click="handleLogin"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<i-icon-park-outline-six-points />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
登录
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</n-form>
|
||||||
|
<n-divider><span op-80>其他登录</span></n-divider>
|
||||||
|
<n-space justify="center">
|
||||||
|
<n-button circle>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon><i-icon-park-outline-wechat /></n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
<n-button circle>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon><i-icon-park-outline-tencent-qq /></n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
<n-button circle>
|
||||||
|
<template #icon>
|
||||||
|
<n-icon><i-icon-park-outline-github-one /></n-icon>
|
||||||
|
</template>
|
||||||
|
</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div />
|
||||||
|
</div>
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
</n-el>
|
</n-el>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { FormInst } from 'naive-ui';
|
import { FormInst } from 'naive-ui';
|
||||||
import { useAuthStore } from '@/store';
|
import { useAuthStore, useAppStore } from '@/store';
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { local } from '@/utils';
|
import { local } from '@/utils';
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
const swiperList = [
|
const appStore = useAppStore();
|
||||||
'https://images.unsplash.com/photo-1546414809-22c82b5e2ad4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1659533982925-09cb4f3f7876?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1473&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1630771077377-674b39a13f58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
|
|
||||||
'https://images.unsplash.com/photo-1543782248-03e2c5a93e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80',
|
|
||||||
];
|
|
||||||
|
|
||||||
const formValue = ref({
|
const formValue = ref({
|
||||||
account: '',
|
account: '',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user