招标解析页面修改
This commit is contained in:
parent
0fa939e560
commit
9bb4a50452
|
|
@ -4,13 +4,25 @@
|
|||
<!-- 头部导航 -->
|
||||
<AnalysisHeader @back="handleBack" />
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<!-- 一级标签页 - 占满整行 -->
|
||||
<div class="main-tabs-container">
|
||||
<el-tabs v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
|
||||
<el-tab-pane
|
||||
v-for="tab in mainTabs"
|
||||
:key="tab.name"
|
||||
:label="tab.label"
|
||||
:name="tab.name"
|
||||
/>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 - 左右各占50% -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧：解析结果面板 -->
|
||||
<!-- 左侧：解析结果面板（包含二级tab和内容） -->
|
||||
<div class="left-panel">
|
||||
<AnalysisResultPanel ref="resultPanel" :main-tabs="mainTabs" :default-main-tab="defaultMainTab"
|
||||
<AnalysisResultPanel ref="resultPanel" :main-tabs="mainTabs" :default-main-tab="activeMainTab"
|
||||
:default-sub-tab="defaultSubTab" @main-tab-change="handleMainTabChange"
|
||||
@sub-tab-change="handleSubTabChange">
|
||||
@sub-tab-change="handleSubTabChange" :hide-main-tabs="true" :key="activeMainTab">
|
||||
<!-- 项目信息 - 招标人 -->
|
||||
<template #project-tenderer>
|
||||
<div class="content-section">
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<h3>解析结果</h3>
|
||||
</div>
|
||||
<div class="panel-content">
|
||||
<!-- 主标签页 -->
|
||||
<el-tabs v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
|
||||
<!-- 主标签页（可选，可通过hideMainTabs隐藏） -->
|
||||
<el-tabs v-if="!hideMainTabs" v-model="activeMainTab" @tab-click="handleMainTabClick" class="main-tabs">
|
||||
<el-tab-pane
|
||||
v-for="tab in mainTabs"
|
||||
:key="tab.name"
|
||||
|
|
@ -41,6 +41,40 @@
|
|||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 隐藏主标签页时，直接显示当前主标签的内容 -->
|
||||
<template v-else>
|
||||
<template v-for="tab in mainTabs">
|
||||
<template v-if="tab.name === activeMainTab">
|
||||
<!-- 子标签页 -->
|
||||
<el-tabs
|
||||
v-if="tab.subTabs && tab.subTabs.length > 0"
|
||||
v-model="activeSubTab"
|
||||
@tab-click="handleSubTabClick"
|
||||
class="sub-tabs"
|
||||
:key="`sub-tabs-${tab.name}`"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="subTab in tab.subTabs"
|
||||
:key="subTab.name"
|
||||
:label="subTab.label"
|
||||
:name="subTab.name"
|
||||
>
|
||||
<div class="tab-content">
|
||||
<slot :name="`${tab.name}-${subTab.name}`">
|
||||
<div class="empty-content">{{ subTab.label }}内容</div>
|
||||
</slot>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 没有子标签页的内容 -->
|
||||
<div v-else class="tab-content" :key="`content-${tab.name}`">
|
||||
<slot :name="tab.name">
|
||||
<div class="empty-content">{{ tab.label }}内容</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue