修改导航栏字体颜色为褐色

要将导航栏的字体颜色更改为褐色，你可以在 .sidebar 的样式中添加 color: brown;。以下是修改后的代码：

<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class='af-head'>
      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>
      <span class='af-head-msg af-head-fuc'>全部功能</span>
    </view>

    <!-- 左侧导航栏 -->
    <view class='sidebar'>
      <ul>
        <li @click='navigateToPage('Page1')'>菜单项1</li>
        <li @click='navigateToPage('Page2')'>菜单项2</li>
        <li @click='navigateToPage('Page3')'>菜单项3</li>
      </ul>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    navigateToPage(page) {
      // 根据菜单项点击事件进行页面跳转或其他操作
      console.log('点击了' + page);
    }
  }
};
</script>

<style>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  font-size: 44rpx;
  font-weight: 500;
  font-family: sans-serif;
}

.af-head-msg {
  position: absolute;
  bottom: 16rpx;
  color: white;
  left: 38rpx;
}

.af-head-fuc {
  text-align: center;
  left: 300rpx;
}

.sidebar {
  width: 100px;
  background-color: white;
  height: 100vh;
  padding-top: 100rpx;
  color: brown; /* 修改字体颜色为褐色 */
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10rpx;
  /* 去掉点 */
  list-style-type: none;
}
</style>

在上述代码中，我们在 .sidebar 的样式中添加了 color: brown;，将导航栏字体颜色改为褐色。

请根据你的实际需求和样式要求，进行必要的调整。