/* custom-tab-bar/index.wxss */ /* 底部TabBar容器 */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; /* 基础高度 + 安全区域高度(适配苹果底部横条) */ height: calc(80rpx + env(safe-area-inset-bottom)); padding-bottom:calc(env(safe-area-inset-bottom) - 30rpx); background-color: #ffffff; border-top: 1px solid #eeeeee; display: flex; justify-content: space-around; align-items: center; z-index: 999; box-sizing: border-box; /* 确保padding不会撑开容器高度 */ } /* 单个Tab项容器 */ .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8rpx 0; } /* 图标样式 */ .tab-item .icon { width: 50rpx; height: 50rpx; margin-bottom: 10rpx; display: block; } /* 文字样式 */ .tab-item .text { font-size: 26rpx; color: #8a8a8a; line-height: 1; font-weight: 500; } .tab-item .text.active { color: #0F80DC; /* 选中颜色 */ font-weight: 500; }