diff --git a/dist/custom-tab-bar/index.js b/dist/custom-tab-bar/index.js index d4c7258..863d675 100644 --- a/dist/custom-tab-bar/index.js +++ b/dist/custom-tab-bar/index.js @@ -1 +1 @@ -"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(e,n,t){var a=t(7842),c=t(5544),i=t(118),o=t(758),s=t.n(o),r=t(6540),u=t(8594),p=t(9703),g=t(6606),x=t(4848),f=[{pagePath:"/pages/index/index",text:"\u9996\u9875",icon:"/icon/\u9996\u9875.svg"},{pagePath:"/pages/shop/index",text:"\u5546\u54c1",icon:"/icon/\u5546\u54c1.svg"},{pagePath:"/pages/designList/index",text:"\u8bbe\u8ba1\u6e05\u5355",icon:"/icon/\u8c03\u8272\u76d8.svg"},{pagePath:"/pages/orders/index",text:"\u8ba2\u5355",icon:"/icon/\u5305\u88f9.svg"},{pagePath:"/pages/profile/index",text:"\u6211\u7684",icon:"/icon/\u4e2a\u4eba.svg"}];function d(){var e,n=(0,r.useState)((0,u.eW)((0,u.O4)())),t=(0,c.A)(n,2),a=t[0],o=t[1],d="/".concat((null===(e=s().getCurrentInstance().router)||void 0===e?void 0:e.path)||"pages/index/index");(0,r.useEffect)(function(){var e=function(e){return o(e)};return s().eventCenter.on(p.Wo,e),function(){s().eventCenter.off(p.Wo,e)}},[]),(0,r.useEffect)(function(){(0,g.G)(a)},[a]);var v=function(e){s().switchTab({url:e})};return(0,x.jsx)(i.Ss,{className:"custom-tab-bar theme-".concat(a),children:f.map(function(e){var n=d===e.pagePath;return(0,x.jsxs)(i.Ss,{className:"tab-item ".concat(n?"active":""),onTap:function(){return v(e.pagePath)},children:[(0,x.jsx)(i._V,{className:"tab-icon-img ".concat(n?"active":""),src:e.icon,mode:"aspectFit"}),(0,x.jsx)(i.EY,{className:"tab-label",children:e.text})]},e.pagePath)})})}Component((0,a.createComponentConfig)(d,"custom-tab-bar/index"))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[907,96,76],function(){return n(653)});e.O()}]); \ No newline at end of file +"use strict";(wx["webpackJsonp"]=wx["webpackJsonp"]||[]).push([[777],{653:function(n,e,t){var i=t(7842),c=t(5544),a=t(118),o=t(758),s=t.n(o),r=t(6540),u=t(8594),g=t(9703),v=t(6606),p=t(4848),f=[{pagePath:"/pages/index/index",text:"\u9996\u9875",icon:"/icon/\u9996\u9875.svg",iconActive:"/icon/\u9996\u9875-fill.svg"},{pagePath:"/pages/shop/index",text:"\u5546\u54c1",icon:"/icon/\u5546\u54c1.svg",iconActive:"/icon/\u5546\u54c1-fill.svg"},{pagePath:"/pages/designList/index",text:"\u8bbe\u8ba1\u6e05\u5355",icon:"/icon/\u8c03\u8272\u76d8.svg",iconActive:"/icon/\u8c03\u8272\u76d8-fill.svg"},{pagePath:"/pages/orders/index",text:"\u8ba2\u5355",icon:"/icon/\u5305\u88f9.svg",iconActive:"/icon/\u5305\u88f9-fill.svg"},{pagePath:"/pages/profile/index",text:"\u6211\u7684",icon:"/icon/\u4e2a\u4eba.svg",iconActive:"/icon/\u4e2a\u4eba-fill.svg"}];function l(){var n,e=(0,r.useState)((0,u.eW)((0,u.O4)())),t=(0,c.A)(e,2),i=t[0],o=t[1],l="/".concat((null===(n=s().getCurrentInstance().router)||void 0===n?void 0:n.path)||"pages/index/index");(0,r.useEffect)(function(){var n=function(n){return o(n)};return s().eventCenter.on(g.Wo,n),function(){s().eventCenter.off(g.Wo,n)}},[]),(0,r.useEffect)(function(){(0,v.G)(i)},[i]);var x=function(n){s().switchTab({url:n})};return(0,p.jsx)(a.Ss,{className:"custom-tab-bar theme-".concat(i),children:f.map(function(n){var e=l===n.pagePath;return(0,p.jsxs)(a.Ss,{className:"tab-item ".concat(e?"active":""),onTap:function(){return x(n.pagePath)},children:[(0,p.jsx)(a._V,{className:"tab-icon-img ".concat(e?"active":""),src:e?n.iconActive:n.icon,mode:"aspectFit"}),(0,p.jsx)(a.EY,{className:"tab-label",children:n.text})]},n.pagePath)})})}Component((0,i.createComponentConfig)(l,"custom-tab-bar/index"))}},function(n){var e=function(e){return n(n.s=e)};n.O(0,[907,96,76],function(){return e(653)});n.O()}]); \ No newline at end of file diff --git a/dist/custom-tab-bar/index.wxss b/dist/custom-tab-bar/index.wxss index ebd92bf..92394ca 100644 --- a/dist/custom-tab-bar/index.wxss +++ b/dist/custom-tab-bar/index.wxss @@ -1 +1 @@ -.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{background:#191919;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3} \ No newline at end of file +.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:hsla(0,0%,100%,.75);bottom:0;-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.08);display:-webkit-flex;display:-ms-flexbox;display:flex;height:120rpx;-webkit-justify-content:space-around;justify-content:space-around;left:0;padding-bottom:env(safe-area-inset-bottom);position:fixed;right:0;z-index:1000}.custom-tab-bar.theme-dark{backdrop-filter:blur(20rpx);-webkit-backdrop-filter:blur(20rpx);background:rgba(25,25,25,.75);-webkit-box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5);box-shadow:0 -8rpx 24rpx rgba(0,0,0,.5)}.tab-item{-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;padding:10rpx 20rpx;position:relative}.tab-icon-img{height:28rpx;margin-bottom:4rpx;opacity:.6;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;width:28rpx}.tab-item.active .tab-icon-img{opacity:1;-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15)}.tab-label{color:#b08d8d;font-size:20rpx;font-weight:600;-webkit-transition:color .2s;transition:color .2s}.custom-tab-bar.theme-dark .tab-label{color:#999}.tab-item.active .tab-label{color:#ff9a9e;font-weight:700}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3} \ No newline at end of file diff --git a/dist/icon/个人-fill.svg b/dist/icon/个人-fill.svg new file mode 100644 index 0000000..be7cce7 --- /dev/null +++ b/dist/icon/个人-fill.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/包裹-fill.svg b/dist/icon/包裹-fill.svg new file mode 100644 index 0000000..0817791 --- /dev/null +++ b/dist/icon/包裹-fill.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/商品-fill.svg b/dist/icon/商品-fill.svg new file mode 100644 index 0000000..c6c5d99 --- /dev/null +++ b/dist/icon/商品-fill.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/调色盘-fill.svg b/dist/icon/调色盘-fill.svg new file mode 100644 index 0000000..c10c126 --- /dev/null +++ b/dist/icon/调色盘-fill.svg @@ -0,0 +1 @@ + diff --git a/dist/icon/首页-fill.svg b/dist/icon/首页-fill.svg new file mode 100644 index 0000000..1c49893 --- /dev/null +++ b/dist/icon/首页-fill.svg @@ -0,0 +1 @@ + diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss index 750e688..a1d3040 100644 --- a/src/custom-tab-bar/index.scss +++ b/src/custom-tab-bar/index.scss @@ -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); } diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx index 69b3a5f..cf38d1a 100644 --- a/src/custom-tab-bar/index.tsx +++ b/src/custom-tab-bar/index.tsx @@ -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)} > - + {tab.text} ) diff --git a/src/icon/个人-fill.svg b/src/icon/个人-fill.svg new file mode 100644 index 0000000..be7cce7 --- /dev/null +++ b/src/icon/个人-fill.svg @@ -0,0 +1 @@ + diff --git a/src/icon/包裹-fill.svg b/src/icon/包裹-fill.svg new file mode 100644 index 0000000..0817791 --- /dev/null +++ b/src/icon/包裹-fill.svg @@ -0,0 +1 @@ + diff --git a/src/icon/商品-fill.svg b/src/icon/商品-fill.svg new file mode 100644 index 0000000..c6c5d99 --- /dev/null +++ b/src/icon/商品-fill.svg @@ -0,0 +1 @@ + diff --git a/src/icon/调色盘-fill.svg b/src/icon/调色盘-fill.svg new file mode 100644 index 0000000..c10c126 --- /dev/null +++ b/src/icon/调色盘-fill.svg @@ -0,0 +1 @@ + diff --git a/src/icon/首页-fill.svg b/src/icon/首页-fill.svg new file mode 100644 index 0000000..1c49893 --- /dev/null +++ b/src/icon/首页-fill.svg @@ -0,0 +1 @@ +