招标解析
This commit is contained in:
parent
9bb4a50452
commit
3ea7596796
|
|
@ -389,6 +389,11 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 禁用下划线动画
|
||||
.el-tabs__active-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
display: flex;
|
||||
|
|
@ -407,40 +412,29 @@ export default {
|
|||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
transition: none;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
|
||||
// 第一个标签左圆角
|
||||
&:first-child {
|
||||
// 第一个标签左圆角（仅非激活状态）
|
||||
&:first-child:not(.is-active) {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
// 最后一个标签右圆角
|
||||
&:last-child {
|
||||
// 最后一个标签右圆角（仅非激活状态）
|
||||
&:last-child:not(.is-active) {
|
||||
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;
|
||||
}
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// 非激活状态：白色背景 + 深色文字
|
||||
|
|
|
|||
|
|
@ -7,25 +7,12 @@
|
|||
<div class="panel-content">
|
||||
<!-- 主标签页（可选，可通过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"
|
||||
:label="tab.label"
|
||||
:name="tab.name"
|
||||
>
|
||||
<el-tab-pane v-for="tab in mainTabs" :key="tab.name" :label="tab.label" :name="tab.name">
|
||||
<!-- 子标签页 -->
|
||||
<el-tabs
|
||||
v-if="tab.subTabs && tab.subTabs.length > 0"
|
||||
v-model="activeSubTab"
|
||||
@tab-click="handleSubTabClick"
|
||||
class="sub-tabs"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="subTab in tab.subTabs"
|
||||
:key="subTab.name"
|
||||
:label="subTab.label"
|
||||
:name="subTab.name"
|
||||
>
|
||||
<el-tabs v-if="tab.subTabs && tab.subTabs.length > 0" v-model="activeSubTab"
|
||||
@tab-click="handleSubTabClick" class="sub-tabs">
|
||||
<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>
|
||||
|
|
@ -46,19 +33,10 @@
|
|||
<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"
|
||||
>
|
||||
<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>
|
||||
|
|
@ -369,7 +347,7 @@ export default {
|
|||
color: #606266;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: none !important;
|
||||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
position: relative;
|
||||
|
|
@ -381,7 +359,8 @@ export default {
|
|||
color: #1F72EA;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
|
||||
border-bottom: none !important;
|
||||
|
||||
// 蓝色下划线，稍微超出文字宽度
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -389,7 +368,6 @@ export default {
|
|||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% + 8px);
|
||||
height: 2px;
|
||||
background: #1F72EA;
|
||||
}
|
||||
|
|
@ -399,6 +377,7 @@ export default {
|
|||
&:not(.is-active) {
|
||||
color: #606266;
|
||||
background: transparent;
|
||||
border-bottom: none !important;
|
||||
|
||||
&:hover {
|
||||
color: #1F72EA;
|
||||
|
|
@ -433,4 +412,3 @@ export default {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue