diff --git a/src/views/debug/debug.vue b/src/views/debug/debug.vue
index 4b3c83b..de28d12 100644
--- a/src/views/debug/debug.vue
+++ b/src/views/debug/debug.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="component-page overflow-auto p-4 text-title">
 		<div class="frame">
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-4 flex-wrap">
 				<label>加热区编号:</label>
 				<input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" />
 				<label>异常区编号:</label>
@@ -19,7 +19,7 @@
 		</div>
 
 		<div class="frame">
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-4 flex-wrap">
 				<label for="">加液枪编号:</label>
 				<input type="number" class="rounded-sm px-2" placeholder="输入加液枪编号" />
 				<label for="">注入量:</label>
@@ -33,7 +33,7 @@
 			</div>
 		</div>
 		<div class="frame">
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-4 flex-wrap">
 				<label>加热区编号:</label>
 				<input type="number" class="rounded-sm px-2" placeholder="输入加热区编号" />
 				<label>温度:</label>
@@ -56,7 +56,7 @@
 			</div>
 		</div>
 		<div class="frame">
-			<div class="flex items-center gap-4">
+			<div class="flex items-center gap-4 flex-wrap">
 				X:<input type="number" class="rounded-sm px-1 w-16" /> Y:<input type="number" class="rounded-sm px-1 w-16" />
 				Z:<input type="number" class="rounded-sm px-1 w-16" />
 				<label for="">当前位置：</label>
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index ba146ba..07cac66 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -163,107 +163,59 @@ const onChooseCaft = () => {
 	.graphite_btn_container {
 		margin: 2rem 0;
 		gap: 0.625rem;
-
+		display: grid;
 		@media (max-width: calc($md - 0.1px)) {
-			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			.op_open_door {
-				grid-column: 1/3;
+				grid-column: 1/-1;
 			}
 			.op_up_tray {
-				grid-column: 1/3;
+				grid-column: 1/-1;
 			}
 		}
 		@media (min-width: $md) and (max-width: calc($lg - 0.1px)) {
-			display: grid;
 			grid-template-columns: repeat(6, 1fr);
-
-			.op_open_door {
-				grid-column: 1/7;
-			}
-			.op_start_task {
-				grid-column: 1/4;
-			}
-			.op_stop_task {
-				grid-column: 4/7;
-			}
-			.op_select_craft {
-				grid-column: 1/4;
+			> * {
+				grid-column: span 3;
 			}
-			.op_exec_craft {
-				grid-column: 4/7;
-			}
-			.op_add_liquid {
-				grid-column: 1/4;
-			}
-			.op_shake_up {
-				grid-column: 4/7;
+			.op_open_door {
+				grid-column: 1/-1;
 			}
 			.op_move_heat {
-				grid-column: 1/3;
+				grid-column: span 2;
 			}
 			.op_move_act {
-				grid-column: 3/5;
+				grid-column: span 2;
 			}
 			.op_move_exception {
-				grid-column: 5/7;
-			}
-			.op_start_heat {
-				grid-column: 1/4;
-			}
-			.op_up_tray {
-				grid-column: 4/7;
+				grid-column: span 2;
 			}
 		}
-		@media (min-width: $lg) {
-			display: grid;
+		@media (min-width: $lg) and (max-width: calc($xl - 0.1px)) {
 			grid-template-columns: repeat(2, 1fr);
 			.op_open_door {
-				grid-column: 1/3;
+				grid-column: 1/-1;
 			}
 			.op_up_tray {
-				grid-column: 1/3;
+				grid-column: 1/-1;
 			}
 		}
 		@media (min-width: $xl) {
-			display: grid;
 			grid-template-columns: repeat(6, 1fr);
-
-			.op_open_door {
-				grid-column: 1/7;
-			}
-			.op_start_task {
-				grid-column: 1/4;
-			}
-			.op_stop_task {
-				grid-column: 4/7;
-			}
-			.op_select_craft {
-				grid-column: 1/4;
-			}
-			.op_exec_craft {
-				grid-column: 4/7;
+			> * {
+				grid-column: span 3;
 			}
-			.op_add_liquid {
-				grid-column: 1/4;
-			}
-			.op_shake_up {
-				grid-column: 4/7;
+			.op_open_door {
+				grid-column: 1/-1;
 			}
 			.op_move_heat {
-				grid-column: 1/3;
+				grid-column: span 2;
 			}
 			.op_move_act {
-				grid-column: 3/5;
+				grid-column: span 2;
 			}
 			.op_move_exception {
-				grid-column: 5/7;
-			}
-			.op_start_heat {
-				grid-column: 1/4;
-			}
-			.op_up_tray {
-				grid-column: 4/7;
+				grid-column: span 2;
 			}
 		}
 	}
diff --git a/src/views/oreManage/index.vue b/src/views/oreManage/index.vue
index 8fc73e5..1e90947 100644
--- a/src/views/oreManage/index.vue
+++ b/src/views/oreManage/index.vue
@@ -19,20 +19,26 @@
 				<p class="w-[18rem]">矿石名称</p>
 				<p>工艺</p>
 			</header>
-			<div class="h-10 flex items-center text-xs pr-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
+			<div class="min-h-10 flex items-center text-xs pr-3 text-[#6e6e6e]  border-b border-b-[#f8f8f8]">
 				<div class="w-10 self-stretch flex justify-center items-center">
 					<img class="w-4 h-4" :src="isSelect ? icon_select : icon_unselect" alt="" />
 				</div>
 				<p class="w-14">1</p>
 				<p class="w-[18rem]">矿石名称1</p>
 				<div class="flex-auto">
-					<ul class="appearance-none flex items-center gap-x-3 text-sm">
+					<ul class="appearance-none flex items-center gap-3 text-sm flex-wrap my-2">
 						<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>
+						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${true && 'bg-primary text-white'}`">
+							工艺名称3
+						</li>
+						<li class="bg-[#F4F4F4] rounded-sm px-2 h-7 leading-7" :class="`${false && 'bg-primary text-white'}`">
+							工艺名称4
+						</li>
 					</ul>
 				</div>
 			</div>