🎈 perf(tabbar): 优化样式展示

src/components/shop-tabbar/shop-tabbar.vue

@@ -6,6 +6,7 @@
       :class="{ 'tabbar-active': tabbarStore.curIdx === 1 }"
     >
       <view class="tabbar-item-wrapper">
+        <view class="tabbar-item-wrapper-active-bg"></view>
         <image :src="category.icon" class="tabbar-item-img" mode="widthFix"></image>
       </view>
       <view class="tabbar-item-text">{{ category.text }}</view>
@@ -16,6 +17,7 @@
       :class="{ 'tabbar-active': tabbarStore.curIdx === 2 }"
     >
       <view class="tabbar-item-wrapper">
+        <view class="tabbar-item-wrapper-active-bg"></view>
         <image :src="cate.icon" class="tabbar-item-img" mode="widthFix"></image>
       </view>
       <view class="tabbar-item-text">{{ cate.text }}</view>
@@ -36,6 +38,7 @@
       :class="{ 'tabbar-active': tabbarStore.curIdx === 3 }"
     >
       <view class="tabbar-item-wrapper">
+        <view class="tabbar-item-wrapper-active-bg"></view>
         <image :src="community.icon" class="tabbar-item-img" mode="widthFix"></image>
       </view>
       <view class="tabbar-item-text">{{ community.text }}</view>
@@ -46,6 +49,7 @@
       :class="{ 'tabbar-active': tabbarStore.curIdx === 4 }"
     >
       <view class="tabbar-item-wrapper">
+        <view class="tabbar-item-wrapper-active-bg"></view>
         <image :src="person.icon" class="tabbar-item-img" mode="widthFix"></image>
       </view>
       <view class="tabbar-item-text">{{ person.text }}</view>
@@ -116,11 +120,22 @@
       }
 
       .tabbar-item-wrapper {
-        width: 66rpx;
-        height: 66rpx;
+        position: relative;
+        width: 60rpx;
+        height: 60rpx;
         margin: 0 auto;
         border-radius: 50%;
 
+        .tabbar-item-wrapper-active-bg {
+          position: absolute;
+          top: 10rpx;
+          left: 10rpx;
+          display: none;
+          width: 40rpx;
+          height: 40rpx;
+          border-radius: 50%;
+        }
+
         .tabbar-item-img {
           width: 56rpx;
           margin: 5rpx auto;
@@ -132,7 +147,10 @@
           color: #ff4c1b;
         }
         .tabbar-item-wrapper {
-          background: radial-gradient(#ff4c1b, transparent);
+          .tabbar-item-wrapper-active-bg {
+            display: block;
+            box-shadow: 0 0 40rpx 0 rgba($color: #ff4c1b, $alpha: 0.6);
+          }
         }
       }
     }