meilan-web/src/views/dataBigScreen/dashboard/components/DashboardContainer.vue

<template>
  <div :class="{ none: !$slots.default}" class="dashboard-container" ref="page">
    <slot></slot>
    <div v-if="!props.hide" class="wow home-main">
      <slot name="center"></slot>
    </div>
  </div>
</template>

<script setup>
  import { onMounted } from 'vue';
  import WOW from 'wow.js';
  const page = ref(null)
  const props = defineProps({
    hide: {
      type: Boolean,
      default: false,
    },
  });

  onMounted(() => {
    const wow = new WOW();
    wow.init();
  });
  defineExpose({
    getRoot: () => page.value
  })
</script>

<style lang="scss" scoped>
  .dashboard-container {
    position: relative;
    width: 100%;
    background: url('../../../../assets/images/bg-99b6904c.png');
    background-size: 100% 100%;
    overflow: auto;

    &.none {
      .home-main {
        padding-top: 20px;
      }
    }

    .home-main {
      width: 100%;
      padding: 100px 10px 10px;
      box-sizing: border-box;
    }
  }
</style>