sl-sfy-safety/src/views/dashboard/home/Home.vue

<template>
  <div class="home-page">
    <div class="header">
      <Header />
    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-algorithm">
          <AlgoData :data="violationData" :get-violations="getViolationCount" />
        </div>
        <div class="content-scores">
          <Score />
        </div>
      </div>
      <div class="content-right">
        <div class="content-click">
          <ClickShow />
        </div>
        <div class="content-operate">
          <QuickAction />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import AlgoData from './components/AlgoDataPanel.vue';
  import ClickShow from './components/ClickShow.vue';
  import Score from './components/Score.vue';
  import Header from './components/Header.vue';
  import useHomeInfo from './hooks/useHomeInfo';
  import QuickAction from './components/QuickAction.vue';

  const homeInfos = useHomeInfo();
  const { violationData, getViolationCount } = homeInfos;
</script>

<style scoped>
  .home-page {
    width: 100%;
    height: 91vh;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    /* background: #ffffff; */
  }

  .header {
    height: 128px;
    width: 100%;
    background: #ffffff;
    margin-bottom: 10px;
  }
  .content {
    flex-grow: 1;
    display: flex;
    width: 100%;
    /* background: #ffffff; */
  }

  .content-left {
    flex-grow: 1;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
  }

  .content-algorithm {
    height: 392px;
    margin-bottom: 10px;
    background: #ffffff;
  }

  .content-scores {
    flex-grow: 1;
    background: #ffffff;
  }

  .content-right {
    /* flex-grow: 0; */
    width: 280px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .content-click {
    height: 203px;
    margin-bottom: 10px;
    background: #ffffff;
  }

  .content-operate {
    flex-grow: 1;
    background: #ffffff;
  }
</style>