调整首页样式 grid

.env

@@ -1,3 +1,3 @@
-VITE_API_HOST=192.168.1.125
+VITE_API_HOST=localhost
 VITE_API_PORT=8080
 VITE_WS_PATH=/ws

src/views/graphite/components/HeatPosition.vue

@@ -13,16 +13,17 @@
     </section>
 
 		<section class="heat_pos" :style="`background:${trayInfo?.id ? '' : ''}`">
-
-			<div
-				v-for="(tube, index) in trayInfo.tubeList || tubeList"
-				:key="index"
-				class="inner-circle"
-				@click.stop="onHandleTube(tube, index)"
-				:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }"></div>
+			<div class="heat_pos_tube">
+				<div
+					v-for="(tube, index) in trayInfo.tubeList || tubeList"
+					:key="index"
+					class="inner-circle"
+					@click.stop="onHandleTube(tube, index)"
+					:style="{ background: tube.backgroudColor || 'rgb(212, 212, 212)' }">
+				</div>
+			</div>
 			
-
-      <div class="heat_footer">
+      <div class="heat_footer mt-[5px]">
         <div class="heat_temperature" @click="setTemperature">
           <template v-if="trayInfo?.id">
             <div class="target_temp">目标温度: {{ trayInfo.temperature }}℃</div>
@@ -42,7 +43,6 @@
 				class="craft_executing_modal"
 				v-if="trayInfo.craftInfo?.id"
 				:style="{ background: !trayInfo.executing_craft ? '#FFDFC2' : '#8BFFBF' }">
-				<!--trayInfo.executing_craft 已选择工艺未执行-->
 				<div class="loading">
 					<img v-if="trayInfo.executing_craft" :src="ExecutingSvg" />
 					<img v-else :src="ReadySvg" />
@@ -223,18 +223,21 @@ const onHandleSelectedCraft = (craftData: any) => {
 .heat_pos {
 	width: 10.375rem;
 	height: 10.375rem;
-	display: flex;
-	justify-content: center;
 	flex-wrap: wrap;
 	margin-left: 5px;
-	gap: 0.625rem;
 	flex-direction: row;
 	border: 2px solid #7592a8;
-	padding-top: 0.5rem;
 	border-radius: 0.5rem;
   position: relative;
+	.heat_pos_tube{
+		display: grid;
+    gap: 5px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+	}
 }
 .inner-circle {
+	margin:5px;
 	border-radius: 50%;
 	width: 1.625rem;
 	height: 1.625rem;
@@ -242,8 +245,6 @@ const onHandleSelectedCraft = (craftData: any) => {
 }
 .heat_footer {
   position: absolute;
-	margin-top: 10.5rem;
-	margin-left: 5px;
 	.heat_temperature {
 		height: 1.625rem;
 		width: 10rem;
@@ -275,7 +276,7 @@ const onHandleSelectedCraft = (craftData: any) => {
 }
 
 .heat_footer_choose{
-  padding-top:3.2rem;
+  padding-top:2rem;
   padding-left: 5rem;
 }
 

src/views/graphite/index.vue

@@ -831,11 +831,10 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 .heat_area {
 	background: #ffffff;
 	border-radius: 20px;
-
-	column-gap: 8px;
+	column-gap: .5rem;
 	row-gap: 10px;
 	padding: 1.5rem 0.5rem;
-	min-width: 600px;
+	min-width: 37.5rem;
 	flex: 1 1 auto;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);

vite.config.ts

@@ -18,8 +18,8 @@ export default defineConfig({
 		port: 5174,
 		proxy: {
 			"/api": {
-				target: "http://192.168.1.125:8080",
-				// target: "http://localhost:8080",
+				// target: "http://192.168.1.118:8080",
+				target: "http://localhost:8080",
 				changeOrigin: true,
 				// rewrite: (path) => path.replace(/^\/api/, ''),
 			},