refactor: css of pay success

src/pages/08_request-list/ProductExpansion.vue

@@ -28,6 +28,11 @@ defineProps<{
   code: string;
   status?: Step;
   imgUrl?: string;
+  installmentInfo?: {
+    total: number;
+    paid?: number;
+  };
+  paySuccess: boolean;
 }>();
 
 // NOTE: Function
@@ -35,6 +40,7 @@ defineProps<{
 <template>
   <q-expansion-item
     dense
+    :class="{ 'status-unpaid': !paySuccess }"
     class="overflow-hidden"
     switch-toggle-side
     style="border-radius: var(--radius-2)"
@@ -175,6 +181,12 @@ defineProps<{
   </q-expansion-item>
 </template>
 <style scoped>
+.status-unpaid {
+  opacity: 0.5;
+  filter: grayscale(90%);
+  pointer-events: none;
+}
+
 :deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
   color: hsl(var(--text-mute));
 }