左悬浮tabs样式

src/styles/components/TabsPage/index.vue

 <script setup lang="ts">
 import { ElTabs, ElTabPane, ElSpace, ElRow, ElCol } from 'element-plus';
-import { ref } from 'vue';
 import '@/styles/tabs.scss'
 const span = 12
 </script>
 
 <template>
-    <el-row>
+    <el-row :gutter="16">
         <el-col :span="span">
             <pre>
 {{ `import '@/styles/tabs.scss';
@@ -22,6 +21,23 @@ const span = 12
                 <el-tab-pane label="tab3">tab3</el-tab-pane>
             </el-tabs>
         </el-col>
+        <el-col :span="span">
+            <pre>
+        {{ `import '@/styles/tabs.scss';
+        <template>
+        //确保父级position: relative;
+    <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
+</template>
+        `}}
+    </pre>
+            <div style="margin-left: 160px;position: relative; height: 200px;">
+                <el-tabs tabPosition="left" class="tabs-nav-no-wrap left-float-nav-tabs">
+                    <el-tab-pane label="tab1">tab1</el-tab-pane>
+                    <el-tab-pane label="tab2">tab2</el-tab-pane>
+                    <el-tab-pane label="tab3">tab3</el-tab-pane>
+                </el-tabs>
+            </div>
+        </el-col>
     </el-row>
 </template>
 

src/styles/components/index.vue

 <template>
     <el-scrollbar>
-        <div class="common-page">
+        <div class="common-page box">
             <el-space direction="vertical" :size="20" alignment="flex-start" fill>
                 <div class="text-title-0-show">开发样式</div>
                 <div class="text-title-1-show">样式变量</div>
@@ -18,7 +18,7 @@
                     <el-tab-pane label="单选框" lazy>
                         <radio-page />
                     </el-tab-pane>
-                    <el-tab-pane label="选项卡" lazy>
+                    <el-tab-pane label="选项卡" lazy class="tab-pane-overflow-visible">
                         <tabs-page />
                     </el-tab-pane>
                 </el-tabs>
@@ -38,4 +38,8 @@ import CommonPage from './CommonPage/index.vue';
 import TextPage from './TextPage/index.vue';
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.box {
+    padding-bottom: 20px;
+}
+</style>
\ No newline at end of file

src/styles/container.scss

@@ -5,4 +5,13 @@
     padding: 16px 160px;
     // width: 1600px;
     align-items: center;
+    /* 关键属性：允许溢出内容显示 */
+    overflow: visible;
+    /* 不裁剪子元素 */
+
+    /* 其他可选属性 */
+    position: relative;
+    /* 如果子元素需要绝对定位 */
+    min-height: 0;
+    /* 防止 flex 或 grid 容器压缩 */
 }
\ No newline at end of file

src/styles/tabs.scss

@@ -25,20 +25,13 @@
 
     /*定义字体*/
     .el-tabs__item:not(.disinheritance .el-tabs__item) {
-        font-size: 20px;
-        font-family: "Source Han Sans CN-Regular";
-        font-weight: Regular;
-        line-height: 26px;
-        height: 50px;
+        @extend .text-title-2;
+        color: var(--text-primary-80-color);
     }
 
     /*激活时按钮样式*/
     .el-tabs__item.is-active:not(.disinheritance .el-tabs__item) {
-
-        font-size: 24px;
-        font-family: "Source Han Sans CN-Bold";
-        font-weight: Bold;
-
+        @extend .text-title-1-bold;
         color: var(--color-primary-100);
         border-width: 1px;
         border-style: solid;
@@ -48,26 +41,53 @@
     }
 }
 
+/***允许tab-pane内部元素溢出***/
+.tab-pane-overflow-visible {
+    .el-tab-pane {
+        overflow: visible !important;
+    }
+
+    // 同时确保父容器也允许溢出
+    .el-tabs__content {
+        overflow: visible !important;
+    }
+}
+
 /***tabs-bar左边悬浮***/
 .left-float-nav-tabs {
+    .el-tabs__header.is-left {
+        position: absolute;
+        left: -140px;
+        top: 0px;
 
-    // .el-tabs__header {
-
-    position: relative;
-    overflow: visible;
-    /* 双重保障 */
+        .el-tabs__nav {
+            gap: 16px;
+        }
 
-    /* 创建新的渲染层 */
-    /* 创建新的层叠上下文 */
-    .el-tabs__header {
+        .el-tabs__active-bar {
+            background-color: transparent;
+            right: 12px;
+            top: 11px;
+            height: 8px !important;
+            border-top: 6px solid transparent;
+            /* 顶部边框透明 */
+            border-bottom: 6px solid transparent;
+            /* 底部边框透明 */
+            border-left: 8px solid var(--bg-white-100);
+            /* 左侧边框有颜色 */
+        }
+    }
 
-        position: relative;
-        left: 0;
-        top: 0;
-        z-index: 999;
-        background-color: red;
-        // margin-left: -20px;
+    .el-tabs__item.is-left {
+        @extend .text-tip-1;
+        color: var(--text-primary-65-color);
+        height: 32px;
+        padding: 4px 26px 4px 28px;
+        border-radius: 16px 16px 16px 16px;
     }
 
-    // }
+    .el-tabs__item.is-left.is-active {
+        color: var(--bg-white-100);
+        background-color: var(--color-primary-100);
+    }
 }
\ No newline at end of file

src/views/companyPages2/component/SupplyChain/index.vue

@@ -190,7 +190,7 @@ async function handleDataTypeChange() {
                 </el-row>
             </el-checkbox-group>
         </div>
-        <div class="background-as-card chart-box flex-fill">
+        <div class="background-as-card flex-fill">
             <graph-chart :nodes="nodes" :links="links" />
             <el-radio-group v-model="selectedDataType" class="data-type-group" @change="handleDataTypeChange">
                 <el-radio-button v-for="item in dataTypeList" :label="item.id" :value="item.id">
@@ -204,10 +204,6 @@ async function handleDataTypeChange() {
 </template>
 
 <style lang="css" scoped>
-.box-div {
-    margin: 2px;
-}
-
 .options-pane {
     width: 360px;
     padding-top: 16px;

src/views/companyPages2/index.vue

@@ -6,7 +6,7 @@
         <div class="common-page">
             <el-space wrap :size="16" fill>
                 <title-pane :enterprise-info="enterpriseInfo"></title-pane>
-                <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn">
+                <el-tabs stretch class="tabs-header-as-card tabs-nav-no-wrap tabs-bar-as-btn tab-pane-overflow-visible">
                     <el-tab-pane label="企业详情">
                         <div class="flex-display">
                             <news-pane :enterprise-info="enterpriseInfo" />