diff --git a/src/views/analysis/components/AnalysisBidView.vue b/src/views/analysis/components/AnalysisBidView.vue index e6c24f4..c62043d 100644 --- a/src/views/analysis/components/AnalysisBidView.vue +++ b/src/views/analysis/components/AnalysisBidView.vue @@ -420,6 +420,34 @@ export default { padding: 12px 20px; border-bottom: 1px solid #EBEEF5; + // 使用最具体的选择器确保第一个标签的圆角生效 + ::v-deep .main-tabs .el-tabs__nav .el-tabs__item:first-child { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + } + + ::v-deep .main-tabs .el-tabs__nav .el-tabs__item.is-active:first-child { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + } + + // 使用最具体的选择器确保第二个标签的圆角生效并设置左边框 + ::v-deep .main-tabs .el-tabs__nav .el-tabs__item:nth-child(2) { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-left: 1px solid #d9d9d9 !important; + } + + ::v-deep .main-tabs .el-tabs__nav .el-tabs__item.is-active:nth-child(2) { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-left: 1px solid #1F72EA !important; + } + ::v-deep .main-tabs { .el-tabs__header { margin: 0; @@ -453,33 +481,79 @@ export default { font-size: 14px; color: #606266; background: #FFFFFF; - border: none; - border-radius: 0; + border: 1px solid #d9d9d9; margin-right: 0; position: relative; transition: none; cursor: pointer; box-shadow: none; - // 第一个标签左圆角(仅非激活状态) - &:first-child:not(.is-active) { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + // 默认所有标签无圆角(除了第一个) + &:not(:first-child) { + border-radius: 0; } - // 最后一个标签右圆角(仅非激活状态) - &:last-child:not(.is-active) { + // 第一个标签左圆角(所有状态)- 使用更具体的选择器 + &:first-child { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + } + + // 第二个标签圆角(所有状态)- 只有左上角和左下角,并设置左边框 + &:nth-child(2) { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-left: 1px solid #d9d9d9 !important; + } + + // 最后一个标签右圆角 + &:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - // 激活状态:蓝色背景 + 白色文字,无圆角 + // 中间标签移除左边框,避免重复(排除第二个) + &:not(:first-child):not(:nth-child(2)) { + border-left: none; + } + + // 激活状态:蓝色背景 + 白色文字 &.is-active { color: #FFFFFF; background: #1F72EA; font-weight: 500; z-index: 1; - border-radius: 0 !important; + border-color: #1F72EA; + + // 激活标签如果是第一个,确保保持左圆角 + &:first-child { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + } + + // 激活标签如果是第二个,保持圆角(只有左上角和左下角)并设置左边框 + &:nth-child(2) { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-left: 1px solid #1F72EA !important; + } + + // 激活标签如果是最后一个,保持右圆角 + &:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + + // 激活标签需要恢复左边框(如果它不是第一个和第二个) + &:not(:first-child):not(:nth-child(2)) { + border-left: 1px solid #1F72EA; + } } // 非激活状态:白色背景 + 深色文字 @@ -487,6 +561,12 @@ export default { background: #FFFFFF; color: #606266; + // 非激活状态的第一个标签保持圆角 + &:first-child { + border-top-left-radius: 6px !important; + border-bottom-left-radius: 6px !important; + } + &:hover { background: #F0F4FF; color: #1F72EA;