front/src/assets/main.scss

@@ -4,9 +4,11 @@
 :root {
     --primary-color: #ACD0E5;
 }
+
 body {
     font-family: 'Montserrat';
 }
+
 a[href] {
     color: #048280;
 
@@ -15,5 +17,23 @@ a[href] {
     }
 }
 
+.main {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 4.25rem);
+    gap: 1.25rem;
+
+    h1 {
+        font-size: 4rem
+    }
+    p {
+        &:not(:last-child) {
+            margin-bottom: 0.5rem;
+        }
+    }
+}
+
 @import 'sidebar.scss';
 @import 'nav.scss';

front/src/components/Main/index.vue

@@ -1,5 +1,27 @@
 <script setup lang="ts">
+import { watch } from 'vue';
+import { useItem } from '../../stores/item';
+import { useRawData } from '../../stores/raw_data';
+
+const raw_dataStore = useRawData()
+const pageStore = useItem()
+if (!raw_dataStore.data.id && pageStore.page.id) {
+    await raw_dataStore.load({ source: pageStore.page.id })
+}
+
+watch(() => pageStore.page.id, async () => {
+    await raw_dataStore.load({ source: pageStore.page.id })
+})
 </script>
 <template>
-    123
+    <div class="main">
+        <h1 class="main-title">
+            {{ raw_dataStore.data.name }}
+        </h1>
+        <div class="main-desc">
+            <p v-for="p in (raw_dataStore.data.description || '').replace(/(\n|\r)+/g, '\n').split('\n')">
+                {{ p }}
+            </p>
+        </div>
+    </div>
 </template>

front/src/components/load.vue

@@ -8,5 +8,5 @@ const route = useRoute()
 await page.load(route.params)
 </script>
 <template>
-    {{ route.params }}
+
 </template>

front/src/index.d.ts

@@ -15,7 +15,7 @@ interface scene3D {
     min_distance: number
     max_distance: number
     elements: element3DType[]
-    descrition?: string
+    description?: string
     env: {
         hdr_gainmap?: string
         hdr_json?: string