uniapp左侧导航栏边框调宽教程

<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='func-show'>
      <!-- 左侧导航栏 -->
      <view class='sidebar'>
        <view v-for='item in menuItems' :key='item.id' @click='selectMenuItem(item.id)'
          :class='{ active: activeMenuItem === item.id }'>
          {{ item.name }}
        </view>
      </view>

      <!-- 显示内容 -->
      <view class='ssc'>
        <!-- 内容区域内容 -->
      </view>
    </view>
  </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>
.af-head {
  position: relative;
  background-color: #629ffc;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: 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;
}

.func-show {
  display: flex;
  height: 1524rpx;
}

.sidebar {
  width: 120px; /* 调宽 */
  height: 1524rpx;
  padding-top: 20rpx;
}

.sidebar view {
  padding: 10rpx;
  color: black;
  list-style-type: none;
  display: flex; /* 调整为 Flex 布局 */
  align-items: center; /* 垂直居中 */
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.sidebar view.active {
  border-left: 8px solid #629ffc; /* 调宽 */
  background-color: white;
}

.ssc {
  flex: 1;
  background-color: white;
}
</style>

在上述代码中，我将 '.sidebar view.active' 的 'border-left-width' 属性设置为 '8px'，以增加边框的宽度。你可以根据需要进行调整。

希望这次修改满足了你的要求！