<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/index.vue
 * @Date: 2022-07-27 09:33:30
 * @Description: 
 * @LastEditTime: 2023-08-25 15:13:51
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">
import Header from "./components/Header.vue";
import BlockCom from "./components/BlockCom.vue";
import CenterTop from "./components/CenterTop.vue";
import CenterMap from "./components/CenterMap.vue";
import TrendChangeStatistics from "./components/TrendChangeStatistics.vue";
import { useTitle } from "@vueuse/core";

useTitle("资产风险态势");
</script>

<template>
  <div class="custom-screen-container">
    <Header></Header>
    <div class="custom-screen-content">
      <div class="left">
        <BlockCom name="资产数据"></BlockCom>
        <BlockCom name="所属行业风险资产分布TOP10"></BlockCom>
        <BlockCom name="企业风险资产分布TOP10"></BlockCom>
      </div>
      <div class="center">
        <CenterTop />
        <CenterMap />
        <TrendChangeStatistics />
      </div>
      <div class="right">
        <BlockCom name="漏洞数据"></BlockCom>
        <BlockCom name="高频漏洞TOP10"></BlockCom>
        <BlockCom name="实时告警"></BlockCom>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom-screen-container {
  // display: flex;
  // position: relative;
  // width: 100%;
  // height: 1080px;
  // background: url('../../assets/image/bigScreenBg.png') no-repeat;
  // background-size: 100% 100%;
  // min-height: 100vh;
  // flex-direction: column;
  // background-color: #00072e;
  // box-sizing: border-box;
  // overflow: hidden;

  .custom-screen-content {
    .left {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
      padding-top: 24px;
      box-sizing: border-box;
      flex-grow: 1;
      width: 0;
    }

    .center {
      margin: 0 32px;
      width: 800px;
      display: flex;
      flex-direction: column;
    }

    .right {
      width: 0;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      z-index: 10;
      padding-top: 24px;
      box-sizing: border-box;
    }
  }
}
</style>
