喷涂预设置

src/components/HeaderBar.vue

@@ -9,9 +9,9 @@
 		</div>
 		<Time class="mx-4"></Time>
 		<div class="btn-light px-5 py-1 mx-6 rounded" @click="onMenuBtnClick">
-			<img v-if="route.path === '/'" src="@/assets/menu.svg" alt="menu" />
+			<img v-if="route.path === '/home'" src="@/assets/menu.svg" alt="menu" />
 			<img v-else src="@/assets/return.svg" alt="return" />
-			<p class="text-lg ml-2 text-primary">{{ route.path === "/" ? "菜单" : "返回" }}</p>
+			<p class="text-lg ml-2 text-primary">{{ route.path === "/home" ? "菜单" : "返回" }}</p>
 		</div>
 	</header>
 </template>
@@ -27,15 +27,16 @@ const pageNameMap: Record<string, string> = {
 	"/": "基质喷涂转印仪",
 	"/environment": "环境设置",
 	"/spray": "喷涂设置",
+	"/preSpray": "喷涂设置",
 	"/print": "转印设置",
 	"/menu": "菜单",
 };
 
 function onMenuBtnClick() {
-	if (route.path !== "/") {
+	if (route.path !== "/home") {
 		router.back();
 	} else {
-		router.push("/menu");
+		// router.push("/menu");
 	}
 }
 

src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
 import Login from "@/views/Login.vue";
 import Index from "@/views/Index.vue";
 import EnvironmentView from "../views/EnvironmentView.vue";
+import PreSpray from "@/views/PreSpray.vue";
 import SprayView from "../views/SprayView.vue";
 import PrintView from "../views/PrintView.vue";
 import Debug from '../views/debug/index.vue'
@@ -27,6 +28,11 @@ const router = createRouter({
 					component: EnvironmentView,
 				},
 				{
+					path: "/preSpray",
+					name: "preSpray",
+					component: PreSpray,
+				},
+				{
 					path: "/spray",
 					name: "spray",
 					component: SprayView,

src/style.css

@@ -45,8 +45,7 @@
 		color: #fff;
 		background-color: var(--primaryColor);
 		border-radius: 6px;
-		width: 34px;
-		height: 34px;
+		padding: 6px 10px;
 	}
 	.false {
 		display: flex;
@@ -55,7 +54,6 @@
 		color: var(--primaryColor);
 		background-color: #e8ecf7;
 		border-radius: 6px;
-		width: 34px;
-		height: 34px;
+		padding: 6px 10px;
 	}
 }

src/views/PreSpray.vue

@@ -0,0 +1,89 @@
+<template>
+	<div class="px-8 py-6">
+		<section class="flex flex-col relative text-primary mb-4">
+			<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
+				<div class="flex items-center gap-6">
+					<p class="text-lg">清洗管道</p>
+					<button class="btn-dark px-8 py-2 text-lg">开始清洗</button>
+				</div>
+			</main>
+			<header
+				class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
+				<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">1</span>
+				<p class="text-lg font-medium text-primary">清洗管道</p>
+			</header>
+		</section>
+
+		<section class="flex flex-col relative text-primary mb-4">
+			<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
+				<div class="flex items-center gap-6">
+					<p class="text-lg">预充管道</p>
+					<button class="btn-dark px-8 py-2 text-lg">开始预充</button>
+				</div>
+			</main>
+			<header
+				class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
+				<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">2</span>
+				<p class="text-lg font-medium text-primary">预充管道</p>
+			</header>
+		</section>
+
+		<section class="flex flex-col relative text-primary mb-4">
+			<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
+				<div class="flex items-center">
+					<p class="text-lg">当前湿度 <span class="text-[28px] font-semibold">50</span> %RH</p>
+					<p class="text-lg mx-6">
+						要求湿度<input
+							type="number"
+							class="border-none outline-none h-[32px] w-[60px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />%RH
+					</p>
+
+					<button class="btn-dark px-8 py-2 text-lg">开始运行</button>
+				</div>
+			</main>
+			<header
+				class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
+				<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">3</span>
+				<p class="text-lg font-medium text-primary">环境设置</p>
+			</header>
+		</section>
+
+		<section class="flex flex-col relative text-primary mb-4">
+			<main class="mt-[43px] border border-[#D6D6D6] bg-white rounded-b-md rounded-tr-md px-6 py-6">
+				<div class="flex items-center">
+					<p class="text-lg">
+						注射器容量
+						<input
+							type="number"
+							class="border-none outline-none h-[32px] w-[64px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+						ul
+					</p>
+					<p class="text-lg mx-6">
+						流速<input
+							type="number"
+							class="border-none outline-none h-[32px] w-[64px] mx-2 bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+						ul/min
+					</p>
+
+					<div class="flex items-center text-lg mr-8">
+						移动方向
+						<div class="flex items-center gap-x-2 ml-2">
+							<div class="true text-base">前进</div>
+							<div class="false text-base">后退</div>
+						</div>
+					</div>
+
+					<button class="btn-dark px-8 py-2 text-lg">保存</button>
+				</div>
+			</main>
+			<header
+				class="absolute flex items-center justify-center gap-2 self-start px-6 h-[44px] border border-[#D6D6D6] bg-white border-b-0 rounded-t-md">
+				<span class="w-4 h-4 rounded-full bg-primary text-center text-[10px] text-white">4</span>
+				<p class="text-lg font-medium text-primary">注射器设置</p>
+			</header>
+		</section>
+	</div>
+</template>
+<script lang="ts" setup>
+</script>
+<style lang="scss" scoped></style>