PetCommunity/miniprogram/custom-tab-bar/index.wxss

/* ── 底部导航：悬浮玻璃浮岛 ──
   绝对定位浮在内容上方，左右下三边露出底层内容；
   分层折射高光 + 缓慢流动的光泽，模拟液态玻璃透镜质感 */
.tab-dock {
  position: fixed;
  left: 16rpx;
  right: 16rpx;
  bottom: 28rpx;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 64rpx;
  padding: 14rpx 8rpx calc(14rpx + env(safe-area-inset-bottom) * 0.6);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(130% 160% at 16% -40%, rgba(255, 255, 255, 0.6), transparent 56%),
    radial-gradient(110% 140% at 92% 145%, rgba(255, 255, 255, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(26rpx) saturate(200%);
  -webkit-backdrop-filter: blur(26rpx) saturate(200%);
  border: 1rpx solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 20rpx 50rpx rgba(120, 70, 140, 0.18),
    inset 0 1.5rpx 0 rgba(255, 255, 255, 0.7),
    inset 0 -10rpx 22rpx rgba(255, 255, 255, 0.10),
    inset 10rpx 0 22rpx rgba(255, 255, 255, 0.08),
    inset -10rpx 0 22rpx rgba(180, 150, 210, 0.10);
}

/* 流动光泽：缓慢左右扫过的液态高光带 */
.dock-sheen {
  position: absolute;
  top: -60%;
  left: -15%;
  right: -15%;
  height: 220%;
  background: linear-gradient(102deg, transparent 32%, rgba(255, 255, 255, 0.40) 48%, transparent 64%);
  filter: blur(14rpx);
  animation: liquid-sheen 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  transform: translateX(-14%) rotate(-2deg);
}

@keyframes liquid-sheen {
  0%, 100% { transform: translateX(-14%) rotate(-2deg); opacity: 0.45; }
  50% { transform: translateX(14%) rotate(2deg); opacity: 0.85; }
}

/* ── Tab 项 ── */
.tab-pill {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  border-radius: 36rpx;
  padding: 12rpx 0 8rpx;
  transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.25s ease, color 0.25s ease;
}

.tab-pill.active {
  background: rgba(255, 45, 110, 0.14);
  transform: translateY(-6rpx) scale(1.04);
}

.tab-label {
  font-size: 20rpx;
  font-weight: 700;
  color: #a59cb5;
  line-height: 1;
  transition: color 0.2s;
}

.tab-pill.active .tab-label {
  color: #ff2d6e;
  font-weight: 900;
}

/* ── 图标容器 ── */
.icon-wrap {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 广场图标：2×2 圆角方块网格 ── */
.icon-grid {
  width: 34rpx;
  height: 34rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5rpx;
}

.icon-grid .sq {
  background: #a59cb5;
  border-radius: 4rpx;
  transition: background 0.2s;
}

.tab-pill.active .icon-grid .sq {
  background: #ff2d6e;
}

/* ── 附近图标：地图 Pin ── */
.icon-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pin-head {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50% 50% 50% 0;
  background: #a59cb5;
  transform: rotate(-45deg);
  transition: background 0.2s;
}

.pin-tail {
  width: 4rpx;
  height: 8rpx;
  background: #a59cb5;
  border-radius: 0 0 4rpx 4rpx;
  margin-top: -2rpx;
  transition: background 0.2s;
}

.tab-pill.active .pin-head,
.tab-pill.active .pin-tail {
  background: #ff2d6e;
}

/* ── 汪友图标：双人轮廓 ── */
.icon-ppl {
  width: 36rpx;
  height: 30rpx;
  position: relative;
}

.ppl-head {
  position: absolute;
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #a59cb5;
  top: 0;
  transition: background 0.2s;
}

.ppl-head-l { left: 2rpx; }
.ppl-head-r { right: 2rpx; }

.ppl-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14rpx;
  background: #a59cb5;
  border-radius: 8rpx 8rpx 0 0;
  transition: background 0.2s;
}

.tab-pill.active .ppl-head,
.tab-pill.active .ppl-body {
  background: #ff2d6e;
}

/* ── 我的图标：单人轮廓 ── */
.icon-user {
  width: 28rpx;
  height: 34rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.user-head {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background: #a59cb5;
  transition: background 0.2s;
}

.user-body {
  width: 28rpx;
  height: 14rpx;
  border-radius: 8rpx 8rpx 0 0;
  background: #a59cb5;
  transition: background 0.2s;
}

.tab-pill.active .user-head,
.tab-pill.active .user-body {
  background: #ff2d6e;
}

/* ── 发布 FAB：液态玻璃凸透镜质感 ── */
.tab-fab-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

.tab-fab {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(140deg, #ff2d6e, #ff7a1a 55%, #ffd400);
  border: 5rpx solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 16rpx 36rpx rgba(255, 45, 110, 0.40), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-18rpx);
  transition: transform 0.2s ease;
}

.tab-fab:active {
  transform: translateY(-18rpx) scale(0.92);
}

/* 液态高光：左上角玻璃透镜光斑 */
.fab-shine {
  position: absolute;
  top: 6%;
  left: 14%;
  width: 46%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), transparent 72%);
  filter: blur(4rpx);
  pointer-events: none;
  z-index: 0;
}

.fab-plus {
  position: relative;
  z-index: 1;
  font-size: 56rpx;
  color: #fff;
  font-weight: 300;
  line-height: 1;
  margin-top: -4rpx;
}

/* ── 未读角标 ── */
.badge {
  position: absolute;
  top: -4rpx;
  right: -6rpx;
  min-width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  background: #ff2d6e;
  color: #fff;
  font-size: 18rpx;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
  border: 2rpx solid #fff;
}