.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 140rpx; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20rpx); -webkit-backdrop-filter: blur(20rpx); display: flex; align-items: center; justify-content: space-between; border-top: 1rpx solid rgba(255, 255, 255, 0.8); padding: 0 20rpx; box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.08); z-index: 1000; } /* 左侧按钮组 */ .tab-bar-left { display: flex; align-items: center; justify-content: flex-start; flex: 1; } /* 右侧按钮组 */ .tab-bar-right { display: flex; align-items: center; justify-content: flex-end; flex: 1; } /* 中间鸡蛋按钮区域 */ .tab-bar-center { display: flex; align-items: center; justify-content: center; position: relative; width: 140rpx; height: 100%; } .tab-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120rpx; height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; border-radius: 20rpx; margin: 0 10rpx; } .tab-bar-item:active { transform: scale(0.92); background: rgba(0, 0, 0, 0.05); } .tab-bar-icon { font-size: 44rpx; margin-bottom: 8rpx; filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1)); display: flex; align-items: center; justify-content: center; position: relative; } .tab-bar-text { font-size: 28rpx; color: #666; font-weight: 500; } /* 鸡蛋估价按钮样式 */ .egg-button { position: relative; width: 120rpx; height: 120rpx; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; border-radius: 50%; margin-top: -40rpx; } .egg-button:active { transform: scale(0.9); } .egg-icon { font-size: 90rpx; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: eggMagic 4s ease-in-out infinite; text-shadow: 0 4rpx 12rpx rgba(255, 107, 0, 0.4); } @keyframes eggMagic { 0%, 100% { transform: translateY(0) rotate(0deg); filter: brightness(1) saturate(1); } 25% { transform: translateY(-12rpx) rotate(2deg); filter: brightness(1.1) saturate(1.2); } 50% { transform: translateY(-6rpx) rotate(-1deg); filter: brightness(1.05) saturate(1.1); } 75% { transform: translateY(-10rpx) rotate(1deg); filter: brightness(1.15) saturate(1.3); } } .egg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36rpx; font-weight: bold; color: #FFFFFF; text-shadow: 0 2rpx 4rpx rgba(255, 107, 0, 0.8), 0 4rpx 12rpx rgba(255, 107, 0, 0.4); z-index: 2; letter-spacing: 1rpx; } /* 移除发光效果 */ /* 添加分隔线 */ .tab-bar-left .tab-bar-item:last-child::after { content: ''; position: absolute; right: -15rpx; top: 50%; transform: translateY(-50%); width: 1rpx; height: 40rpx; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); } .tab-bar-right .tab-bar-item:first-child::before { content: ''; position: absolute; left: -15rpx; top: 50%; transform: translateY(-50%); width: 1rpx; height: 40rpx; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); }