feat(projects): 登录页面开始迁移
This commit is contained in:
parent
035fa114c9
commit
f5a36a05cb
2
.env
2
.env
@ -4,4 +4,4 @@ VITE_APP_NAME=SoybeanAdmin
|
||||
|
||||
VITE_APP_TITLE=Soybean管理系统
|
||||
|
||||
VITE_APP_DESC=中后台管理系统模版
|
||||
VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="theme.naiveThemeOverrides">
|
||||
<n-config-provider :theme-overrides="theme.naiveThemeOverrides" class="h-full">
|
||||
<slot></slot>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
31
src/components/common/SystemLogo/components/SvgFillLogo.vue
Normal file
31
src/components/common/SystemLogo/components/SvgFillLogo.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 158.88 158.88">
|
||||
<path
|
||||
d="M158.86.3q0,78.74,0,157.48c0,.9-.2,1.1-1.1,1.1q-78.77,0-157.52,0a2.61,2.61,0,0,1-.11-1.3q0-78,0-155.91C.14,0,0,.18,1.61.18h156A2.62,2.62,0,0,1,158.86.3Z"
|
||||
style="fill: currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M158.86.3H2C0,.31.27,0,.27,2q0,78.42,0,156.85c-.07-.05-.25.12-.24-.12s0-.64,0-1Q0,79.46,0,1.14C0,.24.2,0,1.1,0l156.68,0C158.13.08,158.59-.2,158.86.3Z"
|
||||
style="fill: #ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M93.65,51.52a68.65,68.65,0,0,1-6.47,28.81,1.72,1.72,0,0,0,.19,2c6.08,8.28,13.58,14.79,23.19,18.69a46.22,46.22,0,0,0,17.15,3.39,28.87,28.87,0,0,0,3.34-.25,6.2,6.2,0,0,1,7,5.12,6.07,6.07,0,0,1-5.15,7.14,50.39,50.39,0,0,1-18.06-1c-15.85-3.66-28-12.75-37.44-25.7a2.15,2.15,0,0,0-2.23-1.09C61.17,90,49,95.06,39.67,105.84a38.47,38.47,0,0,0-6.23,9.74A6.21,6.21,0,0,1,25.27,119,6.14,6.14,0,0,1,22,110.8a49.31,49.31,0,0,1,9.63-14.62c10.56-11.44,23.8-17.54,39.09-19.54a13.93,13.93,0,0,1,2.84-.34c1.61.14,2.18-.73,2.73-2A54.38,54.38,0,0,0,81.12,51a44,44,0,0,0-8-25,6.11,6.11,0,0,1-.65-6.46A6,6,0,0,1,77.75,16a6.34,6.34,0,0,1,5.66,3,53.61,53.61,0,0,1,7.17,14.28A59.33,59.33,0,0,1,93.65,51.52Z"
|
||||
style="fill: #ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M46.92,118.63a6,6,0,0,1,1.35-3.88,37.89,37.89,0,0,1,22.5-14,6.08,6.08,0,0,1,6.65,2.47,6.18,6.18,0,0,1-3.84,9.63,26.09,26.09,0,0,0-15.71,9.77,6.2,6.2,0,0,1-10.95-4Z"
|
||||
style="fill: #ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M124.3,92.8a34.66,34.66,0,0,1-9.82-2.48A35.46,35.46,0,0,1,99.83,79.87a6.19,6.19,0,0,1,2.84-9.93,5.79,5.79,0,0,1,6.44,1.73,26.79,26.79,0,0,0,16.51,8.85,6,6,0,0,1,5,5.54,6.21,6.21,0,0,1-4.29,6.46A6.55,6.55,0,0,1,124.3,92.8Z"
|
||||
style="fill: #ffffff"
|
||||
/>
|
||||
<path
|
||||
d="M69.32,53.27a33.46,33.46,0,0,1-2.27,12.52,6.21,6.21,0,0,1-10.94,1,6.09,6.09,0,0,1-.65-5.4,26,26,0,0,0-.53-18.25,6.21,6.21,0,0,1,11.49-4.72A40.24,40.24,0,0,1,69.32,53.27Z"
|
||||
style="fill: #ffffff"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<style scoped></style>
|
32
src/components/common/SystemLogo/components/SvgLogo.vue
Normal file
32
src/components/common/SystemLogo/components/SvgLogo.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 158.88 158.88">
|
||||
<path
|
||||
d="M0,158.86Q0,80,0,1.1C0,.2.2,0,1.1,0Q79.44,0,157.78,0c.9,0,1.1.2,1.1,1.1q0,78.35,0,156.68c0,.9-.2,1.1-1.1,1.1Q78.9,158.83,0,158.86Z"
|
||||
transform="translate(0)"
|
||||
style="fill: #ffffff00"
|
||||
/>
|
||||
<path
|
||||
d="M81.28,55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1,8.1,0,0,1,4-8.61,7.89,7.89,0,0,1,9.3,1.23,36,36,0,0,1,5.9,8.83,75.18,75.18,0,0,1,8.44,28.58,83.21,83.21,0,0,1-5.23,36.74c-.91,2.47-1.91,4.9-3,7.28a1.2,1.2,0,0,0,0,1.41c9.58,13.3,21.76,23,37.85,27.24a54.35,54.35,0,0,0,19.68,1.57,7.72,7.72,0,0,1,8.36,6.9,7.9,7.9,0,0,1-6.7,9,64.74,64.74,0,0,1-23-1.33,77.68,77.68,0,0,1-36.93-19.88,93.64,93.64,0,0,1-11.91-13.71A2.18,2.18,0,0,0,73.87,103a72.75,72.75,0,0,0-27.38,7.55c-11.6,6-20.67,14.58-26.4,26.45a10.13,10.13,0,0,1-3.7,4.7A8,8,0,0,1,7.2,141a7.86,7.86,0,0,1-2.36-9.28,60.32,60.32,0,0,1,8.72-14.52c12.2-15.43,28.21-24.59,47.32-28.57A85.08,85.08,0,0,1,73.07,87a1.22,1.22,0,0,0,1.18-.8A76.06,76.06,0,0,0,80.78,63.9,57.87,57.87,0,0,0,81.28,55.9Z"
|
||||
transform="translate(0)"
|
||||
style="fill: currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M136.26,108.34a44.72,44.72,0,0,1-11.13-2.87,46.11,46.11,0,0,1-19.66-13.76,8,8,0,0,1,5.72-13.22,7.93,7.93,0,0,1,6.54,2.93A33.27,33.27,0,0,0,136.6,92.17a14.76,14.76,0,0,1,4.48,1.18,8.08,8.08,0,0,1,3.84,9.21C144,106.08,140.79,108.37,136.26,108.34Z"
|
||||
transform="translate(0)"
|
||||
style="fill: currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M55.66,33.32a7.61,7.61,0,0,1,6.64,5,49.14,49.14,0,0,1,3.64,17,46.33,46.33,0,0,1-2.46,17.28c-2,5.77-8.24,7.79-12.89,4.15a8.1,8.1,0,0,1-2.39-9,31.68,31.68,0,0,0,1.68-12.36,35.77,35.77,0,0,0-2.43-11C45.35,38.94,49.2,33.32,55.66,33.32Z"
|
||||
transform="translate(0)"
|
||||
style="fill: currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M77.92,126.57a8,8,0,0,1-6.68,7.86,32.88,32.88,0,0,0-19.7,12.19,8.13,8.13,0,0,1-11.21,1.62,8,8,0,0,1-1.41-11.58A51.05,51.05,0,0,1,54,123.81a45.85,45.85,0,0,1,14-5.1C73.35,117.67,77.91,121.27,77.92,126.57Z"
|
||||
transform="translate(0)"
|
||||
style="fill: currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<style scoped></style>
|
4
src/components/common/SystemLogo/components/index.ts
Normal file
4
src/components/common/SystemLogo/components/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import SvgLogo from './SvgLogo.vue';
|
||||
import SvgFillLogo from './SvgFillLogo.vue';
|
||||
|
||||
export { SvgLogo, SvgFillLogo };
|
20
src/components/common/SystemLogo/index.vue
Normal file
20
src/components/common/SystemLogo/index.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg-fill-logo v-if="fill" />
|
||||
<svg-logo v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SvgLogo, SvgFillLogo } from './components';
|
||||
|
||||
interface Props {
|
||||
/** logo是否填充 */
|
||||
fill?: boolean;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
fill: false
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
3
src/components/common/index.ts
Normal file
3
src/components/common/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import SystemLogo from './SystemLogo/index.vue';
|
||||
|
||||
export { SystemLogo };
|
@ -1,3 +1 @@
|
||||
export const test = {
|
||||
age: 1
|
||||
};
|
||||
export * from './common';
|
||||
|
1
src/composables/common/index.ts
Normal file
1
src/composables/common/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './system';
|
28
src/composables/common/system.ts
Normal file
28
src/composables/common/system.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
|
||||
|
||||
interface AppInfo {
|
||||
/** 项目名称 */
|
||||
name: string;
|
||||
/** 项目标题 */
|
||||
title: string;
|
||||
/** 项目描述 */
|
||||
desc: string;
|
||||
}
|
||||
|
||||
/** 项目信息 */
|
||||
export function useAppInfo(): AppInfo {
|
||||
const { VITE_APP_NAME: name, VITE_APP_TITLE: title, VITE_APP_DESC: desc } = import.meta.env;
|
||||
|
||||
return {
|
||||
name,
|
||||
title,
|
||||
desc
|
||||
};
|
||||
}
|
||||
|
||||
/** 是否是移动端 */
|
||||
export function useIsMobile() {
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind);
|
||||
const isMobile = breakpoints.smaller('lg');
|
||||
return isMobile;
|
||||
}
|
1
src/composables/index.ts
Normal file
1
src/composables/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './common';
|
@ -1,3 +1,4 @@
|
||||
export * from './typeof';
|
||||
export * from './storage';
|
||||
export * from './service';
|
||||
export * from './system';
|
||||
|
8
src/enum/common/system.ts
Normal file
8
src/enum/common/system.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/** 登录模块 */
|
||||
export enum EnumLoginModule {
|
||||
'pwd-login' = '账密登录',
|
||||
'code-login' = '手机验证码登录',
|
||||
'register' = '注册',
|
||||
'reset-pwd' = '重置密码',
|
||||
'bind-wechat' = '微信绑定'
|
||||
}
|
6
src/interface/enum.ts
Normal file
6
src/interface/enum.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { EnumLoginModule } from '@/enum';
|
||||
|
||||
/** 登录模块 */
|
||||
export type LoginModuleKey = keyof typeof EnumLoginModule;
|
||||
|
||||
export type LoginModuleRegexp = LoginModuleKey;
|
@ -1,3 +1 @@
|
||||
export interface TestType {
|
||||
name: string;
|
||||
}
|
||||
export * from './enum';
|
||||
|
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<h4>Layout</h4>
|
||||
<div class="h-full">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
|
@ -1,3 +1,5 @@
|
||||
// import { getLoginModuleRegExp } from '@/utils';
|
||||
|
||||
/** 固定的路由 */
|
||||
const constantRoutes: AuthRoute.Route[] = [
|
||||
{
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { colord } from 'colord';
|
||||
import { getColorPalette } from '@/utils';
|
||||
import { getColorPalette, addColorAlpha } from '@/utils';
|
||||
|
||||
type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
@ -23,7 +22,7 @@ export function getThemeColors(colors: [ColorType, string][]) {
|
||||
{ scene: 'Suppl', handler: color => color },
|
||||
{ scene: 'Hover', handler: color => getColorPalette(color, 5) },
|
||||
{ scene: 'Pressed', handler: color => getColorPalette(color, 7) },
|
||||
{ scene: 'Active', handler: color => colord(color).alpha(0.1).toHex() }
|
||||
{ scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
|
||||
];
|
||||
|
||||
const themeColor: ThemeColor = {};
|
||||
|
@ -1 +1,5 @@
|
||||
@import './scrollbar.css';
|
||||
|
||||
html, body, #app {
|
||||
height: 100%;
|
||||
}
|
||||
|
6
src/typings/common/route.d.ts
vendored
6
src/typings/common/route.d.ts
vendored
@ -24,7 +24,7 @@ declare namespace AuthRoute {
|
||||
: `/${Key}`;
|
||||
|
||||
/** 路由路径 */
|
||||
type RoutePath<Key extends string = ''> =
|
||||
type RoutePath<Key extends string = string> =
|
||||
| '/'
|
||||
| Exclude<KeyToPath<RouteKey>, '/root' | '/redirect'>
|
||||
| Key
|
||||
@ -66,11 +66,11 @@ declare namespace AuthRoute {
|
||||
};
|
||||
|
||||
/** 单个路由的类型结构(后端返回此类型结构的路由) */
|
||||
interface Route {
|
||||
interface Route<T extends string = ''> {
|
||||
/** 路由名称(路由唯一标识) */
|
||||
name: RouteKey;
|
||||
/** 路由路径 */
|
||||
path: RoutePath;
|
||||
path: RoutePath<T>;
|
||||
/** 路由重定向 */
|
||||
redirect?: RoutePath;
|
||||
/**
|
||||
|
17
src/typings/common/util.d.ts
vendored
Normal file
17
src/typings/common/util.d.ts
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
declare namespace Util {
|
||||
/** convert a union to an intersection: X | Y | Z ==> X & Y & Z */
|
||||
type UnionToIntersection<T> = (T extends any ? (args: T) => any : never) extends (args: infer R) => any ? R : never;
|
||||
|
||||
/** returns true if the type is a union otherwise false */
|
||||
type IsUnion<T> = [T] extends [UnionToIntersection<T>] ? false : true;
|
||||
|
||||
type LastInUnion<T> = UnionToIntersection<T extends any ? (arg: T) => any : never> extends (arg: infer R) => any
|
||||
? R
|
||||
: never;
|
||||
|
||||
type UnionToTuple<T, U = T> = [T] extends [never]
|
||||
? []
|
||||
: [LastInUnion<T>, ...UnionToTuple<Exclude<U, LastInUnion<T>>>];
|
||||
|
||||
type Inter = UnionToTuple<'1' | '2'>;
|
||||
}
|
@ -1,6 +1,9 @@
|
||||
import { colord } from 'colord';
|
||||
import { colord, extend } from 'colord';
|
||||
import mixPlugin from 'colord/plugins/mix';
|
||||
import type { HsvColor } from 'colord';
|
||||
|
||||
extend([mixPlugin]);
|
||||
|
||||
type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
||||
|
||||
const hueStep = 2;
|
||||
@ -114,3 +117,22 @@ function getValue(hsv: HsvColor, i: number, isLight: boolean) {
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 给颜色加透明度
|
||||
* @param color - 颜色
|
||||
* @param alpha - 透明度(0 - 1)
|
||||
*/
|
||||
export function addColorAlpha(color: string, alpha: number) {
|
||||
return colord(color).alpha(alpha).toHex();
|
||||
}
|
||||
|
||||
/**
|
||||
* 颜色混合
|
||||
* @param firstColor - 第一个颜色
|
||||
* @param secondColor - 第二个颜色
|
||||
* @param ratio - 第二个颜色占比
|
||||
*/
|
||||
export function mixColor(firstColor: string, secondColor: string, ratio: number) {
|
||||
return colord(firstColor).mix(secondColor, ratio).toHex();
|
||||
}
|
||||
|
@ -1 +1,2 @@
|
||||
export * from './helpers';
|
||||
export * from './regexp';
|
||||
|
7
src/utils/router/regexp.ts
Normal file
7
src/utils/router/regexp.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { LoginModuleKey } from '@/interface';
|
||||
|
||||
/** 获取登录页面模块的动态路由的正则 */
|
||||
export function getLoginModuleRegExp() {
|
||||
const modules: LoginModuleKey[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];
|
||||
return modules.join('|');
|
||||
}
|
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
height="896"
|
||||
width="967.8852157128662"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="path-2"
|
||||
opacity="1"
|
||||
fill-rule="evenodd"
|
||||
d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
|
||||
/>
|
||||
<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
|
||||
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
|
||||
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity="1">
|
||||
<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
/** 过渡的开始颜色 */
|
||||
startColor?: string;
|
||||
/** 过渡的结束颜色 */
|
||||
endColor?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<svg height="1337" width="1337">
|
||||
<defs>
|
||||
<path
|
||||
id="path-1"
|
||||
opacity="1"
|
||||
fill-rule="evenodd"
|
||||
d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
|
||||
/>
|
||||
<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
|
||||
<stop offset="0" :stop-color="startColor" stop-opacity="1" />
|
||||
<stop offset="1" :stop-color="endColor" stop-opacity="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity="1">
|
||||
<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
/** 过渡的开始颜色 */
|
||||
startColor?: string;
|
||||
/** 过渡的结束颜色 */
|
||||
endColor?: string;
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
startColor: '#28aff0',
|
||||
endColor: '#120fc4'
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
@ -0,0 +1,4 @@
|
||||
import CornerTop from './CornerTop.vue';
|
||||
import CornerBottom from './CornerBottom.vue';
|
||||
|
||||
export { CornerTop, CornerBottom };
|
27
src/views/system/login/components/LoginBg/index.vue
Normal file
27
src/views/system/login/components/LoginBg/index.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="absolute-lt wh-full overflow-hidden">
|
||||
<div class="absolute -right-300px -top-900px">
|
||||
<corner-top :start-color="lightColor" :end-color="darkColor" />
|
||||
</div>
|
||||
<div class="absolute -left-200px -bottom-400px">
|
||||
<corner-bottom :start-color="darkColor" :end-color="lightColor" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { getColorPalette } from '@/utils';
|
||||
import { CornerTop, CornerBottom } from './components';
|
||||
|
||||
interface Props {
|
||||
/** 主题颜色 */
|
||||
themeColor: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const lightColor = computed(() => getColorPalette(props.themeColor, 3));
|
||||
const darkColor = computed(() => getColorPalette(props.themeColor, 6));
|
||||
</script>
|
||||
<style scoped></style>
|
3
src/views/system/login/components/index.ts
Normal file
3
src/views/system/login/components/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import LoginBg from './LoginBg/index.vue';
|
||||
|
||||
export { LoginBg };
|
@ -1,8 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-primary">Login</h3>
|
||||
<div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
|
||||
<n-card :bordered="false" size="large" class="z-20 !w-auto rounded-20px shadow-sm">
|
||||
<div class="w-360px">
|
||||
<header class="flex-y-center justify-between">
|
||||
<div class="w-70px h-70px rounded-35px overflow-hidden">
|
||||
<system-logo class="wh-full text-primary" :fill="true" />
|
||||
</div>
|
||||
<n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
|
||||
</header>
|
||||
<main class="pt-24px">
|
||||
<h3 class="text-18px text-primary font-medium">登录</h3>
|
||||
</main>
|
||||
</div>
|
||||
</n-card>
|
||||
<login-bg :theme-color="theme.themeColor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { NCard, NGradientText } from 'naive-ui';
|
||||
import { SystemLogo } from '@/components';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { useAppInfo } from '@/composables';
|
||||
import { mixColor } from '@/utils';
|
||||
import { LoginBg } from './components';
|
||||
|
||||
const theme = useThemeStore();
|
||||
const { title } = useAppInfo();
|
||||
|
||||
const bgColor = computed(() => {
|
||||
const COLOR_WHITE = '#ffffff';
|
||||
const darkMode = false;
|
||||
const ratio = darkMode ? 0.6 : 0.2;
|
||||
return mixColor(COLOR_WHITE, theme.themeColor, ratio);
|
||||
});
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
Loading…
Reference in New Issue
Block a user