<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 09:29:51
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-21 18:00:45
 * @FilePath: \znxjxt-ui\src\views\big-screen\module-block.vue
 * @Description: 大屏数据栏
-->
<template>
  <div class="module-block" :style="{ width, height }">
    <div class="module-block__header">
      <div class="header-title">
        <span>{{ title }}</span>
      </div>
      <div class="header-operation" v-if="$slots.operation">
        <slot name="operation"></slot>
      </div>
    </div>
    <!-- 内容 -->
    <div v-if="$slots.default" class="module-block__body">
      <fssm-scroll full>
        <slot></slot>
      </fssm-scroll>
    </div>
  </div>
</template>

<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  name: "ModuleBlock",
  components: { FssmScroll },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.module-block {
  .module-block__header {
    width: 100%;
    height: 2.5rem;
    display: flex;
    background-image: url("../../assets/screen/index/title.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .header-title {
      width: 75%;
      height: 100%;
      padding-left: 6rem;
      line-height: 2rem;
      color: #ffffff;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-family: "ys";
      font-size: 1.4rem;
    }

    .header-operation {
      width: 25%;
      height: 2.5rem;
      line-height: 2rem;
    }
  }

  .module-block__body {
    width: 100%;
    height: calc(100% - 2.5rem);
  }
}
</style>