新增页面

src/views/home/components/container.vue

@@ -8,6 +8,16 @@
           {{ name }}
         </span>
       </div>
+      <div v-if="isShowTab" 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="cockpitContainer-body">
       <slot>
@@ -22,12 +32,22 @@ export default {
   name: 'Container',
   components: {},
   // eslint-disable-next-line vue/require-prop-types
-  props: ['name', 'size', 'icon', 'topSize'],
+  props: ['name', 'size', 'icon', 'topSize','isShowTab'],
   data() {
-    return {};
+    return {
+      activeTab: 'month' // 初始化激活的Tab（支持父组件传默认值）
+    };
   },
   computed: {},
-  methods: {},
+  methods: {
+    handleTabClick(tabType) {
+      this.activeTab = tabType;
+      // 向父组件派发Tab切换事件，传递当前选中的Tab类型
+      this.$emit('tabChange', tabType);
+      // 可选：同时传递更详细的信息（如标签名）
+      // this.$emit('tabChange', { type: tabType, name: tabType === 'month' ? '月度' : '累计' });
+    },
+  },
 };
 </script>
 
@@ -43,35 +63,37 @@ export default {
 
   .content-top {
     height: 60px;
-.title-wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-    /* 垂直居中关键属性 */
-    height: 100%;
-    /* 继承父容器高度，确保垂直居中范围 */
-  }
 
-  .title-icon {
-    font-size: 30px;
-    margin-right: 12px;
-    margin-top: 4px;
-    /* 图标和文字之间的间距 */
-    flex-shrink: 0;
-    /* 防止图标被压缩 */
-  }
+    .title-wrapper {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      /* 垂直居中关键属性 */
+      height: 100%;
+      /* 继承父容器高度，确保垂直居中范围 */
+    }
+
+    .title-icon {
+      font-size: 30px;
+      margin-right: 12px;
+      margin-top: 4px;
+      /* 图标和文字之间的间距 */
+      flex-shrink: 0;
+      /* 防止图标被压缩 */
+    }
+
+    .title-text {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 24px;
+      color: #000000;
+      letter-spacing: 3px;
+      text-align: left;
+      font-style: normal;
+      // 移除固定行高，避免影响垂直对齐
+      // line-height: 60px;
+    }
 
-  .title-text {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
-    font-size: 24px;
-    color: #000000;
-    letter-spacing: 3px;
-    text-align: left;
-    font-style: normal;
-    // 移除固定行高，避免影响垂直对齐
-    // line-height: 60px;
-  }
     // width: 547px;
     // background: url(../../../assets/img/contentTopBasic.png) no-repeat;
     // background-size: 100% 100%;
@@ -106,11 +128,12 @@ export default {
       background-size: 100% 100%;
       background-position: 0 0;
     }
-        &__rawTopTitleLarge {
-          background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
-          background-size: 100% 100%;
-          background-position: 0 0;
-        }
+
+    &__rawTopTitleLarge {
+      background: url(../../../assets/img/rawTopTitleLarge.png) no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
+    }
 
   }
 
@@ -167,11 +190,19 @@ export default {
     background-size: 100% 100%;
     background-position: 0 0;
   }
-        &__rawTopBg {
-          background: url(../../../assets/img/rawTopBg.png) no-repeat;
-          background-size: 100% 100%;
-          background-position: 0 0;
-        }
+
+  &__rawTopBg {
+    background: url(../../../assets/img/rawTopBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
+  &__opLargeBg {
+    background: url(../../../assets/img/opLargeBg.png) no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+  }
+
   // &__left {
   //   background: url(../../../../../../../assets/img/left.png) no-repeat;
   //   background-size: 100% 100%;
@@ -262,4 +293,41 @@ export default {
 .container-body {
   flex: 1;
 }
+.tab-group {
+  display: inline-flex;
+  position: absolute;
+  right: 5%;
+  top: 10%;
+  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>