0

src/web/src/pages/main/contents/AcidManagement.vue

@@ -10,11 +10,11 @@
             <img class="w-1/2" src="../../../assets/icon/bucket-empty.svg" />
           </div>
         </div>
-        <div class="mx-2 p-2 mt-3 rounded-2xl text-3xl" style="background:#D2DFEF;color:#8799AB;">
-          <span class="inline-block p-1 rounded-2xl mr-5" style="background:#DCE8F7;">{{bucket.volume}}g</span>
-          <span class="inline-block py-1">{{bucket.maxVolume}}g</span>
+        <div class="mx-2 p-2 mt-3 rounded-2xl text-3xl w-11/12 flex flex-row justify-evenly" style="background:#D2DFEF;color:#8799AB;">
+          <div class="inline-block p-1 rounded-2xl px-2" style="background:#DCE8F7;">{{bucket.volume}}</div>
+          <div class="inline-block py-1">{{bucket.maxVolume}}</div>
         </div>
-        <div class="mt-5">
+        <div class="mt-2">
           <a-select v-model:value="bucket.acidType" :dropdownMatchSelectWidth="false">
             <a-select-option value="hydrochloric">盐酸</a-select-option>
             <a-select-option value="nitric">硝酸</a-select-option>

src/web/src/pages/main/contents/OperationAcidBuckets.vue

@@ -11,9 +11,9 @@
           <img class="w-1/2" src="../../../assets/icon/bucket-empty.svg" />
         </div>
       </div>
-      <div class="mx-2 p-2 mt-3 rounded-2xl text-center" style="background:#D2DFEF;color:#8799AB;">
-        <span class="inline-block p-1 px-2 rounded-2xl mr-1" style="background:#DCE8F7;color: #0FDD6B;">{{acidBucket.volume}}</span>
-        <span class="inline-block py-1 ml-1">{{acidBucket.maxVolume}}</span>
+      <div class="mx-2 p-2 mt-3 rounded-2xl text-center w-11/12 flex flex-row justify-evenly" style="background:#D2DFEF;color:#8799AB;">
+        <div class="inline-block p-1 px-2 rounded-2xl" style="background:#DCE8F7;color: #0FDD6B;">{{acidBucket.volume}}</div>
+        <div class="inline-block py-1 ml-1">{{acidBucket.maxVolume}}</div>
       </div>
       <div class="text-center mt-2" style="color:#8799AB">{{acidBucket.acidName}}</div>
     </div>

src/web/src/pages/main/contents/OperationTubeRackTemperature.vue

@@ -12,7 +12,7 @@
             <!-- 加热进度 -->
             <a-progress type="circle" v-if="null === tubeRackSlot.heatingStartedAt"
               stroke-color="#ff5b5b"
-              :size="50" :strokeWidth="18"
+              :size="30" :strokeWidth="18"
               :percent="getTubeRackSlotHeatingProgress(tubeRackSlot)"
             >
               <template #format="percent">
@@ -21,7 +21,7 @@
             </a-progress>
             <!-- 保持进度 -->
             <a-progress type="circle" v-else
-              :size="50" :strokeWidth="18" 
+              :size="30" :strokeWidth="18" 
               strokeColor="#fa8c16"
               :percent="getTubeRackSlotHoldingProgress(tubeRackSlot)" 
             >

src/web/src/pages/main/contents/OperationTubeRacks.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="h-full flex flex-col bg-white rounded-xl p-5" style="background-color: rgb(238, 245, 255);">
     <div class="h-0 grow flex flex-col">
-      <div ref="container" class="heating-plate h-0 grow flex flex-col justify-center items-center rounded-full">
+      <div ref="container" class="heating-plate flex flex-col justify-center items-center rounded-full"
+        style="height:100%;width:100%;"
+      >
         <div class="relative w-1/4 h-1/4">
           <div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" 
             :class="getTubeRackSlotClass(tubeRackSlot)" 
@@ -28,13 +30,13 @@
     </div>
     <div class="mt-3">
       <a-row>
-        <a-col :span="13" class="text-left">
+        <a-col :span="16" class="text-left">
           <operation-tube-rack-preset v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
           <operation-tube-rack-acid-add v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
           <operation-tube-rack-heating v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
           <operation-tube-rack-take-shot v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
         </a-col>
-        <a-col :span="11" class="text-right">
+        <a-col :span="8" class="text-right">
           <operation-tube-rack-add />
           <operation-tube-rack-take-out v-if="null !== activeRackSlot" :active-slot="activeRackSlot"/>
         </a-col>
@@ -43,7 +45,7 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import anime from 'animejs/lib/anime.es.js';
 import OperationTubeRackHeating from './OperationTubeRackHeating.vue';
 import OperationTubeRackAcidAdd from './OperationTubeRackAcidAdd.vue';
@@ -59,6 +61,21 @@ const props = defineProps({
 const activeRackSlot = ref(null);
 /** @var {Object} */
 const container = ref(null);
+// onMounted
+onMounted(mounted);
+
+// mounted
+function mounted() {
+    setTimeout(() => {
+        let containerRect = container.value.getBoundingClientRect();
+        console.log(containerRect);
+        if ( containerRect.width > containerRect.height ) {
+            container.value.style.width = `${containerRect.height}px`;
+        } else {
+            container.value.style.height = `${containerRect.width}px`;
+        }
+    }, 100);
+}
 
 // get tube rack slot class
 function getTubeRackSlotClass(tubeRackSlot) {
@@ -89,7 +106,7 @@ function actionActiveSlot(tubeRackSlot) {
 }
 </script>
 <style scoped>
-.heating-plate {box-shadow: inset 0px 0px 100px 0px rgb(194 211 231);border: solid 1px #cdcdcd;}
+.heating-plate {box-shadow: inset 0px 0px 100px 0px rgb(194 211 231);border: solid 1px #cdcdcd;margin: auto;}
 .tube-rack-slot {position: absolute;width: 100%;height: 100%;}
 .tube-rack-slot .title {font-size: 16px;font-weight: bold;letter-spacing: 0.06em;top:-45px;color: #D6D9F1;}
 .tube-rack-slot.active .title {color:#26D574;}