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:
@@ -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>
|
||||
|
||||
@@ -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 变色) ---------- */
|
||||
|
||||
Reference in New Issue
Block a user