blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(login): 修改登录页样式

Browse Source
This commit is contained in:
chen.home 2023-03-11 14:16:51 +08:00
parent 8ea29c9d88
commit 383331f3f2
8 changed files with 284 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/index.ts
View File

@ -1,3 +1,2 @@
export * from './config';
export * from './plugins';
// export * from './utils';

6
build/plugins/unplugin.ts
View File

@ -17,10 +17,10 @@ export default [
}),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
inject: 'body-last',
customDomId: '__svg__icons__dom__',
// inject: 'body-last',
// customDomId: '__svg__icons__dom__',
}),
];

1
src/assets/icons/cool.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

0
src/assets/svg/logo.svg → src/assets/icons/logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 523 B

After

Width:  |  Height:  |  Size: 523 B

1
src/assets/svg/login-bg.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

36
src/components/custom/SvgIcon.vue
View File

@ -1,24 +1,32 @@
<template>
<svg aria-hidden="true" :width="`${props.size}px`">
<use :xlink:href="symbolId" fill="currentColor" />
<svg
aria-hidden="true"
:width="`${props.size}px`"
:height="`${props.size}px`"
display="inline"
>
<use
:xlink:href="symbolId"
fill="currentColor"
/>
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps({
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
size: {
type: Number,
default: 18,
},
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
size: {
type: Number,
default: 18,
},
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

214
src/styles/css/reset.css
View File

@ -6,14 +6,14 @@
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: currentColor;
/* 2 */
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: currentColor;
/* 2 */
}
/*
@ -24,16 +24,17 @@
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
tab-size: 4;
/* 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";
/* 4 */
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
tab-size: 4;
/* 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';
/* 4 */
}
/*
@ -42,10 +43,10 @@ html {
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
@ -55,12 +56,12 @@ body {
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
@ -68,7 +69,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
@ -81,8 +82,8 @@ h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
font-size: inherit;
font-weight: inherit;
}
/*
@ -90,8 +91,8 @@ Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
color: inherit;
text-decoration: inherit;
}
/*
@ -100,7 +101,7 @@ Add the correct font weight in Edge and Safari.
b,
strong {
font-weight: bolder;
font-weight: bolder;
}
/*
@ -112,10 +113,10 @@ code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-size: 1em;
/* 2 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/*
@ -123,7 +124,7 @@ Add the correct font size in all browsers.
*/
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,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
bottom: -0.25em;
}
sup {
top: -0.5em;
top: -0.5em;
}
/*
@ -153,12 +154,12 @@ sup {
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
@ -172,18 +173,18 @@ input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
@ -192,7 +193,7 @@ Remove the inheritance of text transform in Edge and Firefox.
button,
select {
text-transform: none;
text-transform: none;
}
/*
@ -204,11 +205,11 @@ button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
/* background-color: transparent; 2 */
background-image: none;
/* 2 */
-webkit-appearance: button;
/* 1 */
/* background-color: transparent; 2 */
background-image: none;
/* 2 */
}
/*
@ -216,7 +217,7 @@ Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
outline: auto;
}
/*
@ -224,7 +225,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/
*/
:-moz-ui-invalid {
box-shadow: none;
box-shadow: none;
}
/*
@ -232,7 +233,7 @@ Add the correct vertical alignment in Chrome and Firefox.
*/
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-outer-spin-button {
height: auto;
height: auto;
}
/*
@ -250,10 +251,10 @@ Correct the cursor style of increment and decrement buttons in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
@ -261,7 +262,7 @@ Remove the inner padding in Chrome and Safari on macOS.
*/
::-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-appearance: button;
/* 1 */
font: inherit;
/* 2 */
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
@ -281,7 +282,7 @@ Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
display: list-item;
}
/*
@ -301,24 +302,24 @@ hr,
figure,
p,
pre {
margin: 0;
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
legend {
padding: 0;
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
}
/*
@ -326,7 +327,7 @@ Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
resize: vertical;
}
/*
@ -336,10 +337,10 @@ textarea {
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
@ -347,15 +348,15 @@ Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
[role='button'] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
cursor: default;
}
/*
@ -372,10 +373,11 @@ audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
object-fit: cover;
}
/*
@ -384,8 +386,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
img,
video {
max-width: 100%;
height: auto;
max-width: 100%;
height: auto;
}
/*
@ -393,9 +395,9 @@ Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] {
display: none;
display: none;
}
.dark {
color-scheme: dark;
color-scheme: dark;
}

256
src/views/login/index.vue
View File

@ -1,128 +1,166 @@
<template>
<div class="flex-center wh-full">
<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>
<div class="wh-full flex-center bg-[#EBECF0]">
<n-el
tag="div"
style="background: var(--modal-color); box-shadow: var(--box-shadow-3)"
class="h-xl py-10 px-6xl rounded-lg backdrop-blur-xl fixed op-90"
class="w-1400px h-70% flex-center shadow-2xl b-rd-22px p-10px"
style="background: var(--card-color)"
>
<n-h1 class="c-blue">
<i-icon-park-outline-plastic-surgery />
Ench Admin
</n-h1>
<n-p depth="3">
高效、简约、可能对你有点帮助
</n-p>
<n-form
ref="formRef"
:rules="rules"
:model="formValue"
:show-label="false"
size="large"
<n-grid
x-gap="10"
cols="s:1 l:2"
class="h-full"
responsive="screen"
>
<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"
<n-gi>
<div class="h-full flex-center">
<img
src="@/assets/svg/login-bg.svg"
class="h-full b-rd-12px"
>
<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-gi>
<n-gi>
<div class="h-full flex-col-center justify-between">
<div class="w-full flex">
<n-switch
size="medium"
:value="appStore.darkMode"
@update:value="appStore.toggleDarkMode()"
>
<template #checked-icon>
🌙
</template> <template #unchecked-icon>
🔆
</template>
</n-switch>
</div>
<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>
</div>
</template>
<script setup lang="ts">
import { FormInst } from 'naive-ui';
import { useAuthStore } from '@/store';
import { useAuthStore, useAppStore } from '@/store';
import { ref, onMounted } from 'vue';
import { local } from '@/utils';
const authStore = useAuthStore();
const swiperList = [
'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 appStore = useAppStore();
const formValue = ref({
account: '',