<template>
  <div class="homeBox">
    <GdMap></GdMap>
    <!-- 头部 -->
    <Head type="importantPerson"></Head>
    <!-- 左边内容 -->
    <div class="home-aside asideL" style="left: 0">
      <ImportantPerson></ImportantPerson>
    </div>
    <!-- 右边内容 -->
    <div class="home-aside asideR" style="right: 0">
      <div class="aside-middle mt60">
        <Zdrqhd></Zdrqhd>
      </div>
      <div class="aside-middle">
        <Yjclqktj></Yjclqktj>
      </div>
    </div>

    <div class="foot">
      <div class="footBtn"><span>发布指令</span></div>
    </div>
  </div>
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
import Head from "@/views/home/layout/head.vue";
import ImportantPerson from "./model/importantPerson.vue";
import Zdrqhd from "./model/zdrqhd.vue";
import Yjclqktj from "./model/yjclqktj.vue";
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.foot {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  width: 1380px;
  height: 107px;
  background: url("~@/assets/images/foot.png") no-repeat center center;
  background-size: 100% 100%;
  .footBtn {
    position: absolute;
    left: 50%;
    bottom: 46px;
    transform: translate(-50%);
    width: 110px;
    height: 110px;
    text-align: center;
    background: url("~@/assets/images/bg02.png") no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    span {
      display: inline-block;
      width: 32px;
      white-space: wrap;
      margin-top: 37px;
    }
  }
}
.asideL {
  background: linear-gradient(to right, rgba(78, 98, 132, 0.8) 0%, rgba(255,255,255,0.1) 100%);
}
.asideR {
  background: linear-gradient(to left, rgba(78, 98, 132, 0.8) 0%, rgba(255,255,255,0.1) 100%);
}
.homeBox .home-contant .home-aside .aside-middle {
  height: calc((100% - 60px) / 2);
}
.transition {
  transition: all 0.5s;
}
</style>