<template>
  <div class="container">
    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 头部区域 -->
    <Header />

    <!-- 主内容区域 -->
    <RouterView />

    <!-- 路由切换区域 -->
    <Control v-if="isShow" />

    <!-- 楼栋图标区域 -->
    <Building />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import Header from "@/components/header.vue";
import Control from "@/components/control.vue";
import Building from "@/components/building.vue";
import { RouterView } from "vue-router";

const route = useRoute();

// 是否展示切换路由组件
const isShow = ref(false);

// 监听路由地址变化
watch(route, (value) => {
  isShow.value = value.meta.showRouter as boolean;
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 1920px;
  height: 1080px;
  background-image: url(@/assets/images/bg.png);
  background-size: 100% 100%;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 267px;
    background-image: linear-gradient(#010f0fff, #0b2026c6, transparent);
  }
}
</style>
