Zlpt_Portal/src/components/Navmenu/index.vue

52 lines
1.3 KiB
Vue

<script setup lang="ts">
const router = useRouter()
const navMenuList = [
{ name: '首页', routerName: 'home' },
{ name: '自选直租', routerName: 'equipList' },
{ name: '寻源比价', routerName: '/home' },
{ name: '二手交易', routerName: '/home' },
{ name: '保险业务', routerName: '/home' },
{ name: '检验业务', routerName: '/home' },
{ name: '企业专区', routerName: '/home' }
]
const navMenuClick = (name) => {
router.push({ name })
}
</script>
<template>
<ul class="nav-menu">
<li v-for="item in navMenuList" :key="item.name" @click="navMenuClick(item.routerName)">
{{ item.name }}
</li>
</ul>
</template>
<style lang="scss" scoped>
.nav-menu {
height: 43px;
background-color: #f7f9fa;
border-radius: 8px;
display: flex;
align-items: center;
li {
color: #7d7d7d;
padding: 0 20px;
border-right: 1px solid #7d7d7d;
&:hover {
cursor: pointer;
color: #333333;
font-weight: bold;
}
&:last-child {
border: none;
}
}
}
</style>