hsq-pro/src/views/vent/monitorManager/hsqHome/components/CommonBd.vue

<template>
  <div class="common-bd">
    <div class="basic-bd-top">{{ title }}</div>
    <div class="basic-bd-cen">
      <slot></slot>
    </div>
    <div class="basic-bd-bot"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let props = defineProps({
  title: {
    type: String,
    default: ''
  }
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.common-bd {
  --image-box1-top: url('/@/assets/images/vent/box-top-bg.png');
  --image-box1-bottom: url('/@/assets/images/vent/box-bottom-bg.png');
  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
  position: relative;
  width: 100%;
  height: 100%;

  .basic-bd-top {
    display: flex;
    align-items: center;
   justify-content: center;
    color: #fff;
    font-weight: 700;

    width: 100%;
    height: 36px;
    background: var(--image-box1-top) no-repeat;
    background-size: 100% 100%;
  }

  .basic-bd-cen {
    width: 100%;
    height: calc(100% - 36px);
    border-left-width: 1px;
    border-left-style: solid;
    border-right-width: 1px;
    border-right-style: solid;
    border-image-source: var(--container-image);
    border-image-slice: 1;
    border-image-repeat: stretch;
  }

  .basic-bd-bot {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: var(--image-box1-bottom) no-repeat;
    background-size: 100% 100%;
  }

}
</style>