调整开始新实验弹框样式

src/views/graphite/index.vue

@@ -60,29 +60,28 @@
 			</div>
 		</van-overlay>
 		<!--选择工艺-->
-		<OverlayModal :visible="craftVisible">
+		<van-overlay v-if="craftVisible" :show="true">
+			<div class="flex justify-center items-center h-full">
 				<CraftList @changeVisible="changeVisible" @selectedCraft="onHandleSelectedCraft"></CraftList>
-		</OverlayModal>
+			</div>
+		</van-overlay>
 
 		<!--实验名称-->
-		<OverlayModal :visible="taskNameVisible">
-			<div class="task_name">
-				<div class="task_title">开始新实验</div>
-				<div class="task_name_content">
-					<div class="mt-3">实验名称：</div>
-					<div class="task_auto">
-						<input v-model="taskName" placeholder="实验名称" class="task_input" />
-						<div v-if="!taskName" style="color: red; font-size: 1rem">请输入实验名称</div>
+		<van-overlay v-if="taskNameVisible" :show="true">
+			<div class="flex justify-center items-center h-full">
+				<div class="w-[440px] bg-white px-5 py-[30px] rounded-lg text-text">
+					<div class="text-xl font-medium">开始新实验</div>
+					<div class="text-xl flex items-center h-16">
+						<div class="min-w-[100px] text-right">实验名称</div>
+						<el-input v-model.trim="taskName" class="ml-5" style="width: 200px" placeholder="请输入实验名称" />
 					</div>
-				</div>
-
-				<br />
-				<footer class="task_button">
-					<button class="btn-dark px-2 py-1 min-w-20" @click="onSave">保存</button>
-					<button class="cancel_btn" @click="onCancel">取消</button>
+					<footer class="mt-4 flex justify-center items-center text-sm font-medium gap-x-8">
+						<button class="btn-dark px-10 py-2 text-xl" @click="onSave">保存</button>
+						<button class="btn-light px-10 py-2 text-xl" @click="onCancel">取消</button>
 					</footer>
 				</div>
-		</OverlayModal>
+			</div>
+		</van-overlay>
 	</div>
 </template>
 <script lang="ts" setup>
@@ -568,7 +567,10 @@ const onMoveToSpecial = () => {
 const taskNameVisible = ref(false);
 const taskId = ref();
 const onSave = () => {
-	if (!taskName.value) return;
+	if (!taskName.value) { 
+		ElMessage.error('请输入实验名称');
+		return; 
+	}
 	const params = {
 		name: taskName.value,
 	};