<template>
  <div class="homeBox">
    <GdMap></GdMap>
    <!-- 头部 -->
    <Head></Head>
    <!-- 左边 内容-->
    <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-aside asidecentre">
      <Introduction />
    </div>
    <!-- 右边 内容-->
    <div class="home-aside asideR">
      <div class="asideL-top">
        <div class="common-title">预警信息</div>
        <div class="comom-cnt">
          <BeOnDuty></BeOnDuty>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
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 Introduction from "./components/Introduction.vue";
import { ref } from "vue";
</script>

<style lang="scss" scoped>
.homeBox {
  width: 100%;
  height: 100vh;
  position: relative;
  .home-aside {
    overflow: hidden;
    z-index: 3;
    width: 442px;
    height: 100%;
    position: absolute;
    height: calc(100vh - 67px);

    background: #071629;
  }
  // 左边
  .asideL {
    top: 65px;
    left: 0;
    .asideL-top {
      height: 291px;
      background: red;
      background: url("~@/assets/images/bi/L_B.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .asideL-bottom {
      margin-top: 13px;
      height: calc(100% - 310px);
      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  // 右边
  .asideR {
    top: 65px;
    right: 0;
    padding-right: 10px;
    box-sizing: border-box;
    .asideL-top {
      height: 100%;
      background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  // 右边
  .asidecentre {
    background: #07162900;
    width: calc(100% - 884px);
    height: 120px;
    bottom: 30px;
    left: 442px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  // 公用
  .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>
