diff --git a/src/MainPage.vue b/src/MainPage.vue
index 9c5ff5f..5ef0edc 100644
--- a/src/MainPage.vue
+++ b/src/MainPage.vue
@@ -1,15 +1,16 @@
 <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';
-import DatetimeTool from './components/HeadTime.vue';
+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";
+import DatetimeTool from "./components/HeadTime.vue";
+import TriplePage from "./pages/3D.vue";
 
-const currentPage = ref('3d');
+const currentPage = ref("3d");
 const handlePageChange = (page) => {
   currentPage.value = page;
   console.log(currentPage.value);
@@ -28,7 +29,7 @@ const handlePageChange = (page) => {
     />
     <div v-else class="pages-wrapper">
       <NavMenu @change="handlePageChange" />
-      <div v-if="currentPage === '3d'" class="3d-page">3d</div>
+      <TriplePage v-if="currentPage === '3d'" line="10" />
       <DataPage v-if="currentPage === 'data'" />
       <AlertListPage v-if="currentPage === 'alert'" />
       <RealtimePage v-if="currentPage === 'realtime'" />
diff --git a/src/assets/model/F10.png b/src/assets/model/F10.png
new file mode 100644
index 0000000..f2a80b7
Binary files /dev/null and b/src/assets/model/F10.png differ
diff --git a/src/pages/3D.vue b/src/pages/3D.vue
index 74ab87a..2050485 100644
--- a/src/pages/3D.vue
+++ b/src/pages/3D.vue
@@ -1 +1,88 @@
 <!-- 三维页面 -->
+<script setup>
+const props = defineProps({
+  line: {
+    type: String,
+    default: "1",
+  },
+});
+</script>
+
+<template>
+  <div class="triple-page" :class="['line-' + line]"></div>
+</template>
+
+<style scoped>
+.triple-page {
+  background: #ccc1;
+  /* flex: 1;
+  position: relative; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+}
+
+.line-1 {
+  background: url(../assets/model/F1.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-2 {
+  background: url(../assets/model/F2.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-3 {
+  background: url(../assets/model/F3.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-4 {
+  background: url(../assets/model/F4.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-5 {
+  background: url(../assets/model/F5.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-6 {
+  background: url(../assets/model/F6.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-7 {
+  background: url(../assets/model/F7.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-8 {
+  background: url(../assets/model/F8.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-9 {
+  background: url(../assets/model/F9.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-10 {
+  background: url(../assets/model/F10.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-11 {
+  background: url(../assets/model/F11.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+.line-12 {
+  background: url(../assets/model/F12.png) no-repeat;
+  background-size: 1920px 1080px;
+  background-position: 0 -80px;
+}
+</style>