diff --git a/package.json b/package.json index 95b63c2f..203e2973 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "eslint-plugin-import": "^2.25.3", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.2.0", + "lodash": "^4.17.21", "prettier": "^2.5.1", "sass": "^1.43.2", "sass-loader": "^12.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef70e783..834d5fd3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,6 +15,7 @@ specifiers: eslint-plugin-import: ^2.25.3 eslint-plugin-prettier: ^4.0.0 eslint-plugin-vue: ^8.2.0 + lodash: ^4.17.21 mockjs: ^1.1.0 naive-ui: ^2.19.9 pinia: ^2.0.6 @@ -52,6 +53,7 @@ devDependencies: eslint-plugin-import: rg.cnpmjs.org/eslint-plugin-import/2.25.3_eslint@8.4.1 eslint-plugin-prettier: rg.cnpmjs.org/eslint-plugin-prettier/4.0.0_90bd2ba582f6d1348d73031482d782e2 eslint-plugin-vue: rg.cnpmjs.org/eslint-plugin-vue/8.2.0_eslint@8.4.1 + lodash: rg.cnpmjs.org/lodash/4.17.21 prettier: rg.cnpmjs.org/prettier/2.5.1 sass: rg.cnpmjs.org/sass/1.44.0 sass-loader: rg.cnpmjs.org/sass-loader/12.4.0_sass@1.44.0 diff --git a/src/assets/images/chart/bar_x.png b/src/assets/images/chart/bar_x.png new file mode 100644 index 00000000..6d3872e5 Binary files /dev/null and b/src/assets/images/chart/bar_x.png differ diff --git a/src/assets/images/chart/bar_y.png b/src/assets/images/chart/bar_y.png new file mode 100644 index 00000000..bd26b1ee Binary files /dev/null and b/src/assets/images/chart/bar_y.png differ diff --git a/src/assets/images/chart/funnel.png b/src/assets/images/chart/funnel.png new file mode 100644 index 00000000..6bb7a7a9 Binary files /dev/null and b/src/assets/images/chart/funnel.png differ diff --git a/src/assets/images/chart/heatmap.png b/src/assets/images/chart/heatmap.png new file mode 100644 index 00000000..509e6098 Binary files /dev/null and b/src/assets/images/chart/heatmap.png differ diff --git a/src/assets/images/chart/line.png b/src/assets/images/chart/line.png new file mode 100644 index 00000000..a1c1a974 Binary files /dev/null and b/src/assets/images/chart/line.png differ diff --git a/src/assets/images/chart/line_gradient.png b/src/assets/images/chart/line_gradient.png new file mode 100644 index 00000000..ceccbdda Binary files /dev/null and b/src/assets/images/chart/line_gradient.png differ diff --git a/src/assets/images/chart/map.png b/src/assets/images/chart/map.png new file mode 100644 index 00000000..991491a8 Binary files /dev/null and b/src/assets/images/chart/map.png differ diff --git a/src/assets/images/chart/photo.png b/src/assets/images/chart/photo.png new file mode 100644 index 00000000..216be95f Binary files /dev/null and b/src/assets/images/chart/photo.png differ diff --git a/src/assets/images/chart/pie.png b/src/assets/images/chart/pie.png new file mode 100644 index 00000000..f7caf1d8 Binary files /dev/null and b/src/assets/images/chart/pie.png differ diff --git a/src/assets/images/chart/point.png b/src/assets/images/chart/point.png new file mode 100644 index 00000000..363f01d2 Binary files /dev/null and b/src/assets/images/chart/point.png differ diff --git a/src/assets/images/chart/radar.png b/src/assets/images/chart/radar.png new file mode 100644 index 00000000..4602a4ae Binary files /dev/null and b/src/assets/images/chart/radar.png differ diff --git a/src/assets/images/chart/static.png b/src/assets/images/chart/static.png new file mode 100644 index 00000000..189de23d Binary files /dev/null and b/src/assets/images/chart/static.png differ diff --git a/src/assets/images/chart/tree_map.png b/src/assets/images/chart/tree_map.png new file mode 100644 index 00000000..b1af8871 Binary files /dev/null and b/src/assets/images/chart/tree_map.png differ diff --git a/src/assets/images/chart/variable.png b/src/assets/images/chart/variable.png new file mode 100644 index 00000000..d33cd486 Binary files /dev/null and b/src/assets/images/chart/variable.png differ diff --git a/src/assets/images/login/login-bg.png b/src/assets/images/login/login-bg.png index 01bd08c5..1a73ba68 100644 Binary files a/src/assets/images/login/login-bg.png and b/src/assets/images/login/login-bg.png differ diff --git a/src/assets/images/login/one.png b/src/assets/images/login/one.png index f075b091..8ebba30b 100644 Binary files a/src/assets/images/login/one.png and b/src/assets/images/login/one.png differ diff --git a/src/assets/images/login/three.png b/src/assets/images/login/three.png index a0a8fa8b..47e45db2 100644 Binary files a/src/assets/images/login/three.png and b/src/assets/images/login/three.png differ diff --git a/src/assets/images/login/two.png b/src/assets/images/login/two.png index 1d83c15f..149cfacc 100644 Binary files a/src/assets/images/login/two.png and b/src/assets/images/login/two.png differ diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index 9cb6be04..6b12ba81 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -1,6 +1,7 @@ import type { App } from 'vue'; import { create, + NA, NConfigProvider, NMessageProvider, NDialogProvider, @@ -67,11 +68,13 @@ import { NBackTop, NSkeleton, NCarousel, + NScrollbar, NCollapseTransition } from 'naive-ui'; const naive = create({ components: [ + NA, NMessageProvider, NDialogProvider, NConfigProvider, @@ -138,6 +141,7 @@ const naive = create({ NBackTop, NSkeleton, NCarousel, + NScrollbar, NCollapseTransition ], }); diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 810d81fa..7de8eb74 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -30,4 +30,7 @@ export const theme = { }; // 修改边框圆角 -export const borderRadius = '8px' \ No newline at end of file +export const borderRadius = '8px' + +// 轮播间隔 +export const carouselInterval = 5000 \ No newline at end of file diff --git a/src/styles/common/animation.scss b/src/styles/common/animation.scss index fa284f7a..20ec553f 100644 --- a/src/styles/common/animation.scss +++ b/src/styles/common/animation.scss @@ -1,3 +1,4 @@ +// 淡入淡出 .v-modal-enter { animation: v-modal-in 0.2s ease; } @@ -21,3 +22,16 @@ opacity: 0; } } + +// 移动动画 +.list-complete-item { + transition: all 1s; +} +.list-complete-enter, +.list-complete-leave-to { + opacity: 0; + transform: translateY(30px); +} +.list-complete-leave-active { + position: absolute; +} diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss index 632ef047..26d10a6c 100644 --- a/src/styles/common/var.scss +++ b/src/styles/common/var.scss @@ -10,6 +10,7 @@ $--color-text-2: hsla(0, 0%, 100%, 0.7); $--color-text-3: hsla(0, 0%, 100%, 0.5); $--color-text-4: hsla(0, 0%, 100%, 0.3); +$--max-width: 1920px; // 顶部距离 $--header-height: 60px; // 模糊 diff --git a/src/utils/index.ts b/src/utils/index.ts index d69a2050..debc6588 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -13,12 +13,18 @@ export function getUUID(randomLength: number) { ).toString(36); } - /** * * render 图标 */ -export const renderIcon = (icon: any) => { +export const renderIcon = (icon: typeof NIcon) => { return () => h(NIcon, null, { default: () => h(icon) }); } - +/** + * * 处理 vite 中无法使用 require 的问题 + * @param name + * @returns + */ +export const requireUrl = (path: string, name: string) => { + return new URL(`${path}/${name}`, import.meta.url).href +} diff --git a/src/views/login/index.vue b/src/views/login/index.vue index be0cb126..5c2efd5c 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,15 +1,29 @@