style(mini): 底部导航中间按钮去除异形外框,只保留logo

- 移除 home-blob 异形底座(白色背景+蓝色边框+阴影)
- 移除 jsx 中的 home-blob 元素
- logo 阴影从 box-shadow 改为 filter: drop-shadow,避免透明PNG出现方形阴影
- 正常态:logo 92rpx + 柔和粉紫 drop-shadow
- 激活态:logo 放大1.1倍 + 更强粉紫发光 drop-shadow
- 保留 margin-top:-30rpx 凸起效果
This commit is contained in:
Pine
2026-09-02 00:36:05 +08:00
parent 67bfa10bc5
commit 62822fb6ea
2 changed files with 8 additions and 45 deletions
-1
View File
@@ -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)}
>
<View className="home-blob" />
<View className="home-inner">
<Image className="home-logo" src={opcLogo} mode="aspectFit" />
</View>
+8 -44
View File
@@ -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 变色) ---------- */