From 0289b6b25de67ed4f940f4fb669226e2c4ae40f3 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sat, 5 Apr 2025 22:49:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/message/index.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/views/user/message/index.vue b/src/views/user/message/index.vue
index 1f57cfc..5244d31 100644
--- a/src/views/user/message/index.vue
+++ b/src/views/user/message/index.vue
@@ -1,11 +1,11 @@
 <template>
   <GiPageLayout :margin="true" :default-collapsed="false">
     <template v-if="isDesktop" #left>
-      <a-tabs v-model:active-key="activeKey" position="left" hide-content @change="change">
+      <a-tabs v-model:active-key="activeKey" position="left" hide-content size="large" @change="change">
         <a-tab-pane v-for="(item) in menuList" :key="item.key" :title="item.name"></a-tab-pane>
       </a-tabs>
     </template>
-    <a-tabs v-if="!isDesktop" v-model:active-key="activeKey" type="card-gutter" style="margin-bottom: 10px" position="top" hide-content @change="change">
+    <a-tabs v-if="!isDesktop" v-model:active-key="activeKey" type="card-gutter" position="top" size="large" @change="change">
       <a-tab-pane v-for="(item) in menuList" :key="item.key" :title="item.name"></a-tab-pane>
     </a-tabs>
     <transition name="fade-slide" mode="out-in" appear>
@@ -80,4 +80,31 @@ const change = (key: string | number) => {
   float: none;
   flex-direction: row;
 }
+
+:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
+  box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
+  inset 1px 0 0 var(--color-border-2);
+  position: relative;
+}
+
+:deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
+  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+}
+
+:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
+  border: none;
+}
+
+:deep(.arco-tabs-nav::before) {
+  left: -20px;
+  right: -20px;
+}
+
+:deep(.arco-tabs) {
+  overflow: visible;
+}
+
+:deep(.arco-tabs-nav) {
+  overflow: visible;
+}
 </style>