From 02a0bee5c9c13cfb4750433d673c73a653bf5885 Mon Sep 17 00:00:00 2001
From: "Kyour.cn" <kyour@outlook.com>
Date: Sat, 27 Jan 2024 15:15:04 +0800
Subject: [PATCH] =?UTF-8?q?style(tabs):=20=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=A2=9E=E5=8A=A0=E5=88=87=E6=8D=A2=E5=8A=A8?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tabs/index.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/tabs/index.vue b/components/tabs/index.vue
index fa69120..a6d972b 100644
--- a/components/tabs/index.vue
+++ b/components/tabs/index.vue
@@ -1,9 +1,5 @@
 <script setup>
 
-// TODO: 计划任务如下
-// 1. 支持内容插槽
-// 2. 支持内容左右滑动切换
-
 import {computed} from "vue";
 import {usePetalUiStore} from "../../stores/petal-ui";
 
@@ -74,6 +70,9 @@ const style = computed(() => {
                     'tab-item': true,
                     'active': active === key
                 }"
+                :style="{
+                    color: active === key ? puiStore.theme['title'] : puiStore.theme['subtitle']
+                }"
                 @click="onChange(key)"
             >
                 {{item?.[props.key]}}
@@ -92,17 +91,16 @@ const style = computed(() => {
 }
 
 .petal-tabs .tab-item {
+    line-height: 50rpx;
     font-size: 35rpx;
-    margin: 10rpx;
-    padding-bottom: 8rpx;
+    margin: 15rpx 10rpx 0 10rpx;
     white-space: nowrap;
+    transition: font-size 0.2s ease;
 }
 
 .petal-tabs .active {
-    font-size: 50rpx;
-    /*color: #0051ff;
-    border-bottom: 4rpx solid #0051ff;*/
-    padding-bottom: 4rpx;
+    font-size: 45rpx;
+    margin-top: 0;
 }
 
 scroll-view::-webkit-scrollbar {