Large-Visual-Screen
/
vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加路由动画

This commit is contained in:
Bunny 2025-03-01 20:52:06 +08:00
parent b14be1af3e
commit f9f98ad44a
19 changed files with 160 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.development
View File

@ -20,7 +20,8 @@ VITE_MOCK_DEV_SERVER=true
VITE_STRICT_PORT=false
# 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit
VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
#VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN=false

9
src/App.vue
View File

@ -1,10 +1,15 @@
<template>
<router-view />
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
<component :is="Component" :key="route.path" />
</transition>
</router-view>
</template>
<style>
#app {
width: 100%;
height: 100%;
//height: 100%;
height: 1080px;
}
</style>

3
src/assets/styles/animations/animations.scss
View File

@ -1 +1,2 @@
@use "src/rotate";
@use "src/rotate";
@use "src/transition";

66
src/assets/styles/animations/src/transition.scss Normal file
View File

@ -0,0 +1,66 @@
/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all 0.38s;
}
.fade-transform-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* breadcrumb transition */
.breadcrumb-enter-active {
transition: all 0.4s;
}
.breadcrumb-leave-active {
position: absolute;
transition: all 0.3s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
/**
* @description 重置el-menu的展开收起动画时长
*/
.outer-most .el-collapse-transition-leave-active,
.outer-most .el-collapse-transition-enter-active {
transition: 0.2s all ease-in-out !important;
}
.horizontal-collapse-transition {
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%);
//}

22
src/assets/styles/common/common.scss
View File

@ -1,6 +1,26 @@
@use "src/element";
/* 定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: var(--el-text-color-secondary);
}
/* 定义滚动条轨道内阴影+圆角 */
::-webkit-scrollbar-track {
background-color: #ebecef;
border-radius: 5px;
box-shadow: inset 0 0 6px #ebecef;
}
/* 定义滑块内阴影+圆角 */
::-webkit-scrollbar-thumb {
background-color: #d0d2d6;
border-radius: 5px;
box-shadow: inset 0 0 6px #d0d2d6;
}
body {
background: var(--background-color);
}
}

10
src/assets/styles/common/src/element.scss
View File

@ -8,3 +8,13 @@
border: 2px dashed; /* 边框宽度、样式和颜色 */
border-radius: 50%; /* 将元素变成圆形 */
}
.hover {
transition: all 0.3s;
cursor: pointer;
&:hover {
color: var(--color-hover);
}
}

6
src/assets/styles/global.scss
View File

@ -2,5 +2,11 @@
@use "common/common";
:root {
--colot-primary: #027AFF;
--color-primary-secondary: #00FFFF;
--color-info: #7CC1FF;
--color-hover: #1C8ADF;
--color-warning: #FFBE44;
--color-warning-secondary: #FEDB65;
--background-color: #051135;
}

3
src/components/Common/BarOp.vue
View File

@ -7,7 +7,7 @@
<li><img alt="icon-2" src="@/assets/images/icon/icon-2.png" /></li>
<li><img alt="icon-3" src="@/assets/images/icon/icon-3.png" /></li>
</ul>
<span class="c-primary">王菠萝</span>
<span class="hover c-primary">王菠萝</span>
</div>
</template>
@ -32,6 +32,7 @@
span {
float: left;
font-size: 12px;
cursor: pointer;
}
}
</style>

17
src/layout/components/layout-content/index.vue
View File

@ -3,10 +3,10 @@ import PageList from '@/layout/components/layout-content/page-list.vue';
</script>
<template>
<div class="flex-y-around">
<div class="flex-y-around welcome">
<div class="mt-[158px]">
<p class="c-white">
<img alt="" src="@/assets/images/icon/welcome.png" />
<img alt="welcome" src="@/assets/images/icon/welcome.png" />
<i class="c-primary-secondary">xxxx</i>
你好 欢迎使用xxxxxxxzz
</p>
@ -14,3 +14,16 @@ import PageList from '@/layout/components/layout-content/page-list.vue';
<page-list />
</div>
</template>
<style lang="scss " scoped>
.welcome {
p {
font-size: 16px;
}
img {
width: 239px;
height: 34px;
}
}
</style>

5
src/layout/components/layout-content/page-list.vue
View File

@ -65,6 +65,11 @@ const router = useRouter();
background: linear-gradient(to bottom, #0ad1d1c9, #10607cc9);
}
img {
width: 108px;
height: 108px;
}
span {
position: relative;
display: block;

11
src/layout/components/layout-footer/index.vue
View File

@ -30,7 +30,6 @@ const router = useRouter();
<style lang="scss" scoped>
footer {
margin: 190px 0 0 0;
z-index: 6;
ul {
width: 431px;
@ -45,10 +44,18 @@ footer {
width: 90px;
height: 90px;
color: #7cc1ff;
background: url('@/assets/images/bg/bg-main-2.png');
background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
background-size: cover;
img {
width: 26px;
height: 26px;
}
span {
margin: 4px 0 0 0;
font-size: 13px;
cursor: pointer;
}
}
}

2
src/layout/components/layout-header/index.vue
View File

@ -20,7 +20,7 @@ import BarOp from '@/components/Common/BarOp.vue';
h1 {
text-align: center;
line-height: 108px;
line-height: 100px;
font-size: 42px;
}
}

10
src/layout/index.vue
View File

@ -6,17 +6,19 @@ import LayoutHeader from '@/layout/components/layout-header/index.vue';
<template>
<div class="layout-container">
<div class="particle" />
<layout-header />
<div class="particle">
<layout-header />
<layout-content />
<layout-content />
<layout-footer />
<layout-footer />
</div>
</div>
</template>
<style lang="scss" scoped>
.layout-container {
position: relative;
width: 100%;
height: 100%;
background: url('@/assets/images/bg/bg-layout.png') no-repeat center;

1
src/router/index.ts
View File

@ -22,4 +22,5 @@ export const setUpRouter = (app: App<Element>) => {
export const resetRouter = () => {
router.replace({ path: '/' }).then();
};
export default router;

17
src/router/modules/home.ts
View File

@ -7,22 +7,7 @@ const routes: RouteRecordRaw[] = [
path: '/',
name: '/',
component: Layout,
// redirect: '/dashboard',
children: [
// {
// path: 'dashboard',
// component: () => import('@/views/index.vue'),
// // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致
// // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
// name: 'Dashboard',
// meta: {
// title: 'dashboard',
// icon: 'homepage',
// affix: true,
// keepAlive: true,
// },
// },
],
meta: { transition: 'fade' },
},
{
path: '/smart-parking',

4
src/views/smart-parking/components/parking-content/truck-monitor-center-item.vue
View File

@ -11,11 +11,11 @@ defineProps({
<div class="mt-[-12px] font-size-[16px] c-white">今日 进出车辆数/辆</div>
<div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
<div class="flex-center mt-[8px] c-primary">
<span class="float-left font-size-[14px] c-primary-secondary cursor-pointer">查看</span>
<span class="float-left font-size-[14px] c-primary-secondary cursor-pointer hover">查看</span>
<img
alt="arrow-item"
class="float-left h-[16px]"
src="../../../../assets/images/arrow/arrow-item.png"
src="@/assets/images/arrow/arrow-item.png"
/>
</div>
</div>

2
src/views/smart-parking/components/parking-footer/index.vue
View File

@ -5,7 +5,7 @@
<ul class="flex-x-around">
<li v-for="index in new Array(5)" :key="index" class="rectangle flex-y-center">
<img alt="车辆管理" src="@/assets/images/car/car-39.png" />
<span class="text-white">车辆管理</span>
<span class="text-white hover">车辆管理</span>
</li>
</ul>
</footer>

8
src/views/smart-parking/components/parking-header/index.vue
View File

@ -2,13 +2,9 @@
import { useRouter } from 'vue-router';
import BarOp from '@/components/Common/BarOp.vue';
import { resetRouter } from '@/router';
const router = useRouter();
/** 点击家目录 */
const onHomeClick = () => {
router.push('/');
};
</script>
<template>
@ -22,7 +18,7 @@ const onHomeClick = () => {
alt="icon-setting"
class="ml-[-284px]"
src="@/assets/images/icon/icon-home.png"
@click="onHomeClick"
@click="resetRouter()"
/>
<img alt="icon-home" class="ml-[284px]" src="@/assets/images/icon/icon-setting.png" />
</div>

2
stylelint.config.js
View File

@ -14,7 +14,7 @@ module.exports = {
customSyntax: 'postcss-html',
},
{
files: ['**/*.{css,scss}'],
files: ['**/*.{scss,css}'],
customSyntax: 'postcss-scss',
},
],