喷涂/转印设置基本布局

src/components/HeaderBar.vue

@@ -26,6 +26,8 @@ const router = useRouter();
 const pageNameMap: Record<string, string> = {
 	"/": "基质喷涂转印仪",
 	"/environment": "环境设置",
+	"/spray": "喷涂设置",
+	"/print": "转印设置"
 };
 
 function onMenuBtnClick() {

src/router/index.ts

@@ -17,6 +17,16 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/EnvironmentView.vue'),
     },
+    {
+      path: '/spray',
+      name: 'spray',
+      component: () => import('../views/SprayView.vue'),
+    },
+    {
+      path: '/print',
+      name: 'print',
+      component: () => import('../views/PrintView.vue'),
+    }
   ],
 })
 

src/views/EnvironmentView.vue

@@ -43,7 +43,7 @@
 				</div>
 			</div>
 			<div class="shadow-card px-[26px] w-[200px]">
-				<p class="text-primary font-medium mt-[14px] mb-2 text-center">环境完成后蜂鸣器</p>
+				<p class="text-primary font-medium mt-[14px] mb-2 text-center">环境完成后蜂鸣</p>
 				<div class="flex items-center justify-evenly">
 					<div class="true">是</div>
 					<div class="false">否</div>

src/views/HomeView.vue

@@ -2,8 +2,8 @@
 	<main class="relative main-page">
 		<section class="pt-[90px] mb-5 flex justify-between px-[90px]">
 			<img src="@/assets/entry1.png" alt="entry1" @click="onEnvironmentEntryClick" />
-			<img src="@/assets/entry2.png" alt="entry1" />
-			<img src="@/assets/entry3.png" alt="entry1" />
+			<img src="@/assets/entry2.png" alt="entry1" @click="onSprayEntryClick" />
+			<img src="@/assets/entry3.png" alt="entry1" @click="onPrintEntryClick" />
 		</section>
 		<section class="flex justify-between px-[100px]">
 			<div class="btn-dark px-12 py-3 text-lg">开始喷涂</div>
@@ -11,7 +11,7 @@
 			<div class="btn-dark px-12 py-3 text-lg">开始转印</div>
 			<div class="btn-light px-12 py-3 text-lg">停止转印</div>
 		</section>
-		<section class=" absolute right-0 bottom-0 h-[--footerHeight] flex justify-end items-start">
+		<section class="absolute right-0 bottom-0 h-[--footerHeight] flex justify-end items-start">
 			<div class="btn-light px-4 py-2 mr-5">
 				<img src="@/assets/wash.svg" alt="wash" />
 				<span class="font-medium ml-2">清洗管道</span>
@@ -27,8 +27,14 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 
-const router = useRouter()
+const router = useRouter();
 function onEnvironmentEntryClick() {
-  router.push('/environment')
+	router.push("/environment");
+}
+function onSprayEntryClick() {
+	router.push("/spray");
+}
+function onPrintEntryClick() {
+	router.push("/print");
 }
 </script>

src/views/PrintView.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="main-page px-6 pt-6 pb-7 flex justify-between">
+		<div class="shadow-card w-[476px]">
+			<div class="flex items-center mx-9 mt-[22px] gap-5">
+				<p class="font-medium text-primary">转印路线</p>
+				<img :src="route_v" alt="icon" />
+				<img :src="route_h2" alt="icon" />
+			</div>
+			<p class="mx-9 mt-5 mb-4 font-medium text-primary">选择转印区域</p>
+            <section class="bg-white  h-[320px] mx-4 border">
+
+            </section>
+		</div>
+		<div class="shadow-card w-[476px]">
+            <div class="wrapper grid grid-cols-3 mt-16 gap-x-3 gap-y-4">
+                <span class="self-center text-right text-primary font-medium">激光强度</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center text-primary font-medium">%</span>
+
+                <span class="self-center text-right  text-primary font-medium">移动速度</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">毫米/每秒</span>
+                
+                <span class="self-center text-right  text-primary font-medium">转印完成后蜂鸣</span>
+                <div class="flex items-center gap-x-8">
+					<div class="true">是</div>
+					<div class="false">否</div>
+				</div>
+            </div>
+        </div>
+	</div>
+</template>
+<script setup lang="ts">
+import route_v from "@/assets/route_vertical.png";
+import route_v2 from "@/assets/route_vertical2.png";
+import route_h from "@/assets/route_horizontal.png";
+import route_h2 from "@/assets/route_horizontal2.png";
+</script>

src/views/SprayView.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="main-page px-6 pt-6 pb-7 flex justify-between">
+		<div class="shadow-card w-[476px]">
+			<div class="flex items-center mx-9 mt-[22px] gap-5">
+				<p class="font-medium text-primary">喷涂路线</p>
+				<img :src="route_v" alt="icon" />
+				<img :src="route_h2" alt="icon" />
+			</div>
+			<p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p>
+            <section class="bg-white  h-[320px] mx-4 border">
+
+            </section>
+		</div>
+		<div class="shadow-card w-[476px]">
+            <div class="wrapper grid grid-cols-3 mt-16 gap-x-3 gap-y-4">
+                <span class="self-center text-right text-primary font-medium">氮气流速</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center text-primary font-medium">毫米/每秒</span>
+
+                <span class="self-center text-right  text-primary font-medium">氮气气压</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">MPa</span>
+
+                <span class="self-center text-right  text-primary font-medium">基质流速</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">ul/min</span>
+
+                <span class="self-center text-right  text-primary font-medium">喷雾电压</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">V</span>
+
+                <span class="self-center text-right  text-primary font-medium">移动速度</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">毫米/每秒</span>
+
+                <span class="self-center text-right  text-primary font-medium">行间距</span>
+                <input type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+                <span class="self-center  text-primary font-medium">毫米</span>
+
+                <span class="self-center text-right  text-primary font-medium">喷涂完成后蜂鸣</span>
+                <div class="flex items-center gap-x-8">
+					<div class="true">是</div>
+					<div class="false">否</div>
+				</div>
+            </div>
+        </div>
+	</div>
+</template>
+<script setup lang="ts">
+import route_v from "@/assets/route_vertical.png";
+import route_v2 from "@/assets/route_vertical2.png";
+import route_h from "@/assets/route_horizontal.png";
+import route_h2 from "@/assets/route_horizontal2.png";
+</script>