<template>
  <div class="homeBox">
    <!-- 头部 -->
    <Head></Head>
    <!-- 内容 -->
    <div class="home-contant">
      <!-- 左边 -->
      <div class="home-aside asideL">
        <div class="asideL-top">
          <div class="common-title">数据采集</div>
          <div class="comom-cnt">
            <Collection></Collection>
          </div>
        </div>
        <div class="asideL-bottom">
          <div class="common-title">预警信息</div>
          <div class="comom-cnt">
            <Warning></Warning>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="home-middle">
        <Mapecharts></Mapecharts>
      </div>
      <!-- 右边 -->
      <div class="home-aside asideR">
        <div class="asideL-top">
          <div class="common-title">值班备勤</div>
          <div class="comom-cnt">
            <BeOnDuty></BeOnDuty>
          </div>
        </div>
        <div class="asideL-bottom">
          <div class="common-title">预警统计分析</div>
          <div class="comom-cnt">
            <WanringAnyse></WanringAnyse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Head from './layout/head.vue'
import Collection from './components/collection.vue'
import Warning from './components/warning.vue'
import BeOnDuty from './components/beonDuty.vue'
import WanringAnyse from './components/wanringAnyse.vue'
import Mapecharts from './components/mapecharts.vue'
import { ref } from 'vue';
</script>

<style lang="scss" scoped>
.homeBox{
  width: 100%;
  height: 100vh;
  position: relative;
  .home-contant{
    display: flex;
    position: absolute;
    top: 70px;
    width: 100%;
    height: calc(100vh - 72px);
    overflow: hidden;
    z-index: 2;
    .home-aside{
      width: 442px;
      height: 100%;
    }
    .home-middle{
      flex: 1 0 0;
      height: 100%;
      background: url("~@/assets/images/bg01.png") no-repeat center center;
      background-size: 100% 100%;
      margin: 0 22px;
    }
  }
  // 左边
  .asideL{
    padding-left: 10px;
    box-sizing: border-box;
    .asideL-top{
      height: 60%;
      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .asideL-bottom{
      height: 40%;
      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  // 右边
  .asideR{
    padding-right: 10px;
    box-sizing: border-box;
    .asideL-top{
      height: 40%;
      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .asideL-bottom{
      height: 60%;
      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  // 公用
  .common-title{
    padding: 0 54px;
    box-sizing: border-box;
    font-size: 22px;
    font-family: 'YSBTH';
    background: linear-gradient(0deg, #59A6F4 0%,#ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .comom-cnt{
    height: calc(100% - 30px);
    padding: 4px 20px;
    box-sizing: border-box;
  }
}


</style>