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

<template>
  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
    <div class="content-top" :class="['content-top__' + topSize]">
      <div class="title-wrapper">
        <svg-icon class="title-icon" :icon-class="icon" />
        <span class="title-text">
          {{ name }}
        </span>
        <!-- <el-button type="text">利润影响额</el-button> -->
      </div>
    </div>
    <div class="container-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;
  }

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

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

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

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

  &__productMiddleBg {
    background: url(../../../assets/img/productMiddleBg.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>