diff --git a/miniprogram/src/custom-tab-bar/index.jsx b/miniprogram/src/custom-tab-bar/index.jsx index afdd39f..42814da 100644 --- a/miniprogram/src/custom-tab-bar/index.jsx +++ b/miniprogram/src/custom-tab-bar/index.jsx @@ -51,7 +51,6 @@ export default class CustomTabBar extends Component { className={`tab-item tab-item--home${active ? ' tab-item--active' : ''}`} onClick={() => this.switchTab(item, index)} > - diff --git a/miniprogram/src/custom-tab-bar/index.scss b/miniprogram/src/custom-tab-bar/index.scss index bebed80..e1b275b 100644 --- a/miniprogram/src/custom-tab-bar/index.scss +++ b/miniprogram/src/custom-tab-bar/index.scss @@ -79,28 +79,11 @@ letter-spacing: 1rpx; } -/* ---------- 居中首页:凸起 + 异形辉光底座 ---------- */ +/* ---------- 居中首页:仅 logo 凸起,无外框 ---------- */ .tab-item--home { margin-top: -30rpx; z-index: 2; justify-content: flex-start; - color: rgba(98, 132, 255, 0.55); -} - -.home-blob { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 112rpx; - height: 108rpx; - /* 上圆下收的异形(水滴/倒角蛋形) */ - border-radius: 52% 52% 44% 44% / 58% 58% 42% 42%; - background: linear-gradient(180deg, #ffffff, #eef1ff 72%); - border: 2rpx solid rgba(98, 132, 255, 0.30); - box-shadow: - 0 8rpx 26rpx rgba(59, 79, 125, 0.16), - inset 0 0 22rpx rgba(98, 132, 255, 0.1); } .home-inner { @@ -112,38 +95,19 @@ flex-direction: column; align-items: center; justify-content: center; - text-align: center; - padding-top: 0; } .home-logo { - width: 88rpx; - height: 88rpx; - box-shadow: 0 6rpx 20rpx rgba(147,112,219,0.35); - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -/* 激活:底座点亮 + 星星辉光 */ -.tab-item--home.tab-item--active { - color: #6284ff; + width: 92rpx; + height: 92rpx; + filter: drop-shadow(0 4rpx 14rpx rgba(147,112,219,0.30)); + transition: transform 0.2s ease, filter 0.2s ease; } +/* 激活态:logo 放大 + 更强发光 */ .tab-item--home.tab-item--active .home-logo { - transform: scale(1.08); - box-shadow: 0 8rpx 28rpx rgba(147,112,219,0.5); -} - -.tab-item--home.tab-item--active .home-blob { - border-color: rgba(98, 132, 255, 0.9); - box-shadow: - 0 0 36rpx rgba(98, 132, 255, 0.45), - 0 8rpx 26rpx rgba(0, 0, 0, 0.5), - inset 0 0 28rpx rgba(98, 132, 255, 0.22); -} - -.tab-item--home.tab-item--active .ic-star { - filter: drop-shadow(0 0 10rpx rgba(98, 132, 255, 0.9)); - transform: scale(1.12); + transform: scale(1.1); + filter: drop-shadow(0 6rpx 20rpx rgba(147,112,219,0.50)); } /* ---------- 图标(使用 public/ SVG,经 mask 渲染,随 currentColor 变色) ---------- */