feat: 首页板块卡片增加点击效果

src/router/router-guards.ts

@@ -45,10 +45,10 @@ export function createRouterGuards(router: Router) {
 
     // Whitelist can be directly entered
     if (whitePathList.includes(to.path as PageEnum)) {
-      next();
       if (token && !asyncRouteStore.getIsDynamicAddedRoute) {
-        setDynamicRoute(router);
+        await setDynamicRoute(router);
       }
+      next();
       return;
     }
 

src/views/home/src/components/IntroductionCard.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="introduction-card-container">
-    <div class="introduction-card" v-for="item in COMPANY_INTRODUCTION_CARD_LIST" :key="item.title">
+    <div
+      class="introduction-card"
+      v-for="item in COMPANY_INTRODUCTION_CARD_LIST"
+      :key="item.title"
+      @click="handleCardClick(item)"
+    >
       <div class="introduction-card__header">
         <img :src="item.icon" />
         <p>{{ item.title }}</p>
@@ -17,7 +22,19 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import router from '@/router';
+  import { NAV_LIST } from '@/constant/nav';
   import { COMPANY_INTRODUCTION_CARD_LIST } from '../constant';
+
+  const handleCardClick = (item) => {
+    const navItem = NAV_LIST.find((nav) => nav.meta.title === item.title);
+    if (!navItem || !navItem.path) {
+      router.replace({ name: 'StayTune' });
+      return;
+    }
+
+    router.push(navItem.path);
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -27,12 +44,15 @@
     width: 100%;
     height: 100%;
   }
+
   .introduction-card {
     width: 361cpx;
     height: 100%;
     padding: 15cpx 34cpx 0 34cpx;
     background-color: $white-color;
     border-radius: 5cpx;
+    cursor: pointer;
+
     &__header {
       @include flex-center;
       flex-direction: column;
@@ -40,11 +60,13 @@
       font-weight: 550;
       font-size: 24cpx;
       color: #333;
+
       img {
         width: 80cpx;
         height: 80cpx;
       }
     }
+
     &__content {
       display: flex;
       justify-content: space-between;
@@ -52,6 +74,13 @@
       color: #666;
     }
   }
+
+  .introduction-card:hover {
+    transform: scale(1.02);
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
+  }
+
   .section-content {
     display: flex;
     flex-direction: column;