-
+ @sub-tab-change="handleSubTabChange" :hide-main-tabs="true" :key="activeMainTab">
@@ -126,6 +160,11 @@ export default {
defaultSubTab: {
type: String,
default: ''
+ },
+ // 是否隐藏主标签页
+ hideMainTabs: {
+ type: Boolean,
+ default: false
}
},
data() {
@@ -138,6 +177,12 @@ export default {
defaultMainTab(newVal) {
this.activeMainTab = newVal
this.activeSubTab = this.getDefaultSubTab(newVal)
+ },
+ hideMainTabs(newVal) {
+ if (newVal) {
+ // 当隐藏主标签时,确保子标签正确初始化
+ this.activeSubTab = this.getDefaultSubTab(this.defaultMainTab)
+ }
}
},
methods: {
@@ -196,7 +208,7 @@ export default {
return {
proId: decryptWithSM4(this.$route.query.proId),
bidId: decryptWithSM4(this.$route.query.bidId),
- defaultMainTab: 'project',
+ activeMainTab: 'project',
defaultSubTab: 'response',
analysisData: {},
tenderDocumentUrl: '',
@@ -329,6 +341,10 @@ export default {
this.bidDocumentKey = data.bidDocumentKey || ''
}
},
+ handleMainTabClick(tab) {
+ this.activeMainTab = tab.name
+ this.handleMainTabChange(tab.name, '')
+ },
handleMainTabChange(mainTab, subTab) {
console.log('主标签切换:', mainTab, subTab)
},
@@ -349,26 +365,119 @@ export default {
height: calc(100vh - 84px);
display: flex;
flex-direction: column;
- background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
+ background: linear-gradient(180deg, #F1F6FF 0%, #E5EFFF 100%);
overflow: hidden;
+ // 一级标签页容器 - 占满整行
+ .main-tabs-container {
+ flex-shrink: 0;
+ background: #F5F7FA;
+ padding: 12px 20px;
+ border-bottom: 1px solid #EBEEF5;
+
+ ::v-deep .main-tabs {
+ .el-tabs__header {
+ margin: 0;
+ padding: 0;
+ border-bottom: none;
+ background: transparent;
+ }
+
+ .el-tabs__nav-wrap {
+ &::after {
+ display: none;
+ }
+ }
+
+ .el-tabs__nav {
+ border: none;
+ display: flex;
+ align-items: center;
+ gap: 0;
+ }
+
+ .el-tabs__item {
+ height: 36px;
+ line-height: 36px;
+ padding: 0 20px;
+ font-size: 14px;
+ color: #606266;
+ background: #FFFFFF;
+ border: none;
+ border-radius: 0;
+ margin-right: 0;
+ position: relative;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ box-shadow: none;
+
+ // 第一个标签左圆角
+ &:first-child {
+ border-top-left-radius: 6px;
+ border-bottom-left-radius: 6px;
+ }
+
+ // 最后一个标签右圆角
+ &: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;
+ }
+ }
+ }
+ }
+ }
+
.main-content {
flex: 1;
display: flex;
gap: 20px;
- padding: 0 20px 20px 20px;
+ padding: 20px;
overflow: hidden;
.left-panel {
flex: 0 0 50%;
min-width: 0;
height: 100%;
+ display: flex;
+ flex-direction: column;
}
.right-panel {
flex: 0 0 50%;
min-width: 0;
height: 100%;
+ display: flex;
+ flex-direction: column;
}
}
}
diff --git a/src/views/analysis/components/child/AnalysisResultPanel.vue b/src/views/analysis/components/child/AnalysisResultPanel.vue
index afe2ebe..fbf0dfb 100644
--- a/src/views/analysis/components/child/AnalysisResultPanel.vue
+++ b/src/views/analysis/components/child/AnalysisResultPanel.vue
@@ -5,8 +5,8 @@
解析结果
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ subTab.label }}内容
+
+
+
+
+
+
+
{{ tab.label }}内容
+