feat: 添加路由动画

.env.development

@@ -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

src/App.vue

@@ -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>

src/assets/styles/animations/animations.scss

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

src/assets/styles/animations/src/transition.scss

@@ -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%);
+//}

src/assets/styles/common/common.scss

@@ -1,5 +1,25 @@
 @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);

src/assets/styles/common/src/element.scss

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

src/assets/styles/global.scss

@@ -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;
 }

src/components/Common/BarOp.vue

@@ -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>

src/layout/components/layout-content/index.vue

@@ -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>

src/layout/components/layout-content/page-list.vue

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

src/layout/components/layout-footer/index.vue

@@ -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;
       }
     }
   }

src/layout/components/layout-header/index.vue

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

src/layout/index.vue

@@ -6,17 +6,19 @@ import LayoutHeader from '@/layout/components/layout-header/index.vue';
 
 <template>
   <div class="layout-container">
-    <div class="particle" />
+    <div class="particle">
       <layout-header />
 
       <layout-content />
 
       <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;

src/router/index.ts

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

src/router/modules/home.ts

@@ -7,22 +7,7 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     name: '/',
     component: Layout,
-    // redirect: '/dashboard',
+    meta: { transition: 'fade' },
-    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,
-      // 	},
-      // },
-    ],
   },
   {
     path: '/smart-parking',

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

@@ -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>

src/views/smart-parking/components/parking-footer/index.vue

@@ -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>

src/views/smart-parking/components/parking-header/index.vue

@@ -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>

stylelint.config.js

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