diff --git a/build/plugins.ts b/build/plugins.ts index bc6b743..2cef478 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -1,7 +1,7 @@ import UnoCssIcons from '@unocss/preset-icons'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; -import { presetIcons, presetUno } from 'unocss'; +import { presetIcons } from 'unocss'; import UnoCSS from 'unocss/vite'; import type { PluginOption } from 'vite'; import { vitePluginFakeServer } from 'vite-plugin-fake-server'; @@ -37,7 +37,6 @@ export const plugins = (mode): PluginOption[] => { display: 'inline-block', }, }), - presetUno(), ], }), compressPack(mode), diff --git a/src/assets/images/bg/bg-count.png b/src/assets/images/bg/bg-count.png new file mode 100644 index 0000000..769b106 Binary files /dev/null and b/src/assets/images/bg/bg-count.png differ diff --git a/src/assets/images/bg/bg-frame-4.png b/src/assets/images/bg/bg-frame-4.png new file mode 100644 index 0000000..b01f882 Binary files /dev/null and b/src/assets/images/bg/bg-frame-4.png differ diff --git a/src/assets/images/manage-forms/frame-1.png b/src/assets/images/manage-forms/frame-1.png new file mode 100644 index 0000000..9fa05be Binary files /dev/null and b/src/assets/images/manage-forms/frame-1.png differ diff --git a/src/assets/styles/animations/src/transition.scss b/src/assets/styles/animations/src/transition.scss index 0f71b68..374ebbd 100644 --- a/src/assets/styles/animations/src/transition.scss +++ b/src/assets/styles/animations/src/transition.scss @@ -53,14 +53,26 @@ transition: var(--pure-transition-duration) all !important; } -//.slide-enter-active, -//.slide-leave-active { -// transition: opacity 0.3s, -// transform 0.3s; -//} -// -//.slide-enter-from, -//.slide-leave-to { -// opacity: 0; -// transform: translateX(-30%); -//} \ No newline at end of file +.slide-left-enter-active, +.slide-left-leave-active { + transition: opacity 0.3s, + transform 0.3s; +} + +.slide-left-enter-from, +.slide-left-leave-to { + opacity: 0; + transform: translateX(-30%); +} + +.slide-right-enter-active, +.slide-right-leave-active { + transition: opacity 0.3s, + transform 0.3s; +} + +.slide-right-enter-from, +.slide-right-leave-to { + opacity: 0; + transform: translateX(30%); +} \ No newline at end of file diff --git a/src/assets/styles/common/src/element.scss b/src/assets/styles/common/src/element.scss index 3657e47..106a8ba 100644 --- a/src/assets/styles/common/src/element.scss +++ b/src/assets/styles/common/src/element.scss @@ -17,4 +17,20 @@ &:hover { color: var(--color-hover); } +} + +.thin-line { + position: relative; +} + +.thin-line::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 100%; + background-color: var(--color-primary-secondary); + transform: scaleX(0.8); + transform-origin: 0 0; } \ No newline at end of file diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index 70bea28..942c9c6 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -1,10 +1,12 @@ @use "animations/animations"; @use "common/common"; +@use "views/views"; :root { --colot-primary: #027AFF; --color-primary-secondary: #00FFFF; --color-info: #7CC1FF; + --color-info-secondary: #707070; --color-hover: #1C8ADF; --color-warning: #FFBE44; --color-warning-secondary: #FEDB65; diff --git a/src/assets/styles/views/src/manage-forms.scss b/src/assets/styles/views/src/manage-forms.scss new file mode 100644 index 0000000..c9ed00c --- /dev/null +++ b/src/assets/styles/views/src/manage-forms.scss @@ -0,0 +1,30 @@ +.manage-forms { + padding: 19px 25px; + width: 100%; + height: 100%; + + .manage-forms-slide { + width: 530px; + height: 100%; + color: #fff; + } + + .common-bg { + padding: 10px 15px; + background: rgba(14, 95, 255, 0.2); + } + + .title { + width: 172px; + height: 42px; + font-size: 22px; + color: #fff; + background: url('@/assets/images/bg/bg-frame-4.png') no-repeat; + background-size: cover; + } + + .title-description { + font-size: 12px; + color: var(--color-info-secondary); + } +} \ No newline at end of file diff --git a/src/assets/styles/views/views.scss b/src/assets/styles/views/views.scss new file mode 100644 index 0000000..bcd0b8e --- /dev/null +++ b/src/assets/styles/views/views.scss @@ -0,0 +1 @@ +@use "@/assets/styles/views/src/manage-forms"; \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 3b7b83f..1de4015 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error]; const router = createRouter({ history: createWebHashHistory(), routes, - scrollBehavior: () => ({ top: 0, behavior: 'smooth' }), + scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' }), }); /** 全局注册 router */ @@ -22,10 +22,4 @@ export const resetRouter = () => { router.replace({ path: '/' }).then(); }; -// router.afterEach((to, from) => { -// const toDepth = to.path.split('/').length; -// const fromDepth = from.path.split('/').length; -// to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'; -// }); - export default router; diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts index 9514e09..3ac3a43 100644 --- a/src/router/modules/home.ts +++ b/src/router/modules/home.ts @@ -1,3 +1,4 @@ +import Layout from '@/layout/index.vue'; import type { RouteConfigsTable } from '@/types/router/Route'; const routes: RouteConfigsTable[] = [ @@ -7,6 +8,14 @@ const routes: RouteConfigsTable[] = [ component: () => import('@/views/welcome/index.vue'), meta: { transition: 'fade', title: '后台管理系统大标题' }, }, + + { + path: '/manage-forms', + name: 'manageForms', + component: () => import('@/views/manage-forms/index.vue'), + meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' }, + }, + { path: '/smart-parking', name: 'smartParking', @@ -14,10 +23,15 @@ const routes: RouteConfigsTable[] = [ meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' }, }, { - path: '/manage-forms', - name: 'manageForms', - component: () => import('@/views/manage-forms/index.vue'), - meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' }, + path: '/redirect', + component: Layout, + meta: { hidden: true }, + children: [ + { + path: '/redirect/:path(.*)', + component: () => import('@/views/redirect/index.vue'), + }, + ], }, ]; diff --git a/src/utils/digte-formatter.ts b/src/utils/digte-formatter.ts new file mode 100644 index 0000000..92dfe06 --- /dev/null +++ b/src/utils/digte-formatter.ts @@ -0,0 +1,10 @@ +export function formatter(number) { + const numbers = number.toString().split('').reverse(); + const segs = []; + + while (numbers.length) segs.push(numbers.splice(0, 3).join('')); + + return segs.join(',').split('').reverse().join(''); +} + +export default formatter; diff --git a/src/views/manage-forms/components/manage-left/index.vue b/src/views/manage-forms/components/manage-left/index.vue index 07be843..df8f8e0 100644 --- a/src/views/manage-forms/components/manage-left/index.vue +++ b/src/views/manage-forms/components/manage-left/index.vue @@ -1,42 +1,201 @@ - + diff --git a/src/views/manage-forms/components/manage-right/index.vue b/src/views/manage-forms/components/manage-right/index.vue index 07be843..1243395 100644 --- a/src/views/manage-forms/components/manage-right/index.vue +++ b/src/views/manage-forms/components/manage-right/index.vue @@ -1,42 +1,40 @@ diff --git a/src/views/manage-forms/index.vue b/src/views/manage-forms/index.vue index 532c591..5096c1c 100644 --- a/src/views/manage-forms/index.vue +++ b/src/views/manage-forms/index.vue @@ -5,18 +5,9 @@ import ManageRight from '@/views/manage-forms/components/manage-right/index.vue' - - diff --git a/uno.config.ts b/uno.config.ts index a7e32fe..6426baf 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -24,6 +24,7 @@ export default defineConfig({ primary: '#027AFF', 'primary-secondary': '#00FFFF', info: '#7CC1FF', + 'info-secondary': '#707070', warning: '#FFBE44', 'warning-secondary': '#FEDB65', },