.custom-tab-bar-wrapper { display: flex; flex-direction: column; align-items: center; padding: 6rpx 0; transition: all 0.3s ease; position: relative; } .custom-tab-bar-wrapper .text { font-size: 20rpx; margin-top: 4rpx; transition: all 0.25s ease; } /* 自定义标签栏样式优化 */ .t-tab-bar { box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.05); border-top: none !important; padding: 6rpx 0; } /* 图标动画效果 */ .t-tab-bar-item--active .custom-tab-bar-wrapper .t-icon { transform: translateY(-4rpx); transition: all 0.25s ease; } /* 选中状态文字效果 */ .t-tab-bar-item--active .custom-tab-bar-wrapper .text { font-weight: 600; transform: scale(1.05); } /* 涟漪效果 */ .t-tab-bar-item { position: relative; overflow: hidden; } .t-tab-bar-item::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, var(--primary-color) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform 0.5s, opacity 0.8s; } .t-tab-bar-item:active::after { transform: scale(0, 0); opacity: 0.1; transition: 0s; }