unit

src/components/info/EnvironmentInfo.vue

@@ -23,19 +23,31 @@
     <div class="content">
       <div class="line">
         <p class="title">温度</p>
-        <p class="num">{{ getTemperature() }}°C</p>
+        <div class="num">
+          {{ getTemperature() }}
+          <p class="unit">°C</p>
+        </div>
       </div>
       <div class="line">
         <p class="title">相对湿度</p>
-        <p class="num">{{ getHumidity() }} {{ '%RH' }}</p>
+        <div class="num">
+          {{ getHumidity() }}
+          <p class="unit">{{ '%RH' }}</p>
+        </div>
       </div>
       <div class="line">
         <p class="title">相对饱和度</p>
-        <p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
+        <div class="num">
+          {{ getSaturation() }}
+          <p class="unit">{{ '%RS' }}</p>
+        </div>
       </div>
       <div class="line">
         <p class="title">汽化过氧化氢浓度</p>
-        <p class="num">{{ getHP() }} ppm</p>
+        <div class="num">
+          {{ getHP() }}
+          <p class="unit">ppm</p>
+        </div>
       </div>
     </div>
   </div>
@@ -150,7 +162,7 @@ const getSaturation = () => {
     display: grid;
     grid-template-rows: repeat(4, 1fr);
     .line {
-      padding: 11px 26px;
+      padding: 11px 13px 11px 26px;
       width: 353px;
       // height: 56px;
       box-sizing: border-box;
@@ -173,6 +185,15 @@ const getSaturation = () => {
         font-weight: bold;
         letter-spacing: 0.06em;
         color: #ffffff;
+        display: flex;
+        align-items: center;
+        .unit {
+          width: 60px;
+          margin-left: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
     }
   }