<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="navbar-left">
        <div class="logo">
          <img src="/picture/logo.png" alt="logo" class="logo-image" />
          <span class="logo-green">恋爱</span><span class="logo-black">森林</span>
        </div>
      </div>
      <el-menu mode="horizontal" class="menu">
        <el-menu-item index="1">智能推荐</el-menu-item>
        <el-menu-item index="2">社区互动</el-menu-item>
        <el-menu-item index="3">情感助手</el-menu-item>
        <el-menu-item index="4">个人空间</el-menu-item>
      </el-menu>
    </el-header>
  </div>
</template>

<script>
export default {
 
};
</script>

<style scoped>
/* 顶部导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #ffe4e1, #ff77a9);
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-left {
  display: flex;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.logo-image {
  height: 50px;
  width: 60px;
  margin-right: 10px;
  border-radius: 50%;
  background: #fff;
}
.logo-green {
  color: #59d876; /* 绿色 */
}
.logo-black {
  color: #000; /* 黑色 */
}

.menu {
  justify-content: center; /* 菜单居中 */
  gap: 70px; /* 菜单项之间间距 */
  flex-grow: 1;
}
.menu .el-menu-item {
  font-size: 16px;
  color: #333;
}
.menu .el-menu-item:hover {
  color: #ffdbdb;
}
</style>
