vue 网站导航栏

html 复制代码
<template>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo-area">
      <img src="" alt="" class="logoImg" />
      <span class="system-name">xxxx管理系统</span>
    </div>
    <el-menu mode="horizontal" :default-active="activeMenu" class="nav-menu" :ellipsis="false" @select="handleMenuChange">
      <el-menu-item index="index">首页</el-menu-item>
      <el-menu-item index="file" :class="{ active: activeIndex == 1 }">文件检索</el-menu-item>
      <el-menu-item index="list" :class="{ active: activeIndex == 2 }">成果列表</el-menu-item>
      <el-menu-item index="download" :class="{ active: activeIndex == 3 }">下载中心</el-menu-item>
      <el-menu-item index="help" :class="{ active: activeIndex == 4 }">帮助中心</el-menu-item>
    </el-menu>
  </header>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  activeIndex: {
    type: Number,
    default: 1,
  },
})

const route = useRoute()
const router = useRouter()

const activeMenu = ref('download')

const handleMenuChange = (path) => {
  router.push({ path: path, query: {} })
}
</script>

<style lang="scss" scoped>
/* 顶部导航栏 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 110px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  color: #409eff;
  margin-right: 8px;
}

.system-name {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.nav-menu {
  --el-menu-bg-color: transparent;
  --el-menu-active-text-color: $primary;
  --el-menu-text-color: #606266;
}

.nav-menu .active {
  border-bottom: 2px solid $primary;
}

.logoImg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: $primary;
  margin-right: 12px;
}
</style>