init

src/MainPage.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from 'vue';
+import Tools from './components/Tools.vue';
+import NavMenu from './components/NavMenu.vue';
+import AnnoucementPage from './pages/AnnouncementPage.vue';
+import RealtimePage from './pages/RealtimePage.vue';
+import AppHeader from './components/Base/Header.vue';
+import AlertListPage from './pages/AlertListPage.vue'
+import DataPage from './pages/DataPage.vue';
+
+
+const currentPage = ref('3d');
+const handlePageChange = (page) => {
+  currentPage.value = page;
+  console.log(currentPage.value);
+};
+</script>
+
+<template>
+  <div class="main-container">
+    <Tools v-if="currentPage !== 'announcement'" />
+    <AppHeader v-if="currentPage !== 'announcement'" />
+    <AnnoucementPage
+      v-if="currentPage === 'announcement'"
+      class="annoucement-page"
+      @home="() => handlePageChange('3d')"
+    />
+    <div v-else class="pages-wrapper">
+      <NavMenu @change="handlePageChange" />
+      <div v-if="currentPage === '3d'" class="3d-page">3d</div>
+      <DataPage v-if="currentPage === 'data'" />
+      <AlertListPage v-if="currentPage === 'alert'" />
+      <RealtimePage v-if="currentPage === 'realtime'" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main-container {
+  width: 1920px;
+  height: 1080px;
+  background: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  /** 
+  background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
+  100% / 100% no-repeat;
+  */
+  background: url(./assets/bg.png) 100% / cover no-repeat;
+}
+
+.pages-wrapper {
+  flex: 1;
+  display: flex;
+}
+</style>