功能列表 - 丰富功能一览

<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class='af-head'>
			<span class='af-head-msg' style='font-size: 60rpx;'>
				<span class='af-head-msg af-head-fuc'>全部功能</span>
			</span>
		</view>
<pre><code>	&lt;view class='func-show'&gt;
		&lt;!-- 左侧导航栏 --&gt;
		&lt;view class='sidebar'&gt;
			&lt;view v-for='(item, index) in menuItems' :key='index' @click='selectMenuItem(item.id)'
				:class='{ active: activeMenuItem === item.id }'&gt;
				{{ item.name }}
			&lt;/view&gt;
		&lt;/view&gt;


		&lt;!-- 显示内容 --&gt;
		&lt;view class='ssc'&gt;
			&lt;view class='feature-row' v-for='(row, index) in featureRows' :key='index'&gt;
				&lt;view class='feature-item' v-for='feature in row' :key='feature.id'&gt;
					&lt;image :src='feature.icon' class='feature-icon' /&gt;
					&lt;span class='feature-text'&gt;{{ feature.name }}&lt;/span&gt;
				&lt;/view&gt;
			&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt;
&lt;/view&gt;
</code></pre>
</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: block; */
		display: flex;
		/* 调整为 Flex 布局 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 14rpx;
		cursor: pointer;
		transition: background-color 0.3s;
		height: 40px;
	}

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

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

	.feature-row {
		display: flex;
		justify-content: left; 
		/* 图标水平间距平均分布 */
		margin-top: 30px;
		/* 调整行与行之间的间距 */
		
		
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		/* 图标和文字垂直排列 */
		align-items: center;
		/* 图标和文字居中对齐 */
		margin-left: 40px;
	}

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

	.feature-text {
		margin-top: 5px;
		/* 调整文字与图标之间的间距 */
	}
</style>