From 0fa939e5608deda5dcd8f8cdd985281eba03d9eb Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Thu, 27 Nov 2025 13:28:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=9B=E6=A0=87=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/child/AnalysisResultPanel.vue  | 124 ++++++++++++++----
 1 file changed, 101 insertions(+), 23 deletions(-)

diff --git a/src/views/analysis/components/child/AnalysisResultPanel.vue b/src/views/analysis/components/child/AnalysisResultPanel.vue
index d2030cb..afe2ebe 100644
--- a/src/views/analysis/components/child/AnalysisResultPanel.vue
+++ b/src/views/analysis/components/child/AnalysisResultPanel.vue
@@ -200,9 +200,10 @@ export default {
 
             .el-tabs__header {
                 margin: 0;
-                padding: 0 20px;
+                padding: 12px 20px;
                 border-bottom: 1px solid #EBEEF5;
-                background: #FAFAFA;
+                background: #F5F7FA;
+                border-radius: 0;
             }
 
             .el-tabs__nav-wrap {
@@ -211,22 +212,69 @@ export default {
                 }
             }
 
+            .el-tabs__nav {
+                border: none;
+                display: flex;
+                align-items: center;
+                gap: 0;
+            }
+
             .el-tabs__item {
-                height: 48px;
-                line-height: 48px;
+                height: 36px;
+                line-height: 36px;
                 padding: 0 20px;
                 font-size: 14px;
                 color: #606266;
-                border-bottom: 2px solid transparent;
+                background: #FFFFFF;
+                border: none;
+                border-radius: 0;
+                margin-right: 0;
+                position: relative;
+                transition: all 0.3s ease;
+                cursor: pointer;
+                box-shadow: none;
 
-                &.is-active {
-                    color: #409EFF;
-                    border-bottom-color: #409EFF;
-                    font-weight: 500;
+                // 第一个标签左圆角
+                &:first-child {
+                    border-top-left-radius: 6px;
+                    border-bottom-left-radius: 6px;
                 }
 
-                &:hover {
-                    color: #409EFF;
+                // 最后一个标签右圆角
+                &:last-child {
+                    border-top-right-radius: 6px;
+                    border-bottom-right-radius: 6px;
+                }
+
+                // 激活状态：蓝色背景 + 白色文字
+                &.is-active {
+                    color: #FFFFFF;
+                    background: #1F72EA;
+                    font-weight: 500;
+                    z-index: 1;
+
+                    // 激活标签的左侧圆角（如果是第一个，已经有圆角了）
+                    &:not(:first-child) {
+                        border-top-left-radius: 6px;
+                        border-bottom-left-radius: 6px;
+                    }
+
+                    // 激活标签的右侧保持直边（除非是最后一个）
+                    &:not(:last-child) {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+
+                // 非激活状态：白色背景 + 深色文字
+                &:not(.is-active) {
+                    background: #FFFFFF;
+                    color: #606266;
+
+                    &:hover {
+                        background: #F0F4FF;
+                        color: #1F72EA;
+                    }
                 }
             }
 
@@ -255,7 +303,7 @@ export default {
                 margin: 0;
                 padding: 0 20px;
                 border-bottom: 1px solid #EBEEF5;
-                background: #F5F7FA;
+                background: #FFFFFF;
             }
 
             .el-tabs__nav-wrap {
@@ -264,22 +312,52 @@ export default {
                 }
             }
 
-            .el-tabs__item {
-                height: 40px;
-                line-height: 40px;
-                padding: 0 16px;
-                font-size: 13px;
-                color: #606266;
-                border-bottom: 2px solid transparent;
+            .el-tabs__nav {
+                border: none;
+            }
 
+            .el-tabs__item {
+                height: 44px;
+                line-height: 44px;
+                padding: 0 20px;
+                font-size: 14px;
+                color: #606266;
+                background: transparent;
+                border: none;
+                border-bottom: 2px solid transparent;
+                border-radius: 0;
+                margin-right: 0;
+                position: relative;
+                transition: all 0.3s ease;
+                cursor: pointer;
+
+                // 激活状态：蓝色文字 + 蓝色下划线
                 &.is-active {
-                    color: #409EFF;
-                    border-bottom-color: #409EFF;
+                    color: #1F72EA;
                     font-weight: 500;
+                    background: transparent;
+                    
+                    // 蓝色下划线，稍微超出文字宽度
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        bottom: 0;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        width: calc(100% + 8px);
+                        height: 2px;
+                        background: #1F72EA;
+                    }
                 }
 
-                &:hover {
-                    color: #409EFF;
+                // 非激活状态：深灰色文字
+                &:not(.is-active) {
+                    color: #606266;
+                    background: transparent;
+
+                    &:hover {
+                        color: #1F72EA;
+                    }
                 }
             }