Add QR code to aftersales electronic form

src/pages/styles/AftersalesDetail.css

@@ -3,28 +3,55 @@
 }
 
 .electronic-form-header {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
   align-items: center;
-  justify-content: space-between;
   gap: 20px;
   margin-bottom: 16px;
 }
 
+.electronic-form-brand {
+  justify-self: start;
+}
+
 .electronic-form-logo {
   height: 34px;
   object-fit: contain;
 }
 
 .electronic-form-title {
-  flex: 1;
+  justify-self: center;
   text-align: center;
   font-size: 20px;
   font-weight: 700;
 }
 
+.electronic-form-meta {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.electronic-form-qr {
+  width: 82px;
+  height: 82px;
+  object-fit: contain;
+}
+
 .electronic-form-serial {
-  border: 2px solid #111827;
-  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
+}
+
+.electronic-form-serial-label {
+  font-size: 12px;
+  color: #4b5563;
+}
+
+.electronic-form-serial-code {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 16px;
   font-weight: 700;
@@ -68,10 +95,16 @@
 @media (max-width: 720px) {
   .electronic-form-header {
     align-items: flex-start;
-    flex-direction: column;
+    grid-template-columns: 1fr;
     gap: 10px;
   }
 
+  .electronic-form-brand,
+  .electronic-form-title,
+  .electronic-form-meta {
+    justify-self: start;
+  }
+
   .electronic-form-title {
     text-align: left;
     font-size: 18px;