From cf9e51611a6db3f2cc2dee3f34e72355562ddd58 Mon Sep 17 00:00:00 2001
From: liding <ld.sino@outlook.com>
Date: Sun, 30 Jun 2024 09:32:26 +0800
Subject: [PATCH] Fix layout problem.

---
 .../unit_conversion/DataUnitConversion.vue    | 13 ++++---
 .../tool/unit_conversion/WeightConversion.vue | 37 ++++++++++---------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/tool/unit_conversion/DataUnitConversion.vue b/src/components/tool/unit_conversion/DataUnitConversion.vue
index 1fcc9e1..f19108b 100644
--- a/src/components/tool/unit_conversion/DataUnitConversion.vue
+++ b/src/components/tool/unit_conversion/DataUnitConversion.vue
@@ -187,7 +187,10 @@ const isMultipleOf4KiB = computed(() => {
 
 <style>
 h1,
-p,
+p {
+  margin: 0.5em 0;
+}
+
 .unit-conversion-computation-node {
   margin: 0.5em 0;
 }
@@ -198,18 +201,18 @@ p,
   margin: 0 8px 0 0;
 }
 
-.size-text {
+.unit-conversion-computation-node .size-text {
   margin: 0 6px 0 0;
   width: 125px
 }
 
 @media screen and (max-width: 395px) {
   .unit-conversion-computation-node {
-    width: 130px;
+    width: 140px;
   }
 
-  .size-text {
-    width: 85px;
+  .unit-conversion-computation-node .size-text {
+    width: 95px;
   }
 }
 
diff --git a/src/components/tool/unit_conversion/WeightConversion.vue b/src/components/tool/unit_conversion/WeightConversion.vue
index 4860ec1..05de86b 100644
--- a/src/components/tool/unit_conversion/WeightConversion.vue
+++ b/src/components/tool/unit_conversion/WeightConversion.vue
@@ -68,37 +68,37 @@ function weightChanged(unitName) {
 
 <template>
   <h1>重量换算</h1>
-  <div class="unit-conversion-computation-area metric">
+  <div class="weight-conversion-computation-area metric">
     <p>公制重量:</p>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.KILOGRAM" type="text"
         v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)">
       <span class="unit-name">千克</span>
     </div>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.GRAM" type="text" v-model="weight[twToMetricUnitName.GRAM]"
         @input="weightChanged(twToMetricUnitName.GRAM)">
       <span class="unit-name">克</span>
     </div>
   </div>
-  <div class="unit-conversion-computation-area tw">
+  <div class="weight-conversion-computation-area tw">
     <p>台湾制重量:</p>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.JIN" type="text" v-model="weight[twToMetricUnitName.JIN]"
         @input="weightChanged(twToMetricUnitName.JIN)">
       <span class="unit-name">斤</span>
     </div>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.LIANG" type="text" v-model="weight[twToMetricUnitName.LIANG]"
         @input="weightChanged(twToMetricUnitName.LIANG)">
       <span class="unit-name">两</span>
     </div>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.QIAN" type="text" v-model="weight[twToMetricUnitName.QIAN]"
         @input="weightChanged(twToMetricUnitName.QIAN)">
       <span class="unit-name">钱</span>
     </div>
-    <div class="unit-conversion-computation-node">
+    <div class="weight-conversion-computation-node">
       <input class="size-text" :id="twToMetricUnitName.FEN" type="text" v-model="weight[twToMetricUnitName.FEN]"
         @input="weightChanged(twToMetricUnitName.FEN)">
       <span class="unit-name">分</span>
@@ -108,39 +108,42 @@ function weightChanged(unitName) {
 
 <style>
 h1,
-p,
-.unit-conversion-computation-node {
+p {
   margin: 0.5em 0;
 }
 
-.unit-conversion-computation-node {
+.weight-conversion-computation-node {
+  margin: 0.5em 0;
+}
+
+.weight-conversion-computation-node {
   float: left;
   width: 170px;
   margin: 0 8px 0 0;
 }
 
-.size-text {
+.weight-conversion-computation-node .size-text {
   margin: 0 6px 0 0;
   width: 115px
 }
 
 @media screen and (max-width: 395px) {
-  .unit-conversion-computation-node {
-    width: 130px;
+  .weight-conversion-computation-node {
+    width: 140px;
   }
 
-  .size-text {
+  .weight-conversion-computation-node .size-text {
     width: 85px;
   }
 }
 
-.unit-conversion-computation-area::after {
+.weight-conversion-computation-area::after {
   content: '';
   display: block;
   clear: both;
 }
 
-.unit-conversion-computation-result {
+.weight-conversion-computation-result {
   margin: 0.5em 0 0.5em 0;
   height: 1em;
 }