Merge branch 'master' of http://192.168.1.3:3000/LiLongLong/matrix_spraying_vue

src/components/Spray.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="border border-[#EEE]">
-		<canvas ref="cnv" :width="width" :height="height" class="border border-dashed border-[#999]"> </canvas>
+	<div>
+		<canvas ref="cnv" :width="width" :height="height" class="border border-dashed border-[#ccc]"> </canvas>
 	</div>
 </template>
 

src/views/SprayView.vue

@@ -1,37 +1,50 @@
 <template>
-	<div class="px-6 pt-6 pb-7 flex justify-between relative">
+	<div class="px-6 pt-6 pb-3 flex justify-between">
 		<div class="w-full">
-			<div class="flex items-center mx-9 mt-[22px] gap-5">
+			<div class="flex items-center mb-3 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 mx-4 border">
+			<!-- <p class="mx-9 mt-5 mb-4 font-medium text-primary">选择喷涂区域</p> -->
+			<section class="">
 				<Spray
 					:width="840"
 					:height="640"
-					:left-padding="20"
-					:right-padding="20"
-					:top-padding="20"
-					:bottom-padding="20"
+					:left-padding="4"
+					:right-padding="4"
+					:top-padding="4"
+					:bottom-padding="4"
 					:columns="4"
 					:rows="3"
 					:cell-num="25"
 					@select-area="onSelectArea" />
+				<van-checkbox-group shape="square" v-model="checked" checked-color="#26509c" icon-size="28px" direction="horizontal" class="flex justify-around w-[840px] mt-3 ">
+					<van-checkbox name="a"></van-checkbox>
+					<van-checkbox name="b"></van-checkbox>
+                    <van-checkbox name="c"></van-checkbox>
+					<van-checkbox name="d"></van-checkbox>
+				</van-checkbox-group>
 			</section>
 		</div>
-		<div class="shadow-card absolute top-6 right-6 w-[476px]">
+		<div class="shadow-card absolute top-[calc(var(--headerHeight)+16px)] right-[calc(var(--borderWidth)+20px)] w-[476px]">
 			<el-collapse accordion>
 				<el-collapse-item name="1">
 					<template #title>
-						<div class="grid grid-cols-3 gap-x-3">
-							<span class="self-center text-right text-primary font-medium">选择工艺</span>
+						<section class="flex items-center gap-3 px-4">
+							<div>
+								<span class="self-center text-right text-primary font-medium mr-3">选择基质</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>
+									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
+							</div>
+							<div>
+								<span class="self-center text-right text-primary font-medium mr-3">工艺</span>
+								<input
+									type="text"
+									class="border-none outline-none h-[28px] w-[80px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center" />
 							</div>
+						</section>
 					</template>
 					<div class="wrapper grid grid-cols-3 gap-x-3 gap-y-4">
 						<span class="self-center text-right text-primary font-medium">Z轴高度</span>
@@ -95,11 +108,11 @@ import Spray, { type GridArea } from "@/components/Spray.vue";
 import { ref } from "vue";
 
 const selectedArea = ref<GridArea>();
+const checked = ref(['a', 'b']);
 
 function onSelectArea(area: GridArea) {
 	selectedArea.value = area;
 }
-
 </script>
 <style lang="scss" scoped>
 :deep(.el-collapse-item__header) {