yudao-dev/src/views/home/components/bottomMiddleContainer.vue

<template>
  <div class="cockpitContainer" :class="['cockpitContainer__' + size]">
    <div class="container-top">
      <div class="title-wrapper">
        <svg-icon class="title-icon" :icon-class="icon" />
        <span class="title-text">
          {{ name }}
        </span>
        <svg-icon @click="handleShow" v-if="tableShow" class="title-icon" style="position: absolute;right: 20;" :icon-class="'orderReturn'" />

      </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', 'nameTwo','tableShow'],
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleShow() {
      this.$emit('handleShow',false)
    }
  },
};
</script>

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

  .container-top {
    width: 746px;
    height: 60px;
    background: linear-gradient(90deg,  #FFFFFF 50%, rgba(253, 255, 255, 0)  100%);
    position: relative;
    overflow: hidden;
    .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;
      }
  }

  /* 左上角折现边框（主边框） */
  .container-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border: 1px solid;
    border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    /* 切割左上角形成折现 */
  }

  /* 左上角折现细节（仅保留边框线条，去掉蓝色填充） */
  .container-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    /* 调整为纯边框线条，去掉背景填充 */
    background: #EFF3F8;
    border-top: 1px solid rgba(92, 140, 255, 1);
    border-left: 1px solid rgba(92, 140, 255, 1);
    transform: rotate(135deg) translate(-50%, -50%);
    transform-origin: top left;
  }

  &__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;
  }

  // &__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>