gasInjection-project/src/components/vent/ventBox1.vue

<template>
  <div class="vent-box1-bg">
    <div class="box1-top">
      <div class="title">
        <slot name="title"></slot>
      </div>
    </div>
    <div class="box1-center">
      <div class="box-container">
        <slot name="container"></slot>
      </div>
    </div>
    <div class="box1-bottom"></div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'VentBox1',
    setup() {},
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';
  @{theme-green} {
    .vent-box1-bg {
      --image-box1-top: url(/@/assets/images/themify/green/vent/border/box-top.png);
      --image-box1-bottom: url('/@/assets/images/themify/green/vent/border/box-bottom.png');
      // --container-color: #1e2932;
      --container-image: linear-gradient(#3df6ff00, #308972, #3df6ff00);
    }
    // .box1-center {
    //   height: calc(100% - 37px);
    //   clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    // }
  }

  @{theme-deepblue} {
    .vent-box1-bg {
      --image-box1-top: url('/@/assets/images/themify/deepblue/vent/border/box2-top.png');
      --image-box1-bottom: none;
      // --image-box1-bottom: url('/@/assets/images/themify/deepblue/vent/border/box1-bottom.png');
      --container-color: #0e223b;
      // --container-image: linear-gradient(#3df6ff00, #2c3f59, #3df6ff00);
      --container-image: none;
    }

    .vent-box1-bg {
      border: 1px solid #3a4b5f;
      border-radius: 10px;
      background: var(--container-color) no-repeat;
      padding-top: 5px;

      .box1-top {
        height: 35px;
        background: var(--image-box1-top) no-repeat;
        background-size: 94% 25px;
        background-position: center center;
        margin-bottom: 5px;
        .title {
          height: 100%;
          padding-left: 8%;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }

  .vent-box1-bg {
    --image-box1-top: url('/@/assets/images/vent/border/box1-top.png');
    --image-box1-bottom: url('/@/assets/images/vent/border/box1-bottom.png');
    --container-color: #00213236;
    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
    width: 100%;
    min-height: 80px;
    position: relative;
    overflow-x: hidden;
    .box1-top {
      width: 100%;
      height: 35px;
      background: var(--image-box1-top) no-repeat;
      background-size: 100% 100%;
      .title {
        width: 100%;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
    .box1-center {
      width: calc(100% + 0.5px);
      position: relative;

      .box-container {
        width: calc(100% - 2px);
        min-height: 50px;
        // position: relative;
        padding: 10px;
        color: #fff;
        // background-color: #0097ff05;
        background-color: var(--container-color);
        backdrop-filter: blur(5px);

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 5px;
          left: 0;
          width: 1px;
          height: calc(100% - 10px);
          background-image: var(--container-image);
        }
        &::after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: 5px;
          width: 1px;
          height: calc(100% - 10px);
          background: var(--container-image);
        }
      }
    }
    .box1-bottom {
      width: 100%;
      height: 35px;
      background: var(--image-box1-bottom) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0px;
      z-index: 1;
      pointer-events: none;
    }
  }
</style>