Browse Source

feat(footer): 为底部导航标题添加可点击功能

- 为导航标题添加 info-title-clickable 样式类
- 实现 handleNavClick 点击事件处理器
- 添加鼠标悬停效果和指针样式
- 当存在 URL 或链接时启用点击交互功能
肖路 3 days ago
parent
commit
44bad4cda3
1 changed files with 15 additions and 1 deletions
  1. 15 1
      src/layout/components/foot.vue

+ 15 - 1
src/layout/components/foot.vue

@@ -18,7 +18,13 @@
         <div class="head-right">
           <div class="info-bos flex-row-start">
             <div v-for="(navItem, index) in bottomNavList" :key="index" :style="{ marginRight: index < bottomNavList.length - 1 ? '100px' : '0' }">
-              <div class="info-title">{{ navItem.navigationName }}</div>
+              <div
+                class="info-title"
+                :class="{ 'info-title-clickable': navItem.url || navItem.link }"
+                @click="handleNavClick(navItem)"
+              >
+                {{ navItem.navigationName }}
+              </div>
               <div
                 v-for="(link, linkIndex) in navItem.children"
                 :key="linkIndex"
@@ -186,6 +192,14 @@ onMounted(() => {
             font-size: 14px;
             color: #101828;
             margin-bottom: 20px;
+
+            &.info-title-clickable {
+              cursor: pointer;
+
+              &:hover {
+                color: #e7000b;
+              }
+            }
           }
 
           .info-text {