You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.7 KiB
Vue
72 lines
2.7 KiB
Vue
<!--
|
|
* @Author: donghao donghao@supervision.ltd
|
|
* @Date: 2025-03-06 15:00:26
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
* @LastEditTime: 2025-03-06 15:51:05
|
|
* @FilePath: \vite-ai\data-dashboard\src\views\dashboard\components\footer.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<template>
|
|
<div class="footer-box">
|
|
<ul class="nav-list">
|
|
<li v-for="item in navList" :key="item.path" :class="{ active: isActive(item.fullPath) }">
|
|
<router-link :to="item.fullPath" class="nav-item">
|
|
<div class="nav-icon"></div>
|
|
<div>{{ item?.meta?.title }}</div>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useRoute } from 'vue-router';
|
|
import { dashboardRoutes } from '@/router/dashboard';
|
|
// 动态导航数据
|
|
const navList = computed(() => dashboardRoutes?.children)
|
|
const route = useRoute();
|
|
|
|
// 判断当前路由是否匹配
|
|
const isActive = (path: string) => {
|
|
console.log(route.path, "isActive", path);
|
|
return route.path.startsWith(path) || route.path === path;
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footer-box {
|
|
margin-top: 30px;
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
padding: 0;
|
|
|
|
.nav-item {
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
|
|
.nav-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>') no-repeat center;
|
|
background-size: 80%;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
color: #42a5f5;
|
|
|
|
.nav-icon {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>'), linear-gradient(45deg, #42a5f5, #1976d2);
|
|
background-blend-mode: multiply;
|
|
filter: drop-shadow(0 0 5px #42a5f5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|