From 369af7e74bc326d6c14e1a809e7db97bedde3432 Mon Sep 17 00:00:00 2001
From: LiLongLong <13717757313@163.com>
Date: Tue, 18 Feb 2025 09:50:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/Menu.vue                  |  18 +-
 src/views/graphite/components/AddLiquid.vue    |  12 +-
 src/views/graphite/components/HeatPosition.vue | 597 +++++++++++++------------
 src/views/graphite/index.vue                   |  44 +-
 4 files changed, 352 insertions(+), 319 deletions(-)

diff --git a/src/views/components/Menu.vue b/src/views/components/Menu.vue
index f200ed4..ba927e4 100644
--- a/src/views/components/Menu.vue
+++ b/src/views/components/Menu.vue
@@ -1,10 +1,11 @@
 <template>
 	<div class="menu flex justify-center">
-		<van-sidebar v-model="active" class="sidebar">
-			<van-sidebar-item v-for="menu in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu)">
+		
+		<van-sidebar v-model="active" :active="activeName"  class="sidebar">
+			<van-sidebar-item v-for="(menu,index) in muneList" :key="menu.id" class="menn_text menn_btn" @click="goPage(menu, index)">
 				<template #title scoped>
 					<div class="menn_li">
-						<div><img :src="active == menu.id ? menu.s_img : menu.n_img" class="menu_icon" /></div>
+						<div><img :src="active == index ? menu.s_icon : menu.n_icon" class="menu_icon" /></div>
 						<div>{{ menu.name }}</div>
 					</div>
 				</template>
@@ -28,17 +29,17 @@ const onHeadleIcon = async () => {
 };
 
 const active = ref(0);
+const activeName = ref('')
 interface Menu {
 	id: number;
 	name: string;
 	s_icon: string;
 	n_icon: string;
-	s_img: string;
-	n_img: string;
 	path: string;
 }
-const goPage = (menu: Menu) => {
-	active.value = menu.id;
+const goPage = (menu: Menu, index:any) => {
+	active.value = index;
+	activeName.value = menu.name
 	router.push(`${menu.path}`);
 };
 
@@ -49,13 +50,10 @@ onMounted(async () => {
 	muneList.value = getMenus();
 	//@ts-ignore
 	muneList.value.forEach(item => {
-		item.s_img = importedImages[item.s_icon];
-		item.n_img = importedImages[item.n_icon];
 		if (item.path === path) {
 			active.value = item.id;
 		}
 	});
-	console.log("muneList.value---", muneList.value);
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/graphite/components/AddLiquid.vue b/src/views/graphite/components/AddLiquid.vue
index ff50238..6445f64 100644
--- a/src/views/graphite/components/AddLiquid.vue
+++ b/src/views/graphite/components/AddLiquid.vue
@@ -259,9 +259,10 @@
                 width: 6.625rem;
                 display: flex;
                 border: 1px solid;
-                border-radius: 150px;
+                border-radius: 10px;
                 border: 1px solid #E4E5F1;
                 font-size: .7rem;
+                height: 2rem;
             }
            
         }
@@ -295,8 +296,9 @@
         }
     }
     .ml{
-        margin-right: .625rem;
-        padding-top: 5px;
+        display: flex;
+        align-items: center;
+        margin-left: -10px;
     }
 
     .add_result{
@@ -308,12 +310,14 @@
 
     .liquid_input{
         width: 4.75rem;
+        padding-left:0.5rem;
+        padding-right: 1rem
     }
 
     .liquid_input_img{
         width: .875rem;
         height: .875rem;
-        margin-top: 0.35rem;
+        margin-top: 0.5rem;
         margin-left: 5px;
     }
 
diff --git a/src/views/graphite/components/HeatPosition.vue b/src/views/graphite/components/HeatPosition.vue
index 2778e32..3a9e7a2 100644
--- a/src/views/graphite/components/HeatPosition.vue
+++ b/src/views/graphite/components/HeatPosition.vue
@@ -1,320 +1,349 @@
 <template>
-    <div class="heat_main"  :style="`${posIndex === currentIndex && isSelect ? 'border:7px solid #275EFB' : 'border:7px solid #ffffff'}`">
-      <section class="heat_pos_text">
-          <div class="pos_text">{{ `A-${posIndex || ''}` }}</div>
-          <div class="pos_text pos_state">已放置</div>
-      </section>
-
-      <section class="heat_pos" :style="`background:${(trayInfo?.id) ? '#384D5D':''}`" @click.stop="onSelectTray">
-        <div
-          v-for="(isActive, index) in ballStates"
-          :key="index"
-        >
-          <div class="inner-circle" :style="`background: ${trayInfo?.id ? '#F2652D': ''}`"></div>
+  <div
+    class="heat_main"
+    :style="`${
+      tubeIndex === currentIndex && isSelect
+        ? 'border:4px solid rgb(66 215 76)'
+        : 'border:4px solid #ffffff'
+    }`"
+  >
+    <section class="heat_pos_text">
+      <div class="pos_text">{{ `A-${tubeIndex || ""}` }}</div>
+      <div class="pos_text pos_state">已放置</div>
+    </section>
+
+    <section
+      class="heat_pos"
+      :style="`background:${trayInfo?.id ? '#384D5D' : ''}`"
+      @click="onSelectTray"
+    >
+      <div
+        v-for="(tube, index) in tubeList"
+        :key="index"
+        class="inner-circle"
+        @click.stop="onHandleTube(tube)"
+        :style="{ background: trayInfo?.id ? '#F2652D' : '' }"
+      ></div>
+      <!--执行中状态的遮罩层-->
+      <div class="craft_executing_modal" v-if="trayInfo.state == 1">
+        <div class="loading">
+          <img :src="LoadingSvg" />
         </div>
-        <!--执行中状态的遮罩层-->
-        <div class="craft_executing_modal" v-if="trayInfo.state == 1">
-          <div class="loading">
-            <img :src="LoadingSvg"/>
-          </div>
-          <div class="tray_craft">
-            工艺名称
+        <div class="tray_craft">工艺名称</div>
+        <div class="tray_exce">工艺执行中</div>
+      </div>
+    </section>
+
+    <section class="heat_footer">
+      <div class="heat_temperature" @click="setTemperature">
+        <template v-if="trayInfo?.id">
+          <div class="target_temp">目标温度: {{ trayInfo.trayTempVale }}℃</div>
+          <div class="heating">加热中</div>
+        </template>
+        <template v-else>
+          <div class="target_temp set_temp">设置目标温度</div>
+        </template>
+      </div>
+
+      <div class="flex items-center py-4 justify-between px-2">
+        <div class="temp_text">120℃</div>
+        <button
+          class="btn-light text-sm px-4"
+          @click="
+            () => {
+              onChooseCraft();
+            }
+          "
+        >
+          选择
+        </button>
+      </div>
+    </section>
+
+    <OverlayModal :visible="tempVisivle">
+      <div class="set_temp_modal_content">
+        <h3 class="set_temp_title">设定温度</h3>
+        <section class="temp_label">
+          <div class="text-xl">
+            目标温度：<input
+              type="number"
+              v-model="trayTempVale"
+              class="temp_input"
+              placeholder="请输入温度"
+            />
           </div>
-          <div class="tray_exce">
-            工艺执行中
+          <div class="text-xl temp_status flex">
+            <div>到达温度后</div>
+            <van-radio-group
+              v-model="trayTempType"
+              shape="square"
+              class="flex temp_radio"
+            >
+              <van-radio name="1">保持温度</van-radio>
+              <van-radio name="2">停止加热</van-radio>
+            </van-radio-group>
           </div>
-        </div>
-      </section>
-
-      <section class="heat_footer">
-        <div class="heat_temperature" @click="setTemperature">
-          <template v-if="trayInfo?.id">
-            <div class="target_temp">目标温度: {{ trayInfo.trayTempVale }}℃</div>
-            <div class="heating">加热中</div>
-          </template>
-          <template v-else >
-            <div class="target_temp set_temp">设置目标温度</div>
-          </template>
-        </div>
+        </section>
 
-        <div class="flex items-center py-4 justify-between px-2">
-          <div class="temp_text">120℃</div>
-          <button class="btn-light text-sm px-4" @click="()=>{onChooseCraft()}">选择</button>
-        </div>
-      </section>
-
-      <OverlayModal :visible="tempVisivle">
-        <div class="set_temp_modal_content">
-          <h3 class="set_temp_title">设定温度</h3>
-          <section class="temp_label">
-            <div class="text-xl ">
-              目标温度：<input type="number" v-model="trayTempVale" class="temp_input" placeholder="请输入温度"/>
-            </div>
-            <div class="text-xl temp_status flex">
-              <div>到达温度后</div>
-              <van-radio-group v-model="trayTempType" shape="square" class="flex temp_radio">
-                <van-radio name="1">保持温度</van-radio>
-                <van-radio name="2">停止加热</van-radio>
-              </van-radio-group>
-            </div>
-          </section>
-          
-          <footer
-            class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5">
-            <button class="btn-dark px-10 py-2 w-15" @click="onConfirm">确定</button>
-            <button class="btn-light px-10 py-2" @click="tempVisivle = false">取消</button>
-          </footer>
-        </div>
-      </OverlayModal>
-      <!--选择工艺-->
-      <OverlayModal :visible="craftVisible">
-          <CraftList @changeVisible="changeVisible"></CraftList>
-      </OverlayModal>
-
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-  import OverlayModal from '@/components/OverlayModal.vue';
-  import CraftList from './CraftList.vue';
-  import LoadingSvg from '@/assets/loading.svg';
-    const ballStates = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16])
-    const props = defineProps({
-      heatInfo:Object,
-      posIndex:Number
-    })
-    const emits = defineEmits(['onSelectedTray'])
-
-    onMounted(()=>{
-    })
-
-    const craftVisible = ref(false)
-
-    //设置温度
-    const trayTempType = ref(false)
-    const tempVisivle = ref(false)
-    //托盘信息
-    const trayInfo = ref(props.heatInfo || {})
-    const trayTempVale = ref(trayInfo.value.trayTempVale || '')
-    const formulaList:any = ref([])
-
-    //选中托盘
-    const isSelect = ref(false)
-    const currentIndex = ref()
-    const selectedTrayList = ref<any>([])
-    const onSelectTray = () => {
-        if(currentIndex.value !== props.posIndex ){
-            isSelect.value = true;
-        }else{
-            isSelect.value = !isSelect.value
-        }
-        currentIndex.value = props.posIndex;
-        
-        emits("onSelectedTray", props.heatInfo)
-        
-    }
+        <footer
+          class="h-[5.625rem] flex justify-center items-center text-sm font-medium gap-x-5"
+        >
+          <button class="btn-dark px-10 py-2 w-15" @click="onConfirm">
+            确定
+          </button>
+          <button class="btn-light px-10 py-2" @click="tempVisivle = false">
+            取消
+          </button>
+        </footer>
+      </div>
+    </OverlayModal>
+    <!--选择工艺-->
+    <OverlayModal :visible="craftVisible">
+      <CraftList @changeVisible="changeVisible"></CraftList>
+    </OverlayModal>
+  </div>
+</template>
 
+<script lang="ts" setup>
+import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import OverlayModal from "@/components/OverlayModal.vue";
+import CraftList from "./CraftList.vue";
+import LoadingSvg from "@/assets/loading.svg";
+const tubeList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
+const props = defineProps({
+  heatInfo: Object,
+  tubeIndex: Number,
+});
+const emits = defineEmits(["onSelectedTray"]);
 
-    const changeVisible = () => {
-        craftVisible.value = false;
-    }
-    //选择工艺
-    const onChooseCraft = () => {
-        craftVisible.value = true;
-    }
-    const setTemperature = () => {
-      tempVisivle.value = true;
-    }
+onMounted(() => {});
 
-    const onConfirm = () => {
-      trayInfo.value.id = 3;
-      trayInfo.value.trayTempVale = trayTempVale;
-      tempVisivle.value = false;
-    }
+const craftVisible = ref(false);
+
+//设置温度
+const trayTempType = ref(false);
+const tempVisivle = ref(false);
+//托盘信息
+const trayInfo = ref(props.heatInfo || {});
+const trayTempVale = ref(trayInfo.value.trayTempVale || "");
+const formulaList: any = ref([]);
 
-  </script>
-  
-  <style lang="scss" scoped>
-    @use "@/assets/style/mixin.scss" as *;
-  .heat_main{
-    border: 1px solid #E9F3FF;
-    width: 11.5rem;
-    height: 18.125rem;
-    border-radius: 10px;
-    background: #E9F3FF;
+//选中托盘
+const isSelect = ref(false);
+const currentIndex = ref();
+const selectedTrayList = ref<any>([]);
+const onSelectTray = () => {
+  if (currentIndex.value !== props.tubeIndex) {
+    isSelect.value = true;
+  } else {
+    isSelect.value = !isSelect.value;
   }
-  .heat_pos_text{
+  currentIndex.value = props.tubeIndex;
+
+  emits("onSelectedTray", props.heatInfo);
+};
+
+const changeVisible = () => {
+  craftVisible.value = false;
+};
+//选择工艺
+const onChooseCraft = () => {
+  craftVisible.value = true;
+};
+const setTemperature = () => {
+  tempVisivle.value = true;
+};
+
+const onConfirm = () => {
+  trayInfo.value.id = 3;
+  trayInfo.value.trayTempVale = trayTempVale;
+  tempVisivle.value = false;
+};
+
+//试管操作
+const onHandleTube = (tubeInfo: any) => {
+  //选择试管时判断试管架是否为选中状态
+  if (!isSelect.value) onSelectTray();
+
+  console.log("tubeInfo---", tubeInfo, '加热区位置', props.tubeIndex);
+};
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/style/mixin.scss" as *;
+.heat_main {
+  border: 1px solid #e9f3ff;
+  width: 11.5rem;
+  height: 18.125rem;
+  border-radius: 10px;
+  background: #e9f3ff;
+}
+.heat_pos_text {
+  display: flex;
+  height: 1.75rem;
+  padding-left: 0.875rem;
+  padding-right: 0.75rem;
+  .pos_text {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: normal;
     display: flex;
-    height: 1.75rem;
-    padding-left: .875rem;
-    padding-right: .75rem;
-    .pos_text{
-      font-size: .8125rem;
-      font-weight: 500;
-      line-height: normal;
-      display: flex;
-      align-items: center;
-      color: #4D6882;
+    align-items: center;
+    color: #4d6882;
+  }
+
+  .pos_state {
+    margin-left: 50%;
+  }
+}
+.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;
+
+  .craft_executing_modal {
+    position: absolute;
+    width: 10rem;
+    height: 18rem;
+    background: rgba(2, 86, 255, 0.12);
+    opacity: 0.5;
+    z-index: 9999;
+    margin-top: -2rem;
+    .loading {
+      margin-left: 4.2rem;
+      margin-top: 4rem;
+    }
+    .tray_craft {
+      font-size: 1rem;
+      margin-top: 0.5rem;
+      margin-left: 3rem;
+      font-weight: bold;
+      color: #4d6882;
     }
 
-    .pos_state{
-      margin-left:50%
+    .tray_exce {
+      font-size: 1.2rem;
+      margin-left: 1.8rem;
+      font-weight: bold;
+      color: #4d6882;
     }
   }
-  .heat_pos{
-    width: 10.375rem;
-    height: 10.375rem;
+}
+.inner-circle {
+  border-radius: 50%;
+  width: 1.625rem;
+  height: 1.625rem;
+  background-color: rgb(212, 212, 212);
+}
+.heat_footer {
+  margin-top: 10px;
+  margin-left: 5px;
+  .heat_temperature {
+    height: 1.625rem;
+    width: 10rem;
+    background: #ffffff;
+    box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
+    border-radius: 5px;
     display: flex;
+    align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
-    margin-left: 2px;
-    gap: .625rem;
-    flex-direction: row;
-    border: 2px solid #7592A8;
-    padding-top: .5rem;
-    border-radius: 0.5rem;
-    
-    .craft_executing_modal{
-      position: absolute;
-      width: 10rem;
-      height: 18rem;
-      background: rgba(2, 86, 255, 0.12);
-      opacity: 0.5;
-      z-index: 9999;
-      margin-top: -2rem;
-      .loading{
-        margin-left: 4.2rem;
-        margin-top: 4rem;
-      }
-      .tray_craft{
-        font-size: 1rem;
-        margin-top: 0.5rem;
-        margin-left: 3rem;
-        font-weight: bold;
-        color: #4D6882;
-      }
-
-      .tray_exce{
-        font-size: 1.2rem;
-        margin-left: 1.8rem;
-        font-weight: bold;
-        color: #4D6882;
-      }
-
-      
+    .target_temp {
+      color: #384d5d;
+      font-size: 0.75rem;
     }
 
-  }
-  .inner-circle {
-    border-radius: 50%;
-    width: 1.625rem;
-    height: 1.625rem;
-    background-color: rgb(212, 212, 212);
-  }
-  .heat_footer{
-    margin-top: 10px;
-    margin-left: 5px;
-    .heat_temperature{
-      height: 1.625rem;
-      width: 10rem;
-      background: #FFFFFF;
-      box-shadow: inset 2px 2px 4px 0px rgba(204, 204, 204, 0.3);
-      border-radius: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .target_temp{
-        color: #384D5D;
-        font-size: .75rem;
-      }
-
-      .heating{
-        color: #FE0A0A;
-        font-size: .875rem;
-        margin-left: 1rem;
-      }
+    .heating {
+      color: #fe0a0a;
+      font-size: 0.875rem;
+      margin-left: 1rem;
     }
+  }
 
-    .temp_text{
-      font-size: 1.125rem;
-      font-weight: bold;
-      color: #4D6882;
-    }
+  .temp_text {
+    font-size: 1.125rem;
+    font-weight: bold;
+    color: #4d6882;
   }
+}
 
-  .heat_overlay{
-    border: 1px solid #E9F3FF;
-    width: 9.375rem;
-    height: 15.5rem;
-    border-radius: 20px;
-    margin-top: 3.125rem;
-    position: absolute;
-    background: #d3d3d3;
-    margin-top: -10.375rem;
-    opacity: 0.8; 
+.heat_overlay {
+  border: 1px solid #e9f3ff;
+  width: 9.375rem;
+  height: 15.5rem;
+  border-radius: 20px;
+  margin-top: 3.125rem;
+  position: absolute;
+  background: #d3d3d3;
+  margin-top: -10.375rem;
+  opacity: 0.8;
 
-    .heat_loading{
-      margin: 3.875rem;
-    }
+  .heat_loading {
+    margin: 3.875rem;
   }
+}
 
-  .formula_picker{
-    width: 25rem;
-    margin: 20% 30%;
-  }
-  
-  .set_temp_modal{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.formula_picker {
+  width: 25rem;
+  margin: 20% 30%;
+}
 
-  .set_temp_modal_content{
-    width: 28.5rem;
-    height: 16.5rem;
-    background: #ffffff;
+.set_temp_modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-    .temp_label{
-      margin-left: 2.875rem;
-      margin-top: 1rem;
-    }
+.set_temp_modal_content {
+  width: 28.5rem;
+  height: 16.5rem;
+  background: #ffffff;
 
-    .set_temp_title{
-      height: 1.875rem;
-      width: 5.25rem;
-      margin-top:1.875rem;
-      margin-left: 1.25rem;
-      font-size: 1.25rem;
-      font-weight: 500;
-      color: #40474E;
-    }
+  .temp_label {
+    margin-left: 2.875rem;
+    margin-top: 1rem;
   }
-  
-  .temp_input{
-    border: 1px solid #dadada;
+
+  .set_temp_title {
+    height: 1.875rem;
+    width: 5.25rem;
+    margin-top: 1.875rem;
+    margin-left: 1.25rem;
     font-size: 1.25rem;
-    width: 10rem;
+    font-weight: 500;
+    color: #40474e;
   }
+}
 
-  .temp_status{
-    margin-top: 1.5rem;
-    display: flex;
-    gap: 20px;
-  }
+.temp_input {
+  border: 1px solid #dadada;
+  font-size: 1.25rem;
+  width: 10rem;
+}
 
-  .temp_radio{
-    font-size: 1.25rem;
-    display: flex;
-    gap: 20px;
-  }
+.temp_status {
+  margin-top: 1.5rem;
+  display: flex;
+  gap: 20px;
+}
 
-  :deep(.van-radio__icon){
-    i{
-      font-size: 30px;
-      margin-top: -10px;
-    }
-  }
+.temp_radio {
+  font-size: 1.25rem;
+  display: flex;
+  gap: 20px;
+}
 
-  </style>
-  
\ No newline at end of file
+:deep(.van-radio__icon) {
+  i {
+    font-size: 30px;
+    margin-top: -10px;
+  }
+}
+</style>
diff --git a/src/views/graphite/index.vue b/src/views/graphite/index.vue
index 07cac66..e509e1c 100644
--- a/src/views/graphite/index.vue
+++ b/src/views/graphite/index.vue
@@ -1,12 +1,8 @@
 <template>
-	<div class="graphite_home component-page overflow-auto">
-		<div class="heat_area">
+	<div class="graphite_home component-page overflow-auto" id="heatArea">
+		<div class="heat_area" >
 			<div v-for="(item, index) in heatList" :key="item">
-				<HeatPosition :heatInfo="item" :posIndex="index + 1" @onSelectedTray="onSelectedTray"></HeatPosition>
-
-				<!-- <div class="craft_executing_modal">
-
-                </div> -->
+				<HeatPosition :heatInfo="item" :tubeIndex="index + 1" @onSelectedTray="onSelectedTray"></HeatPosition>
 			</div>
 			<!--执行中状态的遮罩层-->
 		</div>
@@ -47,26 +43,30 @@ import { ref, onMounted } from "vue";
 import { HeatPosition, TakePickture, AddLiquid } from "./components";
 import OverlayModal from "@/components/OverlayModal.vue";
 import CraftList from "@/views/graphite/components/CraftList.vue";
-const heatList: any = ref([
-	{
-		id: 1,
-		name: "A-1",
-		trayTempVale: 200,
-	},
-]);
+const heatList: any = ref([]);
 const craftVisible = ref(false);
-
+const tubeRackList = ['A-1','A-2', 'A-3','A-4','A-5','A-5']
 onMounted(() => {
-	while (heatList.value.length < 6) {
-		heatList.value.push({});
+	for(let i = 0; i < 6; i++){
+		heatList.value.push({
+			id: i + 1,
+			state:i == 0 ? 1 : null,
+			name: tubeRackList[i]
+		});
 	}
-});
 
+});
 //选择的托盘
 const selectedTrayList = ref<any>([]);
-const onSelectedTray = (data = {}) => {
-	selectedTrayList.value.push(data);
-	console.log("selectedTrayList.value--", selectedTrayList.value);
+const selectedTrayObj:any = {}
+const onSelectedTray = (data:any) => {
+	if(selectedTrayObj[data.id]){
+		delete selectedTrayObj[data.id]
+	}else {
+		selectedTrayObj[data.id] = data
+	}
+	selectedTrayList.value = Object.values(selectedTrayObj)
+	console.log('data==操作加热区：=', data)
 };
 
 //添加溶液
@@ -104,6 +104,7 @@ const onChooseCaft = () => {
 		.picture_area {
 			display: flex;
 			flex-direction: column;
+			height: 47.5rem;
 		}
 	}
 }
@@ -128,6 +129,7 @@ const onChooseCaft = () => {
 	@media (min-width: $md) {
 		column-gap: 12px;
 		row-gap: 20px;
+		height: 47.5rem;
 	}
 
 	@media (min-width: $xl) {