fix

2026-05-15 17:12:51 +03:30
parent b8ced45375
commit c82701888a
101 changed files with 8125 additions and 96 deletions
@@ -0,0 +1,106 @@
+<template>
+  <div class="svc" @click="emit('show-details', service)">
+    <div class="svc__heading">
+      <p class="svc__title">{{ service.title }}</p>
+      <p class="svc__subtitle">شماره درخواست : {{ service.requestNumber }}</p>
+    </div>
+
+    <div class="svc__meta">
+      <Badge
+        variant="neutral"
+        size="sm"
+        icon="chat"
+        :label="`نوع خدمت :`"
+        :value="service.typeLabel"
+      />
+      <Badge :variant="tone" size="sm" dot :value="service.statusLabel" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/global-components/Badge.vue'
+
+const TONE_MAP = {
+  approved: 'success',
+  rejected: 'danger',
+  pending: 'neutral',
+}
+
+const props = defineProps({
+  service: { type: Object, required: true },
+})
+
+const emit = defineEmits(['show-details'])
+
+const tone = computed(() => TONE_MAP[props.service.status] || 'neutral')
+</script>
+
+<style lang="scss" scoped>
+.svc {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  background: rgba(255, 255, 255, 58%);
+  box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
+  border-radius: 0.75rem;
+  margin-bottom: 0.625rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 75%);
+  }
+
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0.875rem 2rem;
+  }
+
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: end;
+    gap: 0.125rem;
+
+    @media (min-width: 1024px) {
+      min-width: 7rem;
+    }
+  }
+
+  &__title {
+    font-family: var(--font-family-fa);
+    font-weight: 400;
+    font-size: 0.95rem;
+    color: #4b4b4b;
+    margin: 0;
+  }
+
+  &__subtitle {
+    font-family: var(--font-family-fa);
+    font-weight: 400;
+    font-size: 0.7rem;
+    color: #4b4b4b;
+    margin: 0;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5rem;
+
+    @media (min-width: 1024px) {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+}
+</style>