style: 底部 tabBar 去掉虚线边框,改用阴影做层级
This commit is contained in:
Vendored
+1
-1
@@ -1 +1 @@
|
|||||||
.custom-tab-bar{-ms-flex-pack:distribute;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background:#fff;border-top:3rpx dashed #a0c4ff;bottom:0;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;border-top-color:#5b8cff}.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;-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:600}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
|
.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;-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:600}.custom-tab-bar.theme-dark .tab-item.active .tab-label{color:#ff7eb3}
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 3px dashed #A0C4FF;
|
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
/* 自定义组件样式隔离:两套主题配色在组件内自包含,不依赖全局 app.wxss */
|
||||||
.custom-tab-bar.theme-dark {
|
.custom-tab-bar.theme-dark {
|
||||||
background: #191919;
|
background: #191919;
|
||||||
border-top-color: #5b8cff;
|
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item {
|
.tab-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user