refactor: product create

src/components/04_product-service/PriceDataComponent.vue

@@ -13,46 +13,58 @@ defineProps<{
 </script>
 
 <template>
-  <div class="col-3 app-text-muted">• {{ $t('priceInformation') }}</div>
-  <div class="col-9 row q-col-gutter-md">
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('salePrice')"
-      v-model="price"
-    />
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-sm"
+        color="info"
+        name="mdi-cash"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('priceInformation') }}
+    </div>
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('salePrice')"
+        v-model="price"
+      />
 
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('agentPrice')"
-      v-model="agentPrice"
-    />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('agentPrice')"
+        v-model="agentPrice"
+      />
 
-    <q-input
-      lazy-rules="ondemand"
-      :dense="dense"
-      outlined
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-4"
-      type="number"
-      :label="$t('processingPrice')"
-      v-model="serviceCharge"
-    />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        type="number"
+        :label="$t('processingPrice')"
+        v-model="serviceCharge"
+      />
+    </div>
   </div>
 </template>