uark_front/src/layouts/MapLayout.vue

31 lines
1007 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section id="app" class="flex flex-col min-h-screen">
<NavBar class="fixed" />
<main class="w-full p-4 pt-[80px]">
<section class="grid grid-cols-7 gap-4 overflow-hidden">
<!-- 左側地圖 -->
<section class="col-span-3 bg-white/50 rounded-md shadow p-3 h-full overflow-hidden">
<div class="w-full h-full flex items-center justify-center text-gray-500">
<Forge />
</div>
</section>
<!-- 右側路由內容 -->
<section class="col-span-4 h-full overflow-hidden">
<div class="w-full h-full">
<RouterView class="h-[calc(100vh-72px-24px)]" />
</div>
</section>
</section>
</main>
</section>
</template>
<script setup>
import NavBar from "@/layouts/NavBar.vue";
// 延遲載入,避免首頁沒用到也被打包
import { defineAsyncComponent } from "vue";
const Forge = defineAsyncComponent(() => import("@/components/forge/Forge.vue"));
</script>