diff --git a/src/views/Creative/Material.vue b/src/views/Creative/Material.vue
index ccd28062..982c5971 100644
--- a/src/views/Creative/Material.vue
+++ b/src/views/Creative/Material.vue
@@ -1,16 +1,9 @@
 <template>
   <div class="material">
     <div class="search">
-      <a-menu v-model="current" mode="horizontal">
-        <a-menu-item key="all">全部 </a-menu-item>
-        <a-menu-item key="app1">全景环境</a-menu-item>
-        <a-menu-item key="app2">三维环境</a-menu-item>
-        <a-menu-item key="app3">货架模型</a-menu-item>
-        <a-menu-item key="app4">展台模型</a-menu-item>
-        <a-menu-item key="app5">商品模型</a-menu-item>
-        <a-menu-item key="app6">360环物</a-menu-item>
-        <a-menu-item key="app7">空白模型</a-menu-item>
-        <a-menu-item key="app8">贴图</a-menu-item>
+      <a-menu v-model:selectedKeys="current" mode="horizontal">
+        <a-menu-item :key="0">全部 </a-menu-item>
+        <a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
       </a-menu>
       <a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
         <template v-slot:prefix>
@@ -22,7 +15,7 @@
           </span>
         </template>
       </a-input>
-      <a-button type="primary">
+      <a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
         <PlusOutlined/> 新增
       </a-button>
     </div>
@@ -48,10 +41,10 @@
                   <template #overlay>
                     <a-menu>
                       <a-menu-item>
-                        <a href="javascript:;" @click="previewer.show()">预览</a>
+                        <a href="javascript:;" @click="previewerRef.show()">预览</a>
                       </a-menu-item>
                       <a-menu-item>
-                        <a href="javascript:;" @click="renameMeterial.show()">重命名</a>
+                        <a href="javascript:;" @click="renameMeterialRef.show()">重命名</a>
                       </a-menu-item>
                       <a-menu-item>
                         <a href="javascript:;" style="color: red;" @click="del">删除</a>
@@ -65,8 +58,9 @@
         </div>
       </div>
     </div>
-    <Previewer ref="previewer" />
-    <RenameMeterial ref="renameMeterial" />
+    <Previewer ref="previewerRef" />
+    <RenameMeterial ref="renameMeterialRef" />
+    <CreateMaterial ref="createMaterialRef" />
   </div>
 </template>
 
@@ -77,10 +71,14 @@ import { computed, ref } from "@vue/runtime-core";
 import { Modal } from "ant-design-vue";
 import Previewer from "./components/Previewer.vue";
 import RenameMeterial from "./components/RenameMeterial.vue";
+import CreateMaterial from "./components/CreateMaterial.vue";
+import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant"
 
+const previewerRef = ref();
+const renameMeterialRef = ref();
+const createMaterialRef = ref();
 
-const previewer = ref();
-const renameMeterial = ref();
+const current = ref([0])
 
 const search = () => {
   alert();
diff --git a/src/views/Creative/components/CreateMaterial.constant.js b/src/views/Creative/components/CreateMaterial.constant.js
new file mode 100644
index 00000000..26ad00ec
--- /dev/null
+++ b/src/views/Creative/components/CreateMaterial.constant.js
@@ -0,0 +1,36 @@
+
+export const THREE_D_TYPE = {
+  PANORAMA: 1,
+  ENV_3D: 2,
+  SHELF: 3,
+  EXHIBITION_BOOTH: 4,
+  WARE: 5,
+  RING_3D: 6,
+}
+
+export const THREE_D_TYPE_S = [
+  {
+    type: THREE_D_TYPE.PANORAMA,
+    name: "3D全景"
+  },
+  {
+    type: THREE_D_TYPE.ENV_3D,
+    name: "三维环境"
+  },
+  {
+    type: THREE_D_TYPE.SHELF,
+    name: "货架模型"
+  },
+  {
+    type: THREE_D_TYPE.EXHIBITION_BOOTH,
+    name: "展台模型"
+  },
+  {
+    type: THREE_D_TYPE.WARE,
+    name: "商品模型"
+  },
+  {
+    type: THREE_D_TYPE.RING_3D,
+    name: "3D环物"
+  },
+];
diff --git a/src/views/Creative/components/CreateMaterial.vue b/src/views/Creative/components/CreateMaterial.vue
new file mode 100644
index 00000000..ac0c6006
--- /dev/null
+++ b/src/views/Creative/components/CreateMaterial.vue
@@ -0,0 +1,49 @@
+<template>
+  <a-modal v-model:visible="visible" :title="title" width="800px" @ok="ok">
+    <a-steps :current="step" size="small" style="margin: 0 auto; width: 60%;">
+      <a-step title="素材信息" />
+      <a-step title="上传素材" />
+    </a-steps>
+    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-item label="Activity name" v-bind="validateInfos.name">
+        <a-input v-model:value="modelRef.name" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { THREE_D_TYPE_S, THREE_D_TYPE } from "./CreateMaterial.constant"
+const { ref }=require("@vue/reactivity");
+
+const title = ref("")
+const visible = ref(false);
+
+const step = ref(0)
+
+const show = (type) => {
+
+  const obj = THREE_D_TYPE_S.find(x => x.type == type);
+  if(!obj) return;
+
+  step.value = 0;
+  title.value = obj.name;
+  visible.value = true;
+}
+
+const ok = () => {
+  visible.value = false;
+}
+
+defineExpose({
+  show,
+  THREE_D_TYPE
+})
+
+</script>
+
+<style scoped lang="scss">
+.back{
+  cursor: pointer;
+}
+</style>
\ No newline at end of file