update

src/components/Common/NatGasFlow/gridList/index.jsx

@@ -46,7 +46,9 @@ function GridList(props) {
     <div className={cls.gridList}>
       {dataList.map((item) => (
         <div key={item.id} className={cls.listItem}>
-          {item.name}: {item.value}
+          <span className={cls.item_label}>{item.name}</span>
+          <span className={cls.item_value}>{item.value}</span>
+          {/* {item.name}: {item.value} */}
         </div>
       ))}
     </div>

src/components/Common/NatGasFlow/gridList/index.module.css

@@ -1,14 +1,27 @@
 .gridList {
   margin-top: 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }
 
 .listItem {
   border-radius: 2px;
   padding: 12px 0;
   text-align: center;
-	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  color: #fff;
+  box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.item_label {
+  flex: 5;
+  text-align: right;
+}
+
+.item_value {
+  flex: 6;
+  text-align: left;
 }

src/components/Common/NatGasFlow/index.module.css

@@ -26,7 +26,8 @@
 	top: 22px;
 	right: 24px;
 	height: 32px;
-	width: 410px;
+	width: 400px;
+	/* background: #12fff5; */
 	display: flex;
 	align-items: center;
 	justify-content: space-between;