调整实验页面样式

src/views/graphite/components/TakePickture.vue

@@ -1,46 +0,0 @@
-<template>
-	<div class="picture">
-		<div class="area_btn">
-			<img :src="PhotoSvg" class="photo_icon" />
-			拍照
-		</div>
-	</div>
-</template>
-<script lang="ts" setup>
-import PhotoSvg from "@/assets/photo_icon.svg";
-</script>
-<style lang="scss" scoped>
-.picture {
-	margin-top: 3.25rem;
-	position: relative;
-	height: 0;
-	padding: 0;
-	padding-bottom: 75%;
-
-	background-image: url("@/assets/picture.svg");
-	background-repeat: no-repeat;
-	background-size: cover;
-
-    border-radius: 0.5rem;
-	.area_btn {
-		position: absolute;
-		width: 100%;
-		bottom: 0;
-		height: 3.875rem;
-
-		background: rgba(255, 255, 255, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 1.375rem;
-		font-weight: bold;
-		color: #ffffff;
-		gap: 10px;
-
-		.photo_icon {
-			width: 1.625rem;
-			height: 1.125rem;
-		}
-	}
-}
-</style>

src/views/graphite/components/index.ts

@@ -1,5 +0,0 @@
-
-export {default as HeatPosition} from './HeatPosition.vue'
-export {default as TakePickture} from './TakePickture.vue'
-//@ts-ignore
-export {default as AddLiquid} from './AddLiquid.vue'

src/views/graphite/index.vue

@@ -18,7 +18,12 @@
 		<!--拍照区-->
 		<div class="picture_area">
 			<!--加液区和拍照区可切换-->
-			<TakePickture></TakePickture>
+			<div class="picture">
+				<div class="area_btn">
+					<img :src="PhotoSvg" class="photo_icon" />
+					拍照
+				</div>
+			</div>
 			<!-- <div v-else style="display: flex;justify-content: center;">
         <div class="home_tube">
           <div
@@ -96,7 +101,9 @@ import { ref, reactive, onMounted, onUnmounted, watch } from "vue";
 //@ts-ignore
 import { ElMessage, ElMessageBox } from "element-plus";
 import { createWebSocket, sharedWsUrl } from "@/services/socket";
-import { HeatPosition, TakePickture, AddLiquid } from "./components";
+import HeatPosition from "./components/HeatPosition.vue";
+//@ts-ignore
+import AddLiquid from "./components/AddLiquid.vue";
 import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "@/views/graphite/components/CraftList.vue";
 import { injectFluid } from "@/services/task/task";
@@ -107,6 +114,7 @@ import { craftStart, craftStop } from "@/services/ore/oreManage";
 import { getTxnRecord } from "@/services/txn";
 import { useSettingStore } from "@/stores/setting";
 import { useCraftStore } from "@/stores/craft";
+import PhotoSvg from "@/assets/photo_icon.svg";
 
 const craftStore = useCraftStore();
 const craftInfo = ref(craftStore.craftInfo);
@@ -768,7 +776,10 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 	.picture_area {
 		display: flex;
 		flex-direction: column-reverse;
-		margin: 0 12px;
+		margin: 12px 0;
+		.picture {
+			margin-bottom: 2.5rem;
+		}
 	}
 	@media (min-width: $lg) {
 		flex-direction: row;
@@ -776,12 +787,15 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 		.picture_area {
 			display: flex;
 			flex-direction: column;
+			margin: 0 12px;
+			.picture {
+				margin-bottom: 0;
+				margin-top: 2.5rem;
+			}
 		}
 	}
 }
 .heat_area {
-	margin: 5px 0;
-
 	background: #ffffff;
 	border-radius: 20px;
 
@@ -800,11 +814,11 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 	@media (min-width: $md) {
 		column-gap: 12px;
 		row-gap: 20px;
-		height: 47.5rem;
+		// height: 47.5rem;
 	}
 
 	@media (min-width: $xl) {
-		padding: 4.5rem 1rem;
+		padding: 3.15rem 1rem;
 	}
 
 	.craft_executing_modal {
@@ -820,8 +834,6 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 .picture_area {
 	display: flex;
 	flex-direction: column;
-	margin: 5px;
-	// margin-left: 1.25rem;
 	background: #ffffff;
 	border-radius: 20px;
 	padding: 0 1.5rem;
@@ -833,6 +845,38 @@ const onSendCmd = (command: OperationCmd, params: any) => {
 		width: 27rem;
 	}
 
+	.picture {
+		position: relative;
+		height: 0;
+		padding: 0;
+		padding-bottom: 75%;
+
+		background-image: url("@/assets/picture.svg");
+		background-repeat: no-repeat;
+		background-size: cover;
+
+		border-radius: 0.5rem;
+		.area_btn {
+			position: absolute;
+			width: 100%;
+			bottom: 0;
+			height: 3.875rem;
+
+			background: rgba(255, 255, 255, 0.5);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 1.375rem;
+			font-weight: bold;
+			color: #ffffff;
+			gap: 10px;
+
+			.photo_icon {
+				width: 1.625rem;
+				height: 1.125rem;
+			}
+		}
+	}
 	.graphite_btn_container {
 		margin: 2rem 0;
 		gap: 0.625rem;