mky-vent-base/src/views/vent/dataCenter/infoCenter/components/infoBox.vue

<template>
  <div class="info-box-bg">
    <div class="box-top">
      <div class="title">
        <slot name="title"></slot>
      </div>
    </div>
    <div class="box-center">
      <div class="box-container">
        <slot name="container"></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup></script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('@/assets/font/douyuFont.otf');
  }
  @import '/@/design/theme.less';
  .info-box-bg {
    --image-border1: url('/@/assets/images/dataCenter/infoCenter/info-border1.png');
    --image-border2: url('/@/assets/images/dataCenter/infoCenter/info-border2.png');
    --image-border3: url('/@/assets/images/dataCenter/infoCenter/info-border3.png');
    --image-border4: url('/@/assets/images/dataCenter/infoCenter/info-border4.png');
    --image-title: url('/@/assets/images/dataCenter/infoCenter/info-title.png');

    --container-color: #00213236;
    --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
    width: 100%;
    height: 100%;
    min-height: 80px;
    position: relative;
    background: var(--image-border4) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .box-top {
      width: 220px;
      height: 35px;

      .title {
        width: 100%;
        height: 35px;
        display: flex;
        background-image: var(--image-title);
        background-size: 100% 100%;
        justify-content: center;
        align-items: center;
        color: #66ffff;
        font-family: 'douyuFont';
        padding-top: 5px;
      }
    }
    .box-center {
      width: calc(100% + 0.5px);
      height: calc(100% - 50px);
      position: relative;

      .box-container {
        width: calc(100% - 2px);
        height: 100%;
        min-height: 50px;
        padding: 5px 25px;
        color: #fff;
        overflow-y: scroll;
      }
    }
  }
</style>