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

  &lt;!-- 显示内容 --&gt;
  &lt;view class=&quot;ssc&quot;&gt;
    &lt;view class=&quot;feature-row&quot; v-for=&quot;(row, index) in featureRows&quot; :key=&quot;index&quot;&gt;
      &lt;view class=&quot;feature-item&quot; v-for=&quot;feature in row&quot; :key=&quot;feature.id&quot;&gt;
        &lt;image :src=&quot;feature.icon&quot; class=&quot;feature-icon&quot; /&gt;
        &lt;span class=&quot;feature-text&quot;&gt;{{ feature.name }}&lt;/span&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&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: 3, name: '功能3', icon: '/static/home/128/duanxin.png' },
            { id: 4, name: '功能4', 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' }
          ]
        }
      ]
    };
  },
  computed: {
    featureRows() {
      const rows = [];
      const features = this.menuItems[this.activeMenuItem - 1].features;
      const featureCount = features.length;
      const rowCount = Math.ceil(featureCount / 3); // 计算行数，每行显示 3 个图标

      let rowIndex = 0;
      for (let i = 0; i < featureCount; i += 3) {
        rows[rowIndex] = features.slice(i, i + 3);
        rowIndex++;
      }

      return rows;
    }
  },
  methods: {
    selectMenuItem(itemID) {
      this.activeMenuItem = itemID;
    }
  }
};
</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;
}

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

.sidebar {
  width: 100px;
  height: 1524rpx;
  padding-top: 20rpx;
}

.sidebar view {
  padding: 10rpx;
  color: black;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
  margin-top: 14rpx;
  cursor: pointer;
  transition: background-color 0.3s;
  height: 80rpx;
}

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

.ssc {
  flex: 1;
  background-color: white;
}

.feature-row {
  display: flex;
  justify-content: space-between; /* 图标水平间距平均分布 */
  margin-top: 60rpx; /* 调整行与行之间的间距 */
  margin-left: 20px; /* 左侧留出距离 */
  margin-right: 20px; /* 右侧留出距离 */
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10px; /* 调整图标之间的水平间距 */
}

.feature-icon {
  width: 40px;
  height: 40px;
}

.feature-text {
  margin-top: 5px;
}
</style>