<template>
  <div class="main_body" v-if="currentPath">
    <!-- 左边双方格区域 -->
    <div class="box left_box"></div>
    <!-- 左边线区域 -->
    <div class="line left_line"></div>
    <!-- 左边底部线区域 -->
    <div class="bottom_line left_bottom_line"></div>
    <!-- 右边线区域 -->
    <div class="line right_line"></div>
    <!-- 右边双方格区域 -->
    <div class="box right_box"></div>
    <!-- 右边底部线区域 -->
    <div class="bottom_line right_bottom_line"></div>
    <!-- 路由展示区域 -->
    <router-view></router-view>
    <!-- 路由控制组件 -->
    <RouterEle v-show="currentPath !== '/login'" :currentPath="currentPath" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

// 路由对象
const route = useRoute();
// 当前路由路径
const currentPath = ref<string>("");

// 监听当前路由路径变化
watch(route, (newValue) => {
  currentPath.value = newValue.path;
});
</script>

<style lang="scss" scoped>
.main_body {
  position: relative;
  z-index: 999;
  width: 7072px;
  height: 1721px;

  .box {
    position: absolute;
    width: 11px;
    height: 217px;
    background-image: url(@/assets/images/main-body-double.png);
    background-size: 100% 100%;
  }

  .left_box {
    top: 716px;
    left: 26px;
  }

  .right_box {
    top: 716px;
    right: 46px;
  }

  .line {
    position: absolute;
    width: 38px;
    height: 1670px;
    background-size: 100% 100%;
  }

  .left_line {
    top: 0;
    left: 50px;
    background-image: url(@/assets/images/main-body-line.png);
  }

  .right_line {
    top: 0;
    right: 71px;
    background-image: url(@/assets/images/main-body-line2.png);
  }

  .bottom_line {
    position: absolute;
    width: 2601px;
    height: 40px;
    background-size: 100% 100%;
  }

  .left_bottom_line {
    bottom: 31px;
    left: 61px;
    background-image: url(@/assets/images/main-body-bottom-line.png);
  }

  .right_bottom_line {
    bottom: 31px;
    right: 76px;
    background-image: url(@/assets/images/main-body-bottom-line2.png);
  }
}
</style>
