物资详情页面

src/views/emergency/emergency-supplies/PageEmergencyListInfo.vue

@@ -1,7 +1,35 @@
 <template>
-  <div> this is emergency list info </div>
+  <div class="safety-platform-container">
+    <div class="safety-platform-container__header">
+      <div class="breadcrumb-title">{{ headerTitle }}</div>
+    </div>
+    <div class="safety-platform-container__main">
+      <component :is="dynamicComponent" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+  import { computed, defineAsyncComponent } from 'vue';
 
-<style scoped lang="scss"></style>
+  const route = useRoute();
+  const type = String(route.query.type);
+  const headerTitle = computed(() => {
+    const title = '应急物资';
+    if (type === 'add') {
+      return `添加${title}`;
+    }
+    return `${title}详情`;
+  });
+  const dynamicComponent = computed(() => {
+    if (type === 'add') {
+      return defineAsyncComponent(() => import('./src/components/AddEmergencyItem.vue'));
+    }
+    return '';
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '@/styles/page-details-layout.scss' as *;
+</style>

src/views/emergency/emergency-supplies/src/components/AddEmergencyItem.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>this is add emergency item</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>