/* 自定义 TabBar：白底 · 参考「左二 + 中间大圆钮上凸」布局 · 主题紫 #7c3aed */
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
padding-bottom: env(safe-area-inset-bottom);
z-index: 9999;
box-shadow: 0 -4rpx 24rpx rgba(15, 23, 42, 0.06);
}
.tab-bar-line {
height: 1rpx;
background: #e5e7eb;
width: 100%;
}
.tab-bar-inner {
display: flex;
align-items: flex-end;
justify-content: space-around;
min-height: 116rpx;
padding: 8rpx 8rpx 12rpx;
position: relative;
box-sizing: border-box;
}
.tab-bar-count-3 { padding-left: 40rpx; padding-right: 40rpx; }
.tab-bar-count-4,
.tab-bar-count-5 { padding-left: 12rpx; padding-right: 12rpx; }
.tab-item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 4rpx;
z-index: 1;
}
.tab-icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 4rpx;
background-repeat: no-repeat;
background-position: center;
background-size: 44rpx 44rpx;
}
/* 图片形态的图标（iconUrl 传图片时使用，保留圆角便于 logo 类图片显示） */
.tab-icon-img {
width: 52rpx;
height: 52rpx;
margin-bottom: 4rpx;
border-radius: 12rpx;
filter: grayscale(60%);
opacity: 0.85;
}
/* 神仙AI：未选/已选为两张独立 PNG，不做灰阶与缩放，避免叠加强调 */
.tab-icon-img--dual {
filter: none;
opacity: 1;
border-radius: 0;
}
.tab-icon-img--active {
filter: none;
opacity: 1;
transform: scale(1.05);
box-shadow: 0 4rpx 10rpx rgba(124, 58, 237, 0.25);
}
.tab-icon-img--dual.tab-icon-img--active {
transform: none;
box-shadow: none;
}
/* 中间浮钮的图片形态 */
.center-img {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
.tab-text {
font-size: 20rpx;
color: #999999;
}
.tab-item.active .tab-text {
color: #7c3aed;
}
/* ===== 图标：home ===== */
.tab-icon--home {
background-image: url("data:image/svg+xml;utf8,");
}
.tab-icon--home.tab-icon--active,
.tab-item.active .tab-icon--home {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== 图标：ai（神仙AI · 未选中 #999 / 选中 #7c3aed） ===== */
.tab-icon--ai {
background-image: url("data:image/svg+xml;utf8,");
}
.tab-icon--ai.tab-icon--active,
.tab-item.active .tab-icon--ai {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== 图标：profile ===== */
.tab-icon--profile {
background-image: url("data:image/svg+xml;utf8,");
}
.tab-icon--profile.tab-icon--active,
.tab-item.active .tab-icon--profile {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== 图标：camera（作为普通 Tab 时用） ===== */
.tab-icon--camera {
background-image: url("data:image/svg+xml;utf8,");
}
.tab-icon--camera.tab-icon--active,
.tab-item.active .tab-icon--camera {
background-image: url("data:image/svg+xml;utf8,");
}
/* ===== 中间浮钮（第 2 项：拍摄） ===== */
.tab-slot-middle {
flex: 1;
min-width: 0;
position: relative;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 0;
}
.middle-fab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
transform: translateY(-40rpx);
margin-bottom: -36rpx;
}
.center-circle {
width: 96rpx;
height: 96rpx;
min-width: 96rpx;
min-height: 96rpx;
border-radius: 50%;
background: linear-gradient(145deg, #7c3aed 0%, #a78bfa 55%, #8b5cf6 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
border: 5rpx solid #ffffff;
flex-shrink: 0;
overflow: visible;
box-shadow:
0 0 0 1rpx rgba(167, 139, 250, 0.35),
0 12rpx 36rpx rgba(124, 58, 237, 0.48),
0 0 40rpx rgba(124, 58, 237, 0.28);
}
.middle-fab.active .center-circle {
background: linear-gradient(145deg, #6d28d9 0%, #7c3aed 50%, #a78bfa 100%);
box-shadow:
0 0 0 1rpx rgba(196, 181, 253, 0.45),
0 14rpx 40rpx rgba(124, 58, 237, 0.58),
0 0 48rpx rgba(124, 58, 237, 0.35);
}
.center-svg {
width: 46rpx;
height: 46rpx;
background-repeat: no-repeat;
background-position: center;
background-size: 44rpx 44rpx;
}
.center-svg--camera {
background-image: url("data:image/svg+xml;utf8,");
}
.center-svg--ai {
background-image: url("data:image/svg+xml;utf8,");
}
.tab-text-fab {
font-size: 20rpx;
color: #999999;
line-height: 1.25;
text-align: center;
max-width: 168rpx;
margin-top: 2rpx;
}
.middle-fab.active .tab-text-fab {
color: #7c3aed;
font-weight: 600;
}