From 21ec46d47f8eb29e15d9ab0750b54c05ee1a702c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 9 Sep 2022 18:24:14 +0800
Subject: [PATCH] perf: improve tabbar component styles

---
 .../components/src/components/tabs/Tabbar.vue | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue
index 9c8c4fa8..749e96ea 100644
--- a/packages/components/src/components/tabs/Tabbar.vue
+++ b/packages/components/src/components/tabs/Tabbar.vue
@@ -68,9 +68,10 @@ const handleChange = (id: number | string) => {
     cursor-pointer
     self-center
     transition-all
-    text-base
+    text-sm
     justify-center
-    gap-2;
+    gap-2
+    h-9;
 
     .tabbar-item-label,
     .tabbar-item-icon {
@@ -88,8 +89,7 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
-      px-5
+      @apply px-5
       py-1
       border-b-gray-100;
 
@@ -109,8 +109,7 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
-      px-9
+      @apply px-6
       py-1
       opacity-70
       rounded-base;
@@ -137,11 +136,10 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10
-      px-9
+      @apply px-6
       py-1
       opacity-70
-      rounded-base;
+      rounded-sm;
 
       &.tabbar-item-active {
         @apply bg-white
@@ -166,6 +164,10 @@ const handleChange = (id: number | string) => {
       @apply flex-col;
     }
 
+    .tabbar-item {
+      width: 100%;
+    }
+
     &.tabbar-default {
       border-bottom-width: 0;
       @apply border-b-0;