<template>
    <div class="root">
        <Header v-if="!isElectron()"/>
        <Navbar v-else style="position: relative; z-index: 999;"/>
        <Container />
        <CanvasBackend />
        <Footer />
    </div>
</template>

<script setup>
import CanvasBackend from '@/components/CanvasBackend/index.vue'
import Header from '@/components/Header/index.vue'
import Navbar from '@/components/Navbar/index.vue'
import Container from './components/container.vue'
import Footer from '@/components/Footer/index.vue'
import { isElectron } from '@/utils/electron'
</script>

<style scoped>
.root {
    text-align: center;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 300px;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    /* center 可以接收鼠标事件 */
}

.button {
    position: absolute;
    z-index: 101;
}
</style>
