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

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

<script setup>
  import { onMounted } from 'vue';
  import WOW from 'wow.js';

  const props = defineProps({
    hide: {
      type: Boolean,
      default: false,
    },
  });

  onMounted(() => {
    const wow = new WOW();
    wow.init();
  });
</script>

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

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

    .home-main {
      position: relative;
      width: calc(100% - 20px);
      padding: 100px 0 20px;
      margin-left: 20px;
      height: 100vh;
      display: flex;
      z-index: 1;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: row;
      pointer-events: none;
      overflow: hidden;

      .home-main-left, .home-main-right {
        width: calc(30% + -0px);
        position: relative;
        height: calc(100% + -0px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;
        z-index: 2;
        pointer-events: initial;
      }

      .home-main-left-inner, .home-main-center, .home-main-right-inner {
        width: calc(100% + -0px);
        height: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;
        z-index: 2;
        pointer-events: initial;
      }

      .home-main-center {
        width: calc(40% - 20px);
      }
    }
  }
</style>