yudao-dev/src/views/home/expenseAnalysisComponents/container.vue

<template>
  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
    <div class="content-top" :class="['content-top__' + topSize]">
      <!-- 使用 flex 容器包裹图标和文字，实现垂直居中 -->
      <div class="title-wrapper">
        <svg-icon class="title-icon" :icon-class="icon" />
        <span class="title-text">
          {{ name }}
        </span>
      </div>
    </div>
    <div class="cockpitContainer-body">
      <slot>
        <div class="test-body">something test....</div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Container',
  components: {},
  // eslint-disable-next-line vue/require-prop-types
  props: ['name', 'size', 'icon', 'topSize'],
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.cockpitContainer {
  display: inline-block;
  // width: 100%;
  // height: 100%;
  padding: 6px;
  display: flex;
  flex-direction: column;
  position: relative;

  .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-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%;
    // background-position: 0 0;
    &__basic {
      // width: 547px;
      background: url(../../../assets/img/contentTopBasic.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__middle {
      background: url(../../../assets/img/topTileMiddle.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__large {
      background: url(../../../assets/img/topTitleLargeBg.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__KFAPTopTitle {
      background: url(../../../assets/img/KFAPTopTitle.png) no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
    }

    &__psiTopTitleBasic {
      background: url(../../../assets/img/psiTopTitleBasic.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;
        }

  }

  &__topBasic {
    background: url(../../../assets/img/top-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__bottomBasic {
    background: url(../../../assets/img/bottom-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__operatingBasic {
    background: url(../../../assets/img/operating-basic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__operatingLarge {
    background: url(../../../assets/img/operating-large.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__profitTopBasic {
    background: url(../../../assets/img/profitTopBasic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__profitMiddleBasic {
    background: url(../../../assets/img/profitMiddleBasic.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__psiBasicBg {
    background: url(../../../assets/img/psiBasicBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

  &__psiMiddleBg {
    background: url(../../../assets/img/psiMiddleBg.png) no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
  }

        &__operatingRevenueBg {
          background: url(../../../assets/img/operatingRevenueBg.png) no-repeat;
          background-size: 100% 100%;
          background-position: 0 0;
        }

  &__costBasicBg {
    background: url(../../../assets/img/costBasicBg.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;
        }
  // &__left {
  //   background: url(../../../../../../../assets/img/left.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__energyConsumption {
  //   background: url(../../../../../../../assets/img/energyConsumption.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__left2 {
  //   background: url(../../assets/left_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__left3 {
  //   background: url(../../assets/left_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__mid2 {
  //   background: url(../../assets/mid_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__mid3 {
  //   background: url(../../assets/mid_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right1 {
  //   background: url(../../assets/right_1.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right2 {
  //   background: url(../../assets/right_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__right3 {
  //   background: url(../../assets/right_3.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekRight2 {
  //   background: url(../../assets/week_right_2.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekMidTop {
  //   background: url(../../assets/week-mid-top.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  // &__weekMidMid {
  //   background: url(../../assets/week-mid-mid.png) no-repeat;
  //   background-size: 100% 100%;
  //   background-position: 0 0;
  // }

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // background: inherit;
    /* 设置模糊，不用 filter */
    backdrop-filter: blur(5px);
    z-index: -1;
  }
}

.container-body {
  flex: 1;
}
</style>