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>
  .vent-box1-bg {
    width: 100%;
    min-height: 80px;
    position: relative;
    .box1-top {
      width: 100%;
      height: 35px;
      background: url('/@/assets/images/vent/border/box1-top.png') 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: #00213236;
        backdrop-filter: blur(5px);

        &::before {
          content: '';
          display: block;
          position: absolute;
          top: 5px;
          left: 0;
          width: 1px;
          height: calc(100% - 10px);
          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
        }
        &::after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: 5px;
          width: 1px;
          height: calc(100% - 10px);
          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
        }
      }
    }
    .box1-bottom {
      width: 100%;
      height: 35px;
      background: url('/@/assets/images/vent/border/box1-bottom.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0px;
      z-index: 1;
      pointer-events: none;
    }
  }
</style>