feat: tabBar 选中态图标填充高亮,半透明毛玻璃背景
This commit is contained in:
@@ -4,7 +4,9 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 120px;
|
||||
background: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
@@ -16,7 +18,9 @@
|
||||
|
||||
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
||||
.custom-tab-bar.theme-dark {
|
||||
background: #191919;
|
||||
background: rgba(25, 25, 25, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ import { applyPageBackground } from '../utils/themeBackground'
|
||||
import './index.scss'
|
||||
|
||||
const TABS = [
|
||||
{ pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg' },
|
||||
{ pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg' },
|
||||
{ pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg' },
|
||||
{ pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg' },
|
||||
{ pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg' }
|
||||
{ pagePath: '/pages/index/index', text: '首页', icon: '/icon/首页.svg', iconActive: '/icon/首页-fill.svg' },
|
||||
{ pagePath: '/pages/shop/index', text: '商品', icon: '/icon/商品.svg', iconActive: '/icon/商品-fill.svg' },
|
||||
{ pagePath: '/pages/designList/index', text: '设计清单', icon: '/icon/调色盘.svg', iconActive: '/icon/调色盘-fill.svg' },
|
||||
{ pagePath: '/pages/orders/index', text: '订单', icon: '/icon/包裹.svg', iconActive: '/icon/包裹-fill.svg' },
|
||||
{ pagePath: '/pages/profile/index', text: '我的', icon: '/icon/个人.svg', iconActive: '/icon/个人-fill.svg' }
|
||||
]
|
||||
|
||||
export default function CustomTabBar() {
|
||||
@@ -48,7 +48,7 @@ export default function CustomTabBar() {
|
||||
className={`tab-item ${isActive ? 'active' : ''}`}
|
||||
onTap={() => switchTab(tab.pagePath)}
|
||||
>
|
||||
<Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={tab.icon} mode='aspectFit' />
|
||||
<Image className={`tab-icon-img ${isActive ? 'active' : ''}`} src={isActive ? tab.iconActive : tab.icon} mode='aspectFit' />
|
||||
<Text className='tab-label'>{tab.text}</Text>
|
||||
</View>
|
||||
)
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/><path d="M5.5 20c.8-3 3.4-4.5 6.5-4.5s5.7 1.5 6.5 4.5"/></svg>
|
||||
|
After Width: | Height: | Size: 185 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 3.5h10A1.5 1.5 0 0 1 18.5 5v14A1.5 1.5 0 0 1 17 20.5H7A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z" fill="#ff9a9e"/><path d="M9 8h6M9 12h6M9 16h3" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||||
|
After Width: | Height: | Size: 283 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M5 8h14l-1.2 12H6.2L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="#ff9a9e" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
|
After Width: | Height: | Size: 221 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path fill-rule="evenodd" d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-3 6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm6 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zM12 13.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 290 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff9a9e"><path d="M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 153 B |
Reference in New Issue
Block a user