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 './plugins';
|
||||
// export * from './utils';
|
||||
|
||||
@ -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
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,6 +1,14 @@
|
||||
<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>
|
||||
|
||||
|
||||
@ -32,7 +32,8 @@ html {
|
||||
/* 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";
|
||||
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 */
|
||||
}
|
||||
|
||||
@ -112,7 +113,7 @@ code,
|
||||
kbd,
|
||||
samp,
|
||||
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 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
@ -347,7 +348,7 @@ Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
[role='button'] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -376,6 +377,7 @@ object {
|
||||
/* 1 */
|
||||
vertical-align: middle;
|
||||
/* 2 */
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -1,25 +1,45 @@
|
||||
<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 />
|
||||
<n-grid
|
||||
x-gap="10"
|
||||
cols="s:1 l:2"
|
||||
class="h-full"
|
||||
responsive="screen"
|
||||
>
|
||||
<n-gi>
|
||||
<div class="h-full flex-center">
|
||||
<img
|
||||
src="@/assets/svg/login-bg.svg"
|
||||
class="h-full b-rd-12px"
|
||||
>
|
||||
</div>
|
||||
</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">
|
||||
@ -106,23 +126,41 @@
|
||||
</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: '',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user