运营驾驶舱修改部分

src/views/home/components/financeCostsContainer.vue

@@ -16,7 +16,17 @@
         <span class="title-text">{{ nameTwo }}</span>
 
       </div>
-      <span class="change-text" :class="{ 'change-text-right': isLeftTransparent }">点击切换</span>
+      <!-- <span class="change-text" :class="{ 'change-text-right': isLeftTransparent }">点击切换</span> -->
+       <div class="tab-group">
+        <!-- 月度Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'month' }" @click="handleTabClick('month')">
+          月度
+        </div>
+        <!-- 累计Tab：点击切换状态，动态绑定样式 -->
+        <div class="tab-item" :class="{ active: activeTab === 'total' }" @click="handleTabClick('total')">
+          累计
+        </div>
+      </div>
 
     </div>
     <div class="container-body">
@@ -40,10 +50,18 @@ export default {
     return {
       // 初始状态：左侧不透明（1），右侧透明（0.3）
       isLeftTransparent: true,  // 左侧透明度状态（true=1，false=0.3）
-      isRightTransparent: false  // 右侧透明度状态（true=1，false=0.3）
+      isRightTransparent: false,  // 右侧透明度状态（true=1，false=0.3）
+      activeTab: 'month', // 默认激活的Tab为月度
     };
   },
   methods: {
+    handleTabClick(tabType) {
+      this.activeTab = tabType;
+      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
+      this.$emit('tabChange', tabType);
+      // 可选：同时传递更详细的信息（如标签名）
+      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
+    },
     // 点击左侧标题：左侧保持不透明，右侧变透明，并派发采购标签事件
     handleLeftClick() {
       this.isLeftTransparent = true;   // 左侧不透明
@@ -151,7 +169,7 @@ export default {
     background: linear-gradient(90deg, #FFFFFF 0%, rgba(253, 255, 255, 0) 100%);
     position: absolute;
     top: 0;
-    right: 0;
+    left: 240px;
     z-index: 10;
     overflow: hidden;
     cursor: pointer;
@@ -258,4 +276,41 @@ export default {
   // text-align: left;
   // font-style: normal;
 }
+.tab-group {
+  display: inline-flex;
+  position: absolute;
+  right: 5%;
+  top:20px;
+  z-index: 9999;
+  align-items: center;
+  border-radius: 24px;
+  overflow: hidden;
+  gap: 8px; // Tab之间的间距
+}
+
+// Tab基础样式（统一）
+.tab-item {
+  padding: 0 24px;
+  width: 79px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 12px;
+  transition: all 0.2s ease; // 样式切换动画
+}
+
+// 未激活的Tab样式（原first-child样式）
+.tab-item:not(.active) {
+  background: #ECF4FE;
+  color: #0B58FF;
+}
+
+// 激活的Tab样式（原last-child样式）
+.tab-item.active {
+  background: #3071FF;
+  color: #F9FCFF;
+  font-weight: bold;
+}
 </style>