hsq-pro/src/components/vent/ventBoxHsq.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 {}
  }

  .vent-box1-bg {
    //  --image-box1-bg: url('@/assets/images/home-container/configurable/hsq/2-10.png');
    //      --image-box1-bg1: url('@/assets/images/home-container/configurable/hsq/2-5.png');
    width: 100%;
    min-height: 80px;
    position: relative;
    overflow-x: hidden;
    // background: var(--image-box1-bg) no-repeat;
    // background-size: 100% 100%;
    // .box1-top {
    //   width: 100%;
    //   height: 40px;
    //   .title {
    //     width: 177px;
    //     height: 40px;
    //     display: flex;
    //     // justify-content: center;
    //     align-items: center;
    //     color: #01fdfb;
    //     font-weight: bolder;
    //     padding-left: 30px;
    //     background: var(--image-box1-bg1) no-repeat;
    //     background-size: 100% 100%;
    //   }
    // }
    .box1-center {
      width: 100%;
      height: 100%;
      position: relative;

      .box-container {
        width: calc(100% - 2px);
        min-height: 50px;
        // position: relative;
        padding: 10px;
        color: #fff;

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