diff --git a/src/assets/Icon-partialselect.svg b/src/assets/Icon-partialselect.svg
new file mode 100755
index 0000000..a90cbbc
--- /dev/null
+++ b/src/assets/Icon-partialselect.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53599"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53599)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g><rect x="5" y="14" width="20" height="3" rx="1.5" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/Icon-select.svg b/src/assets/Icon-select.svg
new file mode 100755
index 0000000..4284db1
--- /dev/null
+++ b/src/assets/Icon-select.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53615"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath><clipPath id="master_svg1_644_8201"><rect x="5" y="5" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_592_53615)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#479CF1" fill-opacity="1"/><g clip-path="url(#master_svg1_644_8201)"><g><path d="M22.93840625,9.8510975C22.45970625,9.3725505,21.68380625,9.3725505,21.20510625,9.8510975L13.03758625,18.0194275L8.79675625,13.7785975C8.31906625,13.2898475,7.53418525,13.2853575,7.05093325,13.7686075C6.56768025,14.2518575,6.57217225,15.036737500000001,7.06092425,15.5144275L12.13425625,20.587787499999997C12.63181625,21.0851875,13.43836625,21.0851875,13.93592625,20.587787499999997L22.93840625,11.5852675C23.41700625,11.1065775,23.41700625,10.3306185,22.93840625,9.8519305L22.93840625,9.8510975Z" fill="#FFFFFF" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/Icon-unselect.svg b/src/assets/Icon-unselect.svg
new file mode 100755
index 0000000..05b0276
--- /dev/null
+++ b/src/assets/Icon-unselect.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="30" height="30" viewBox="0 0 30 30"><defs><clipPath id="master_svg0_592_53615"><rect x="0" y="0" width="30" height="30" rx="2"/></clipPath></defs><g clip-path="url(#master_svg0_592_53615)"><rect x="0" y="0" width="30" height="30" rx="2" fill="#FFFFFF" fill-opacity="1"/><rect x="0.5" y="0.5" width="29" height="29" rx="1.5" fill-opacity="0" stroke-opacity="0.15000000596046448" stroke="#000000" fill="none" stroke-width="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icon_add_s.svg b/src/assets/icon_add_s.svg
new file mode 100644
index 0000000..01e459a
--- /dev/null
+++ b/src/assets/icon_add_s.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26.303199768066406" height="26.303173065185547" viewBox="0 0 26.303199768066406 26.303173065185547"><g><path d="M24.5875,14.8666L14.8674,14.8666L14.8674,24.5882C14.8674,25.5356,14.099,26.3032,13.1516,26.3032C12.2043,26.3032,11.4359,25.5356,11.4359,24.5882L11.4359,14.8666L1.71574,14.8666C0.767578,14.8666,0,14.099,0,13.1516C0,12.2046,0.767666,11.4366,1.71574,11.4366L11.4359,11.4366L11.4359,1.71495C11.4359,0.76793,12.2042,0,13.1516,0C14.099,0,14.8673,0.767959,14.8673,1.71495L14.8673,11.4367L24.5874,11.4367C25.5356,11.4367,26.3032,12.2046,26.3032,13.1515C26.3032,14.0989,25.5356,14.8665,24.5874,14.8665L24.5875,14.8666Z" fill="#479CF1" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icon_arr_s.svg b/src/assets/icon_arr_s.svg
new file mode 100644
index 0000000..b0d97d8
--- /dev/null
+++ b/src/assets/icon_arr_s.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="15" height="23" viewBox="0 0 15 23"><g transform="matrix(-1,0,0,-1,30,46)"><path d="M27.436500000000002,23C27.436500000000002,23,30,25.37044,30,25.37044C30,25.37044,20.12696,34.5,20.12696,34.5C20.12696,34.5,30,43.629599999999996,30,43.629599999999996C30,43.629599999999996,27.436500000000002,46,27.436500000000002,46C27.436500000000002,46,15,34.5,15,34.5C15,34.5,27.436500000000002,23,27.436500000000002,23C27.436500000000002,23,27.436500000000002,23,27.436500000000002,23Z" fill-rule="evenodd" fill="#384D5D" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/style/tailwind.css b/src/assets/style/tailwind.css
index ab5aba6..30988ab 100644
--- a/src/assets/style/tailwind.css
+++ b/src/assets/style/tailwind.css
@@ -8,7 +8,7 @@
 		justify-content: center;
 		align-items: center;
 		background: var(--primaryColor);
-		border: solid 1px var(--primaryColor);
+		border: solid 2px var(--primaryColor);
 		border-radius: 4px;
 		color: white;
 	}
@@ -19,7 +19,11 @@
 		background-color: transparent;
 		border-radius: 4px;
 		color: var(--primaryColor);
-		border: solid 1px var(--primaryColor);
+		border: solid 2px var(--primaryColor);
+	}
+	.btn-light-disabled {
+		color: #d6d6d6;
+		border: solid 2px #d6d6d6;
 	}
 	.component-page {
 		height: calc(100vh - var(--headerHeight) - var(--footerHeight));
diff --git a/src/views/oreManage/components/CraftConfig.vue b/src/views/oreManage/components/CraftConfig.vue
new file mode 100644
index 0000000..fb3e8ba
--- /dev/null
+++ b/src/views/oreManage/components/CraftConfig.vue
@@ -0,0 +1,57 @@
+<template>
+	<div class="bg-white">
+		<main class="h-[36rem] flex text-text" style="width: calc(100vw * 3 / 4)">
+			<section class="w-1/2 border-r-[#e8e8e8] border-r p-8">
+				<h1 class="text-xl font-medium">添加工艺</h1>
+				<div class="mt-5 mb-8 flex items-center">
+					<span class="font-medium mr-4">工艺名称</span>
+					<input type="text" placeholder="请输入名称" class="flex-auto bg-[#f6f6f6] h-11 leading-10 rounded-sm px-4" />
+				</div>
+				<p class="font-medium mb-4">工艺步骤</p>
+				<div class="grid grid-cols-2 gap-4">
+					<StepButton title="抬起托盘" />
+					<StepButton title="降下托盘" />
+					<StepButton title="添加溶液" />
+					<StepButton title="移至加溶" />
+					<StepButton title="移至加热" />
+					<StepButton title="摇匀" />
+					<StepButton title="开始加热" />
+					<StepButton title="停止加热" />
+					<StepButton title="拍照" />
+					<StepButton title="移至异常" />
+					<StepButton title="移出异常" />
+					<StepButton title="等待" />
+				</div>
+			</section>
+			<section class="w-1/2 relative">
+				<h1 class="text-xl font-medium ml-8 mt-8">工艺步骤</h1>
+				<div class="absolute top-[4.75rem] w-full h-[31rem] overflow-y-auto">
+					<StepItem :order="1" name="抬起托盘" />
+					<StepItemEx :order="2" name="添加溶液" />
+					<StepItem :order="3" name="停止加热" />
+				</div>
+			</section>
+		</main>
+		<footer
+			class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
+			style="box-shadow: 0px -2px 13px 0px rgba(137, 137, 137, 0.3)">
+			<button class="btn-dark px-20 py-2" @click="onConfirm">确定</button>
+			<button class="btn-light px-20 py-2" @click="$emit('cancel')">取消</button>
+		</footer>
+	</div>
+</template>
+
+<script setup lang="ts">
+import StepButton from "./StepButton.vue";
+import StepItem from "./StepItem.vue";
+import StepItemEx from "./StepItemEx.vue";
+
+const emit = defineEmits<{
+	(e: "ok"): void;
+	(e: "cancel"): void;
+}>();
+
+function onConfirm() {
+	emit("ok");
+}
+</script>
diff --git a/src/views/oreManage/components/StepButton.vue b/src/views/oreManage/components/StepButton.vue
new file mode 100644
index 0000000..7ac0173
--- /dev/null
+++ b/src/views/oreManage/components/StepButton.vue
@@ -0,0 +1,10 @@
+<template>
+	<div class="btn-light relative h-11">
+        {{ title }}
+        <img src="@/assets/icon_add_s.svg" alt="add" class=" absolute top-1/2 -translate-y-1/2 right-[1.875rem]" />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ title: string }>();
+</script>
diff --git a/src/views/oreManage/components/StepItem.vue b/src/views/oreManage/components/StepItem.vue
new file mode 100644
index 0000000..f61fccd
--- /dev/null
+++ b/src/views/oreManage/components/StepItem.vue
@@ -0,0 +1,12 @@
+<template>
+	<div class="bg-[#fafafa] border-b border-b-[#f3f3f3] h-12">
+		<section class="h-full flex items-center text-xl px-8">
+            <span>{{ order }}.</span>
+            <span>{{ name }}</span>
+            <span class="text-primary underline ml-auto self-stretch leading-[3rem] ">删除</span>
+        </section>
+	</div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{ order: number; name: string }>();
+</script>
diff --git a/src/views/oreManage/components/StepItemEx.vue b/src/views/oreManage/components/StepItemEx.vue
new file mode 100644
index 0000000..0a526f4
--- /dev/null
+++ b/src/views/oreManage/components/StepItemEx.vue
@@ -0,0 +1,22 @@
+<template>
+	<div class="bg-[#fafafa] border-b border-b-[#f3f3f3]">
+		<section class="h-12 flex items-center text-xl px-8">
+            <span>{{ order }}.</span>
+            <span>{{ name }}</span>
+            <span class="text-primary underline ml-auto self-stretch leading-[3rem] ">删除</span>
+        </section>
+        <section class="bg-[#f4f4f4] h-12 flex items-center px-10 text-[#5e5e5e] gap-5">
+            <div class="h-[1.875rem] rounded-sm bg-[#eaeaea] flex items-center px-3 min-w-[8.125rem]">
+                <span>盐酸</span>
+                <img class="ml-auto" src="@/assets/icon_arr_s.svg" alt="arr" />
+            </div>
+            <div class="flex items-center">
+                <input type="number" class="h-[1.875rem] rounded-sm bg-[#eaeaea] px-3 w-[6.25rem] mr-2" />
+                <span>ml</span>
+            </div>
+        </section>
+	</div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{ order: number; name: string }>();
+</script>
diff --git a/src/views/oreManage/index.vue b/src/views/oreManage/index.vue
index d40c235..1752548 100644
--- a/src/views/oreManage/index.vue
+++ b/src/views/oreManage/index.vue
@@ -1,21 +1,65 @@
 <template>
 	<div class="component-page">
 		<section class="flex items-center h-20 gap-3 pl-3">
-			<div class="btn-dark px-3 py-1 text-xs">添加矿石</div>
-			<div class="btn-light px-3 py-1 text-xs">编辑矿石</div>
-			<div class="btn-light px-3 py-1 text-xs">删除矿石</div>
+			<button class="btn-light px-3 py-1 text-xs">添加矿石</button>
+			<button :disabled="opDisable" class="btn-light px-3 py-1 text-xs disabled:btn-light-disabled">编辑矿石</button>
+			<button class="btn-light px-3 py-1 text-xs">删除矿石</button>
 
-			<div class="btn-light px-3 py-1 text-xs ml-12">添加工艺</div>
-			<div class="btn-light px-3 py-1 text-xs">编辑工艺</div>
-			<div class="btn-light px-3 py-1 text-xs">删除工艺</div>
+			<button class="btn-light px-3 py-1 text-xs ml-12" @click="onAddCraft">添加工艺</button>
+			<button class="btn-light px-3 py-1 text-xs">编辑工艺</button>
+			<button class="btn-light px-3 py-1 text-xs">删除工艺</button>
 		</section>
 
 		<section>
-			<header class="h-10 flex items-center bg-[#000]/[0.02]">
-
+			<header class="h-10 flex items-center bg-[#000]/[0.02] text-xs px-3 text-text">
+				<div class="w-20 flex items-center gap-x-4">
+					<img src="@/assets/Icon-unselect.svg" alt="icon" />
+					<p>序号</p>
+				</div>
+				<p class="w-[18rem]">矿石名称</p>
+				<p>工艺</p>
 			</header>
+			<div class="h-10 flex items-center text-xs px-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
+				<div class="w-20 flex items-center gap-x-4">
+					<img :src="isSelect ? icon_select : icon_unselect" alt="" />
+					<p>1</p>
+				</div>
+				<p class="w-[18rem]">矿石名称1</p>
+				<div class="flex-auto">
+					<ul class="appearance-none flex items-center gap-x-3 text-sm">
+						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
+							工艺名称1
+						</li>
+						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
+							工艺名称2
+						</li>
+					</ul>
+				</div>
+			</div>
 		</section>
+
+		<van-overlay :show="showCraftEditDialog">
+			<div class="flex justify-center items-center h-full">
+				<CraftConfig @ok="confirmCraftEdit" @cancel="showCraftEditDialog = false" />
+			</div>
+		</van-overlay>
 	</div>
 </template>
 
-<script lang="ts"></script>
+<script lang="ts" setup>
+import CraftConfig from "./components/CraftConfig.vue";
+import icon_unselect from "@/assets/Icon-unselect.svg";
+import icon_select from "@/assets/Icon-select.svg";
+import { ref } from "vue";
+
+const isSelect = ref<boolean>(true);
+const opDisable = ref<boolean>(true);
+const showCraftEditDialog = ref<boolean>(false);
+
+function confirmCraftEdit() {
+	showCraftEditDialog.value = false
+}
+function onAddCraft() {
+	showCraftEditDialog.value = true
+}
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index a28ce71..781e39a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
+	content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+	theme: {
+		colors: {
+			primary: "#1989fa",
+			white: "#FFF",
+			title: "#646566",
+			text: "#333",
+		},
+		extend: {},
+	},
+	plugins: [],
+};