功能导航栏 | 全部功能

<template>
  <view class='container'>
    <!-- 顶部导航栏 -->
    <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>
<pre><code>&lt;!-- 左侧导航栏 --&gt;
&lt;view class='sidebar'&gt;
  &lt;view v-for='item in menuItems' :key='item.id' @click='selectMenuItem(item.id)'
    :class='{ active: activeMenuItem === item.id }'&gt;
    {{ item.name }}
  &lt;/view&gt;
&lt;/view&gt;

&lt;!-- 显示内容 --&gt;
&lt;view class='content'&gt;
  &lt;!-- 内容区域内容 --&gt;
&lt;/view&gt;
</code></pre>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        activeMenuItem: 1, // 当前选中的菜单项ID
        menuItems: [
          {
            id: 1,
            name: '菜单项1',
            features: [
              { id: 1, name: '功能1', icon: '/static/home/128/duanxin.png' },
              { id: 2, name: '功能2', icon: '/static/home/128/duanxin.png' }
            ]
          },
          {
            id: 2,
            name: '菜单项2',
            features: [
              { id: 3, name: '功能3', icon: '/static/home/128/duanxin.png' },
              { id: 4, name: '功能4', icon: '/static/home/128/duanxin.png' }
            ]
          },
          {
            id: 3,
            name: '菜单项3',
            features: [
              { id: 5, name: '功能5', icon: '/static/home/128/duanxin.png' },
              { id: 6, name: '功能6', icon: '/static/home/128/duanxin.png' }
            ]
          }
        ]
      };
    },
    methods: {
      selectMenuItem(itemID) {
        this.activeMenuItem = itemID;
      }
    }
  };
</script>
<style>
  .container {
    display: flex;
    flex-direction: row;
  }

  .af-head {
    position: relative;
    background-color: #629ffc;
    height: 100rpx;
    width: 100%;
    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;
    height: 100vh;
    padding-top: 20rpx;
  }

  .sidebar view {
    padding: 10rpx;
    color: black;
    list-style-type: none;
    display: block;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .sidebar view.active {
    border-left: 4px solid #629ffc;
    background-color: white;
  }

  .content {
    flex: 1;
    margin-left: 20px; /* 调整内容区域左边距 */
    padding: 20px; /* 添加内边距 */
    background-color: #f0f0f0; /* 设置背景色 */
  }
</style>